Websites, E-Commerce
and ADA Compliance Solutions

Web Accessibility Audit Tips and Tricks

There are many tools available in the market to perform accessibility audits. No one tool is perfect. We use multiple tools for better results.One tool might not be enough to catch all accessibility issues. Some commonly used tools include WebAIM(Wave), Lighthouse by Google, PowerMapper, voiceover and JAWS screen reader. These tools can catch obvious high level issues. However the real test is when a person with disabilities actually tests the website.

• Check if you  can navigate using the Tab Key of the keyboard only. Is there a focused style as you move around the page? A focused style around different elements on the page makes it easier to navigate around the page. We should be able to reach every interactive element on the page using the Tab key on the keyboard.
• As we move around the screen using Tab key, there should be no off-screen contents that can accidentally be focused. Off-screen interactive contents must be disabled.
• Having a developer with voiceover and JAWS familiarity helps to test and fix compliance issues.
• First time you hit Tab, you should get the option called a skip link on the top left side of the screen. Skip links are very useful on sites where there is heavy navigation. Skip links lets the user skip down to the main content immediately.
• We must make sure that images have Alt-text. If an alt-text is not used, then the screen reader ends up reading the file name which could be very uncomfortable and is not ADA compliant.
• The website must be built using proper alt attributes. There must be proper custom controls like buttons using either custom elements and divs with JavaScript and the elements should be interactive with screen readers.
• Page must be properly structured using appropriate headings, landmark rules or landmark elements on the page. A properly structured page helps screen readers navigate the page well.
• H1, H2, H3 tags must go all the way through the hierarchy of headings. Headings should not be mixed and matched based on the size that they are. This can generate a kind of broken document for the screen reader. We want to make sure that developers are using heading tags to basically build the skeleton of the page so we can move through the contents in a sort of logical way.
• We want to make sure color and contrast is appropriate. Someone with low vision impairment is able to discern the text on the page. There are some Chrome extensions available which can help us mitigate color contrast issues. These extensions can provide paths of the CSS to assist you mitigate the problem.

The above guidelines will not fix all the underline compliance issues, but they will certainly set up a baseline experience for people with disabilities.