Skip to main content
Up Your A11y

A web accessibility toolkit for developers

Tutorials and resources for developers who want to build accessible web experiences — understanding the fundamentals, handling common challenges in React, structuring pages with semantic HTML, and building forms that work for everyone.

Browse all topicsStart with the fundamentals

Fundamentals

Understand the who, what and why of accessibility, and set up your local environment and tooling.

  • Keyboard & Screen Reader Navigation

    • Understand keyboard navigation conventions, and how to work with them
    • Download and get to grips with a screen reader
    • Be able to put yourself in the shoes of your users with mobility and visual impairments

  • Set Up Your Tooling

    • Identify some tools to help you code with accessibility in mind
    • Verify your code in the browser
    • Check your color combinations for contrast

  • Accessibility 101

    • Understand web accessibility requirements
    • Consider who can benefit from improving the accessibility of your content
    • Think about who in your organisation should be involved in making your content accessible

  • What Changed in WCAG 2.2

    • Know which nine success criteria WCAG 2.2 added and which one it removed
    • Identify the two AA criteria most sites currently fail
    • Understand what changed for focus indicators, target sizes and authentication

  • The European Accessibility Act, for Developers

    • Understand what the European Accessibility Act covers and when it started applying
    • Know whether it reaches you if you are outside the EU
    • Understand which technical standard it points at

  • Tooling, Revisited

    • Know which of the original tool recommendations still stand
    • Move some checks out of the browser and into the pipeline
    • Understand what automated tools can and cannot find

A11y for React

Overcoming common accessibility challenges in React applications.

  • Accessibility-first React Integration Tests

    • Write tests that better reflect real user interactions
    • Catch accessibility bugs in their React tests
    • Understand some best practices in targeting DOM elements in tests

  • Handling Focus on Route Change in React

    • Understand some of the focus problems caused by client-side rendering
    • Learn a simple technique to restore context for assistive technology users

  • Handling Page Titles in React

    • Understand the importance of the page title to users of assistive technology
    • Manage page titles throughout your React application
    • Decide what your page titles should be

  • Heading Levels in Reusable Components

    • Make the most of your re-usable React components, without compromising accessibility
    • Ensure your content is clearly structured
    • Learn to create DOM elements dynamically in React

  • Announcing Things That Change on the Page

    • Understand why dynamically added content is silent by default
    • Choose between polite and assertive announcements
    • Avoid the live region mistakes that cause silence or noise

Structure and layout

Essentials for creating accessible page structures and using semantic HTML.

  • Accessible Images, Icons and Emojis

    • Add meaningful alternative text to your content's images
    • Identify cases where alternative text is not required
    • Handle 'alternative imagery' such as Font Awesome icons and Emojis

  • Accessible Page Layouts

    • Assess whether your current page content is well structured for your users
    • Understand how declaration order impacts keyboard and screen reader users
    • Implement semantic HTML elements for a better user experience

  • Lists with Repeating Calls to Action

    • Understand how screen reader users interact with your content when many similar actions are presented
    • Identify a quick fix to apply when mapping data to HTML elements
    • Apply the same approach to developing flexible and accessible React components

  • Modals with the Native Dialog Element

    • Understand what the native dialog element handles for you
    • Know what it still leaves to you
    • Replace a hand-rolled modal with showModal safely

  • Focus Indicators Worth Having

    • Understand why the default focus outline gets removed and what breaks
    • Use focus-visible to satisfy both designers and keyboard users
    • Build an indicator that meets the new WCAG 2.2 expectations

Forms and inputs

Create accessible forms, handling data validation and errors.

  • Accessible Forms 101

    • Label and describe your form inputs clearly
    • Associate groups of inputs together
    • Follow 4 easy steps to make your forms as easy to use as possible for a wide range of users

  • Handling Validation Errors in Forms

    • Consider the challenges faced by screen reader users when filling out forms
    • Implement a minimal feedback list on form submission to communicate mistakes to your users
    • Provide immediate feedback to users when they tab away from a given input

Contribute to a11y in open source

Open accessibility issues in open source projects looking for help.

  • Open A11y OSS Issues Looking for Help

    Sometimes it's hard to know where to start in contributing to Open Source Software, and often you might not have a particular repository in mind that…

About this site

Up Your A11y is run by Suzanne Aitchison, a software developer based in Edinburgh, Scotland.

A few years ago, working on a project for a large national brand, it became clear how little of web accessibility was well understood — even by developers who had been building web applications for years. This site collects what was learned along the way, written for developers who want practical guidance rather than a specification to read.

How the topics are organised

Fundamentals — who accessibility is for, why it matters, and how to set up your tooling so problems surface while you work.

A11y for React — the challenges that come specifically from client-side rendering: focus on route change, page titles, heading levels in reusable components, and testing.

Structure and layout — semantic HTML, page landmarks, images and icons, and lists of repeating calls to action.

Forms and inputs — labelling, validation, and communicating errors to people who cannot see them.

Demonstration pages

Several topics link to demonstration pages that deliberately show behaviour before and after a fix. Those pages are preserved exactly as built, including the ones whose markup is intentionally incomplete — the missing landmarks are the point.