WAI-ARIA common used

WAI-ARIA on SVG

role parent child attributes accessible name html equivalent note
list listitem [aria-labelledby]
[aria-label]
ul
listitem list
img [aria-labelledby]
[aria-label]
[alt]
required img
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]
[aria-disabled]
[aria-multiselectable]
[aria-owns]
[aria-level]
[aria-orientation]
[aria-haspopup]
tab aria-selected [aria-labelledby]
[aria-label]
[aria-expanded]
[aria-controls]
[aria-posinset]
[aria-setsize]
[aria-disabled]
[aria-haspopup]
[aria-describedby]
required roving tabindex
tabpanel [aria-labelledby]
[aria-label]
[aria-hidden]
associated with tab

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.