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.

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.

๐Ÿ‘‹ Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

Whatโ€™s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet Deepa Sannappa

QA Analyst


Deepa is a QA Analyst who ensures that final products meet quality standards. She studied computer science and has a Bachelor of Engineering with over 5 years of experience in banking and e-commerce spaces. Deepa is passionate about yoga, meditation, and walking outside. She also enjoys solving puzzles. Overall she likes to engage in activities that energize both her body and mind.

Connect with Deepa