Accessibility Notes - Page 2

Testing a Page for Accessibility

Automated tools find about a third of problems. Here is what they catch, what they miss, and a manual routine that takes fifteen minutes.

HTML

Colour, Contrast and Motion

Contrast ratios that meet the guidelines, never relying on colour alone, and honouring the reduced motion preference. Mostly CSS, entirely part of the...

HTML

ARIA Basics: Roles, States and Properties

ARIA fills gaps that HTML cannot. It also breaks pages when used carelessly. The rules, the attributes worth knowing, and the ones to leave alone.

HTML

Keyboard Navigation, Focus and tabindex

If it cannot be reached with the Tab key it does not work. Focus order, visible focus indicators, the three values of tabindex and the traps to avoid.

HTML

Accessible Names and the Accessibility Tree

Every control has a name, a role and a state, and the browser works them out in a fixed order. Knowing that order explains almost every screen reader...

HTML

Accessibility: What It Means and Where HTML Fits

Most of accessibility is choosing the right element. The rest is a short list of habits. Here is the framework and the small number of things that fix...

HTML

Writing Markup That CSS Can Lay Out

Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...

HTML

The dialog Element: Native Modals

Modals with focus trapping, backdrop, Escape handling and inertness supplied by the browser. A component that used to need a library is now one elemen...

HTML

Page Landmarks: header, nav, main and footer

Four elements divide a page into regions a screen reader can jump between. Learn the rules for each, including the one that says main appears exactly...

HTML

Why Semantic HTML Matters

Two pages can look identical and be worlds apart. Semantic markup is what tells browsers, screen readers and search engines what each part of a page a...

HTML

Buttons: submit, reset and button

Three button types, one attribute, and a default that causes more accidental submissions than any other rule in HTML.

HTML

Checkboxes, Radio Buttons and Grouping

Checkboxes for many answers, radios for one. The name attribute is what groups radios, and fieldset with legend is what makes either group make sense.