Web Dev and Web a11y

Web Accessibility with FastHTML

Introduction

Web Accessibility (web a11y) can seem overwhelming. This ongoing series focuses on practical web a11y examples and real-world contexts to show how small changes can meaningfully improve accessibility for everyone. It is not a full accessibility or legal compliance guide, but a starting point for building more inclusive experiences - whether you're working on a larger project, experimenting at home, or prompting your favourite LLM.

Series Guide

Some people rely on assistive technologies (AT) to help them use the web. These tools use the accessibility tree to understand what's on a page and how people can interact with it. The Web Content Accessibility Guidelines (WCAG) detail what needs to be in place to make content accessible.

Set the page language so AT doesn't have to guess and confusingly mispronounce things. Give each page a clear title so everyone knows where they are. Don't block people from zooming or resizing; everyone should be able to read comfortably.

Structure your content clearly. Use proper headings to help sighted users scan and AT users jump between sections. Add landmarks to help AT users navigate the page and the site. Include a skip link so people can bypass repeated content quickly.

Even with good structure, content can still be hard to read. Avoid low-contrast text and colours so everyone can enjoy your content, and don't rely on colour alone to convey information.

Sleek visual designs are great, but AT cannot guess what links or buttons do if the accessibility tree information isn't there. Avoid creating empty links and empty buttons; if people can't tell what something does, they won't click it.

Some people rely entirely on keyboards. They should be able to use your site without a mouse, and it should always be clear where focus is by using accessible focus indicators. If you use Pico CSS, you can improve its default focus indicators.

Accompanying code examples

To accompany the posts, where relevant, I've created code examples using FastHTML. They're based on a fictional site called "The Dunning-Kruger Dispatch", with some intentionally poor or contrived code to illustrate specific web accessibility problems (Some might say the attempts are humour are also "poor or contrived"), that readers can attempt to resolve.

The repository is FastHTML-web-a11y.

Software used

More details on screen readers is available in the assistive technologies post. For many examples in this series, I use NonVisual Desktop Access (NVDA) and the Narrator screen reader, as I am on working on Windows.

If you are using MacOS, VoiceOver is the built-in screen reader on that platform.

NVDA, Narrator and VoiceOver are types of screen readers that "announce" content via Text-To-Speech and provide navigational aids.

Series Index

Here are the individual posts in the series. It is recommended to read them in order, as concepts build on each other.

  1. An overview of Assistive Technologies
  2. A brief introduction to the accessibility tree
  3. The basics of the Web Content Accessiblity Guidelines (WCAG)
  4. Set the page language
  5. Set the page title
  6. Don't prevent users from zooming
  7. Headings create accessible page structures
  8. Landmarks help screen reader users navigate
  9. Skip Links: Shortcuts for Keyboard Users
  10. Don't use low contrast text
  11. Don't rely on colour alone
  12. Don't create empty links
  13. Don't create empty buttons
  14. Keyboard Accessibility Basics
  15. Focus Indicators Are the Keyboard User's Cursor
  16. Creating a more accessible Pico CSS Focus Indicator