WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Feb 20, 2018 4:26AM

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
> ---------------------------------------------------------------
>
> > > > >


--
Work hard. Have fun. Make history.