How To Design Accessible Prototypes

Learn 6 Different Ways To Conduct Accessibility Testing

Conducting Accessibility Testing

Accessibility testing can be done at two different stages: either during the website's design phase (during development) or after the website's launch. To make sure your content is usable to all users and to improve access to information, it's better to perform accessibility testing before the website is live.

6 Ways To Build Accessible Prototypes

1. User Personas
2. Clear Colour Contrast
3. Form Design
4. Focus Indicators
5. Cascading Stylesheets
6. Navigational Hierarchy

1. User Personas

User personas represent the whole segment of the audience without a disability. Accessibility personas help identify the barriers, frustrations and common issues that people with disabilities face when using inaccessible products and often result in benefits for all users.

2. Clear Colour Contrast

The website should have a highly contrasted UI which means the website should have the appropriate colour contrast specified by WCAG.

For people with colour blindness or other vision problems, high contrast makes text much more legible. Make sure the colours on the page and in images, graphs and charts show a strong contrast.

3. Form Design

Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities.

In required fields, consider using an asterisk and use symbols to denote error and success.

Make sure the structure layout of the content is easy to understand and could stand alone without images.

Make sure to use descriptive alt text (This is a great step to ensure the site is accessible for blind people).

4. Focus Indicators

Focus indicators make elements stand out against the background, which is particularly useful for less motor-skilled people.

A focus indicator is a visual indicator that highlights the currently focused element. This visual indicator is commonly presented as an outline around the element.

5. Cascading Stylesheets

Make sure visual design is included using CSS. This is the most efficient way of displaying web content.

Select sensible font sizes, line heights, letter spacing, etc. to make the text logical, legible, and comfortable to read.

Make sure the headings stand out from the body text, typically big and bold like the default styling. The text colour should contrast well with your background colour.

6. Navigational Hierarchy

The information hierarchy should be simple. Menus are the list of links that allow the user to navigate hierarchically through a website.

In most websites, a primary menu will be at the top of a desktop version of a site, and a local menu will be in the left or (less frequently) right sidebar.

In mobile websites, menus are often hidden behind icons or located within dropdown lists. Footers and headers often contain additional menus for utility links.