New to Web Accessibility? Start Here!
If you are new to accessible web design you’ve most likely come across the W3C website. The W3C stands for the Word Wide Web Consortium ( a mouthful, I know), and they decide the proper conventions for HTML and CSS. They provide useful information, but it can be hard to digest. Here are somethings you should know to get started.
Use the Right HTML Tags
Each element on a page has its own HTML tags. Web designers need to be mindful of the hierarchy of information because it directly affects how assistive technologies work with the HTML. Propper use of HTML formatting allows content to be correctly read aloud, enlarged, or adapted to meet the needs of different people.
<h1> Important info to be read first <h1>
<h2> Secondary headers <h2>
<p> Body text <p>
<button> This should be self-explanatory <button>
<nav> Your navigation bar goes in here <nav>
Style the Page With Intention
Once you have the HTML set up, you will need to style your code to not look like a webpage from the 1990s. Make sure that color is not used as the only method of conveying information in your web designs. Not only can this be harmful to people with color blindness, but people have a harder time seeing color contrast as they age. You will also want to make sure that your text color has enough contrast against the background. There are many online tools to help with this. Text should be legible and scalable from any size, but try not to go below 12px. When possible, it is better to use the ‘em’ unit for type which makes the font size proportionate to the browser defaults. Other elements like buttons should be designed large enough to touch activated and need to be accessible by using the TAB key.
You Need Supplemental Text for Non-text Content
Images, buttons, charts and other user interface components are all elements that can prevent a person with a disability from using a website properly. These text alternatives typically come in two forms: alt tags and ARIA-labels. Alt tags are typically added to images like shown here:
<img src="img/questionMark.svg" alt="help button">
It is important to think more about what the purpose of the image you are describing and less about describing it literally as shown above. A screen reader will read aloud the tag to help users have a better understanding of what that element is. ARIA- labels are helpful for buttons and other toggles that the user will control by keyboard navigation or voice input.
Use Straightforward UX Patterns
People do not like being confused. Make sure you think about how information is arranged on the page from a logical perspective. It should be immediately clear to the user where they are on the website, and what the most important part(s) of the current webpage is. If the site has any type or menu or navigation, make sure the design and location are consistent throughout the site. All forms should be clearly labeled. You should make sure that your forms also have descriptive instructions, error messages and opportunities to review and correct a submission.