WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 4 (In chronological order)

From: Detlev Fischer (TK)
Date: Tue, Feb 20 2018 2:33AM
Subject: Using title on buttons containing icon fonts to provide the accessible name
No previous message | Next message →

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 ADDRESS REMOVED =

Anschrift: Werderstr. 34, 20166 Hamburg
Amtsgericht Hamburg HRB 58 167
---------------------------------------------------------------

From: Birkir R. Gunnarsson
Date: Tue, Feb 20 2018 4:26AM
Subject: Re: Using title on buttons containing icon fonts to provide the accessible name
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>
> Anschrift: Werderstr. 34, 20166 Hamburg
> Amtsgericht Hamburg HRB 58 167
> ---------------------------------------------------------------
>
> > > > >


--
Work hard. Have fun. Make history.

From: Steve Green
Date: Tue, Feb 20 2018 4:37AM
Subject: Re: Using title on buttons containing icon fonts to provide the accessible name
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: 20 February 2018 11:26
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>
> Anschrift: Werderstr. 34, 20166 Hamburg Amtsgericht Hamburg HRB 58 167
> ---------------------------------------------------------------
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Tue, Feb 20 2018 4:44AM
Subject: Re: Using title on buttons containing icon fonts to provide the accessible name
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: 20 February 2018 11:26
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.