Skip to main content
Up Your A11y

All topics

Every topic on the site, grouped as before. Each article opens with what you will be able to do by the end of it.

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…