Ana VelaWeb accessibility begins with understanding clean, standard code. It is about keeping an inclusive mindset and using the best practices to build a website. Learning how to remove barriers to make your website easy to use is critical. This is a brief introduction to web accessibility with some practical tips to implement for better user experience.
What is Web Accessibility?
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
- perceive, understand, navigate, and interact with the Web
- contribute to the Web
Web accessibility encompasses all disabilities that affect access to the Web, including:
- auditory, cognitive, neurological, physical, speech, visual
This also includes temporary disabilities such as an injured hand, for example. A website should also be accessible on mobile devices with varied screen sizes.
Understand Basic Website Structure
When developing websites, implement proper basic structure by using appropriate HTML elements.
Each of your web pages should include a logical hierarchy of heading tags and sections.
Need a refresher? Check out this guide to basic HTML basics
If your site has a predictable structure with proper HTML elements, headers, and labels, someone using a screen reader will have an easier time navigating through your site.
You can check your HTML structure by running your pages through an HTML checker which will provide you with line by line details if there are any errors or suggestions to improve the structure. You might also want to check a variety of sites to see what types of errors show up.
Web Accessibility Tools
Axe is a free accessibility checker available for Chrome, Firefox, and Edge as a browser extension. Once installed, you can run an analysis to get a list of any accessibility issues.
Another accessibility checker you can use is called tota11y which you can add as a bookmarklet or directly to your site.
If color contrast is an issue, you can use a Color Contrast Checker to get the exact elements and color pairs that are causing a problem.
Use a responsive design checker to see if there are any issues on various screen sizes.
(Please note that these tools are not perfect, so it is a good idea to have multiple ways to check accessibility.)
Final Thoughts
Accessibility is a broad topic, so I leave you with a collection of great resources for you to learn more.
If you are interested in making accessibility changes to open source projects, check out this article by Bell Omuboye and/or join the Slack channel for this group. See you there!
What is your experience with web accessibility? Do you have some resources to share? Drop a comment below to get the conversation going!
Photo courtesy of Unsplash
