A web accessibility toolkit with a React focus

Welcome to Up Your A11y! This site aims to be a resource for front-end developers to find useful information on how to make your sites more accessible. The topics covered have a React bias, but the principles in each apply to all web development, so please don't be put off if you don't work with React specifically!

Articles are organised into sections below, and please don't hesitate to Contact Me with suggestions for current and future content.

Getting the Fundamentals Right

  • Accessibility 101: Who, Why, How

    This topic considers the who, why and how of accessibility and offers a Quick Start guide for how to develop accessible content.

  • Getting Started with Keyboard Navigation and Screen Readers

    To get accessibility right, we need to understand the basics of how diverse users are going to engage with our apps, so it’s time to get familiar with your keyboard and your screen reader.

  • Top Tools for Developing With Accessibility in Mind

    5 top tools to help you make accessibility an integral part of your development practices, and a few more you might like to try out besides!

Common Challenges in React & Single Page Applications

  • Handling Focus on Route Change in React

    Any client-side route rendering can result in confusion and loss of context for assistive technology users. This article describes and demonstrates the problem, along with a quick solution that can easily be implemented in your apps, so you can make sure that all users can engage with your content.

  • Handling Page Titles in React

    Without explicitly managing it, the page title in your React app will never change. Find out how this affects diverse users, and a simple method to manage your page titles.

  • Heading Levels in Reusable Components

    React empowers us to re-use components across our apps, but it's important to consider how component re-use could affect accessibility. This topic demonstrates an easy way to build flexible components that don't compromise heading level structure.

Structures and Layout

  • Accessible Page Layouts

    The structure of a given page is more than just a visual consideration. This topic explores how heading levels, semantic HTML, and the order in which you declare and label your elements can all be leveraged to improve the experience of your assistive technology users

  • Accessible Images, Icons and Emojis

    All images require an 'alt' attribute, but deciding what content it should have can be very challenging. This topic steps through some key questions you can ask yourself to help decide the right alternative text given an image's context. It also considers some other types of imagery (font icons and emojis) that don't use the 'img' element, but still present visual information to users.

  • Lists with Repeating Calls to Action

    Often when we create lists of UI elements, they may have similar or even identical text labels. This topic considers how screen reader users interact with this kind of content, and what we can do to improve their accessibility. It also explores how we can create flexible React components suitable for reuse in this way.

Forms and User Input

  • Accessible Forms 101

    This topic introduces the key concepts to creating simple, accessible forms including labelling, describing and organising your inputs.

  • Handling Validation Errors in Forms

    Form values usually require some kind of validation before they can be submitted, but without visual cues, often understanding where a mistake has been made - and where to fix it - can be tricky for screen reader users. This topic explores two key ways to handle form validation errors for a more accessible experience.