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.