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:44AM

Better yet, display the aria-label as an accessible tooltip on focus or hover.
http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html



On 2/20/18, Steve Green < <EMAIL REMOVED> > wrote:
> 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.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.