What is HTML5 ARIA?

by

WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the HTTP user agent that interprets the markup needs to support ARIA, but the spec is created in such a way, as to allow down-level user agents to ignore the ARIA-specific markup safely without affecting the web app’s functionality.

Here’s an example from the ARIA spec:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

Note the role attribute on the outer <ul> element. This attribute does not affect in any way how the markup is rendered on the screen by the browser; however, browsers that support ARIA will add OS-specific accessibility information to the rendered UI element, so that the screen reader can interpret it as a menu and read it aloud with enough context for the end-user to understand (for example, an explicit “menu” audio hint) and is able to interact with it (for example, voice navigation).

More Related Contents:

  1. How to hide a text and make it accessible by screen reader?
  2. What’s the difference between HTML ‘hidden’ and ‘aria-hidden’ attributes?
  3. Can I have an onclick effect in CSS?
  4. Difference between and
  5. Is it necessary to write HEAD, BODY and HTML tags?
  6. How to close tag properly?
  7. HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
  8. Change cursor type on input type=”file” [duplicate]
  9. Chrome Download Attribute not working
  10. Visible Area tag?
  11. problem with and :after with CSS in WebKit
  12. How To Auto-Format / Indent XML/HTML in Notepad++
  13. How to show local picture in web page?
  14. How to change the color of Element depending on its height or width?
  15. Do HTML WebSockets maintain an open connection for each client? Does this scale?
  16. Form inline inside a form horizontal in twitter bootstrap?
  17. How do you create a hidden div that doesn’t create a line break or horizontal space?
  18. Get content between a pair of HTML tags using Bash
  19. Why does flexbox stretch my image rather than retaining aspect ratio?
  20. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  21. Convert embedded SVG to PNG in-place
  22. Manipulating external svg file style properties with CSS
  23. An URL to a Windows shared folder [duplicate]
  24. How to make “see through” text?
  25. Vertical align text in block element
  26. chrome/safari display border around image
  27. Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?
  28. How to create a heart shape using CSS?
  29. How to display alt text for an image in chrome
  30. What are all the differences between src and data-src attributes?

Leave a Comment