What is aria-label and how should I use it

Question

A few hours ago I read about the aria-label attribute  which      Defines a string value that labels the current element    But in my opinion this is what the title attribute was supposed to do  I looked further in the Mozilla Developer Network to get some examples and explanations  but the only thing I found was    lt button aria-label  Close  onclick  myDialog close    gt X lt  button gt    Which does not provide me with any label  so I assume I misunderstood the idea   I tried it here in jsfiddle   So my question is  why do I need aria-label and how should I use it

User · Answer

As a side answer it s worth to note that   ARIA is commonly used to improve the accessibility for screen readers   not only but mostly atm   Using ARIA does not necessarily make things better  Easily ARIA can lead to significantly worse accessibility if not implemented and tested properly  Don t use ARIA just to have some  quot cool things in the code quot  which you don t fully understand  Sadly too often ARIA implementations introduce more issues than solutions in terms of accessibility  This is rather common since sighted users and developers are less likely to put extra effort in extensive testing with screen readers while on the other hand ARIA specs and validators are currently far from perfect and even confusing in some cases  On top of that each browser and screen reader implement the ARIA support non-uniformly causing the major inconsistencies in the behavior  Often it s better idea to avoid ARIA completely when it s not clear exactly what it does  how it behaves and it won t be tested intensively with all screen readers and browsers  or at least the most common combinations   Disclaimer  My intention is not to disgrace ARIA but rather its bad ARIA implementations  In fact it s not so uncommon that HTML5 don t offer any other alternatives where implementing ARIA would bring significant benefits for the accessibility e g  aria-hidden or aria-expanded  But only if implemented and tested properly

User · Answer

In the example you give  you re perfectly right  you have to set the title attribute   If the aria-label is one tool used by assistive technologies  like screen readers   it is not natively supported on browsers and has no effect on them  It won t be of any help to most of the people targetted by the WCAG  except screen reader users   for instance a person with intellectal disabilities   The  X  is not sufficient enough to give information to the action led by the button  think about someone with no computer knowledge   It might mean  close    delete    cancel    reduce   a strange cross  a doodle  nothing   Despite the fact that the W3C seems to promote the aria-label rather that the title attribute here  http   www w3 org TR 2014 NOTE-WCAG20-TECHS-20140916 ARIA14 in a similar example  you can see that the technology support does not include standard browsers   http   www w3 org WAI WCAG20 Techniques ua-notes aria ARIA14  In fact aria-label  in this exact situation might be used to give more context to an action   For instance  blind people do not perceive popups like those of us with good vision  it s like a change of context   Back to the page  will be a more convenient alternative for a screen reader  when  Close  is more significant for someone with no screen reader      lt button       aria-label  Back to the page        title  Close  onclick  myDialog close    gt X lt  button gt

User · Answer

If you wants to know how aria-label helps you practically    then follow the steps      you will get it by your own     Create a html page having below code   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt title gt  lt  title gt   lt  head gt   lt body gt       lt button title  Close  gt  X  lt  button gt       lt br   gt       lt br   gt       lt br   gt       lt br   gt       lt button aria-label  Back to the page  title  Close   gt  X  lt  button gt   lt  body gt   lt  html gt    Now  you need a virtual screen reader emulator which will run on browser to observe the difference  So  chrome browser users can install chromevox extension and mozilla users can go with fangs screen reader addin  Once done with installation  put headphones in your ears  open the html page and make focus on both button by pressing tab  one-by-one    and you can hear    focusing on first x button    will tell you only x button    but in case of second x button    you will hear back to the page button only    i hope you got it well now

User · Answer

It s an attribute designed to help assistive technology  e g  screen readers  attach a label to an otherwise anonymous HTML element   So there s the  lt label gt  element     lt label for  fmUserName  gt Your name lt  label gt   lt input id  fmUserName  gt    The  lt label gt  explicitly tells the user to type their name into the input box where id  fmUserName    aria-label does much the same thing  but it s for those cases where it isn t practical or desirable to have a label on screen  Take the MDN example    lt button aria-label  Close  onclick  myDialog close    gt X lt  button gt     Most people would be able to infer visually that this button will close the dialog  A blind person using assistive technology might just hear  X  read aloud  which doesn t mean much without the visual clues  aria-label explicitly tells them what the button will do

User · Answer

The title attribute displays a tooltip when the mouse is hovering the element  While this is a great addition  it doesn t help people who cannot use the mouse  due to mobility disabilities  or people who can t see this tooltip  e g   people with visual disabilities or people who use a screen reader    As such  the mindful approach here would be to serve all users  I would add both title and aria-label attributes  serving different types of users and different types of usage of the web    Here s a good article that explains aria-label in depth

User · Answer

Prerequisite    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-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    Approach 2   aria-labelledby can also be used to combine two labels for screen reader users   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

[html] What is aria-label and how should I use it?

Examples related to html

Examples related to assistive-technology