WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using title on buttons containing icon fonts to provide the accessible name

for

From: Steve Green
Date: Feb 20, 2018 4:37AM

I would be inclined to use both as long as they have the same content. The tooltip will definitely be of use to some people. Perhaps not so much for a Close button because its position is a cue to what it does, but we encounter plenty of icons whose purpose is far from obvious.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: 20 February 2018 11:26
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Using title on buttons containing icon fonts to provide the accessible name

Screen reader suppotr for the title attribute as the source of accessible name is pretty good, as long as the element is focusable.
The title attribute is also valid source of accessible name, per the accessible name and description algorithm.

There are minor implementation differences between title and aria-label with screen readers, and I give aria-label the edge.

Some screen readers do not show the accessible name from title attribute until you focus the button whereas aria-label is exposed in browse mode.
Also aria-label overrides the content of the element, so if there is any content that sneaks in from the icon font those will be overridden (using aria-hidden should make sure those are not exposed in any case).



On 2/20/18, Detlev Fischer (TK) < <EMAIL REMOVED> > wrote:
> Hi,
>
> the question has come up if the use fo title to provide the accessible
> name for visual controls that do not use img and therefore cannot use
> the alt attribute is an acceptable practice (in terms of WCAG
> conformance, but also in terms of just 'good practice').
>
> I am aware of the arguments against using title (see
> https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-
> attribute-updated/ ), noting that this comprehensive article is now 4
> years old and things might have changed in terms of screen reader
> support.
>
> In the cases we are discussing, it seems that clients insist on the
> use of just an icon for certain quite conventional visual controls
> (like the top right [x] close button of a modal). The better choice in
> terms of accessibility might be adding a text label, but I would argue
> that the x-for-closing convention for visual users is well established
> and would be acceptable (especially if ESC for closing is also implemented).
>
> So if a button containing a icon font (hidden for screen readers with
> aria-hidden) is given an accessible name via title, is there really
> any good reason to recommend aria-label or accessibly-hidden text (or
> some other solution using img and alt) instead? It seem sthat the only
> practical difference for non-visual users would be that they are now
> deprived of the (weak and badly supported) cue of a visual tooltip
> rendered by some browsers on mouse hover.
>
> I would be very interested if there are non-visual use cases of such
> buttons where the accessible name provided via title will not be
> exposed (in some browser / screen reader combo, or in mobile OS
> browsers). (I am not talking about the case of a control using img
> with alt="" where title may not be exposed.) If such cases exist, that
> would be sufficient ammunition to advise against the use of title in the cases decribed.
>
> Best,
>
> Detlev
>
>
> --
> ---------------------------------------------------------------
> Detlev Fischer PhD
> Testkreis
> http://testkreis.de
>
> Telefon: +49-40-43 18 75-25
> Mobile: +49-157 57 57 57 45
> Fax: +49-40-43 18 75-45
> E-Mail: <EMAIL REMOVED>
>
> Anschrift: Werderstr. 34, 20166 Hamburg Amtsgericht Hamburg HRB 58 167
> ---------------------------------------------------------------
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.