Browse by topic

• Images & media

  Text alternatives for informative, decorative and complex images.

• Forms & inputs

  Labels, associated errors, grouped controls and autocomplete — the things users act with.

• Keyboard & focus

  Operable controls, visible focus, no traps, and ways to bypass blocks.

• Color & contrast

  Readable contrast, and never relying on colour alone to convey meaning.

• Structure & semantics

  Headings, landmarks, lists and a reading order screen readers can follow.

• Navigation & links

  Descriptive links, a clear current location, and consistent navigation.

• Tables & data

  Header cells, scope and captions so data tables make sense.

• Interactive widgets & ARIA

  Native-first widgets, correct roles and states, and valid ARIA.

• Dynamic content & motion

  Announce updates, respect reduced motion, and tame timers and flashing.

• Documents & PDF

  Tagged, structured PDFs with real text, headings and alt text.

Browse lessons

• Accessible names for interactive controls

  Give buttons, links and inputs a correct accessible name so screen-reader and voice users can operate them.

  WCAG 2.2 · 4.1.2AEN 301 549

• Accessible forms

  Labels, associated error messages, grouped controls and autocomplete so everyone can complete the form.

  WCAG 2.2 · 3.3.1AEN 301 549

• Text alternatives for images

  Meaningful alt for informative images, empty alt for decorative ones, and long descriptions for complex visuals.

  WCAG 2.2 · 1.1.1AEN 301 549

• Keyboard access & visible focus

  Make every control keyboard-operable, keep focus visible and ordered, and never trap it.

  WCAG 2.2 · 2.1.1AEN 301 549

• Colour & contrast

  Meet text and UI contrast ratios, and never let colour be the only way meaning is conveyed.

  WCAG 2.2 · 1.4.3AAEN 301 549

• Headings, landmarks & structure

  Real headings in order, landmark regions, proper lists, and a logical reading order.

  WCAG 2.2 · 1.3.1AEN 301 549

• Links & navigation

  Descriptive link text, a clear current page, multiple ways to find content, and consistency.

  WCAG 2.2 · 2.4.4AEN 301 549

• Accessible data tables

  Header cells, scope and captions so a screen reader can read each value in context.

  WCAG 2.2 · 1.3.1AEN 301 549

• ARIA & custom widgets

  Use native HTML first; give custom widgets correct roles, states and valid ARIA references.

  WCAG 2.2 · 4.1.2AEN 301 549

• Dynamic content & motion

  Announce updates with live regions, respect reduced motion, and control timers and flashing.

  WCAG 2.2 · 4.1.3AAEN 301 549

• Accessible documents & PDF

  Tagged, structured PDFs with real text, headings, reading order and alt text.

  WCAG 2.2 · 1.3.1PDF/UAEN 301 549

• Captions, transcripts & audio description

  Captions for video, transcripts for audio, and audio description for key visuals.

  WCAG 2.2 · 1.2.2AEN 301 549

• Accessible SVG & icons

  Hide decorative SVG, name informative icons, and label icon-only controls.

  WCAG 2.2 · 1.1.1AEN 301 549

• Form validation & error recovery

  Identify errors in text, suggest fixes, and let people review important submissions.

  WCAG 2.2 · 3.3.1AAEN 301 549

• Required fields, instructions & input purpose

  Mark required fields programmatically, keep instructions visible, and set autocomplete.

  WCAG 2.2 · 1.3.5AAEN 301 549

• Managing focus in dynamic UIs

  Move focus deliberately when content changes, views switch, or overlays close.

  WCAG 2.2 · 2.4.3AEN 301 549

• Visible focus & focus appearance

  Keep a clear, high-contrast focus indicator that is never removed or hidden.

  WCAG 2.2 · 2.4.7AAEN 301 549

• Building an accessible colour palette

  Choose text, state and placeholder colours that meet contrast and never rely on hue.

  WCAG 2.2 · 1.4.3AAEN 301 549

• Non-text contrast: UI, icons & charts

  Give control borders, icons, chart colours and focus rings at least 3:1 contrast.

  WCAG 2.2 · 1.4.11AAEN 301 549

• Landmarks & page regions

  Use header, nav, main, aside and footer — and label repeated landmarks.

  WCAG 2.2 · 1.3.1AEN 301 549

• Reading order & meaningful sequence

  Keep DOM order matching the visual reading order; avoid positive tabindex.

  WCAG 2.2 · 1.3.2AEN 301 549

• Multiple ways & consistent navigation

  Offer search or a sitemap, and keep navigation consistent across pages.

  WCAG 2.2 · 2.4.5AAEN 301 549

• Link text, context & new windows

  Write links that make sense out of context, and warn before opening new windows.

  WCAG 2.2 · 2.4.4AEN 301 549

• Complex tables with multi-level headers

  Tie every cell to its row and column headers with scope or headers/id.

  WCAG 2.2 · 1.3.1AEN 301 549

• Responsive & sortable tables

  Keep header associations and a keyboard-scrollable region when tables adapt.

  WCAG 2.2 · 1.3.1AEN 301 549

• Accordions & disclosure widgets

  Use real buttons with aria-expanded kept in sync with the panel.

  WCAG 2.2 · 4.1.2AEN 301 549

• Toggle buttons & switches

  Expose pressed or checked state and announce the change to assistive tech.

  WCAG 2.2 · 4.1.2AEN 301 549

• Live regions & status messages

  Announce async results and alerts with the right live-region politeness.

  WCAG 2.2 · 4.1.3AAEN 301 549

• Time limits & auto-updating content

  Warn before timeouts and let people pause auto-advancing or refreshing content.

  WCAG 2.2 · 2.2.1AEN 301 549

• Accessible Word & Office documents

  Use real heading styles, alt text and header rows in source documents.

  WCAG 2.2 · 1.3.1AEN 301 549

• Accessible PDF forms & reading order

  Label PDF fields, fix the tag reading order, and tag lists and tables.

  WCAG 2.2 · 1.3.1AEN 301 549