Loading Please Wait...

How to Keep Your Design Work Accessible

27 March 2019
Tutorials

How to Keep Your Design Work Accessible

Did you know 1 in 5 people in the UK are affected by disability? This includes issues such as impaired vision, mobility difficulties, cognitive difficulties and more, all of which can affect a person’s ability to perceive your design work. Do you really want to be excluding a 5th of your audience?

Web design in particular is an area that needs to improve its accessibility rates. Currently, 70% of UK sites are considered inaccessible. This is particularly odd when improving your site’s accessibility comes with the added benefits of improved usability and improved SEO!

If you’re beginning to see the importance of accessible design, read on and discover what you can do with your artwork. Be aware that many of these tips are specific to web design but there are also points you can take on board for printed design.

Visual Impairments

Avoid Difficult Colour Combinations

In general, be aware of how contrastive your colour choices are – particularly when it comes to text and the background colour. If you’re not sure, you can test your designs with tools like the WebAIM Colour Contrast Checker. On top of that, try to avoid colour combinations that are known to be confusing for viewers who are colour-blind; red/green, light green/yellow, and blue/purple.

Don’t Just Use Colour to Indicate Differences

Changing colour is a simple way to indicate differences is design without adding extra elements. For example, in web forms, changing a box’s colour to indicate the field still needs filling in (see the example below). Unfortunately, just using colour isn’t distinct enough for everyone. Combining colour with icons and/or text descriptions is much clearer.

Use ALT text and Transcripts

Online, people with visual impairments can use a screen reading software to describe the page’s content to them. That means they’re not necessarily missing out on your imagery! However, they will miss out if you’re not including the information in the background code. Using descriptive ALT text on images and transcripts for videos means they can still access the content.

Make Use of H-tags in HTML

Screen readers are great tools for users with visual impairments. They are dependent on good coding however. The software won’t pick up style changes, like emboldening or size changes, so sometimes headers can get lost in big stretches of text. To break things up, make sure you’re using header tags in your HTML code.

Allow Keyboard Navigation

Imagine being unable to see the cursor on the screen and trying to click on a link that you also can’t see. It’d be impossible. That’s why many users with visual impairments use keyboard commands together with a screen reader to navigate websites. Users can tab through links on a page, going left to right, top to bottom. Make things easier by ordering your links in a logical manner.

Bonus tip: add a link at the top of the page along the lines of “skip to main content”, like WebAIM have done. This can save users time tabbing through all the other usual links that appear at the top of web pages.

Mobility Difficulties

Make Clickable Items Big

Another web specific design note, precision isn’t always easy for some users. You can make things easier for them by giving them something clear to aim for. Not only that, but you can keep clickable items separate too. This will help to prevent users from clicking the wrong thing by accident.

Keep Timeout Sessions Reasonable

When fine movements are difficult at the best of times, you don’t want to add stress to your users by rushing them. Give people plenty of time to coordinate themselves. This is also relevant to anyone using keyboard commands as it can take more time to tab through to the relevant sections of a page than it does to use your mouse and click.

Other Considerations

Keep Your Language Simple

For users who have difficulty processing information, jargon and complex language can only make matters worse. Try to avoid figures of speech too as they can be confusing to users with autism or even just users whose first language isn’t English. Keeping your language simple helps everyone understand.

Don’t Force Users to Remember Things

Where possible, keep all relevant information in one area. If users need to remember things from previous pages, whether that’s online or in printed medium, processing gets harder. Use prompts, summaries and reminders to support your users.

Explain Things Fully

Some users can become destressed easily if there’s confusion around what they’re doing. Lay out exactly what is required of them, what is not required of them, and what is going to happen next. This can all help to reduce anxiety.

Keep Text Clear

The British Dyslexia Association have release design guidelines on how you can make copy easier to process for people with dyslexia. These notes include using sans serif fonts; using a minimum font size of 12pt; avoiding italics or underlining where possible; and avoiding text in all-caps. See the 2018 guide yourself for a full account of their tips.

Testing

Really, the best thing you can do to make sure your designs are accessible is to test it out and ask questions. Using just 5 people to test out your website can identify 85% of usability issues. Ensure your test users have a range of abilities and ask them if there’s anything that could be better for them.

Interested in more on website design? Take a look at the Key Structural Elements You Need to Know About When Designing a Great Website. Together with your design skills, these tips will help make sure your site not only looks good, but that it works well too.



Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Thank you for subscribing!