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 · Accepted 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

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 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     lt i class    fa fa-books  aria-hidden    true  gt  lt  i gt    using aria-hidden    true  on the  lt i gt  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    lt input type    edit  aria-label    search  placeholder    search  gt    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    lt span id    sd  gt  Search  lt  span gt    lt input type    text  aria-labelledby    sd  gt    aria-labelledby can also be used to combine two labels for screen reader users  Approach 2    lt span id    de  gt  Billing Address  lt  span gt    lt span id    sd  gt  First Name  lt  span gt    lt input type    text  aria-labelledby    de sd  gt

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

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

[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