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

by

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 <label> element: 

<label for="fmUserName">Your name</label>
<input id="fmUserName">

The <label> 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:

<button aria-label="Close" onclick="myDialog.close()">X</button>`

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.

More Related Contents:

  1. How to hide a text and make it accessible by screen reader?
  2. input type=”submit” Vs button tag are they interchangeable? [duplicate]
  3. Default html form focus without JavaScript
  4. Accessibility: recommended alt-text convention for SVG and MathML?
  5. Two input fields inside one label
  6. How to draw human body in html5 svg and roate it in 360degree [closed]
  7. Change select box option background color
  8. Line break in HTML with ‘\n’
  9. Li item on two lines. Second line has no margin
  10. Add a background image (.png) to a SVG circle shape
  11. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  12. Tables instead of DIVs [duplicate]
  13. Is type=”text/css” necessary in a tag?
  14. Text overflow ellipsis on two lines
  15. Html attributes for EditorFor() in ASP.NET MVC
  16. How can I make a link from a table cell
  17. How can I generate an HTML report for Junit results?
  18. Flexbox affects overflow-wrap behavior
  19. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  20. How to link html pages in same or different folders?
  21. How do I remove the top margin in a web page?
  22. How can I make a 45 degree responsive ribbon with folded corner?
  23. Border with a transparent centred arrow
  24. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  25. HTML5 flexible box model height calculation
  26. How do I pretty-print HTML with Nokogiri?
  27. Radio buttons and label to display in same line
  28. Make an html number input always display 2 decimal places
  29. Zoom changes the design layout
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment