Which ARIA roles require an accessible name?
There is a list in the ARIA spec that details Roles Supporting Name from Author and which of these require an accessible name:
note: I have removed the roles that don’t require a name:
alertdialogname required – use
aria-labeloraria-labelledby#name from aria-label <div role="alertdialog" aria-label="imminent death">content</div>
applicationname required – use
aria-labeloraria-labelledby#name from aria-labelledby <div role="application" aria-labelledby="head"> <h1 id="head">sell your soul</h1> </div>
buttonname required – use contents or
aria-labeloraria-labelledby#name from contents <div role="button" tabindex="0"> lick my decal</div>
checkboxname required – use contents or
aria-labeloraria-labelledby#name from contents <div role="checkbox" tabindex="0" aria-checked="false"> megaphone of destiny</div>
columnheadername required – use contents or
aria-labeloraria-labelledby#name from contents <div role="columnheader"> cacophony level</div>
comboboxname required – use
aria-labeloraria-labelledby#name from aria-label <div role="combobox" aria-label="choice of Doom" tabindex="0"></div>
dialogname required – use
aria-labeloraria-labelledby#name from aria-labelledby <div role="dialog" aria-labelledby="title"> <h1 id="title">In-cog-neat-O</h1> </div>
formname required – use
aria-labeloraria-labelledby. note the role is not generally announced unless a name is present#name from aria-label <div role="form" aria-label="Sausage emergent enquiry"> content</div>
gridname required – usearia-labeloraria-labelledby#name from aria-label <div role="grid" aria-label="Neon meat dream"> content</div>
groupname – use
aria-labeloraria-labelledby(doesn’t require a name, but note the role is not generally announced unless a name is present)
Name required – the rest
headingname required – use contents oraria-labeloraria-labelledbyimgname required – use contents oraria-labeloraria-labelledbylinkname required – use contents oraria-labeloraria-labelledbylistboxname required – usearia-labeloraria-labelledbymenuitemname required – use contents oraria-labeloraria-labelledbymenuitemcheckboxname required – use contents oraria-labeloraria-labelledbymenuitemradioname required – use contents oraria-labeloraria-labelledbymetername required – usearia-labeloraria-labelledbyoptionname required – use contents oraria-labeloraria-labelledbyprogressbarname required – usearia-labeloraria-labelledbyradioname required – use contents oraria-labeloraria-labelledbyradiogroupname required – usearia-labeloraria-labelledbyregionname required – usearia-labeloraria-labelledbyrowheadername required – use contents oraria-labeloraria-labelledbysearchboxname required – use contents oraria-labeloraria-labelledbyslidername required – usearia-labeloraria-labelledbyspinbuttonname required – usearia-labeloraria-labelledbyswitchname required – usearia-labeloraria-labelledbytabname required – use contents oraria-labeloraria-labelledbytablename required – usearia-labeloraria-labelledbytabpanelname required – usearia-labeloraria-labelledbytextboxname required – usearia-labeloraria-labelledbytreename required – usearia-labeloraria-labelledbytreegridname required – usearia-labeloraria-labelledbytreeitemname required – use contents oraria-labeloraria-labelledby
A name equates to the accessible name that will be exposed in the browser accessibility tree and generally announced to screen reader users by default.
Note on naming from contents
For any role that allows naming from contents (child text nodes) it will be dependent on the type of HTML element you use the role on:
For example role="img" allows naming from contents and author, but <hr> is a void element, so will only allow use of aria-label or aria-labelledby.
#name from aria-label <hr role="img" aria-label="poot"> #name from aria-labelledby <hr role="img" aria-labelledby="txty"> <span id="txty">poot</span> #name from contents for role="img" using a <div> <div role="img">poot</div>
Note: In the case of <img> element always use alt as a naming method unless there is very good reason not to. Note also alt does nothing on role="img" so don’t use it there.
Further reading
Further Listening
Grinspoon Chemical Heart – Lyrics
Lyrics When Look for a ride and you need to get high my friend Spend all your time just walkin around instead Like black rose there's somebody to hold for them For them Let's Go outside have nothin to hide for free Can't seem to see the forest from the trees Grass is always greener but how do ya know we'll see We'll see Can't get started chemical heart Every time I get started you pull me apart Can't get started chemical heart Every time I get started you pull me apart Forgotten Maybe things are right on the other side undone Better of wishin for the stars to kill the sun Like black rose if nobody can hold no one No one Can't get started chemical heart Every time I get started you pull me apart Can't get started chemical heart Every time I get started you pull me apart Yeah When Look for a ride and you need to get high my friends Spend all ya time just walkin around instead Like stack road there's somebody to hold for them For them Can't get started chemical heart Every time I get started you pull me apart Can't get started chemical heart Every time I get started you pull me apart Yeah Can't get started Chemical heart Everytime I get started You pull me apart Can't get started Chemical heart Everytime I get started You pull me apart