Top 5 things to review in an Accessible Design Review

I’m a huge advocate of accessible design reviews. Picking accessibility issues up early for me is absolutely key. It’s much harder and more costly to have to retrofit accessibility after designs have been coded than considering it upfront, building it into the process.

Through Covid-19 I’ve been lucky enough to be working with a digital agency for whom accessibility was a key requirement from the client. They wanted our accessibility help, but were under real time pressure. So we created a new way of working, to deliver bitesize accessibility help for projects with tight timescales.

It’s since formed the basis of our Snapshot Audits – short sessions where our experts help our clients review the accessibility of a key part of their product, whether it’s a key user journey in a live website, or the design of a new addition that they are creating.

In this case, it started off with an 1-hour review, looking at the homepage design as a ‘strawman’, not a final design. We picked up around 20 issues in the first session. As the client said, far better to get this right now than later down the line.

My top 5 accessibility topics to look at in a design review

I’m going to share five key things I looked for in the design review. What was really interesting for me is was the level of client interest in how design impacts accessibility, and how we used that understanding to make design decisions. I found this really encouraging – the review didn’t simply have a practical role, but also embedded accessibility principles and thinking into the product owner’s mindset.

So, here are top my 5 accessible design review topics, and some of the things we learnt with this particular client. At a time when digital projects are being accelerated in response to the coronavirus, thinking about these in your designs is a quick way of considering accessibility:

1.  Think about accessible copy

• Make sure every input field has a label. We had placeholder text in the search and form fields rather than visible labels next to them. This is much easier to fix at design stage.
• Start thinking about the alt-text for images such as the logo during design. Is it just a logo or a link to the home page too? The techniques for adding alt-text are easy to grasp but writing good alt text is a skill that’s needs thought.
• Start to discuss headings, thinking about the structure of the page.
• Check for use of ALL CAPS or italics, both of which have accessibility challenges.
• Line height and spacing for text are important to flag as things to be considered carefully, even if it’s too early for a full discussion.

2.   Don’t forget about the focus indicator

• Something I flag early in the design stage is the keyboard focus indicator, which is absolutely key for anyone tabbing around the page to see where they are at.
• The browser gives you a default indicator – Chrome’s one is pretty good, but often with Firefox and Internet Explorer it’s not clear.
• So consider creating a bespoke focus indicator for the site. We didn’t manage to solve it straightaway in the review time but now we’ve got it on the table so the designs can progress. We can then work out the best color to use for the focus indicator.

3.   Check your colour contrast

• We had an issue where the colour contrast of the brand pallete being used was not sufficient. I pointed the designer at a great tool that gives suggestions of colours that will pass accessibility contrast ratios. In this case the client was flexible about tweaking their brand colours, and accepted that they needed to be amended slightly to meet the accessibility goals of the project.

4.   Don’t just use colour to convey meaning

• We talked about places that used color to convey meaning. Traffic lights are a great example of how position alongside colour delivers meaning – people who are colourblind may not be able to tell the difference between red and green, but all can learn to “stop” when the light at the top is showing
• One element of the design included Red-Amber-Green status information – the reliance on colour alone made that difficult to comprehend, for colourblind people, so we added textual information too.
• Brand colours were also being used in a haphazard way to sometime denote clickable content, sometimes not. We explored consistency and additional visual cues (e.g. underline could potentially resolve this.

5.   Design in anticipation of text resizing

• Issues around text couldn’t be resolved at this point, but we created a list of questions to be asked as we moved forward:
  • Do we have to worry about how the website responds to text resizing?
  • Is relying on the browser zoom functionality enough?
  • Should the website respond to mobile text resizing settings?
  • How should the design flex to handle resized text? – what is Re-flow?

Text resizing is one key example of the challenges of designing for low vision. I will look at this in a separate blog Designing for Low Vision.

Make sure you have the skills to review accessibility at design stage

At Hassell Inclusion it’s our mission to make sure all designers have accessibility in their toolbox, and are thinking about accessibility as early as possible. We can lead you through accessible design reviews of your sites or apps, or we can train you to do it yourself in our Design Training.

Want more?

I hope this blog has been useful. I wrote it in response to a question that was asked of us in our recent Digital Accessibility Experts Live sessions. If you have any questions, please add a comment below or contact us to discuss what you need.

We’ll be sharing more of our answers to people’s accessibility questions from those sessions over the next few months, so sign up to receive our newsletter if you don’t want to miss any.