10 Things to Consider When Creating a Fully Accessible Website
According to the World Health Organization, at least 2.2 billion people worldwide have vision impairments. In the U.S. alone, 20 million people suffer from eye conditions that compromise their vision. Meanwhile, 12.8 million age 12 and up suffer from moderate to severe hearing loss. Overall, 48.9 million Americans have some form of disability, 17.5% of which have a functional limitation. Because the internet has made it possible for businesses to reach millions of people, it is not unlikely that a significant portion of your website visitors have some form of disability. Web accessibility means making websites, tools and other technologies accessible to everyone, including those who have disabilities. It encompasses all forms of disability: auditory, cognitive, physical, speech, and visual. It might seem challenging on the surface, but creating a fully accessible website is fairly easy. Here are 10 things to consider to make your website fully accessible to everyone. Table of Contents
Easily Accessible Content
No Media Automation and Navigation
Alt text for all Images
1. Easily Accessible Content One of the major accessibility requirements for ADA-compliant websites is fully accessible content. Start by choosing a content management system (CMS) that supports accessibility. This way, you won’t have to deal with the difficult process of coding just to incorporate tools and functions for the said users. Common examples are Wordpress and Plone but many others offer similar accessibility features. Other ways to make it easy for disabled users to access your content are:
Use headings to organize and structure your content. For example, use <h1> for the title and <h2> for subheadings.
Make sure that all links are clickable. If there are links on your article body, emphasize it by using bold or highlighting it. Use text to describe where users will be redirected if they click on those links.
Divide your content into several categories that users can click on.
Add a section that will guide users with disabilities on how to properly navigate your site.
2. Keyboard-friendly Website Keyboard accessibility is a major element of web accessibility. Some users who are blind rely on the keyboard for navigation. People who have multiple sclerosis or Parkinson’s disease have mobility issues and weak muscle control that makes using mouse pointers or touchpads impossible. Others don’t have hands at all and make use of modified keyboards or similar devices. Keyboard-only navigation. Consider giving users an option to navigate your site completely using their keyboards. Keyboard navigation should be logical and intuitive which means it should follow the proper visual flow (e.g right to left, top to bottom, header first, etc.). Tab key The “tab” key is used to move forward, and the SHIFT+TAB to move backward. Other keys that are crucial for navigating a website are <Enter>, <Space>, and the arrow keys. 3. No Media Automation and Navigation It’s not just annoying to see videos or audio files playing automatically when you visit a website. It’s also frustrating especially for users with disabilities. The elderly, visually impaired, or those with cognitive problems may find it hard to grasp information from slideshows. Also, turning off media can be difficult for people relying on a screen reader while those with hearing problems might find certain sounds frightening or disturbing. 4. Alt text for all Images Alternative texts are used as a replacement or substitute for an image when it fails to load. But it also helps users with visual impairment easily understand what’s on the image, especially those who use screen readers (devices that translates texts into audio). Here’s the even greater news: alt text can even improve your site’s SEO. 5. Contrasting Colors An accessible website has elements.That distinguish it from a non-accessible site. How is that done? The text should stand out against the background. It’s all about the contrast. For example, using similar colors for the text and background would make it difficult for users to read the information presented. According to the Web Content Accessibility Guidelines (WCAG), the contrast ratio for small texts should be 4.5:1 or higher while for large text it should be 3:1 or higher. Test color combinations. It’s a good practice to test color combinations before using them on your site. This can be done easily using some free online tools. 6. Resizable Texts Many people with disabilities use mobile devices to access the web, according to a survey. It’s important to make your website mobile-friendly which includes ensuring that the text adjusts to the size of the screen from where it is viewed. 7. Simple Tables Tables are an easy way to present data. But you want to stick to simple tables and only use it for tabular data. For other contents like lists, categories, layouts, and articles, skip the tables because they can be confusing to look at from a screen reader or similar devices. 8. Structured Content Structuring your content will keep it clean, organized, and easy to read or follow. To properly structure your content, it’s a great idea to use in-page navigation and headings. In-page navigation Navigation inside pages helps users orient themselves on the page and find the specific information they need. You can do this by linking headings to sections that correspond to them. One heading per page <h1> should be used once per page, as the primary title. You can divide the rest of the page content using subheadings: <h2>, <h3>, <h4>, and so on. Do not skip a level. 9. Content Accessibility It’s not just the design that matters. You should also keep content accessibility in mind when creating content. For example, you should write out acronyms, incorporate descriptive names and alt text for images, and use natural language whenever possible. 10. Accessible Forms Forms are important for any website. They are used to gather contact information from customers, process orders, review shipping status, etc. Filling out forms can be challenging for people with disability so always consider accessibility when designing forms. Each field should be clearly labeled. Place labels adjacent to their respective fields and use the appropriate font size for them. Provide instructions and information. Keep instructions brief but easily understandable. Set up automatic notifications that alert users when they input incorrect or invalid information.
David Gevorkian David started Be Accessible because of his passion for website accessibility and ADA compliance. He spent much of his career working for financial institutions creating websites and mobile applications. He earned his Master’s in Business Administration from Salve Regina University in Rhode Island. David is an advocate for creating web interfaces usable by all people. He enjoys recording music and playing soccer with friends.