CODEWITHSUNDEEP
htmlreactjsspecificationswai-ariascreen-readers
Berty
Berty

Reputation: 1178

Is an HTML aria-label attribute allowed to be an empty string?

Will an empty string be ignored by screen readers or should i avoid adding them to the element if the string is empty?

For reference, this is a usecase in react where you want to default to an empty string to avoid having to check for undefined:

<input
  id={id}
  value={value}
  {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
/>

Upvotes: 8

Views: 9413

Answers (3)

patrickfox
patrickfox

Reputation: 142

Empty aria-label should absolutely be avoided as it can cause screen readers to do unpredictable things. While it is not something that is explicitly forbidden by WCAG, it could be be considered a violation of WCAG Guideline 4.1:

"Maximize compatibility with current and future user agents, including assistive technologies."

Empty aria-label serves no purpose, introduces cruft in the code, and is a sign of lazy programming.

Upvotes: 1

JensV
JensV

Reputation: 4524

The documentation from w3 makes no mention of an empty attribute value for aria-label. So it's probably implementation defined of the different screenreader software.

Reference: https://www.w3.org/TR/wai-aria/#aria-label

Upvotes: 4

James Long
James Long

Reputation: 4736

I can't see anything in the spec about what should happen if aria-label is set to an empty string. I think that you'd just be labelling it with nothing and thus it'd be fine, but I can imagine a screen reader assuming that's a mistake and falling back to something else.

I think you're using aria-label wrong if it can be empty some times. aria-label is just a stand-in for the <label> element. It's supposed to name the input element. There shouldn't be a situation where the name changes or can be blank.

Upvotes: 4

Related Questions