Chris Ashton

dai11y 11/09/2020

Your daily dose of a11y:

Decoding Label and Name for Accessibility

  • Consider the following HTML: <label>Name: <input aria-label="First name" placeholder="e.g. Chris" title="Enter a name"></label>. What gets read out by screen readers?
  • Answer: the aria-label always takes priority. In its absence, it would be the label, and in the absence of that, the title, or if nothing else, the placeholder. These rules are defined in the HTML Accessibility API Mappings’ Accessible Name and Description Computation. Browsers have built-in tools to allow you to inspect an element’s accessibility properties.
Screenshot of Chrome DevTools showing Accessibility tab with ARIA Attributes section and Computed Properties section. They show that the element has aria-label, aria-describedby, label and placeholder properties, and that the aria properties are the ones that are being applied.
Chrome DevTools show the hierarchy of the accessible name computation for a specific element.

Did you know that you can subscribe to dai11y, week11y, fortnight11y or 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.