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.
#Accessibility
Markup that works for every reader and every input device.
31 notes tagged
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.
HTML
Labels: The Most Important Element in a Form
A label names a field for every reader and grows its click target. Two ways to bind one, and the reasons a form without labels is not usable.
HTML
Input Types: Text, Email, Number, Date and the Rest
One element, more than twenty types. Choosing the right one gives you the correct mobile keyboard, free validation and better autofill, at no cost.
HTML
Accessible Tables: scope, headers and id
A table a screen reader can read is a table with named headers. scope handles simple tables, headers and id handle the hard ones.