Share this post
What is web accessibility and why is it important ? How can we easily improve forms accessibility ?
People with disabilities frequently face this experience, that's where web accessibility comes in.
Web accessibility is a critical aspect of website and application development, as it ensures that everyone, regardless of ability or disability, can access and use digital content.
It's important to acknowledge that disability is a common experience that can affect anyone, whether temporarily or permanently. In fact, in 2022 an estimated 1.3 billion people, or about 16% of the global population, currently face significant disabilities.
However, creating accommodations for people with disabilities extends beyond addressing the needs of those with physical, sensory, or cognitive impairments. It also involves considering the needs of aging populations, individuals with situational impairments (such as using a device with a small screen or limited bandwidth), and people with limited digital literacy skills.
By designing and developing applications with accessibility in mind, we can ensure that everyone has equal access to information and services on the web.
Unfortunately, not all developers are aware and trained to implement accessible websites.
Many people fail to understand the significance of accessibility because they have not personally encountered the challenges experienced by individuals with disabilities.
This can make it difficult to appreciate the positive impact that accessible design can have on the user experience. Actually, that was my case too.
It wasn’t until I started my last project that I really began to understand the importance of web accessibility. One of my colleagues decided to focus on improving the accessibility of our website. She did a kaizen (continuous improvement process) to identify areas where we could make it more accessible and easier to use for individuals with disabilities.
As part of this process, she gave a demonstration using a screen reader to show how the website was currently being accessed by individuals with visual impairments. Seeing our app being used in this way really hit me, and I realized how much accessibility can impact the user experience. By ignoring the needs of individuals with disabilities, we were excluding a significant portion of the population from using our website and potentially losing out on valuable customers.
Let's take a closer look at what was demonstrated during the kaizen and how it impacted my understanding of web accessibility.
Have you ever thought about the ways people might interact with your website?
While it's easy for those of us who use a mouse to click around and access different elements on the page, such as buttons, links, and form fields, it's not always that straightforward for everyone.
If you want to experience what it's like to interact with a website using only your keyboard, why not try buying something on Amazon without using your mouse? This can help you gain a better understanding of the accessibility challenges that some users may face.
Also, screen readers rely on the ability to focus on different elements on the page in order to navigate and interact with the content. If an element isn't focusable, it can be a real obstacle for screen reader users.
This is what our main page looked like :
Here, the card of the article is clickable by mouse users to see the details, and the ‘information’ icon displays a description when the user hovers his cursor over it. However, these elements are not focusable. That means that they can't receive focus from a keyboard or other input device and can’t be selected and interacted with.
So, what happens here if a screen reader user navigates on the page ? Let’s see the accessibility tree for a better understanding.
As the ⓘ and the article card are not focusable, when a screen reader user presses the tab key he was going straight from the ‘New article’ button to the ‘Delete’ button. This was a problem because the user can’t see the article details, but the bigger problem was that he could only go from delete button to delete button, and had no idea of what he was deleting.
To solve these issues, there were many possibilities, this is what was chosen :
To access the article details, the solution was to transform the card from a <div> to a <a> link. Why ? Because links and buttons are focusable elements and typically designed with clear and descriptive text, which helps users understand their purpose and how to use them. This way, the user can select the article and press enter to go into the details, and an explicit “label” is said by the screen reader.
We also moved the "Delete" button inside the card. That way, it’s more closely associated with the article that it applied. This was especially important for users who may not be able to see the article details and therefore would not have had a clear understanding of what they were deleting without this context.
These changes did not negatively impact the experience of able-bodied users, but rather made it possible for screen reader users to fully access and interact with the content on the webpage.
Making our website more accessible was no big deal! We realized that small changes can make a big impact on the user experience for individuals with disabilities.
Now we can wonder, how can we easily make our website accessible ?
There are many factors to consider when creating an accessible website. As a developer, you likely work with forms on a regular basis in your projects, as I do. They are an important element to consider while making an accessible website because they are a key part of the user experience. That’s why in the next part of this article, I have chosen to focus on forms.
Let's see some good practices to create accessible forms that are intuitive and easy to use for everyone.
HTML semantics refers to the use of HTML tags that accurately describes the meaning and purpose of the content they contain. For example, using a <button> tag for a clickable button, rather than using generic tags like <div>.
By default, this tag has appropriate styles (which you may want to override) and also allows for keyboard access - users can tab to the button and activate it with the enter key.
Using semantic HTML (HTML tags that clearly describe the content they contain) doesn't take any more time to write than non-semantic HTML if you make a habit of using it from the start of your project. It also has benefits beyond accessibility:
<div> tags, so your documents will be more easily found by customers.The <label> element creates clear and descriptive labels for each form field. This will help users understand the purpose of the field and how to complete it. (If you don’t want to display a label next to your field, you can use <label hidden>.) This way the label will be invisible, but screen readers will still announce it.)
When a label isn't linked to a form field, it can be difficult or impossible for users with disabilities to understand and use the field. This is what it might look like for a screen reader user:
A screen reader user has no clue of what field he is filling; he only knows he has to write text.
(If you are not sure, you can check the accessibility tree of your form in dev tools, or you can try using a screen reader. If you are on Mac and want to see for yourself, you can press ⌘ + F5 or press the Touch ID button three times while maintaining ⌘ hold down to activate Voice over.)
Here, the label isn’t linked to the field, forms that do not have labels linked to their corresponding fields can be difficult or impossible for users with disabilities to use.
To fix this, there are two ways to connect the label to the field:
Match the label’s for="" attribute with the input’s id="" attribute.
-1.png)
<label> tags.You should also use the appropriate input type for each form field. For example, use type="text" for text input, type="email" for email input, and type="password" for password input.
⚠️ The placeholder attribute does not take the place of a
<label>.For example, it disappears once information has been entered into the field, making it more difficult for users to make corrections. Also, screen readers often don’t detect placeholder text, and visually impaired people often have trouble reading it since there is low contrast between the text color and the form field background.
Proper label association in forms not only improves accessibility for users with disabilities, it also makes the form more user-friendly for all users. For example, when a label is properly associated with a checkbox, for example, users can easily select the checkbox by simply clicking on the label text, making it more intuitive and user-friendly, instead of having to hunt for the checkbox itself. This makes the form more intuitive and easier to use for everyone.
Sometimes, inputs may not have a specific label for each of them (for example, a table with multiple rows).
In these cases, you may use the ‘aria-labelledby’ attribute to link to the element you want to use as a label :
-1.png)
To provide additional information like tooltips or errors, you can use <aria-describedBy>. Screen readers announce aria-describedby content in addition to a label. It is not a substitute for a label — all inputs must have a label.
.png)
Here is what is read by a screen reader :
If you want to learn more about aria labels and accessible forms, you can check out the WebAIM article: https://webaim.org/techniques/forms/
I hope that by reading this article, you've gained a greater appreciation for the importance of accessibility and will prioritize it in your projects.
We've covered some key techniques for improving the accessibility of forms, which are a crucial part of many websites and apps. You now have some tools to make your website more inclusive for all users, and the good news is it's often easier than you might think.
There are plenty of resources available to help you get started. Whether you're new to web accessibility or an experienced developer, there is always more to learn and discover.
Every small step you take is a step forward to a better, more inclusive world.
