4 ways we design inclusively when our design tools don’t!

We know that accessibility starts early on at the strategy and design phase. Unfortunately, web design tools have considerable accessibility barriers. For us, it means that not all team members can access our designs. We’ve had to come up with a way to be able to collaborate as a team. For every design, our designers and our accessibility consultant (who is blind) work together. Here are the things we do.

1. Talk through designs verbally

We emulate the screen reader experience by verbalising the layout, structure, and intent. Just for fun, sometimes one of us reads the copy, while another plays the role of the alternative text voiceover. We cross check WCAG criteria with each other as we move through the design. This session very quickly highlights any content flow problems and which interactive elements to carefully design.

2. Find live examples of interactive elements

We look at these together and discuss how others have designed and built it, and what the accessibility experience is. This guides us on what to do and what not to do.

3. Create Word documents for the copy

These structured documents include heading levels, structural cues, and snippets of HTML like <input field> to signal interaction points. By creating and reading through this word doc, we see the copy from a better perspective. Inevitably we improve on the page structure and wording of headings.

4. Co-author alt text for images.

We discuss the meaning of the image and create alt text that is meaningful for a screen reader user (and SEO).

By using these blended methods of consuming the content, the final design improves significantly.

Try these steps out for yourself. Tell us how you have tackled the problem of inaccessible design tools.