Web Accessibility Basics

October 01, 2020

Web 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 a 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

W3.org

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.

What is your experience with web accessibility? Do you have some resources to share? Connect with me to get the conversation going!

Photo by Sora Sagano on Unsplash