Everything You Need to Know About Web Acessibility
Everything You Need to Know About Web Acessibility 관련
The web is a great place to access information and connect with people. It has opened up countless opportunities, making life more convenient in many ways.
But not everyone experiences the web in the same way. Websites are difficult to use for people who have visual, hearing, or mobility impairments. These barriers make it harder to navigate content, and in some cases, make the web completely inaccessible.
This handbook will help you understand accessibility and how to implement it. Whether you are a beginner or an intermediate developer, you'll learn basic accessibility practices and some advanced techniques. This will help you make your website more inclusive.
Let’s get started.
Testing Accessibility with Tools
There are several tools you can use to test the accessibility of your page. Lighthouse in Chrome Developer Tools is an open source tool that analyses a web page for performance, accessibility, SEO, and more. It generates a report on how a page performs in these areas.
Let’s see how it helps in analysing the accessibility of a page:
Open Chrome Dev Tools and navigate to the Lighthouse tab. Click on “Analyse Page Load" and wait for a few seconds. It will show a report that contains info on how your web page scored on Accessibility and other metrics. It will list down any accessibility issues you may have.
Let’s take the following example:
<h1>Welcome</h1>
<img src="image.jpg" />
<button tabindex="2">Click Here</button>
<div onclick="alert('Clicked!')" class="button">Click Me</div>
<form>
<input type="text" />
</form>
When tested with the Lighthouse audit, it yields the following results:
As you can see, it’s scored 74 on accessibility, meaning there is room for improvement. It has also shown the accessibility issues within your HTML code, as you might have guessed looking at the code:
- Image elements do not have
altattribute - Form input does not have a label
tabindexvalue is greater than 0.
Let’s correct these issues and run the test again:
This time, it has scored 100 on Accessibility since we have followed all the basic practices.
As you can see, this is a really simple HTML page, and it’s much harder to achieve a score of 100 for large websites. But, you should aim to achieve as high a score as possible. This shouldn’t be too challenging if you make accessibility a part of your development process.
The accessibility score on it’s own does not mean your website is fully accessible. You also need to test the following:
- Manual testing with a screen reader (Mac’s Voiceover or Windows’ Narrator).
- Keyboard accessibility – test whether each and every part of your website is keyboard accessible
- Simulating your website with different color contrasts for different visual impairments.
For simulating, Chrome Developer Tools provides a Rendering tool to emulate your website on different preferences, like light/dark mode, high/low color contrast, reduced motion and various visual impairments.
To access it, open Developer Tools, do ⌘+shift+P (Ctrl+Shift+P on Windows) and type “Rendering". It will open the following window:
If you have added media queries like the following, you can select these preferences and test whether your website behaves accordingly:
@media (prefers-reduced-motion) {
* {
animation: none;
}
}
So, when you select prefers-reduced-motion, you can test if all the animations have been disabled, and how your website functions.
Apart from the Developer Tools, there’s an NPM plugin called eslint-plugin-jsx-a11y that evaluates React JSX code for accessibility issues.
You can find all the code snippets on GitHub (KunalN25/accessibilityguide).
Conclusion
Accessibility isn’t just a feature added on top of your code – it should be a part of the development process. When you make a website accessible to everyone, it not only increases your user base, but also promotes inclusivity.
Even though the primary benefactors of accessibility are people with disabilities, it also benefits other users by making the website easier to use overall. A lot of the practices mentioned in the article, like using semantic elements, adding the right attributes, and so on are very easy to follow and go a long way towards ensuring accessibility.
If you are a beginner, you have already done a great job learning about accessibility. Start including simple accessibility practices in your projects. Over time, including these practices will become a natural habit.
I hope this handbook becomes your go-to resource for anything related to accessibility. If you think I've missed something or need clarification on any concepts, feel free to reach out to me on Twitter. For more content on web development, check out out my profile.
References
