I enjoy discovering everything that revolves around web development and not limiting myself to seeing it only through the lens of CSS and JavaScript. There is one topic that I find important to talk about, especially in France (you’ll understand why): accessibility.
Inclusivity: A Legal Obligation
Web accessibility is highly important in the US and UK for several legal, social, and commercial reasons. Unlike other countries, where it is sometimes considered a “nice-to-have,” in Anglo-Saxon countries, it is a requirement for regulatory compliance and inclusivity.
In the United States, this takes the form of the ADA (Americans with Disabilities Act), signed in 1990, originally to provide accommodations for physical disabilities in public spaces. Since the 2000s, court rulings have considered the web to be a public space, making it subject to accessibility regulations.
However, it wasn’t until 2017 that the first major lawsuits against companies like Netflix and Domino’s Pizza started to give this regulation significant weight. Fun fact: in 2019, a blind fan sued Beyoncé because her website was not usable with screen readers.
Since then, any commercial digital business or even a celebrity’s website is legally required to be accessible, under the risk of legal action.
In the UK, there is an equivalent law: the Equality Act.
In France, while there is no obligation for popular websites, accessibility is still highly recommended, especially if you plan to expand your platform to Anglo-Saxon countries.
I don’t know about you, but as a front-end developer, one question now intrigues me: how do you actually make a website accessible?
Let me stop you right there—no, simply adding image descriptions is not enough.
Each Type of Disability Has Its Own Needs
Before sharing snippets of HTML code to sprinkle here and there, it’s essential to first understand the different types of disabilities and put ourselves in their shoes. How do people with disabilities experience my website? What do they need?
Visual Impairment
Whether someone is blind or visually impaired, a screen reader becomes essential because they cannot see the content. And this is where, as a front-end developer, different HTML tags take on their full meaning. Who hasn’t wondered about the difference between <nav>, <section>, and <main> tags? I see you in the back, yes—you, putting <div> tags everywhere!
HTML tags have their own semantics, which are crucial for screen readers. So, it’s important to structure your HTML code with the right semantic tags so that a visually impaired person can properly “navigate” your page.
I’ve mentioned it before, but image descriptions in the alt attribute are important—not just for SEO (yes, Google’s bot doesn’t waste time analyzing your images) but also for visually impaired users.
Here’s an example with Lenna, a famous photo on the web, especially among those working in imaging.
How to Describe This Image? Out of laziness, we might quickly write “Young woman,” which is already a start, considering that most of the time, either there is no alt tag at all or a generic pre-filled description from a template (like “Profile”). If you’re lacking inspiration for image descriptions, you can use ChatGPT:
“Portrait of a young woman with a soft gaze, wearing a wide-brimmed hat with a feather. She is slightly turned in profile, looking toward the camera with a warm, blurred background.”
Or a shorter version: “Portrait of a woman wearing a feathered hat, looking at the camera.”
In the WCAG (Web Content Accessibility Guidelines)—the international recommendations compiling web content accessibility rules (the RGAA, General Accessibility Guidelines for Administrations, is the French equivalent)—there are several suggested contrast levels, with a preferred ratio of 4.5:1. Did you get that? No?! Me neither at first.
Without diving too deep into the details, the contrast between two colors is calculated based on their luminance. On a website, contrast refers to the difference in brightness between text and background color, ensuring, of course, that the text remains readable—for all types of vision.
Here’s the formula to calculate a color’s luminance:
L = 0.2126 × R_s + 0.7152 × G_s + 0.0722 × B_sI won’t dwell on this formula, as it might scare some people off. What you need to remember is that if we take the 4.5:1 ratio, it means that green (G) carries the most weight, followed by red (R), and finally blue (B) to a lesser extent. This is because the human eye is more sensitive to variations in green, then red, and less to blue.
I encourage you to try the Funkify extension on Chrome, which allows you to simulate web pages from the perspective of a colorblind person:
One last point I want to add is color management. Simply using red to indicate an error is not enough. For a colorblind person, red might not be distinguishable, so additional meaningful elements are needed.
Simply adding an error icon like ❌ or changing the shape of the message with a border, a box, etc., helps reinforce understanding.
Hearing Impairment
I won’t dwell on this one because it mainly concerns videos. Video creators or platforms themselves usually provide synchronized subtitles, making audio content accessible to the hearing impaired.
Motor Impairment
People with motor impairments may have difficulty or be unable to use a mouse. Therefore, it is essential to ensure keyboard navigation, reinforcing once again the importance of using the right HTML tags.
We should also avoid making buttons too small. Any interactive element should have enough space so that users don’t need to click with extreme precision.
Cognitive Impairment
This category includes disabilities that affect concentration and comprehension. People with cognitive impairments may struggle with cluttered interfaces that create confusion or animations that overwhelm the screen.
The key here is to keep interfaces clear and simple.
Summary of Changes to Apply as a Front-End Developer
If you’re not a front-end developer (sorry for you!), you can stop here, as this section mainly recaps the previous points but from an HTML implementation perspective.
As mentioned earlier, using the right tags is essential—avoid throwing <div> tags everywhere. Elements like <header>, <footer>, <nav>, <button>, and <section> make navigation easier for screen readers.
They also improve keyboard navigation using Tab, Enter, and Space. The attribute tabindex="0" on buttons helps manage tab order more effectively.
To check contrast and optimize a 4.5:1 ratio for visually impaired users, you can use the Contrast Checker tool available here:
🔗 https://webaim.org/resources/contrastchecker
Even for people without visual impairments, good contrast always enhances page readability.
For images, the alt attribute is a must-have. Here’s an example that speaks for itself:
The second example with the aria-describedby attribute
This attribute allows a screen reader user to understand that an element is an error—something they wouldn’t grasp if the only indication were the color red, especially if they are blind.
Checking Your Website’s Accessibility
If you’ve applied some of the best practices listed above, that’s already a great start—and better than most websites on the internet.
A tool to ensure you’ve done your job properly for users is Lighthouse, which is directly integrated into Chrome’s developer console. It helps verify whether your site meets accessibility standards. Another alternative for those who don’t use Chrome is the Axe DevTools plugin.
Frequently Asked Questions
To wrap up this article on accessibility, here’s a FAQ section that also serves as a recap of the key points covered.
● Why is web accessibility important?
It allows people with disabilities (visually impaired, hearing impaired, etc.) to use the website. Making a site accessible is providing them with equal access.
In some countries, it also helps reduce legal risks by complying with ADA, WCAG, or the Equality Act guidelines.
Indirectly, accessibility improves SEO (e.g., using alt tags) and enhances user experience (UX).
● How can I improve color contrast on my website?
It is recommended to follow the 4.5:1 ratio suggested by WCAG.
A tool like Contrast Checker helps ensure your page’s content is readable.
● What should be included in an image’s alternative text (alt attribute)?
Describe the content and the information the image is meant to convey.
● How can I make my site accessible to screen readers?
- Avoid overusing
<div>tags when unnecessary. - Use proper semantic tags to structure your content better and improve readability for users (
<button>,<label>,<section>,<nav>, etc.).
● What tools can I use to test my website’s accessibility?
- Lighthouse (built into Chrome) for a quick accessibility audit.
- Axe DevTools for a more in-depth analysis.
- NVDA (Windows) or VoiceOver (Mac)—these are screen readers used by visually impaired users. Testing them yourself is highly recommended.
