Improving the Accessibility of a React Form

I’ve recently been a part of a project in which I’m helping to fix some accessibility issues for an established SaaS product. But this isn’t the first time I’ve encountered accessibility ( I will refer to accessibility to a11y for short). One encounter I had an interview with a company that specialized in helping other companies meet certain a11y requirements. I didn’t end up getting that job, but the experience piqued my interest in a11y. My second brush with a11y was when I went to the DexNexus conference, and a guy by the name of Andrew Malek gave a talk on the topic. I enjoyed his talk on the matter and he helped me understand the importance of it. I did some digging and research at that time but not as much as I have been doing since this recent project. Lets use simple form to show you the a11y errors and how to fix them.The a11y errors that we will fix in the form are labels, contrast errors and more. But first let’s dive into the when and why of this matter.

Originators Of Web Accessibility

There is an organization by the name of the World Wide Web Consortium (or W3C for short) who began their pursuit to make the web accessible to everyone. The W3C started in the fall of 1996 with early contributors like Mike Paciello, Yuri Rubinski, and Dave Raggett. WAI’s (Web Accessibility Initiative) official launch was April of 1997 at the Web Conference in Santa Clara. They would continue contributing with many others to create the standards we have today. Here is a link if you’re interested in learning more –> W3C History .

Why Accessibility

To make the web accessible to everyone. We live in a world with old and young, disabled and able. No one should be left out from the amazing world wide web. I think of it as not just making it accessible for individuals born with disabilities but people who have gotten older and have begun losing their sight or had an accident that took their sight. Can you imagine seeing the web one day and not being able to see it the next day? The internet is vital today in society for paying bills, shopping online, education, and more. Now I hope the reasons I’ve stated have motivated you and have you eager to learn more.

Let’s Begin

student form

Here we have this form and the code that created it. At first glance you may think “it looks good to me” but I have some a11y tools that we can use to allow us to look underneath to see the problems. The two tools we will use are chrome extensions called Wave and Axe. Once we have those extensions installed we can run our first check. Let’s use Axe first. To use Axe just open up the developer tools on your Windows computer with Ctrl + Shift + I. You may have to go to the double arrows and select Axe. When Axe has been selected click the analyze button to see what a11y errors appear. As you can see we have multiple color contrast issues, label errors, heading levels and landmark issues. Before we fix these issues, let’s use Wave to see how it displays errors. You don’t have to go to the developer tools because Wave is in the top right corner on the Google browser. Just click the Wave icon and wait until it processes your page. Wave is much more colorful and organized with how it displays your errors. You may say why use both if they basically give the same errors? Well in my experience sometimes one may find more errors than the other. Wave will pickup elements that are hidden with errors on the page and Axe will ignore it. So I use both to be safe.

wave tool showing accessibility errors

Fixing The Labels

Now we can start fixing these errors beginning with the missing labels. The importance of these labels is that when the screen reader is focused on the input element it will read the name of the label along with its type which is edit text. There are two ways you can handle this label issue with the input text. The first is to add a label describing what to put into the input or add an aria-label attribute. Both will solve the problem but there are some who argue that you should add a label as best practice. Notice in the example using the label tag we use ‘htmlFor’ instead of ‘for’ attribute. This is because of React jsx. The word ‘for’ is a reserved word in Javascript.

react jsx code

student form with labels on inputs

If you think the labels throw off the design you can just use the aria-label attribute like the first snippet of code. But as I’ve said, some argue that having labels is better practice. We have only fixed two error labels with more to go. The other label issues are the radio buttons, select element and checkboxes. But wait a minute, you may be saying “they do have labels” and to a person who has sight, you are correct, but to a screen reader the code doesn’t specify any labels. Sure, in the code you see the text next to the elements but it’s not associated with it. Just add either an aria-label attribute to the elements or surround them with labels. Also I did notice that with the elements if you use the label tag around them you can click on the text and the screen reader will announce the name. This behavior doesn’t happen when you use the aria-label attribute.

close up of code for radio button label

close up of code for select element

Fixing Contrast Errors

Now lets fix the contrast errors with the help of Wave. The titles are causing the contrast errors. This is important because the user could be color blind or could be slightly visually impaired. We can click on the contrast tab in Wave and use their utility to get our colors to the correct contrast ratio. Take the color of the student form and place it in the foreground color. You will see our color fail against the white background. As we adjust the slider Wave contrast ratio will change and we can keep adjusting until we pass. Also if you were curious to know what the ratios are. WCAG (Web Content Accessibility Guidelines) 2.0 level AA requires a contrast ratio of at least 4:5.1 with normal text and 3:1 with larger text. The AAA level requires at least 7:1 normal text and 4:5.1 larger text. Let’s go for the AAA level.

wave accessibility tool showing contrast tab

Better Semantics With Button Tag

On to the next error which is an empty button. We have this error because we are using an input type submit with no value attribute. That will let the screen reader know the button’s purpose. Even though that will solve the error lets use a better approach by using better semantics. We can use the button element and not only will it work but it’ll make our code more readable at first glance.

Grouping Related Form Elements

As you can see in Wave we have fixed all the errors but we have more issues called alerts. I suspect that these issues are warnings for helping with best practice. The first best practice to tackle is fieldset. Fieldset is used to group related form elements visually by supplying a default border around them. I added the fieldset but removed the outline because I don’t like the look. Legend is another tag within the fieldset to describe the group of radio buttons or checkboxes.

react jsx code

react jsx code

Landmarks

Lastly but not least we have 3 more alerts but only 2 we can change. The alert we have no control over is the noscript tag which React has in its code to inform any user of its library that you must enable javascript for it to work. Wave complains about this because assistive technologies use javascript so any content inside the noscript tag it will not be able to read. So lets handle the last 2 alerts starting with no page region. Aria uses regions as landmarks to help assistive technology to maneuver around the page easily. Tags such as header, nav, main and footer can be used to describe sections on a page. In our case putting a main tag in our code will fix this warning because the form is the only content on the page.

Heading Levels

The last warning is one I did on purpose to give an example on skipping heading levels. In the code we have a h1 tag for the title of the form and a h3 tag for the select title. The fix would be to change the h3 into a h2 but as I said I made this error on purpose. So I will fix it by changing it into a legend tag. But the importance of not skipping headings is because assistive technologies use them to help the user navigate within the page. You can confuse your user by your headings skipping levels. Here’s a link on heading structure from WAI.

I hope you enjoyed my article on improving the accessibility of this form. There is more to learn about a11y but I hope I’ve given you a good start. Now go and help make the web accessible to the world!