Easy ARIA Tip #1: Using aria-required

Inspired by a conversation I had with Aaron the other day, I’m starting a mini series about easy accessibility improvements you can accomplish using ARIA, but which do not require you to implement a whole widget. Some ARIA attributes also work on plain old standard HTML elements and can easily improve accessibility within supported browsers and screen readers. On browsers that do not support these attributes (yet), they are ignored and do not break your page just because that attribute is there.

The first attribute I’d like to cover is called aria-required. It is one of the universal aria attributes, which means, as stated, that it can be used on any conventional HTML element such as input or select.

Let’s look at this sample excerpt:








In this excerpt, both the firstName and lastName input elements have the aria-required attribute set. Note that in normal scenarios, you’d also stype them or their label differently, or put an asterisk “*” after the label.
However, if you cannot or do not want to put an asterisk on the label, but only style it with bold text or the like, screen readers usually cannot pick up the information automatically that this is a required field. If you use the aria-required attribute as shown above, modern screen readers will indicate that this is a required field automatically, if used together with Firefox 3.
Screen readers that already support this feature are NVDA, JAWS 9.0, and Window-Eyes 5.5 or higher. JAWS 8 does not support this attribute yet. Also, ORCA does not seem to pick this attribute up yet, at least my testing showed that Orca did not indicate the required state to me when tabbing through that form.

On the browser side, Opera 9.5 is going to include ARIA support, so this technique is not limited to Firefox. Also, as this technology spreads, more browsers will pick up on it, and your sites will automatically be compatible and more accessible once these other browsers also support ARIA.

This is the first of a couple of examples that demonstrates how easily you can use ARIA without implementing a whole widget to improve accessibility on your web sites. Start using it today, and you’ll make sure that you help insure good accessibility for people using modern browsers and screen readers!

flattr this!

This entry was posted in Accessibility, ARIA, Firefox and tagged , , , , , . Bookmark the permalink.
Skip to top

Comments

47 Responses to Easy ARIA Tip #1: Using aria-required

  1. Robin says:

    So what’s the status with ARIA and IE? I’d love to start using some of these features, but I guess I’m going to have to carry on doing what I do currently regardless.

  2. Marco says:

    Robin, IE does currently not support ARIA. However, you can use the markup nevertheless. Firefox, and other modern browsers will use it, and once IE comes around to supporting it, too, you do not need to change your pages again then, they will just start to work for IE users as well as they already do for Firefox users.

  3. nobody says:

    Under which doctype is aria-required a valid attribute?

    And s/action=post/method=post/ on the form element in the example.

    Then there’s this thing called XML — but that’s another story.

  4. Marco says:

    1. Thanks for the suggestion on the form. The code was just meant as an example, and I didn’t pay attention to the form attributes (only where it mattered, and that was on the input tags).
    2. With Firefox, the aria-required attribute works on any doc type. I used it in a plain HTML doc that didn’t have a doc type specifier at all.

  5. Pingback: Marco’s accessibility blog » Blog Archive » Easy ARIA tip #2: aria-labelledby and aria-describedby

  6. Pingback: Easy ARIA tip #2: aria-labelledby and aria-describedby · Get Latest Mozilla Firefox Browsers

  7. Pingback: Easy ARIA Tips from Marco Zehe - The Paciello Group Blog

  8. Pingback: protofunc() » Wai-Aria Grundlagen

  9. Pingback: protofunc() » Aria Grundlagen

  10. Torrenty says:

    Under which doctype is aria-required a valid attribute?

  11. Torrenty says:

    [url=http://torrentspider.pl]Torrent[/url]

    [...] zu aria-required und aria-labeldby/describedby [...]

    yeah

  12. Pingback: Marco’s accessibility blog » Blog Archive » Easy ARIA tip #3: aria-invalid and role “alert”

  13. ChaosKaizer says:

    I like this ideas, Its best practice if this implementation is send to specific type of browser agent only. Can you write the full list of User-agent string that supported “ARIA-required” propriety.

  14. Snx for you job!
    It has very much helped me!

  15. Pingback: Introduction à WAI ARIA (traduction) | Les intégristes

  16. Pingback: Validation and Me | rmlumley.com

  17. Pingback: Como Usar O NVDA E O Firefox Para Testar A Acessibilidade Das Suas Páginas WEB | megaTTS

  18. Pingback: Urban Conspiracy » Remembering Sunday

  19. Pingback: Easy ARIA Tip #4: Landmarks « Marco’s accessibility blog

  20. Pingback: Easy ARIA Tip #4: Landmarks « AccessTech News

  21. Pingback: Easy ARIA Tip #4: Landmarks « The BAT Channel

  22. Pingback: Easy ARIA Tip #5: aria-expanded and aria-controls « Marco’s accessibility blog

  23. Pingback: Novo tema e logotipo no blog! » Paulo Higa

  24. I like this ideas, Its best practice if this implementation is send to specific type of browser agent only. Can you write the full list of User-agent string that supported “ARIA-required” propriety.

  25. Marco says:

    It’s not necessary to filter WAI-ARIA attributes based on some browser versions. Those browsers that don’t support WAI-ARIA yet, such as IE 7, will simply ignore the attributes, they do not affect the layout of a page or such.

  26. Pingback: WebAIM: Blog - Future Web Accessibility: HTML5 <input> Extensions

  27. Thanks for your tip Marco.

  28. Kenny says:

    I really thank you for your tip too. I’m just a beginner…

  29. i really like that. thanks for sharing :)

  30. Renee says:

    Thanks Marco. I’m a beginner in this field as well so these kind of tips are always useful.

  31. Peter says:

    Hello Marco,
    your tips are really helpful, thanks a lot and continue doing such great stuff, I will come back…

  32. Peter says:

    Hi Marco, great to see such brilliant tips. I can just say i love it…

  33. Thank you marco, this tip is helping me alot. Im a wordpress user too.
    Thanks for sharing :)

    Cheers.

  34. Johnx1 says:

    That’s Wonderful Thanks…

  35. Pingback: How do you notify AT users of error messages? - SitePoint Forums

  36. Pingback: CSS and accessibility - SitePoint Forums

  37. jackson says:

    Like your aria tip. i want to have to one on my blog . thanks

  38. Leyla says:

    Thanks for these tips on ARIA. I am not an expert but you helped me a little bit!

  39. soldador inverter says:

    The name ARIA always reminds me of beautiful music, it has anything to do with music, or it’s just a coincidence? One never knows!!

    by: soldador inverter

  40. Mineria says:

    Aria is interesting, it works with the new firefox?

  41. Like your aria tip. i want to have to one on my blog . thanks
    your tips are really helpful, thanks a lot and continue doing such great stuff, I will come back…

  42. Pingback: How To Define Required Inputs With ARIA And HTML5 | Blog

  43. Pingback: Globe Views › Introduksjon til WAI ARIA

  44. John says:

    An article must be great if you read it so many years after and it still provides you with quality tips. All thumbs up!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>