What are these attributes aria-labelledby and aria-hidden

Question

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

User · Answer

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">

User · Answer

aria-hidden  true  will hide decorative items like glyphicon icons from screen readers  which doesn t have meaningful pronunciation so as not to cause confusions  It s a nice thing do as matter of good practice

User · Answer

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  lt label gt  HTML tag   With HTML modals the label is usually a  lt h gt  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

User · Answer

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

User · Answer

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

[twitter-bootstrap] What are these attributes: `aria-labelledby` and `aria-hidden`

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to wai-aria