Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Redundantly Redundant a11y Accessibility

• A really interesting deep-dive by Scott O’Hara, who looks at some ARIA-heavy markup for indicating that an input field is ‘required’. He tests this markup out with VoiceOver and NVDA, and finds that the auditory experience ends up being extremely verbose: “Enter your name, required, Your name, required, edit text. (pause) This field is required“. He then digs into why that is, looking attribute by attribute.
• In his revised markup, Scott removes the aria-label, title and placeholder attributes from his <input>. Each of these attributes can be used to ‘name’ a text field, but as we already have a <label>, each of these do something slightly different, and all were providing pretty similar text.
• He also removes aria-required="true", leaving only a required attribute, as the ARIA attribute would be ignored anyway due to conflicts with host language semantics (the HTML attribute overrides the ARIA one). Note that this conflicts rule does not apply to aria-label, aria-labelledby and aria-describedby.
• aria-describedby is used to point to where a validation message would display. Scott notes that the DOM element that is pointed to should be empty by default, and only populated with a message when there is an error, otherwise the aria-describedby attribute would be constantly announced.

The final markup looks like this:

<label for="name">
  Name <span aria-hidden="true">*</span>
</label>
<input id="name" aria-required="true" aria-describedby="msg" autocomplete="name">
<div id="msg">
  <!-- the following is only added to the DOM when needed -->
  Error: This field is required
</div>

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.