Using Bootstrap modal, I've seen these aria attributes a lot, but I never knew how to make use of them.
Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers.
269
votes
5 Answers
245
votes
HTML5 ARIA attribute is what you're looking for. It can be used in your code even without bootstrap.
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.
To be precise for your question, here is what your attributes are called as ARIA attribute states and model
aria-labelledby: Identifies the element (or elements) that labels the current element.
aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
77
votes
The primary consumers of these properties are user agents such as screen readers for blind people. So in the case with a Bootstrap modal, the modal's div has role="dialog". When the screen reader notices that a div becomes visible which has this role, it'll speak the label for that div.
There are lots of ways to label things (and a few new ones with ARIA), but in some cases it is appropriate to use an existing element as a label (semantic) without using the <label> HTML tag. With HTML modals the label is usually a <h> header. So in the Bootstrap modal case, you add aria-labelledby=[IDofModalHeader], and the screen reader will speak that header when the modal appears.
Generally speaking a screen reader is going to notice whenever DOM elements become visible or invisible, so the aria-hidden property is frequently redundant and can probably be skipped in most cases.
21
votes
11
votes
ARIA does not change functionality, it only changes the presented roles/properties to screen reader users. WebAIM’s WAVE toolbar identifies ARIA roles on the page.
8
votes
Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control
Aria does not change anything visually. (Aria is scared of designers too).
aria-hidden:
aria-hidden attribute is used to hide content for visually impaired users who navigate through application using screen readers (JAWS, NVDA,...).
aria-hidden attribute is used with values true, false.
How To Use:
<i class = "fa fa-books" aria-hidden = "true"></i>
using aria-hidden = "true" on the <i> hides content to screen reader users with no visual change in the application.
aria-label
aria-label attribute is used to communicate the label to screen reader users. Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users
How To Use:
<input type = "edit" aria-label = "search" placeholder = "search">
There is no visual change in application. But screen readers can understand the purpose of control
aria-labelledby
Both aria-label and aria-labelledby is used to communicate the label. But aria-labelledby can be used to reference any label already present in the page whereas aria-label is used to communicate the label which i not displayed visually
Approach 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">
aria-labelledby can also be used to combine two labels for screen reader users
Approach 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">
