dai11y 11/09/2020

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

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.

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.