![\"Jonny](\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/01\/IMG_9011.jpg\")
<\/p>\n<\/p>\n
There is a list in the ARIA spec that details Roles Supporting Name from Author<\/a> and<\/em> which of these require<\/strong> an accessible name<\/a>:<\/p>\n note:<\/strong> I have removed the roles that don’t require<\/strong> a name:<\/p>\n name required – use name required – use name required – use contents<\/a> or name required – use contents<\/a> or name required – use contents<\/a> or name required – use name required – use name required – use name – use \n
alertdialog<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from aria-label\r\n<div role=\"alertdialog\" \r\naria-label=\"imminent death\"<\/mark>>content<\/div><\/pre>\n<\/li>\n
application<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from aria-labelledby\r\n<div role=\"application\" aria-labelledby=\"head\"<\/mark>>\r\n<h1 id=\"head\"<\/mark>>sell your soul<\/h1>\r\n<\/div><\/pre>\n<\/li>\n
button<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from contents\r\n<div role=\"button\" tabindex=\"0\">\r\nlick my decal<\/mark><\/div><\/pre>\n<\/li>\n
checkbox<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from contents\r\n<div role=\"checkbox\" tabindex=\"0\" \r\naria-checked=\"false\">\r\nmegaphone of destiny<\/mark><\/div><\/pre>\n<\/li>\n
columnheader<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from contents\r\n<div role=\"columnheader\">\r\ncacophony level<\/mark><\/div><\/pre>\n<\/li>\n
combobox<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from aria-label\r\n<div role=\"combobox\" \r\naria-label=\"choice of Doom\"<\/mark> \r\ntabindex=\"0\"><\/div><\/pre>\n<\/li>\n
dialog<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/p>\n#name from aria-labelledby\r\n<div role=\"dialog\" \r\naria-labelledby=\"title\"<\/mark>>\r\n<h1 id=\"title\"<\/mark>>In-cog-neat-O<\/h1>\r\n<\/div><\/pre>\n<\/li>\n
form<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a>. note<\/strong>\u00a0the role is not generally announced unless a name is present<\/p>\n#name from aria-label\r\n<div role=\"form\" \r\naria-label=\"Sausage emergent enquiry\"<\/mark>>\r\ncontent<\/div><\/pre>\n<\/li>\n
grid<\/code><\/a>name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a>\n#name from aria-label\r\n<div role=\"grid\" \r\naria-label=\"Neon meat dream\"<\/mark>>\r\ncontent<\/div><\/pre>\n<\/li>\n
group<\/code><\/a>\naria-label<\/code><\/a> or aria-labelledby<\/code><\/a> (doesn’t require a name, but note<\/em>\u00a0the role is not generally announced unless a name is present)<\/p>\n<\/li>\n<\/ul>\n\nName required – the rest<\/summary>\n
\n
heading<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nimg<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nlink<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nlistbox<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nmenuitem<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nmenuitemcheckbox<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nmenuitemradio<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nmeter<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\noption<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nprogressbar<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nradio<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nradiogroup<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nregion<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nrowheader<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nsearchbox <\/code><\/a>name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nslider<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nspinbutton<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\nswitch<\/code><\/a> name required – use aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\ntab<\/code><\/a> name required – use contents<\/a> or aria-label<\/code><\/a> or aria-labelledby<\/code><\/a><\/li>\ntable<\/code><\/a> name required – use aria-label<\/code><\/a> or