Gone were the days when we invested too much on Search Engine Optimization just to get hoodwinked and down again. As the biggest search engine in the world, Google has written a list of the top 10 things they believe, and the first thing on the list is: Focus on the user and all else will follow. Focusing on the user is difficult. Amid all the user research and testing, we don’t have a sure, template-like tactic that will deliver users to our site. However, as we progress how we market our services, we learn that usability and user experience are integral to a consumer’s decision journey. As the Internet continues to evolve, there’s a significant amount of users that cannot “access” the wealth of information available online. These users are the disabled population; those who cannot read due to visual or cognitive difficulties, those who cannot hear without the use of assistive hearing devices, those who cannot navigate through a website due to motor impairment, and more. To make your website accessible to the disabled, your website should be correctly designed, developed, and edited to make most, if not all, of its content and functionalities available and accessible to every audience. These tips are based from the official Web Content Accessibility Guidelines (WCAG) 2.0, one of the most widely-accepted international standards for accessibility.
20 Website Accessibility Tips
- It all starts with content. The information written in your website should be as simple and as plain as possible for easy comprehension. Avoid writing long sentences and paragraphs. The visually challenged users depend on different tools like screen readers or magnification features to help read your content.
- Use proper content formatting. Use headers to help create an outline for the page. Proper use of headers and subheadings can help screen readers and search engines understand how information is outlined in the page.
- Add text descriptions for images, videos, etc. Images and videos cannot be “read” by screen reader, but text descriptions can help visually impaired people to understand the meaning of these multimedia elements. Use alt texts or caption to define an image. Spacer images and design graphics can be left out.
- Add or maintain a sitemap. Sitemaps aren’t just for search engines, they’re for accessibility too. It helps people navigate throughout the website, and it is a must to be included in any site.
- Create lists with simple numbering. We recommend using small lists instead of mega lists. Also, limit using nested lists. There have been several attempts to make it possible for screen readers to get this comprehensible for their users, but using nested lists only resulted to making the lists longer.
- Make font sizes enlargeable. Allow users control on the font size. Relative font sizes give users the freedom to select their preferred font size; this will help users with visual acuity problems to read the text better. There are numerous plugins for WordPress that can help, or you can tweak this through your CSS.
- Choose high contrasting color combinations. It will make it easy for visually impaired users, such as those who are colorblind, to navigate through your website, and understand its functions and meanings.
- Better Navigation Paths. A clear, logical, visible, and understandable navigation is important. Its structure and name should be easily recognizable; we understand that being unique is just being creative, but using familiar words for the navigation menu will help them understand it better. Plan your navigation thoroughly, and avoid deep levels of content.
- Goodbye, Flash. Majority of the disabled users cannot view Flash, or even use it for navigation. Even Google has bid goodbye to Flash on its ads; Google and Mozilla has already pulled the plug to support Flash plug-in. It’s simply an outdated web design technique; HTML5 can do more than what Flash can offer.
- Main content should be above the fold. There are several elements that can be seen above the fold: navigation buttons, call-to-action, and even ads. These can be a nuisance especially to disabled users, so it’s important that the content is served right away above the fold. Screen readers “read” from left to right, top to bottom. If there’s a lot of things above the fold, it would take some time for these users to get to the main content.
- Add a Skip-to-Main-Content. However, if it’s unavoidable to set the main content aside, adding a skip-to-main-content link. It can also be useful for the disabled who do not use the mouse but use the keyboard for navigation. This should be visible as much as possible.
- Form elements should have labels. Forms should be properly labeled for guidance; this does not only help the disabled, but it makes it more user-friendly for all users as well.
- Stop using flickering, flashing effects. In creating ads and animations, never consider flickering, flashing effects. Not only does it disturb or make users dizzy, but these effects can trigger seizures in some people.
- Acronyms should be spelled out. This should be a writing habit for everyone. During the first time you mention the acronym, you should spell it out, write it in full. It wouldn’t hurt to write it again on another part of the content.
- Another outdated trend: Frames. There’s no point in using frames, whether you’re considering web accessibility or not. Frames are accessible, but it can be disorienting for both disabled and non-disabled users.
- Keyboard shortcuts. This can help disabled users that do not use the mouse for navigation. Keyboard shortcuts will make it easier for motor-impaired users to navigate throughout the site easier and faster.
- Consistency in Layout. Creating a superb web design can indeed boost user experience, but for sites that would need to comply to accessibility provisions will find that a simpler, minimalistic, consistent design will be more beneficial for disabled users. A consistent layout will help them with navigation
- No need for tables. Tables are good for processing data and getting it organized, but when it comes to accessibility, it’s a big no-no. Because of its non-linear properties, screen readers and other accessibility devices cannot parse or understand the data on the page.
- Stop setting everything to automatic. There are some elements in a website that can be set to automatic: playing a video, going to the next slide, playing an audio clip, and even scrolling. However, it would be better to have the user enable these multimedia themselves. A disabled user might need some more time before he scrolls down further, or before going to the next slide.
- Test, Check, Validate. There’s always room for improvement, and you can’t possibly fix everything and anything all at once. Validate your pages against the WCAG 2.0 requirements. There are various checkers that can help you check your website for accessibility compliance.
BONUS: Website Accessibility Checker Tools
Having an accessible website does not need any accreditation or certification, but if you’re an institution that’s required to have your site accessible, you need to comply with the set guidelines by WCAG 2.0. Here are some online website accessibility checking tools that you can use to check and validate your website’s compliance to accessibility:
- A11Y Compliance Platform by Bureau of Internet Accessibility
- Accessibility Checklist by Elsevier
- Accessibility Developer Tools by Google Accessibility
- ColorTester by Alfasado Inc.
- Contrast-Finder by Tanaguru
- DYNO Mapper by Indigo Design Company LLC
- WAVE by WebAIM
We hope that this beginner’s guide can help you start your journey towards accessibility! John Stevens owns Hosting Facts, a website hosting review site. They also offer unbiased web hosting reviews backed with real research and human data. He cares about web accessibility because of the wide range of friends he meets online and offline. Outside the Internet, he’s just another man who spends most of his mornings grooming his beard to perfection.