Screen readers

Navigate your product with a screen reader to ensure that even if the user can't see your interface, they'll still have an equally understandable experience with a screen reader. There are different screen readers on the market - some are free and some are not - they differ in functionality and levels of support.

If you are building an Android or iOS app, we recommend you use Android's and iOS's built-in build-in screen readers - TalkBack and VoiceOver. You'll find them in the settings menu. Please note that it might take some time getting use to.

If you need to test on a computer, you use VoiceOver on Mac OSX or NVDA - NonVisual Desktop Access. If you're building a website and you can access it on your phone, you can of course use TalkBack or VoiceOver on your Android or iOS phone too.

Tabbing through the UI

Always try navigating through your product using only your keyboard. The basics of keyboard testing is simple — make sure you can navigate to every interactive control using the Tab key and then use enter, (sometimes spacebar) to select an element and the arrow keys for in control navigation. If you're interested you can learn more about keyboard navigation.

You can also use Accessibility insights for web to get a visual indication and order of your tab order (found under their Ad hoc tools).

While testing this out, make sure that every interactive control that gets in focus, has a visble focus state that fulfills contrast ratio requirements.

Contrast checking

As a visual designer, art director, product designer, UI designer it's important that you assure a good contrast ration for text and other elements. You can use Color Contrast Analyzer, it works for Windows and Mac OSX so you're not bound to the browser or any specific application.

You can install the Stark plugin for the design tools Figma, Sketch, and Adobe XD if you prefer.if you prefer.

If you don't want to install plugins or software, there are many other contrast checkers on the web. There are many examples out there so just find your favorite.

Layout

When developing and testing it's important to check that your layout has been implemented in a manner that will make sense for everyone.

With Accessibility Insights for Web , there are visual aids that make it possible to assure that the level of headers are correct (h1, h2, h3, etc), and with the the Ad hoc tools you can check that appropriate landmarks have been set.

Simulators

There are simulators and tools out there that you can use to get a better understanding on how people will experience your product, especially when it comes to visual impairments and limited motor skills. These tools might not be something you use on a daily basis when designing, implementing or testing our your products but they can be helpful to use when making decision regarding layout, color and size.

Below are some examples listed.

• Simulate different vision impairments such as, colour deficiency, contrast loss, blurry vision, blocked visual field, etc, with Silktide - website accessibility simulator. This is a free extension to Chrome.
• Simulate different kinds of colour deficiencies with Color Oracle
• Simulate color blindness, far-sightedness, Parkinsons or dyslexia with Web Disability Simulator. This is a free extensions for Chrome.
• Simulate different kinds of affects on vision, like color deficiency, contrast loss, blurry vision, blocked visual field, etc, with No coffee Vision Simulator. This is a free extensions for Chrome.
• Simulate different deficiencies such as, colour deficiency, blurry vision, dyslexia, tremors, partial vision, etc with Funkify. This is an extensions for Chrome, you can test out a limited set of options for free but you need to pay to get the whole set.

Magnifying glass

Some people with limited vision use a magnifying glass to zoom in on different parts of the screen. This can have implications on how you should lay out different elements so users can find them more easily when using the magnifying glass.

Windows 10, mac OS, Android, and iOS come with magnifying tools that you can try. You'll find them in the settings menu.

Automated tools

If you're building a website or application, some automated tools can check and pinpoint any accessibility issues that are found in the website. Please note these tools do not cover every aspect of accessibility. They are however a good option to make sure you haven't made any basic accessibility mistakes in your code.

View some examples below:

• Google Lighthouse- can be used either in the Chrome browser (in DevTools) or as a Chrome extension. Its also possible to run automatically during continous integration and fail your builds if the score drops below a certain level.
• axe - Web Accessibility Testing - can be used as a Chrome extension.
• WAVE Web Accessibility Tool - a website where you can copy and paste any URL to run an audit. It can also be added as an extension to Chrome and Firefox.
• Accessibility Insights for Web - can be used as an extension in Chrome, Edge or Android.
• Cypress-axe - plugin, is a Javascript testing framework that runs accessibility checks at any given moment and fails tests if any issues are found.
• W3 validator - validates the syntax of your code to assure that assistive technologies present the content correctly to the user.

There are also linters that can be used to help you write more accessible code. This eslint checks accessibility rules for javascript elements.

The number of tools are always growing so we recommend that you do some research from time to time.