Accessibility
Landmarks, names, keyboard flow, focus, alternatives, and contrast habits.
What you will practice
Accessible names; Image alternatives; Landmark labels; Keyboard order.
Use the worked examples when needed, then test your understanding without them.
- 01Accessibility: Accessible namesVisible text usually gives a native button its accessible name. Icon-only controls need an equivalent name.Practice
- 02Accessibility: Image alternativesWrite alt text for the image purpose in this context, not every visual detail. Decorative images use alt="".Practice
- 03Accessibility: Landmark labelsDistinct names help people differentiate multiple navigation landmarks.Practice
- 04Accessibility: Keyboard orderNative links and buttons participate in keyboard navigation in source order. Positive tabindex usually creates surprising jumps.Practice
- 05Accessibility: Visible focusA keyboard target needs an obvious focus indicator. Do not remove outlines without an equally visible replacement.Practice
- 06Accessibility: Status announcementsrole="status" communicates non-urgent updates without requiring an interrupting alert or focus change.Practice
- 07Accessibility: Heading structureHeadings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.Practice
- 08Accessibility: Accessibility checkpointAccessible structure should survive without color, hover, or a pointing device.Practice