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

Question

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?

Answer 1

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.