Accessibility Check-List for London.ca

Accessibility Checklist

• Have you added styles and headings (H2, H3) to structure the content?
  • Verify that all content is broken up with headlines levels to create meaningful order
• When possible, are you using bulleted lists to create scannable content?
  • Number list for sequential content only
• Are all links using descriptive text that makes them easy to identify and link properly?
  • For example, “Visit the Website’s Get Involved page” versus “click here”, “Get involved” (if talking bout a specific project) 
  • Use deep links. Link the user to the direct page, sign up, etc. Do not link the user to the home page or gallery page
• Did you provide alternative text for all the informative images?
• When linking to a video, does it have a transcript or close captioning?
• Avoid uploading text on images. These do not scale well to other devices and are not accessible.
  • Did you check the colour contrast between background and font colour? Contrast should be 4.5:1 ratio (or 3:1 ratio for 18pt font or larger) 
  • If your image is changed to grayscale, can all the links and actionable elements still be identified?
  • Avoid gradient background, the lightest colour of the background and text colour still need to meet accessibility requirements 
• Table - should only be used for data and not page layout
  • Do they have captions and clearly assigned header rows
• Uploading documents (PDF, Docx)
  • Have you completed a manual and automated accessibility test on the documents?
  • Do not use print screen to convert word files to PDFs
  • Have you reviewed the PDFs tags?

Writing for the Web tips:

• Present only one idea per paragraph
• Use the inverted pyramid style - start with the most important information, get increasingly granular as the content continues 
• Write in a clear, plain-text  format  that prioritizes shorter paragraphs and short sentences, and common words
• Align text to the left instead of centre or right justification
• Use images to break up long blocks of text

Principles of readability 

• Keep sentences concise (short)
• Ease of reading - aim for sixth-grade level reading
• Complex words - avoid jargon, lengthy, and uncommon words 
• Understandable - spell out acronyms (on the first reference) and use action words instead of nouns for programs
  • (“sign up for winter sports” vs “Play Your Way” is now open) 

Tables

• Provide column headings 
• Caption or name the table with a title (This table provides the venue name and postal code for every location) 
• Tables should not be used for page layout but for displaying data 

Alt Text
Examples 

1. Image of building (do not use “image of”, screen readers will announce it is an image)
2. City Hall (is acceptable) 
3. London Ontario’s municipal building (is acceptable, but is better than B) 

Informative Images (infographics) 

• The alt text should convey the meaning of the content that is displayed visually
• If there is “new” content (statistics, information, data) that appears in a photo but not in the accompanying text (for example, an article on a cheque donation, where the amount only appears in the photo), then that information needs to be included in the alt-text
• Ensure the infographic image has hidden HTML to have a detailed description available for screen readers

Decorative image

• Decorative images are those that do not inform or improve the meaning of the content, they simply enhance the visual look and feel of the page. In these cases, Alt Text would be “” or “null”
  • Examples of decorative images:
    • Banner image on the home page, a project page or section page
    • Logos
  • Images in body, are generally not decorative

Images with Text

• These should be avoided. 
• The logo is the only acceptable use. 
• Logo images should be SVG images for responsive screen sizing 
• Images with text are not accessible and degraded with resizing to users browsers