Essential Tips for Designing Accessible Websites for All

Semantic HTML

Introduced in 2014 with HTML5, semantic HTML is HTML code that uses tags effectively to describe the purpose of different elements. Some of these tags include <header>, <footer>, all <h> tags, and the <p> tag. These tags tell both the humans and browsers its purpose, allowing both web browsers and assistive technology to navigate your site better.

There are also non-semantic HTML elements, which include the <div> tag and the <span> tag. These tags give no information to the computer as to why they are there. These tags should only be used for styling purposes, we should try to be as semantic as we can.

Provide Text Alternatives

Whenever you create an image in your HTML code, you will notice the "alt" tag as one of the attributes. This 3 - 4 word attribute describes what the image is. If you have a person riding a bike, the alt tag could simply be "man riding a bike". This once again is another element that allows people with assistive technologies to use your site. Once the technology gets to your image, they will read out loud what your alt tag is. Never make an image without an alt tag!

Ensure Good Color Contrast

When creating designs for your site, make sure you have a high color contrast, as this can improve readability for people with low vision or color blindness. There are a few tools online that you can use to test your designs, I use WebAIM's Contrast Checker when checking my color choices.

Keyboard Navigation

All assistive technologies rely on you correctly setting up your keyboard navigation to allow the software to flow through the site properly. All of your interactive elements such as links and forms should all be accessible through the use of only your keyboard. Many users also prefer to navigate the web with the keyboard as well. The use of uncommon browsers such as on a video game console also relies on the use of keyboard accessibility.