Chris Ashton

week11y issue 42

Here’s your weekly a11y news:

Operating System and Browser Accessibility Display Modes

  • Eric Bailey summarises several global settings users might use to change their display, the reason for their existence and the effect they can have on your website. The modes are Dark, Increased Contrast, Inverted Colors, Reduced Motion, and High Contrast. He also describes how to target them in code, so that you can better tailor your site to your users. A very useful resource.

When there is no content between headings

  • This is a question that often comes up: are you allowed to have a heading immediately followed by another heading, with no content in between? Hidde de Vries gives us a useful rule: “Always have content between headings of the same level.” I.e. a <h2> immediately followed by a <h3> is fine, but a <h2> followed by a <h2> is not.

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.