dai11y 02/12/2021

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

Today’s dai11y is a double HTMHell issue!

Edge dev tools screenshot: A demo site with broken html like empty buttons, img without alt, wrong aria roles, missing aria roles, and aria-hidden on focusable elements. — Screenshot of Edge browser’s “Elements” tab, showing ‘warning’ underlines on inaccessible HTML.

Debugging HTML: Accessibility
- “In Chrome or Edge open DevTools, click the Elements tab, select the element you want to inspect and click the Accessibility tab. The accessibility pane shows you how the element is represented in the accessibility tree, which ARIA attributes it has, and its computed properties.”
- Buttons need a label (denoted by Name:, populated by fields such as aria-label, title, or button innerText).
- Buttons need a suitable role (denoted by Role: "button").
- Buttons need to be focusable (denoted by Focusable: true).
- Note that you also need to be able to activate buttons with Space or Enter, but this information isn’t exposed in the Accessibility tab.
- There are also instructions for Firefox, which uses a different accessibility API. For example, the role name in Firefox will be pushbutton, rather than button.
Debugging HTML: Linting
- The Edge browser now highlights accessibility issues directly in the elements panel of the DevTools (see screenshot).
- “The built-in linter highlights potential issues in your HTML by marking affected elements with a squiggly yellow line”.
- “If you hover over the opening tag, a tooltip with a description of the issue appears.”

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.