Up and Coming ARIA: Examples
aria-errormessage
That user name is already taken. Go register for some other website.
In order for the content referenced by aria-errormessage to be announced, the associated form control must have aria‑invalid="true".
aria-description
Why not aria-label? Because a paragraph is not labelable.
aria-details
This survey received a majority of responses from outside North America, thus providing better representation of the global user base.
Locations were provided voluntarily by respondents, not automatically detected.
No responses were received from Antarctican residents.
When survey responses for other questions were notably different between regions, this is noted under the survey questions on the following pages.
| Region | # of respondents | % of respondents |
|---|---|---|
| North America | 717 | 47.2% |
| Europe | 467 | 30.7% |
| Asia | 97 | 6.4% |
| South America | 96 | 6.3% |
| Africa/Middle East | 73 | 4.8% |
| Australia and Oceania | 50 | 3.3% |
| Central America and Caribbean | 20 | 1.3% |
Although aria-details technically associates the image with the table, that association creates no practical user benefit. For example, NVDA announces "has details," but does not reveal where those details are, and provides no mechanism to jump to them.
aria-roledescription
- Cosmic Thing
- Dry County
- Deadbeat Club
- Love Shack
- Junebug
- Roam
- Bushfire
- Channel Z
- Topaz
- Follow Your Bliss
aria-keyshortcuts
Important Message
Recusandae est quam sint. Maiores veniam laudantium autem. Rerum doloremque iusto ut earum. Esse debitis ex ex qui neque nihil expedita.
aria-placeholder
🇺🇸In this example, visible placeholder or aria-describedby text would be visually redundant.
If we put 🇺🇸 inside the <label>, then the <label> would be announced as, "telephone flag united states", which could feel a little clunky.
If both placeholder and aria-placeholder are present, only the placeholder is announced.
aria-current
role=emphasis
If you can use a native HTML element or attribute...
Visual differentiation comes from CSS.
Probably will sound the same as normal text, which is also true for <em>.
role=strong
...with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so.
Visual differentiation comes from CSS.
Probably will sound the same as normal text, which is also true for <strong>.
role=mark
Recusandae est quam sint maiores veniam laudantium autem. Rerum doloremque iusto ut earum. Esse debitis ex ex qui neque nihil expedita. Dignissimos modi fugit quas ab. Excepturi aliquid nisi omnis. Vel voluptatem occaecati necessitatibus quia dolore ut aut. Sunt ratione ad et. Quibusdam voluptatibus enim dolores magni dolorem dolorum sapiente et. Qui hic aliquid molestiae.
NVDA announces "highlighted" and "out of highlighted".
Visual differentiation comes from CSS.
role=image
Synonymous with role="img"
Without the aria-label, the emoji would be announced as "white heart", which does not convey the function of the button.
role=meter
Native HTML <meter> Element
role=comment
Iste maxime porro quis id labore eveniet. Nihil rerum ipsa sed rem. Ex soluta labore animi ut modi sunt. Sed velit accusamus omnis nesciunt. Alex: Great point about using semantic HTML! Voluptatem soluta fugit ut est quod saepe quam. Atque iure eligendi nobis voluptates praesentium.
Visual differentiation comes from CSS.
role=suggestion
Four score and sevenAlex: Eighty-seven years ago, our fathersAlex: ancestors brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all menAlex: people are created equal.
In this example, <del> is used to mark the deleted/strikethrough text.
role=code
role=time
Last Updated: January 5, 2025, 2:30 PM
Visual styling could be applied, but probably not necessary in this example.