Accessibility checklist

   V     DO

   x   DO NOT

• 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

• add descriptions of buttons and links

• write uninformative links

• readable font size
• allow users to change size

• use underline, italics or capitals across a few words

• meaningful headings

• use headings that are not relevant to content
• increase font size so it looks like a heading

• align text to the left
• 60-70 characters each line

• justification (text forced full width of page)

• 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)

• 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

• 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

• 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

• allow use with keyboard

• force mouse use only

•  use colour contrasts
• allow users to control and change colours

• use low contrasts
• use blinking or flashing content

• 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 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.

• explain what will happen after completing a service

• leave users confused about next steps or time frames

• Allow users to play, stop, pause and rewind moving content

• fix speed

• cater to different styles:
• Visual – learns by seeing
• Auditory – learns by hearing
• Kinaesthetic – learns by doing

• design and write to a single style

• publish information on web pages

• bury information in downloads