ukhomeoffice / posters

Home Office Digital repository of posters covering different topics - research, access needs, accessibility, design.

Home Office Posters

Home Office repository of posters covering different topics - research, access needs, accessibility and design.

Contributions and contact

If you want to contribute a translation of one of our posters, we would really appreciate your help.

You are free to adapt the posters but only under the following conditions:

• you make the work available under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International licence
• you remove the Home Office name and logo
• you give appropriate credit and link back to this repo

Here are some examples of how the posters have been adapted by external organisations:

• Designing for those who have experienced trauma through domestic or intimate partner violence
• Designing for users with aphasia

We welcome feedback - please create an issue to feedback whether positive or negative. Otherwise you can contact the design team at the Home Office on email - [email protected].

Our posters

Using Git Browser, you can view all the posters before you start working on them. (A big thanks to Joe Lanman from GDS for adding our posters to his Git Browser project)

Access needs

These posters cover the following access needs:

• Anxiety
• Autism
• D/deafness and hard of hearing
• Dyslexia
• Motor disabilities
• Visually impaired - low vision users
• Visually impaired - screenreader users

There is also a HTML versions of these posters.

You can read about how the Do's and Don'ts posters were developed on our blog: https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

Discovery Alpha Beta Live

• General
• Discover Alpha Beta Live phases

Design ethics

Our design ethics toolkit sets out approaches and resources that teams can use to consider the ethical consequences of their designs.

Inclusive language

We have designed inclusive language posters for the following protected characteristics:

• age
• disability
• ethnicity and nationality
• religion
• sexuality
• sex and gender

Read our blog post about why we created the inclusive language posters.

posters's Issues

SVG previews missing elements

See https://twitter.com/LenaSchimmel/status/1002479358244720640

http://www.git-browser.com/ukhomeoffice/posters/accessibility/posters_en-UK link is broken

The page just shows "Cannot read property 'children' of undefined"

Consider using freely available fonts

The font used in the original posters seems to be Neue Helvetica, which is only available commercially. It would be easier to create visually consistent translations if a freely available font was used instead. Perhaps DejaVu Sans.

[info] A List Apart: Mental Illness in the Web Industry

Hi,

I want to draw your attention to Mental Illness in the Web Industry by Brandon Gregory which was published yesterday and could help understanding part of the target audience of this repository better.

So this is just an info. I am fine if the issue gets closed immediately (after reading) :-)

Dyslexia contains do in the don't section

The dyslexia poster contains behaviour guidelines in the right "false" column while it should NOT contain these; rather have them in the left "right" column!

that applies at least to the current -de version
https://github.com/UKHomeOffice/posters/blob/master/accessibility/posters_de/dyslexia_de.pdf

Audio accessibility

First of all, I love these posters, and I hope many web designers and developers take them to heart. Thank you to those who helped make these posters a reality.

One thing that is missing from any of them is a mention against the use of autoplay, be it video or audio. As an autistic web user who has physical disabilities, there is little worse than opening an unsuspecting link and instantly having noise blasted at me, often times from a very small section of the page with even smaller controls, and having to find this source and stop it, already stressed out from the sudden noise. Often times I'll shut the tab without bothering further. (For clarification, I don't mean YouTube here. I mean, for example, opening a news article and suddenly a video is playing, when there was no indication of a video in the link I just clicked, and things like that.)

This is a problem for autistic users because the sudden noise is likely to be upsetting (particularly for ones sensitive to sound, like myself), it's also a problem for those who use screenreaders as the two audios will overlap until they're able to turn the autoplaying sound off, and it's a problem for those with motor issues as you have to find the source of the noise, turn it off, and waste time and energy, if even able to as the controls are typically very small. In short, it's very irritating and should be avoided at all costs.

Here is a good article on the issue, that also goes into why autoplaying video is a bad idea as well, and here's a page on the W3's take on autoplaying audio.

Perhaps an inclusion for a couple of the posters could be "do give the user a chance to choose to play the audio/video present on the web page / don't automatically have audio/video play upon loading a page" (or something along those lines but more concisely worded!).

Thank you again for this work, please keep up the good work!

Do I have to translate both PDF and SVG files?

Hi there!
Great posters and I want to help with the translation of them in Greek.
I only have one question: Do I have to translate the SVG files as well? And if yes, what tool do you suggest for that? A web/text editor or a software like Inkscape?
Best, Panos

Glyph missing

Hi guys! This is an amateur translator from Taiwan. I'm working on translating the posters into Traditional Chinese (which is official language of Taiwan and Hong-Kong). But when I opened the file, some glyph was missing and made the document look weird.

Here is a screenshot from the document generated from you:

And this is mine:

Is there any method to fix it?

Oh, another question: I think we don't have the right to use GDSTransportWebsite font family, so I choose Noto Sans CJK TC made by Google Inc. Is it okay with you?

Thank you! Have a good day 😃

Typo on Anxiety poster

There is a small typo in the anxiety svg poster (https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/svg/anxiety.svg)

"Don't... leave users confus[e]d about next steps or timeframes"

This doesn't appear in pdf collection or the text file

Add a poster for cyber sickness

I have an idea for a new poster. As a web designer and developer myself, I suffer from cyber sickness. This means I have issues using websites, apps and even games with excessive motion/animation.

Good use of animation:

Example: https://www.flinto.com/
Explanation: This is good use of animation due to the fact that the animation shows how to use the product presented. Yes, it might bother the user to the degree that the animations happen without a user starting them, but since it's minimal, I as a user can scroll through this the first page without any issue.

Example: https://getacquainted.co/
Explanation: This is good use of animation because it's extremely subtle and I barely noticed it, though it doesn't improve the user experience. The animation just exists and doesn't have a purpose apart from looking flashy.

Moderate use of animation:

Example: https://runcloud.io/
Explanation: This is moderate use of animation, and by moderate I mean I don't get as easily nauseous being on this page, though I do still get a little nauseous. They could've avoided adding all the ease-in animation since it isn't really necessary. The top animation was subtle and therefore not an eyesore for me.

Bad use of animation

(ironically found on https://www.webdesign-inspiration.com/web-designs/style/modern:
with the headline "Find the best Modern web designs inspirations")

Example: http://www.carmanfriend.com/
Explanation: This is bad use of animation because the scroll animation doesn't really do anything to the webpage apart from making one nauseous. Sadly, I can't really scroll on this page for too long due to the overuse of animation and therefore the information on the page is utterly useless to me since I can't focus on the content when there's too much animation everywhere. The hover animation is okay, because as a user the action happens as the mouse hovers over a certain elements and it is sort of expected that something should happen on hovering over elements.

Example: http://irava.net/
Explanation: This is bad use of animation because it seems the majority of elements have animation. Pretty much the same issue as http://www.carmanfriend.com/.

Example: https://www.cloudbooksapp.com/
Explanation: This is bad use of animation. There's too much animation on too many elements and that makes one's focus go everywhere. Pretty much the same issue as http://www.carmanfriend.com/.

As a person with cyber sickness, the biggest issue is animation that you can't control like in the CarmanFriend example. Due to overuse of animation, this leads to the user feeling very nauseous and having to stop using the website or app.

Suggestion

Designing for users with cyber sickness

Do...	Don't...
use subtle and few animations if there are elements that need to be highlighted	overuse animation on many elements
use storytelling animation on actions the user can control	use animation that doesn't give anything to users
use subtle animation primarily on elements users can click such as input fields, search bars and buttons to give feedback to every action	use jumpy, "noisy" or unexpected animation
allow users to have control over their scrolling	hijack the scroll causing lagging or jumpy display of content

These are just suggestions I could think of. Primarily, the issue is unnecessary use of animation. If I were to use a website with too much animation, they should at least have an alternative for users to turn it off. For users with cyber sickness, the best website or/and app is a static one, but the suggestion above is more of a "if the animation helps the usability and user experience, then go for it".

I hope this is helpful and if I'm unclear on something, just ask!

Best regards!

P.S. I love these posters, keep up the good work!

Dutch posters - need to fix grammatical error in back cover page

Hello @mhtpn

Your translation of the Dutch posters were well received!

On the cover-back_nl.pdf there are two small grammatical errors as pointed out by someone who's contacted us. Are you able to fix these?

betekent (not betekend)
jouw (not jouwe)

Thank you.

Swedish translation

Hi, Bolagsverket (the Swedish Companies Registration Office) have translated the posters to swedish how do I upload them so more people from sweden can use them?

All the best! :)

low-vision_SE.pdf
motor-disabilities_SE.pdf
screenreader_SE.pdf
autistic-spectrum_SE.pdf
cover_SE.pdf
deaf_SE.pdf
dyslexia_SE.pdf

Multiple translations in the same language - thoughts?

Hello, thank you for your interest in translating these posters!

We've come across multiple requests to translate the posters in the same language. It would be good if we can collaborate on one set of translations. Would everyone be happy to collectively do this?

I'd welcome any thoughts on this.

Deafness Poster: Repetition of word "don't"

On the poster for users who are Deaf or hard of hearing, the bottom item in the "Don't" column reads "Don't make telephone the only means of contact for users."

The word "don't" is redundant in this context as it is implied at the top of the column.

Note: I printed these out for our company and our copy editor with 30+ years of experience noticed this within 10 seconds of me hanging them up and made me post this correction.

French version

Hi dear friends from UK,
with @mviry, we are interested about translating these poster in French. It is possible?
Off course, I'll commit french version in this repository. Just told me if I have to create another branch or just another file with "_FR" at the end.

Merci!

Adapting dutch posters to our organisations style

Hi,

We would like to use the Dutch posters within our organization to create some attention for accessibility. If possible we would like to adapt the poster a little so they fit our corporate identity. Are there any other formats of the posters available besides the pdf files?

Regards,

Liza

"Physical" poster has confusing section on mobile and/or timeouts

This is the second from the bottom on https://ukhomeoffice.github.io/accessibility-posters/physical:

Design with mobile and touchscreen in mind
Don't have short time out windows

Using a computer can be tiring for motor disability users and they may need to take frequent breaks. A short time-out period means they will probably have to start again after taking a break.

It seems to me that the heading and subheading either don't go together (as if they'd been transposed with some other text), or the connection is not explained in the body.

(Maybe it's just me, though.)

Using an open typeface for body copy

It's hard to reproduce this without running OSX or bending over and getting a license from the folks at Linotype. As much as I like Helvetica Neue, I'm not at the liberty to either a) pirate it or b) drop $350+ for a few OTFs.

Possibly the nicely similar Source Sans Pro?

Designing for users with anxiety

I'm currently writing a blog post for The Paciello Group (part two of A Web of Anxiety). I'm trying to pull together some practical guidance for this post and I'd like to feature your excellent Dos and Don'ts of designing for users with anxiety poster. I was wondering if you had any background information on the guidance provided? The overriding theme seems to be about providing clarity and avoiding ambiguity - is this something that came out of user research?

Copyright

Hi

Can you confirm what the copyright situation is for the posters? Are they for anyone to reproduce?

Thanks in advance!

Marcus

Feature request: Compile all posters into a single PDF

to make it easier to share one cohesive package.

Typo in accessibility-posters-next trial.pdf

Final row, left column has "cosistent" instead of "consistent".

Can't open SVGs

OMG nevermind. The idiotic Github interface doesn't download files when right clicked OMFG.

Support colorblindness

Right now, users with low vision and screenreaders are covered. I think a version of the poster should be made to help accommodate users with various kinds of colorblindness. Some of these are covered elsewhere. I've listed some suggestions:
Do:

• Use black and white for text-color/background-color combinations.
• Provide a high contrast mode for when the commonly preferred color palate is hard to read for some.
• Use aliased fonts.
• Use geometrically simple lines. This is for rarer forms of colorblindness which are not covered here. The idea is the following: While the users may still struggle to perceive the content with the chosen palate, simple lines are easier to to trace in low-contrast situations.
• Use supplemental labels. Don't just have the hot wire red and neutral wire blue. Label the hot red wire as "hot" and label the blue neutral wire "neutral". This is for people who only see in greyscale.
  Dont:
• Use exclusive color coding as a form of labeling. If a person can only see in greyscale, and the hot and neutral wires are only differentiated by color, they could die.
• Use grey text on a white background, or the reverse.
• Use red and green, green and brown, or brown and red; as combinations of text color and background color.
• Use dark colors on black. Anything with a combined color rating of 255 or less between red, green, and blue should be considered dark for this rule.
• Use cyan and magenta as text-color/background-color combinations.
• Use green and yellow as text-color/background-color combinations.
• Use orange and yellow as text-color/background-color combinations.
• Use orange and red as text-color/background-color combinations.
• Use purple and blue as text-color/background-color combinations. If the purple is at least 2 parts red, this rule can be ignored, but only if the blue is not Cyan.

Usability on Windows systems and with Adobe CC

The posters are awesome, and as a web designer myself I'd like to use them, and also to share them widely with colleagues. But, I can't open them in Adobe Illustrator (the .svg files), and the .pdf's also refuse to open in Adobe Acrobat. I'm using the latest update of both Adobe CC and Windows 10, and having discussed with colleagues believe that this is an issue across all our machines. Sketch isn't available for PC, and so there's no way of me even downloading usable .pdf's.
Could you possibly consider making available a version of the posters, preferably editable, that will work for those of us not lucky enough to use a Mac?
Thanks,
Mat

Why use bright contrasting color for autistic spectrum users?

I just printed your PDF and wonder aboute the "bright contrasting color for autistic spectrum users" statement.

Could you provide some insight/links about the cognitive mechanism at stake ?

What is the best graphics file format to create for people?

We've started to get requests from people who don't use OS X and the Sketch application (sketchapp.com). We knew this would happen at some point.

So we'd like to ask for your advice:

1. What is the best file format to produce?
2. What graphics applications are you using?

Our objective is to enable people who want to translate the posters into any language, on any operating system, with any graphics application.

Some programmes I'm aware of are: GIMP (https://www.gimp.org/), Inkscape (www.inkscape.org/).

Any information or advice, would be really helpful.

Explanation of "Designing for users who are deaf" guidelines?

Hi there,

First, thanks for producing these posters. They are really good, and I intend to use them at my workplace.

Just wondering about the rationale behind some of the guidelines tho, in particular the "Designing for users who are deaf or hard of hearing" poster.

It's unclear how some of them apply to these users more than the general population. Specifically:

• write in plain language
• use a linear, logical layout
• break up content with subheadings, images and videos

I've googled around but can't find any rationale of these on gov.uk sites or elsewhere.

Obviously these are all good guidelines generally speaking, but their relevance to this group of people specifically is not obvious, at least to me.

Perhaps there could be some explanatory text or links included on each poster or at least with the repository?

repo needs README with direct viewable links

This looks like an amazing repo.

It would be great if it had a README at the top level that linked to viewable versions of the posters, just to make them one-click accessible directly from the repo home page.

Thanks for your consideration!

Accessibility of PDF Accessibility Posters

The information contained within the Accessibility posters is great! Unfortunately, the PDFs themselves are not accessible. See WebAIM: PDF Accessibility for a fair introduction to the process. (Hint: making PDFs accessible is a time consuming and frustrating experience which requires a paid version of Adobe Acrobat.)

I would love to share the PDFs as a good resource for understanding accessibility guidelines and requirements (WCAG2), but I cannot share teaching aids which themselves do not meet said guidelines.

PDF documents are not accessible

The PDF documents are not accessible (though you do have a text-only alternative). Consider tagging the PDFs for accessibility.

"We are all only temporarily not disabled" - isn't quite true

Most people are only temporarily not disabled, but not everyone. People born with a permanent disability do not fit the definition of "all" in this statement.

Not sure how to word it better "Most people are only temporarily not disabled" doesn't quite work and the use of a negative seems easy to misunderstand. However the use of a negative does help provide emphasis for the important message.

Privacy Series

Would love to see what your team comes up with for educating people about the GDPR. I do think it would be a great series. Some interesting ideas here https://ico.org.uk/for-organisations/resources-and-support/posters-stickers-and-e-learning/

Where is the Sketch-workfile?

On https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/#comment-2577 Karwai Pun talks about a Sketch-workfile.

Apart from not yet knowing how to use such a file I cannot find it.

Dutch versions

@mhtpn mentioned doing a Dutch localisation of the posters in this comment

@mhtpn's comment text below:

Thanks for these awesome posters!
I have the same question as @chrishrmnn , would it be OK if I translated this to Dutch? I'll fork and send a PR with an _nl extension.

Kind regards

I've split this out into a separate issue so we can track it better.

Problem with Polish localization

I just started working on a Polish translation of accessibility posters.
In LOCALIZATION doc you say that the best way is to translate original English (UK) SVG files.
But I have several notices:

1. UK SVG files comparing to PDF have some visual differences:
   SVG
   
   PDF
   
   have different image in top right.
   Why is it so?
2. When I edit - change text in svg it frequently does not fit and goes over the top of images insedad of breaking rows. So in my opinion edtiting SVG does not make sense :(
   
3. Other translations seam to somehow prepare PDFs insted of SVGs.
4. Most PDF seem to be inaccessible due to differences between PDF generator software/app/library.

So here is my question how to create properly translated files and which do you need SVG or PDFs?

Image for figurative phrases

The posters for autistic-spectrum_xx and deaf_xx (where xx is a language code, such as fr or tw) contain an image representing the idiomatic expression for "it is raining heavily", based on the British expression "it is raining cats and dogs".

This has been:

• incorrectly left as cats and dogs in de,
• correctly replaced by an image representing the expression "está lloviendo a cántaros" in es,
• correctly replaced by an image representing the expression "il pleut des cordes" in fr,
• incorrectly left as cats and dogs in nl,
• incorrectly left as cats and dogs in pt-BR,
• incorrectly left as cats and dogs in pt-PT,
• incorrectly left as cats and dogs in tr,
• possibly correctly replaced by a basin in tw,
• incorrectly left as cats and dogs in zh-TW,

Suggested expressions, taken from https://www.omniglot.com/language/idioms/rain.php are:

• image representing the expression "Es regnet Bindfäden - It's raining twine" in de,
• image representing the expression "Het regent pijpestelen - It's raining pipe stems" in nl,
• image representing the expression "Está chovendo a cântaros" in pt-BR,
• image representing the expression "Está chovendo a cântaros - It's raining jug[ful]s" in pt-PT,
• image representing the expression "Sicim gibi yağmur yağıyor - It's raining like long strings of rope" in tr,
• use the same in zh-TW as in tw.

Note that the image for de and tr can be the same as in fr; and that for pt-BR and pt-PT can be the same as in es.

Clicking on individual posters lead to 404

Hi there, I wanted to print out the posters for the team but when I click on each one eg autism, they take me to a 404 page. Have the posters been moved? Thanks

Missing PDF?

Using the git-browser page, it looks like the accessibility-posters-next trial.pdf is missing. I get a 404 when I click on the thumbnail below.

Grammatical error in screen reader poster

The poster should suggest designing for "keyboard-only use", not for "keyboard use only".

'Don't rely on accurate spelling, don't provide autocorrect'

Should this be 'Don't rely on accurate spelling, do provide autocorrect' ?

http://ukhomeoffice.github.io/posters/accessibility/html-posters/dyslexia1.html

Traditional Chinese version

https://drive.google.com/drive/folders/0B4oaXOSq8RsFcEJBTDFKaUJmVUU

I don't know how to create new pull request

deaf_fr.pdf > Spelling mistake

Hello,

In "deaf_fr.pdf", in the sentence "laisser le choix aux utilisateur de choisir leur moyen de communication préféré", missing an "s" to "utilisateur".

Johan

Typo in german version

There is a typo in one of the german pdfs:
posters/accessibility/posters_de/screenreader_de.pdf
First headline: "Benuzer" has to be "Benutzer".

(I would fix it myself:
Is the sketch-file the master document?
Which software do you use to edit it?)

German versions

I've created this issue as @gunbert has started on some German translations. This is great!

The en_UK anxiety.svg poster seems to have the wrong scale

Unlike the others, it appears to be about the size of a postage stamp when you attempt to view it in github.

pt-br poster for dyslexia has no content

PDF opens on last page

When you download the English accessibility PDF (https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf) and open it in a PDF reader, it opens on the last page rather than the first.
Is this by design? Could it open on the first?

Grammar mistake in the "it's ok to..." poster

The "it's ok to..." poster has this line:

challenge things your not comfortable with

It should read:

challenge things you're not comfortable with

Giving credit on Twitter for poster translations

Hello @mhtpn @IlianM @Vi-Naita

Thank you so much for your help on translating the posters.
We'd like to share them on Twitter and give credit to you. Are you on Twitter and if so what is your twitter handle?

Many thanks.