https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

Dos and don'ts on designing for accessibility

Karwai Pun is an interaction designer currently working on Service Optimisation to make existing and new services better for our users. Karwai is part of an accessibility group at Home Office Digital, leading on autism. Together with the team, she’s created these dos and don’ts posters as a way of approaching accessibility from a design perspective.

The posters

The dos and don’ts of designing for accessibility are general guidelines, best design practices for making services accessible in government. Currently, there are six different posters in the series that cater to users from these areas: low vision, D/deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum and users of screen readers.

Thumbnail of the six posters
Posters showing the dos and don'ts of designing for users with accessibility needs including autism, blindness, low vision, D/deaf or hard of hearing, mobility and dyslexia

The dos, that run across various posters, include using things like good colour contrasts, legible font sizes and linear layouts. So, aren’t good design principles applicable to everyone and not just those with access needs?

While this is true, the aim of the posters is to raise awareness of various conditions through good design practice. We need to be mindful of not just designing or building for our own immediate needs. For example, consider designing for keyboard use only. This is particularly helpful for users with motor disabilities where using the mouse can be quite difficult, especially with precise movements, whereas keyboard use is much easier.

Another aim of the posters is that they're meant to be general guidance as opposed to being overly prescriptive. Using bright contrast was advised for some (such as those with low vision) although some users on the autistic spectrum would prefer differently. Where advice seems contradictory, it’s always worth testing your designs with users to find the right balance, making compromises that best suit the users’ needs.

The team

The content for the posters came from our accessibility team in Home Office Digital. Led by accessibility leads Emily Ball and James Buller, we are a group of twelve, each specialising on these conditions: blind and visual impairment, dyslexia, autism and ADHD, D/deaf and hard of hearing, mental health and motor disabilities. Collectively, we learn as much of the conditions as we can to better increase our knowledge so they can be shared within and outside the team.

One of the challenges we faced with the posters was gathering information from our different specialisms and reducing the vast amount of knowledge to ten principal dos and dont’s. There's also challenges surrounding content and graphics. I worked with Nick Cowan, a content designer, who is leading on motor disabilities, to keep the content concise and ensure the graphics visibly represented the advice accurately.

Next steps

We’ve shared these posters across government for feedback and they can be found on GitHub.

We are constantly improving and adding to them so please let us know what you think. Understanding accessibility through design means we can build better services for everyone, whatever their access need.

Update: We’ve been asked whether these posters can be reproduced or translated into other languages. In keeping with the the GDS ethos of making things open, we’ve used a Creative Commons license which allows everyone to share, use and build upon the posters provided they are used non-commercially and keep the appropriate attributions (Home Office, Home Office Digital and the Creative Commons logo). It would be great if people can share photos of them being used on Twitter and can commit translations of the posters to our GitHub repository so they’re available for everyone.

What the posters say

Designing for users on the autistic spectrum

Do

  • use simple colours
  • write in plain English
  • use simple sentences and bullets
  • make buttons descriptive - for example, Attach files
  • build simple and consistent layouts

Don't

  • use bright contrasting colours
  • use figures of speech and idioms
  • create a wall of text
  • make buttons vague and unpredictable - for example, Click here
  • build complex and cluttered layouts

View poster for the autistic spectrum

Designing for users of screen readers

Do

  • describe images and provide transcripts for video
  • follow a linear, logical layout
  • structure content using HTML5
  • build for keyboard use only
  • write descriptive links and heading - for example, Contact us

Don't

  • only show information in an image or video
  • spread content all over a page
  • rely on text size and placement for structure
  • force mouse or screen use
  • write uninformative links and heading - for example, Click here

View poster for screen readers

Designing for users with low vision

Do

  • use good contrasts and a readable font size
  • publish all information on web pages (HTML)
  • use a combination of colour, shapes and text
  • follow a linear, logical layout -and ensure text flows and is visible when text is magnified to 200%
  • put buttons and notifications in context

Don't

  • use low colour contrasts and small font size
  • bury information in downloads
  • only use colour to convey meaning
  • spread content all over a page -and force user to scroll horizontally when text is magnified to 200%
  • separate actions from their context

View poster for low vision

Designing for users with physical or motor disabilities

Do

  • make large clickable actions
  • give form fields space
  • design for keyboard or speech only use
  • design with mobile and touch screen in mind
  • provide shortcuts

Don't

  • demand precision
  • bunch interactions together
  • make dynamic content that requires a lot of mouse movement
  • have short time out windows
  • tire users with lots of typing and scrolling

View poster for physical or motor disabilities

Designing for users who are D/deaf or hard of hearing

Do

  • write in plain English
  • use subtitles or provide transcripts for video
  • use a linear, logical layout
  • break up content with sub-headings, images and videos
  • let users ask for their preferred communication support when booking appointments

Don't

  • use complicated words or figures of speech
  • put content in audio or video only
  • make complex layouts and menus
  • make users read long blocks of content
  • don't make telephone the only means of contact for users

View poster for Deaf or hard of hearing

Designing for users with dyslexia

Do

  • use images and diagrams to support text
  • align text to the left and keep a consistent layout
  • consider producing materials in other formats (for example, audio and video)
  • keep content short, clear and simple
  • let users change the contrast between background and text

Don't

  • use large blocks of heavy text
  • underline words, use italics or write capitals
  • force users to remember things from previous pages - give reminders and prompts
  • rely on accurate spelling - use autocorrect or provide suggestions
  • put too much information in one place

View poster for dyslexia

Follow Karwai on Twitter and don't forget to sign up to email alerts.

74 comments

  1. Darren

    Downloaded, printed, and displayed in Dept for International Trade! I loved these when I worked in 2MS and I'm glad you've shared them.

    Link to this comment Reply
  2. Simon Hurst

    Brilliant work, great job.

    Link to this comment Reply
  3. Mark Lomas

    Great posters and tips!

    Link to this comment Reply
    • Karwai Pun

      Glad you like them. It's been a hugely collaborative effort with our team here at Home Office Digital.

      Link to this comment Reply
  4. Tom Norman

    Excellent work Karwai!

    Link to this comment Reply
  5. Joy Hooper

    These posters look excellent - most timely. I have already shared these with some of my colleagues.

    Link to this comment Reply
  6. Michael

    I like the idea here but a couple of things:

    1) GitHub is terrible on mobile so you can't read or view these properly (in fact it's terrible everywhere)
    2) left justified for dyslexics is a myth. I'm dyslexic and text needs to be justified or I'm lost at the end of every line. It's specific learning difficulties, far better to make it appealing and something I want to read
    3) don't make long scrolling pages - they are really difficult to understand
    4) someone needs to sort out the forms here... The auto focus is confusing

    Link to this comment Reply
    • Karwai Pun

      Hi Michael, appreciate your points. Apologise if this wasn’t made clear but we present these posters for general guidance; however, it is worth testing these design principles with users to ensure we get the right balance and make compromises where necessary as what may work for some may not work for others.

      Link to this comment Reply
      • Michael

        No worries. If you can move the images off GitHub it would be much easier to see the content.

        Also, from my perspective it's worth speaking to the folks at TFL for good accessible mobile websites - GOV.UK has become text heavy and really difficult to navigate.

        Link to this comment Reply
        • Karwai Pun

          Hi Michael, we've provided additional links to view each poster now towards the end of the blog post. Hope that helps.

          Link to this comment Reply
  7. Brian Donahower, MSEd.

    As Michael indicates, there is a difference between meeting regulatory accessibility guidelines (US: Section 508 refresh & WCAG 2.0) and meeting the needs of disabled [adult] learners. Simple example pointed out to me by a screen reader user... at the end of a text-only accessible document (typically HTML5). add an H2 Header that indicates End of Document. His best advice though: Download a trial version of JAWS, arrow through the content page by page, and listen to your content before you publish.

    Link to this comment Reply
  8. Max

    Very useful, thanks. Small thing, I think there's a typo in the "What the posters say" section.

    "let uses as for an interpreter when booking appointments"

    Link to this comment Reply
  9. Luca Ruffini

    Great job Karwai!

    Link to this comment Reply
  10. David Boden

    As a blind person, I am really pleased that all this is being publicised. However, it should have been proofread and typos removed before making it public. "make button vague" should be "make buttons vague"; "image of video" should be "image or video"; "use a liner" should be "use a linear,; "layouts and and menus" should be "layouts and menus". Keep up the good work though.

    Link to this comment Reply
  11. David Wilton

    great post and resources
    Will these posters be available in Welsh?
    We can't use them, put them up or promote unless we have in both languages as per Welsh language legislation.

    Link to this comment Reply
    • Karwai Pun

      Hi David,
      In the GitHub link, we've provided a Sketch workfile that you can download and use so the posters could be translated into different languages. Hope that helps.

      Link to this comment Reply
    • bernard

      Hi David,

      We've gotten lots of requests about translating them to other languages.
      Here's a discussion on Github where someone wants to translate them to French: https://github.com/UKHomeOffice/posters/issues/4

      We'd really appreciate (if you can) to commit the translations to our repository so they're available there for everyone.

      Link to this comment Reply
  12. Kerry Lambeth

    Hi Karwai,

    These look great and so useful - thank you for creating them! Would there be a problem with using them on HS2 Ltd's internal communications pages? We're doing a visibility push around accessibility in comms in December, and these would be a great resource to share.

    Link to this comment Reply
    • Karwai Pun

      Hi Kerry,
      Yes, please feel free to use them. We want these to be shared as much as possible.

      Link to this comment Reply
    • bernard

      Kerry,

      It'd be great to see some photos of the posters, in action!

      It'd be great if you could tweet some to us: @hodigital, @krwpn, or @bernardtyers

      Link to this comment Reply
  13. Nicky Reeves

    tthese are great, many thanks. Can I encourage you to develop one that specifically considers people who navigate their computer with voice recognition software,, as I do?

    Link to this comment Reply
  14. JonghoKim

    I want to deploy the language of various countries.
    As an example of, Korean

    Link to this comment Reply
    • Karwai Pun

      We have a Sketch workfile on GitHub that can be used to reversion the posters into different languages.

      Link to this comment Reply
      • Chob

        Is there any possibility to get another source file to translate them? Accessibility should expand to non-Mac users 😉

        Link to this comment Reply
        • Karwai Pun

          We're currently looking to create them in another source file for all users. We'll let you know once that's done. Appreciate your interest in these!

          Link to this comment Reply
    • bernard

      Hi JonghoKim,

      We've gotten lots of requests about translating them to other languages.
      Here's a discussion on Github where someone wants to translate them to French: https://github.com/UKHomeOffice/posters/issues/4

      We'd really appreciate (if you can) to commit the translations to our repository so they're available there for everyone.

      Link to this comment Reply
  15. Alexis

    I'd love to see the research your team has done that led to these wonderful posters. Specifically, the work done to optimize for hard of hearing users. Are there links to studies? Thanks!

    Link to this comment Reply
  16. Inca

    Great simple overview!

    I'd like to add a do/don't to many, concerning animation, sliders and moving text: provide a way to pause them and navigate them manually.

    This is important to limit distractions, and to accomodate those who cannot take in the information of the animation / slider / moving text at the pace it dictates. This may be true for low vision users, users on the autistic spectrum, users with dyslexia and users with motor disabilities, and also users with cognitive impairments.

    Link to this comment Reply
    • Karwai Pun

      Appreciate the feedback Inca. We can feed this into future iterations of our posters.

      Link to this comment Reply
  17. Ollie Nilsen

    Great work, Karwai

    Link to this comment Reply
  18. Bart Nelis

    Very nice infographic... I really like the fact that it is not just about 'blind people' but all sorts of users

    Link to this comment Reply
  19. David

    Speaking of accessibility, a download link for the posters would be awesome 😀

    Link to this comment Reply
  20. glen

    Nice posters. They'd be even nicer if you went one more step and made the PDF files accessible (ie, tagged pdf). Visually, they look like tables so you could tag them as tables. Or you could tag them as bulleted lists like you did in this article.

    Link to this comment Reply
    • glen

      I should have started off by saying 'thank you' for working on accessibility rather than going right into my suggestion. Quite rude, sorry.

      Link to this comment Reply
      • Karwai Pun

        No worries Glen. We've received quite a lot of attention on these posters and are aiming to make them as accessible as we can . Tagging the PDFs will be the next thing we look to improve. Many thanks.

        Link to this comment Reply
  21. Mustafa Zahid Efe

    They're really important advices. I gonna translate those to Turkish. I hope it won't be problem 🙂

    Link to this comment Reply
  22. Jules

    As someone with mild aspergers - and an aspergers son - and a School Governor with interest in the Autistic Spectrum may I comment on the Accessibility Poster :
    i) "Simple colours".
    This may SEEM to chime with "write in plain English" - but it doesn't actually help.
    Autistic spectrum people tend to take things literally. Euphemisms (or over-simplified icons) can be not understood.
    So things need to be familiar - not in code (hence plain English) - but this also means that realism (or skeumorphism) is better than unrealistic "flat" - so shading and depth are preferable to bright "Fisher Price" colours.

    ii) "Don't ...." use flat monotone icons - absolutely, so why are there so many around?

    iii) Use bullets not text blocks. Absolutely - so why so few lists of Contents ? These help provide context and info in a quick to read, user-friendly fashion.

    iv) Buttons SHOULD be descriptive - so what is wrong with "click here". It tells the User exactly what to do.
    Doubt arises if the text alongside is unclear - or the "button" doesn't look like a "button" but a plain slab with plain text instead - like "Attach files".

    v) "Yes" to simple layouts rather than the jumble shown to the right - but distinct panels and columns for Contents, themes or functions all in one view are preferable to a single column that has to be scrolled. Why ? Because context is best assimilated all together rather than relying on memory as content/navigation scrolls out of view.

    Link to this comment Reply
    • Karwai Pun

      Hi Jules, many thanks for your feedback. Regarding your point on buttons, while "click here" do literally tell the user what to do, what we were aiming for was to explain that the words were unclear as to indicate what will happen next once that button is clicked. However, your other suggestions, including the one on skeumorphism and coordinating layouts so memory is not heavily relied upon is duly noted. You've raised some interesting points to consider which can feed into improving and iterating these posters further which is greatly appreciated so many thanks for that.

      Link to this comment Reply
    • Nathan McIntosh

      Hey Jules,

      When screen readers are used some users navigate quickly using only the links on the page as navigation "waypoints" to jump to the section they want.

      If there are 5 "Click here's" on the page (and typically no <alt> text) it can be hard to know which one is the right "Click here".

      Then you expect the user to listen to a full url to figure out what the destination of that link will be.

      We found this out by seeing exactly how some blind users navigate pages using a screen reader.

      Hope that helps. 🙂

      Link to this comment Reply
  23. Jon Kantner

    Very helpful stuff! By the way, I have one question. Would “hiding in the shadows” be considered a figure of speech? I want to use it in a blog post, but I’m not sure if it would confuse those with autism or other brain disorder.

    Link to this comment Reply
    • Karwai Pun

      "Hiding in the shadows" can be interpreted literally but it does depend on an individual basis. Someone with high-functioning autism may have a hard time understanding idioms although it won't necessarily affect their basic language skills.

      Link to this comment Reply
  24. Jake

    Thanks for this great post. I saw a link to it in this week's issue of "Top Tech Tidbits for Thursday." I think you've covered some good tips for screen reader access. Inaccessible CAPTCHA's are a big "no-no" in my books. I am not a fan of audio CAPTCHAs either because people who are deaf/hard-of-hearing cannot use them. I personally have gotten some of the audio ones to work, but if at all possible they should be avoided.

    Link to this comment Reply
    • Karwai Pun

      We're gathering a lot of useful tips and advice from feedback we've received to feed into future iterations of the posters so really appreciate your feedback. Thanks Jake.

      Link to this comment Reply
  25. Vi-Naita Begonia

    Can I translate them into Chinese and forward?

    Link to this comment Reply
  26. Steve Blakeborough

    This is an excellent resource. Thank you so much for sharing. I'll definitely be printing them out and putting them up in the office.

    Link to this comment Reply
  27. Lynn Fisher

    Thank you very much for these posters. The City of Philadelphia Office of Emergency Management will keep these helpful tips in mind while designing our outreach materials.

    Link to this comment Reply
  28. Lloyd

    Great series - have them on my wall at work!

    Would love to have seen "don't upload images of text" for the screen readers poster though. It's something I come across at work a lot, and it's a big no-no for users with disabilities.

    Link to this comment Reply
    • Karwai Pun

      Hi Lloyd, we're keeping a list of suggestions and tips from everyone for future iteration and next steps with the posters so we really appreciate your feedback. Thank you.

      Link to this comment Reply
  29. Research Snipers

    This is a really great post. I was expecting a dry list of boring do’s and don’ts. But the way you put it together is pretty good. Thanks!

    Link to this comment Reply
  30. conseguir dinero online

    A great list, I really congratulate you for all the work done, without a doubt the one who made this publication deserves 5 points

    Link to this comment Reply
  31. Claire Murray

    These are great resources and i've linked to them from our website http://www.pifonline.org.uk

    We (the Patient Information Forum) are putting together an event on accessible health information, we'd love to have someone from your team come and talk about your work developing these guidelines and designing accessible digital information.

    You can contact us at claire.murray@pifonline.org.uk if you'd be interested to find out more about our work and the event.

    Link to this comment Reply
    • Karwai Pun

      Hi Claire, thank you, glad you found the posters really helpful. We'll get in touch with you soon to discuss your event in more detail.

      Link to this comment Reply
  32. Ayietim

  33. Gustavo Woltmann

    This information is very timely, I will comment it to some friends who are engaged in this, thanks for this incredible post

    Link to this comment Reply
  34. Cheryl Joyce

    This work is really refreshing and highlights the specific needs of the different users quite accurately.

    Just a thought, although there are some common issues within the different user groups, people are individuals, so I think the ability to personalise is what will truly enable accessibility.

    I am the mother of an autistic child and a policy/procurement professional for CCS. I'm personally grateful for these efforts and would like to know how to get involved?

    I do have a question, from the designer's pov:

    These needs are wide ranging and sometimes contradictory across the different types of users. How can a designer meet all these needs for one website?

    Is there a way to design all the elements for each of the different users and then put them on some sort of overlay? And when say, an autistic person uses the site, they can turn on the design that's meant for them, or a person who is blind can turn on the design suited for them etc..

    Or should a designer include as many elements as possible to suit as many different users as possible, and then allow ways for the user to personalise the site to their needs?

    Hope this is helpful, thanks

    Link to this comment Reply
  35. Karwai Pun

    Hi Cheryl,

    Thank you for your comments. Regarding your question about how to design to meet all needs, the baseline would be to design in such a way that you’re incorporating as many of the best design practices as possible so that anyone regardless of ability or condition can use your site; from there, you can further personalise the site according to specific needs like customising personal settings or downloading plug-ins and certain software tools which can help.

    With the posters, we’re currently looking at ways of improving them based on the feedback we’ve received by starting to code them as a site so they can be more responsive and accessible. Some of the approaches we’re looking at is perhaps showing all of the best design practice with the ability to choose those design principles that impact certain users more than others. We’re still thinking about this so your comments on personalisation based on needs has been timely and welcomed.

    If you’d like to get involved, we’ll let you know soon where you can give feedback and suggestions on our new poster project. Thank you.

    Link to this comment Reply
  36. Georgina

    Really useful resource, thanks. I plan on printing them out on putting them round the office to make people keep thinking about them.

    Link to this comment Reply

Leave a comment