Web accessibility fundamentals
You try pages yourself with a screen reader and a keyboard and find and fix text, colour, form and navigation problems according to the WCAG principles.
Level 201 · 16 lessons · 15 practice labs
Lessons
Who it is for and why
- Who accessibility is for: disabilities and situations
- The four WCAG principles and levels
- Accessibility laws and standards around the world
- A first tour with a screen reader
- Short task: use a site with the keyboard only
Content and appearance
- Text alternatives
- Navigating by headings and landmarks
- Colour contrast and not relying on colour alone
- Readable content: language, plain wording, link text
- Short task: fix a page’s contrast errors
Interaction
- Keyboard access and focus order
- Skip links
- Accessible forms: labels, errors, instructions
- The first rule of ARIA: native HTML first
- Automated checking tools and their limits
- Capstone: make a public service page accessible
Practice labs
- Try booking with a screen reader: Try booking on a clinic's appointment page with a screen reader and note three places where you get stuck.
- Repair the heading and landmark structure: Make a municipal notices page that skips heading levels and lacks landmarks navigable with a screen reader.
- Prepare a text alternative for a chart: Prepare an accessible alternative for an energy-use chart made of short alt text and a detailed data table.
- Fix information given by colour alone: Make a form that marks required fields only in red clear to colour-blind users by adding icons and text.
- Rewrite a dense notice in plain language: Rewrite a municipality's jargon-heavy water outage notice with short sentences, the correct lang attribute and explained abbreviations.
- Fit a brand palette to contrast rules: Derive AA-passing colour pairs for text, buttons and focus rings from a café chain's six-colour palette.
- Add a skip link to a long-menu page: Add a link that appears on keyboard focus and jumps straight to the content on a page with a long menu.
- Fix a jumbled focus order: Fix the illogical focus order of a form rearranged with CSS and given positive tabindex values.
- Turn clickable divs into real buttons: Make a control panel built from clickable divs fully work with the keyboard, focus and roles.
- Replace placeholders with visible labels: In a membership form that relies on placeholders, turn the hints that vanish on typing into visible, connected labels.
- Tie error messages to their fields: In a form that lists errors at the top, tie each error to its field and link from the summary to the field.
- Open up checkout options to screen readers: Make a checkout page with delivery and payment options clear to screen readers with fieldset, legend and descriptions.
- Run a first automated scan: Scan a library website's home page with an automated checker and rank the findings by importance.
- Remove needless ARIA: Clean up a page where native HTML elements were given wrong roles and use the right elements instead.
- Find what the tool missed: Test a ticket page that passed an automated scan by hand and find at least three problems the tool missed.
About this course
You try pages yourself with a screen reader and a keyboard and find and fix text, colour, form and navigation problems according to the WCAG principles.
What you will learn
- Who it is for and why
- Content and appearance
- Interaction
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.