What is the difference between aria-label and title attributes?

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?

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.

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.

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.