By Gil Dekel, PhD.

PDF version download.

 

   V     DO

   x   DO NOT

Writing Style
  • write in plain, concise, approachable language
  • explain abbreviations and acronyms
  • use active tone; call to action
  • use figures of speech
  • long dense paragraphs
  • double negatives
Buttons/
links
  • add descriptions of buttons and links
  • write uninformative links
Typography
  • use underline, italics or capitals across a few words
Headings
  • meaningful headings
  • use headings that are not relevant to content
  • increase font size so it looks like a heading
Paragraphs
  • align text to the left
  • 60-70 characters each line
  • justification (text forced full width of page)
Layout
  • linear, consistent across pages
  • flows logically
  • put buttons and notifications in context
  • build complex, cluttered layouts, where content is spread all over a page
  • separate actions from their context (for example, button placed too far from entry form)

 

Graphic Design
  • use graphics that are relevant to the content, and supports/clarifies content
  • engaging, capturing attention
  • use white space to help remove clutter, to create ‘silence’ and a rest to the eye
  • subtract (reduce) graphics that are not necessary (“it is easier to remember one image than ten”…)
  • balance (composition) between graphical elements, text and space of page
  • alternative formats for interactive designs/actions
  • keep related content grouped, i.e. close to each other
  • create a wall of text with no graphics
  • use graphics purely for decoration
  • use excess, random, graphics that are irrelevant and that distract from the message
Images
  • clear, in focus
  • add meanings to the message
  • composed in relation to text
  • copyright cleared
  • alt-text (for advice, scroll down below the table)
  • blurred, pixelated, low quality
  • decorative only
  • do not add meanings
  • not relating to text, rather simply pasted next to text
  • only show information in an image
Videos
  • provide subtitles and transcripts
  • scenes are lit, so viewers can see content clearly
  • remove irrelevant words, gaps, or utterances such as ‘um…’, ‘hmm…’, ‘ahh…’, ‘err…’
  • clear sound; no back noise
  • only show information in a video
User interface
  • allow use with keyboard
  • force mouse use only
Contrast
  •  use colour contrasts
  • allow users to control and change colours
  • use low contrasts
  • use blinking or flashing content
Colour
  • use colour to create distinctions between elements
  • consistent, coherent, colour palette
  • apply familiarity though all designs and pages
  • colours support hierarchy
  • convey meaning with use of a combination of colours, shapes and text (for example, the image below conveys meanings through use of:
    • a word
    • colour
    • shape);
  • check colour contrast

 

example of button using colour, shape and text

example of a button using colour, shape and text.

  • only use colour to convey meaning (a colour-blind person may not distinguish between colours, so if you have three  circles with different colours, they may only see 3 circles)
  • green with red/pink
  • vibrant red text on vibrant blue background
  • colours clashing with each other

 

Three circles with different colours.

Three circles with different colours.

Orientation
  • explain what will happen after completing a service
  • leave users confused about next steps or time frames
Control
  • Allow users to play, stop, pause and rewind moving content
  • fix speed
Learning styles
  • cater to different styles:
  • Visual – learns by seeing
  • Auditory – learns by hearing
  • Kinaesthetic – learns by doing
  • design and write to a single style
Discovery
  • publish information on web pages
  • bury information in downloads

 

 

How to write effective alt-text

Imagine that someone is closing their eyes, and you read the alt-text to them. You want to provide an accurate version of the image.

  • Be accurate, specific, and succinct. Describe the image’s purpose.
  • Does the image contribute meaning to the current page or context? The alternative text (alt-text) should convey the meaning of the image. Typically, this is not a literal description of the image.
  • Do not include the words “image of,” “picture of,” in your alt-text. Alt-text by definition is relating to images, so there is no need to specify it.
  • If text is part of the image, describe it in alt-text. Transcribe it as part of the alt-text description, unless it repeats in the main body text.

 

Further resources on this topic:

 

References:

  • Articulate Global, In. (2015) 6 Best Practices for Designing Accessible E-Learning. [PDF book]
  • Dekel, G. (n.d.) Design Course. Accessed 23 Sep 2021, from: https://www.poeticmind.co.uk/research/design-course/
  • Gov.uk (2018) Understanding WCAG 2.1. Accessed 17 Sep 2021, from: https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag
  • UK Home Office (n.d.) A set of posters on how to design for accessibility. [PDF posters] Accessed 23 Sep 2021, from: https://ukhomeoffice.github.io/accessibility-posters/posters/accessibility-posters.pdf
  • WebAIM. (n.d.) Alternative Text. Accessed 30 April 2021, from: https://webaim.org/techniques/alttext/#context

Gil Dekel. 16 October 2021.

Creative Commons Licence
Accessibility checklist by Dr. Gil Dekel is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.