Categories
HTML Accessibility

Not so short note on aria-label usage – Big Table Edition

David appears in my office through the wonder of the interwebs
An audience with Dr David Swallow wherein he outlines the existential threat to native labeling mechanisms posed by the use of aria-label.

Updated: 15 June 2025

aria-label is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skool term that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics. It is prohibited as are any form of accessible name on a whole slew of roles.

Implicit roles are those applied automatically by browsers to native HTML elements.

Explicit roles are those applied by developers using the role attribute. When applied they override the implicit role of an element.

(Somewhat out of place here) general rules  for labeling

  1. Prefer visible over hidden labels
    1. Prefer text labels over icons
    2. If icons are used provide a supplementary text label ( may be displayed on focus/hover)
  2. Place visible labels as expected:
    1. For a checkbox or radio button, place the label immediately after the field.
    2. If  not a checkbox or radio button, place the label immediately before the field.
  3. Prefer native HTML labeling mechanisms, for Native HTML controls, over ARIA labeling mechanisms.

Never be tempted to use placeholder text as a label. It SUX.

Questions on aria-label usage

I find myself regularly asking these questions in regards to aria-label:

  1. Is it a good idea to use aria-label on element X?
  2. Does aria-label work as expected i.e is announced by screen readers on element Z?
  3. Is aria-label allowed on element Y?

FYI empty aria-label="" does not equal empty alt="", the latter signals that an img element has no useful information, the former does nothing.

aria-label masks any other accessible name source except aria-labelledby, which masks all others including aria-label.

For HTML elements I have provided some guidance on aria-label usage (which by all means you may disagree with):

 

Table header info:

  • Column 1: name of HTML element linked to HTML specification
  • Column 2: “Name from” info pulled from ARIA 1.2
  • Column 3: If “Name from: Prohibited” or the element does not have  visible UI, or it is not currently well supported, or there is a native HTML attribute that provides the acc name, then it’s a No
  • Column 4: Notes
Could I use aria-label?
HTML element Name from: aria-label notes
a with href contents or author yes ⚠ 😷 Masks text content, so only aria-label is announced:

<a href="home.html" aria-label="some text">home page</a>

Be wary of label in name issues
a without href Prohibited no a without href is not a link and not exposed as a link. Maps to role=generic naming not allowed
abbr contents or author no ⚠title attribute works but announcement is a user preference in some screen readers (off by default). Refer to Short note: The abbreviation appreciation society
address author no ⚠aria-label use not well supported
area with href contents or author no use alt
area without href Prohibited no a without href is not a link and not exposed as a link. Maps to role=generic naming not allowed
article author yes Does not mask content: accessible name provided via aria-label will generally be announced when the article is navigated to.
aside author yes Does not mask content. Accessible name provided via aria-label will generally be announced when the aside is navigated to.
audio author yes Prefer visible, a heading perhaps (via aria-labelledby if you like)
b Prohibited no Maps to role=generic naming not allowed
base not applicable no not UI
bdi Prohibited no Maps to role=generic naming not allowed
bdo Prohibited no Maps to role=generic naming not allowed
blockquote author no aria-label use not well supported
body Prohibited no Maps to role=generic naming not allowed
br Prohibited no Maps to role=generic naming not allowed
button contents or author yes ⚠ 😷 Masks text content, so only aria-label is announced:

<button aria-label="some text">open</button>

Be wary of label in name issues
canvas Author no Use child content

<canvas><p><a href="https://www.youtube.com/watch?v=y8b7f0ivzUo">Pictures of Lily</a></p></canvas>
caption Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
cite Prohibited no Maps to role=generic naming not allowed
code Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
col Prohibited no not UI
colgroup Prohibited no not UI
data Prohibited no Maps to role=generic naming not allowed
datalist Author no For aria-label on <datalist> element itself.
dd Author no aria-label use not well supported
del Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
dfn Author no aria-label use not well supported
details Author yes Does not mask content: When details has an accessible name it is announced as a group along with its accessible name (test case).
dialog Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the dialog is navigated to.
div Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
dl Author yes Fairly good support across browsers/screenreaders.
dt Author no aria-label use not well supported
em Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
embed not applicable no aria-label use not well supported
fieldset Author or caption content yes aria-label overrides accessible name from legend content (if present). Otherwise, does not mask content: accessible name provided via aria-label will generally be announced when the fieldset is navigated to.
figcaption Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
figure Author or figcaption content yes aria-label 😷 overrides accessible name from figcaption content (if present). Otherwise, does not mask content: accessible name provided via aria-label will generally be announced when the figure is navigated to.
form Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the form is navigated to.
form-associated custom element Author yes Unless the custom element is an extension of a native HTML interactive element, ARIA labeling (aria-label, aria-labelledby) is the primary method of labeling.
h1 to h6 Contents or Author no ⚠ aria-label use not well supported, works with NVDA/VoiceOver not with JAWS.

⚠ 😷 Masks text content, so only aria-label is announced:

<h1 aria-label="PING">PONG</h1>
head Prohibited no not UI
header Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the header is navigated to.
hgroup Author yes exposed a role="goup" announced by JAWS and NVDA, no other AT tested.
hr Author yes Will generally be announced when the hr is navigated to.
html Prohibited no not UI
i Prohibited no Maps to role=generic naming not allowed
iframe Author yes Use title attribute for accessible name
img with alt="some text" Author no Use alt attribute for accessible name
img with alt="" not applicable no use alt
img without alt attribute Author no if you want to add an accessible name to an <img> use alt attribute for accessible name
input type=button Author yes accessible name from value preferred
input type=checkbox Author yes accessible name from label preferred
input type=color Author yes accessible name from label preferred
input type=date Author yes accessible name from label preferred
input type=datetime-local Author yes accessible name from label preferred
input type=email Author yes accessible name from label preferred
input type=file Author yes accessible name from label preferred
input type=hidden not applicable no not UI
input type=image Author no if you want to add an accessible name to an <input type=image> use alt
input type=month Author yes accessible name from label preferred
input type=number Author yes accessible name from label preferred
input type=password Author yes accessible name from label preferred
input type=radio Author yes accessible name from label preferred
input type=range Author yes accessible name from value preferred
input type=reset Author yes accessible name from value preferred
input type=submit Author yes accessible name from value preferred
input type=tel Author yes accessible name from label preferred
input type=text Author yes accessible name from label preferred
input type=time Author yes accessible name from label preferred
input type=url Author yes accessible name from label preferred
input type=week Author yes accessible name from label preferred
ins Prohibited no Maps to role=generic naming not allowed
kbd Prohibited no Maps to role=generic naming not allowed
label Prohibited no Maps to role=generic naming not allowed (until ARIA 1.3)
legend Author no provides acc name for parent fieldset. aria-label use not well supported
li Author no aria-label use not well supported
main Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the main is navigated to.
map not applicable no not UI
math Author no The math element is not currently supported in some modern browsers.
mark Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
menu not applicable no This element sucks in general, suggest not using.
meta not applicable no not UI
meter Author yes accessible name from label preferred
nav Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the nav is navigated to.
noscript not applicable no not UI
object not applicable no aria-label use not well supported
ol Author yes Fairly good support across browsers/screenreaders.
optgroup Author no Use label attribute
option contents or author no Use text content of option or use a label attribute.
output Author no aria-label use not supported
p Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
param not applicable no not UI
picture not applicable no not UI
pre Prohibited no Maps to role=generic naming not allowed
progress Author yes accessible name from label preferred or  a heading perhaps (via aria-labelledby if you like).
q Prohibited no Maps to role=generic naming not allowed
rp Prohibited no Maps to role=generic naming not allowed
rt Prohibited no Maps to role=generic naming not allowed
ruby Prohibited no Maps to role=generic naming not allowed
s Prohibited no Maps to role=generic naming not allowed
samp Prohibited no Maps to role=generic naming not allowed
script not applicable no not UI
section Author yes Does not mask content: accessible name provided via aria-label will generally be announced when the section is navigated to.
select Author yes accessible name from label preferred
slot not applicable no not UI
small Prohibited no Maps to role=generic naming not allowed
source not applicable no not UI
span Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
strong Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
style not applicable no not UI
SVG Author yes alt="some text" DOES NOT WORK even if the SVG (or any other element) has a role="img"
sub Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
summary not applicable no ⚠aria-label use not well supported
sup Prohibited no refer to Roles which cannot be named (Name prohibited) ARIA 1.2
table Author yes Prefer visible caption element text
tbody Author no ⚠aria-label use not well supported
template not applicable no not UI
textarea Author yes accessible name from label preferred
tfoot Author no ⚠ aria-label use not well supported
thead Author no ⚠ aria-label use not well supported
time Prohibited no Maps to role=generic naming not allowed
title not applicable no not UI
td Author no ⚠ aria-label use not well supported
th Author no ⚠aria-label use not well supported
tr contents or author no ⚠ 😷aria-label use not well supported
track not applicable no not UI
u Prohibited no Maps to role=generic naming not allowed
ul Author yes Fairly good support across browsers/screenreaders.
var Prohibited no Maps to role=generic naming not allowed
video Author yes Prefer visible, a heading perhaps (via aria-labelledby if you like)
wbr Prohibited no Maps to role=generic naming not allowed

Thanks to @carmacleod for feedback.

17 replies on “Not so short note on aria-label usage – Big Table Edition”

Thank you for the article! I struggle with how to handle UI elements that use or include an abbreviation/acronym in the visible text. In such cases (e.g. UW–Madison instead of University of Wisconsin-Madison) I sometimes use aria-label to spell out the abbreviation or acronym but this results in a mismatch between the visible text and coded name. I generally stopped using or several years ago under the impression they were largely not implemented and/or used by users.

Do you have any advice for how to work with abbreviations or acronymns within UI text/labels? (For instances where they are unavoidable.)

Is an aria-label or a title attribute preferred for iframe? It currently says “yes” for aria-label, yet also “Use title attribute for accessible name”.

@Mitchell, It says use “Use title attribute for accessible name” While aria-label generally works and is allowed on <iframe> better to use title as it is the native and robustly supported method.

Re: “The math element is not currently supported in modern browsers.”

It has been supported in ALL modern browsers since January 2023 and everyone should feel encouraged to rely on tags nowadays.

But there is still no need for aria-label on elements. MathML 3 supports an “alttext” attribute, while MathML 4 is introducing a new “intent” attribute aimed at accessible readouts.

Leave a Reply to Old alt text advice – HTML Accessibility Cancel reply

Your email address will not be published. Required fields are marked *