ARIA

Last updated: 24 oktober 2023

On this page:

5 rules of ARIA

  • First Rule of ARIA: don’t use ARIA
  • Second Rule of ARIA: Do not change native semantics, unless you really have to.
  • Third Rule of ARIA: All interactive ARIA controls must be usable with the keyboard.
  • Fourth Rule of ARIA: Do not use role=”presentation” or aria-hidden=”true” on a focusable element:
  • Fifth Rule of ARIA: All interactive elements must have an accessible name.

Commonly used ARIA attributes

role parent child attributes accessible name html equivalent note
list listitem [aria-labelledby]
[aria-label]		 ul
listitem list
img [aria-labelledby]
[aria-label]		 required img alt ONLY works on img-elements, alt on role="img" is inadequate
figure [aria-labelledby]
[aria-describedby]
[aria-label]		 figure
banner [aria-labelledby]
[aria-label]		 navigational landmark, use only once
search [aria-labelledby]
[aria-label]
checkbox aria-checked
[aria-labelledby]
[aria-label]
[aria-disabled]
[aria-haspopup]
[aria-describedby]
[aria-expanded]		 required input type="checkbox"
radiogroup radio [aria-labelledby]
[aria-label]
[aria-activedescendant]
[aria-disabled]
[aria-owns]
[aria-required]
[aria-haspopup]
[aria-describedby]
radio radiogroup aria-checked
[aria-labelledby]
[aria-label]
[aria-posinset]
[aria-setsize]
[aria-disabled]
[aria-haspopup]
[aria-describedby]
table [rowgroup]
[row]		 table
rowgroup row thead, tbody, tfoot
row cell tr
columnheader th scope="col"
rowheader th scope="row"
cell td
presentation
alertdialog (aria-labelledby |
aria-label)
aria-describedby
aria-modal
dialog (aria-labelledby |
aria-label)
aria-describedby
aria-modal
alert [aria-live]
[aria-atomic]
[aria-relevant]		 aria-live="assertive" aria-atomic="true" aria-relevant="additions text"
log [aria-labelledby]
[aria-label]
[aria-live]
[aria-atomic]
[aria-relevant]		 aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
status [aria-labelledby]
[aria-label]
[aria-live]
[aria-atomic]
[aria-relevant]		 aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
timer [aria-labelledby]
[aria-label]
[aria-live]
[aria-atomic]
[aria-relevant]		 aria-live="off" aria-atomic="false" aria-relevant="additions text"
button [aria-labelledby]
[aria-label]
[aria-describedby]
[aria-pressed]
[aria-disabled]
[aria-haspopup]
[aria-expanded]		 required button
link [aria-labelledby]
[aria-label]
[aria-describedby]
[aria-disabled]
[aria-haspopup]
[aria-expanded]		 required a
tablist tab [aria-labelledby]
[aria-label]
[aria-describedby]
[aria-activedescendant] see
[aria-disabled]
[aria-multiselectable]
[aria-owns]
[aria-level]
[aria-orientation]
[aria-haspopup]
tab aria-selected [aria-labelledby]
[aria-label]
[aria-expanded]
[aria-controls] see
[aria-posinset]
[aria-setsize]
[aria-disabled]
[aria-haspopup]
[aria-describedby]		 required roving tabindex
tabpanel [aria-labelledby]
[aria-label]
[aria-hidden]		 associated with tab

Can I use this ARIA attribute?

(this is work in progress)

states and properties relevant info use it?
aria-activedescendant
aria-atomic yes
aria-autocomplete
aria-braillelabel
aria-brailleroledescription
aria-busy TPGi: Short note on being busy
aria-checked
aria-colcount
aria-colindex
aria-colindextext
aria-colspan
aria-controls aria-controls is poop no
aria-current Level Access: aria-current attribute
aria-describedby notes on HTML5 accessibility yes
aria-description yes
aria-details
aria-disabled notes on HTML5 accessibility
aria-dropeffect deprecated no
aria-errormessage
aria-expanded yes
aria-flowto
aria-grabbed deprecated no
aria-haspopup notes on HTML5 accessibility
aria-hidden notes on HTML5 accessibility
aria-invalid
aria-keyshortcuts
aria-label notes on HTML5 accessibility yes
aria-labelledby notes on HTML5 accessibility
Important issue on Chrome for Windows		 yes
aria-level
aria-live A tweet about live region
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
aria-placeholder
aria-posinset
aria-pressed
aria-readonly
aria-relevant
aria-required yes
aria-roledescription Adrian Roselli: Avoid aria-roledescription maybe?
aria-rowcount
aria-rowindex
aria-rowindextext
aria-rowspan
aria-selected
aria-setsize
aria-sort
aria-valuemax

ARIA on SVG

Some examples to use aria to a minimum on SVG.


<svg role="img" aria-labelledby="tid"> 
  <title id="tid">Relevant text</title>
  <use xlink:href="#icon"></use>
</svg>


<a href="link" aria-label="Clear linkname">
  <svg> 
    <use xlink:href="#icon"></use>
  </svg>
</a>


<a href="link">
  <svg> 
    <use xlink:href="#icon"></use>
  </svg>
  Twitter
</a>


<a href="#messages">
  <span id="numberOfMessages">0</span>
  <span class="visually-hidden"> messages</span>
  <svg aria-hidden="true">
    <use xlink:href="#icon-mailbox"></use>
  </svg>
</a>

Sources: WAI-ARIA 1.1.

Updates

  • 24-10-2023 alt does not work with non-img-elements even if role="img" is used.