87

I am used to use title="" attribute on my links/buttons/... to detail them. But bootstrap uses lots of aria-label="" attributes, for accessibility reasons as far as I understood.

So I come up to create buttons like:

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-label="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw">
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

But copying/pasting the title to create an aria-label looks just ugly. Which one should I choose, and why?

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Alain Tiemblo
  • 36,099
  • 17
  • 121
  • 153

3 Answers3

28

ARIA-tags are used for disabled visitors of your site. It's very nice of Bootstrap, that they support it by default.

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

To answer your question, which one you should use, use only the title-attribute. Because this attribute is used if your mouse go over the button and shows the text of title as a tooltip. With aria-label is not supported in this way.

tjati
  • 5,761
  • 4
  • 41
  • 56
  • 36
    But do screen readers will still work with title only? – Alain Tiemblo Jan 14 '15 at 22:29
  • 1
    I assume that. The ARIAs are an extension to make their lifes easier. But `title` have been there a long time and they are used to it. – tjati Jan 14 '15 at 23:02
  • Well. Fair enough then. Thanks – Alain Tiemblo Jan 14 '15 at 23:03
  • 66
    Not able to add this as a new answer unfortunately, but the ```aria-label``` attribute should be used instead of the ```title``` attribute. Here's a good article explaining why, including a note that the ```title``` attribute is not read aloud by some screenreaders by default: https://dev.opera.com/articles/ux-accessibility-aria-label/#accessible-name-calculation – tagawa Apr 20 '15 at 06:09
  • 48
    `aria-label` should be used in conjunction with the `title` attribute. Aria for screen readers, and `title` attribute for other people who want more information about the action of the button. – Adam Nov 27 '15 at 09:59
  • 11
    The world of screen readers is pretty fragmented in terms of how they process `title` + `aria-label` + anchor text the last time I checked: [Source 1](http://pauljadam.com/demos/title-aria-label.html), [Source 2](http://www.deque.com/blog/text-links-practices-screen-readers/). This is very unfortunate for people who rely on screen readers because they have to listen to so much extra, redundant content. – thdoan Feb 27 '17 at 03:45
  • The `title` attribute is poorly supported among screen readers. https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/ – Josh Jan 24 '18 at 15:02
  • 7
    You cannot rely on 2013 article. Everything should be tested on actual app versions. – Anarion Apr 05 '18 at 14:18
  • 2
    What is "actual app versions", though? Is there a list? – Andrew Koster Jun 25 '20 at 07:03
  • Seems to me like any screen reader worth its salt should treat `title` as a label, so long as the button/anchor has no `aria-label`, no corresponding ` – Jacob Stamm Feb 16 '22 at 15:56
27

To support screen readers and also a tooltip, use both the aria-label and title attributes.

If you don't need the tooltip, use aria-label as that is the preferred choice for accessibility support.

Ken Pespisa
  • 21,989
  • 3
  • 55
  • 63
9

Please check the following order of precedence according to the W3C.org Web Accessibility Initiative's website:

  • <label for="reference-id for labelled form-element" class="visuallyhidden">
  • <form-element aria-label="label for the form-element">
  • <form-element aria-labelledby="reference-id's for label-element">
  • <form-element aria-describedby="reference-id's for descriptive-element">
  • <form-element title="description for the element">

Using only the title tag is neither recommended nor supported by all screenreaders. Actually many screenreaders will be unable to focus the title tag leaving it inaccessible via keyboard controls and therefor skip reading the content.

Labeling Controls https://www.w3.org/WAI/tutorials/forms/labels/

Approach 4: Using the title attribute

The title attribute can also be used to identify form controls. This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information. The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.

IMHO you should not need to separately label the button using aria-labelledby, as in fact the buttons element already reads "(Icon hidden by CSS !?) Show raw result" which is IMHO already sufficiently understandable.

It would probably be better to extend the WAI's basic example for aria-describedby available under the following link yields the following for your example:

Using the aria-describedby property to provide a descriptive label for user interface controls https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-describedby="description-raw-result"
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

...

<div id="description-raw-result">Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw</div>

Please note that there is a more elaborate example involving tooltips under Example 4 too, but it will require you to implement JavaScript showTooltip() function too. So it is up to you to decide if you want to continue using the title attribute for the tooltip or prefer to display the dscriptive text as a tooltip with the following two event-handlers:

onmouseover="tooltipShow(event, this, 'description-raw-result');"
onfocus="tooltipShow(event, this, 'description-raw-result');"

Unfortunately to my knowledge there is no short-hand for displaying tooltips that can use references just like the aria-describedby attribute.

stefan123t
  • 183
  • 2
  • 5