CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readers
Haradzieniec
Haradzieniec

Reputation: 9340

aria-describedby but the empty text error by default - is this correct?

There is a good and trusted example for aria-describedby when we need to show errors (when error happens, some elements get added to the DOM) and it becomes:

<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" aria-describedby="err_1" class="error"> <span class="errtext" id="err_1">Error: Input data missing</span></p>

instead of 

<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email"> </p>

Is it fine from the accessibility point of view, if by default just the error text is empty? As result, when error happens, then just its text gets added.

By default (no error text) - does this code look correct?

<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" aria-describedby="err_1" class="error"> <span class="errtext" id="err_1"></span></p>

So that we change the only text within the span from empty to some text.

Upvotes: 2

Views: 1885

Answers (2)

slugolicious
slugolicious

Reputation: 17445

If the element that aria-describedby points to is empty, then nothing is read, so you're ok. When you add text to the <span>, the text will be read when the user moves focus back to the input. It will not be read as soon as you add the text. You'd need aria-live for that (which would be a good idea). 

<p>
  <label for="email">Email address: [*]</label>
  <input type="text" name="email" id="email" aria-describedby="err_1" class="error">
  <span class="errtext" id="err_1" aria-live="polite"></span>
</p>

Upvotes: 1

Adam
Adam

Reputation: 18807

My question is: is it fine from the accessibility point of view, if by default just the error text is empty? As result, when error happens, then just its text gets added.

Yes. This is discussed there : Describing aria-describedby (it may cause a brief pause when reading the empty element)

Upvotes: 4

Related Questions