Menu
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?
632
The aria-label attribute is intended for interactive elements only. Use aria-label to ensure an accessible name is provided when none is visible in the DOM for all interactive elements, like links, videos, form controls, landmark roles, and widget roles.
The aria-label attribute gives an element its label; an element with the aria-labelledby attribute is labelled by something else.
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element.
The alt attribute is the preferred and most commonly used way to provide a text alternative for img and area elements. The aria-labelledby attribute can be used to provide a text alternative when an image can be described using text already associated with the image, or for elements with role="img" .
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.
131
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
