Appendix B: Accessible Engagement Guidelines

Online Engagement

Screen readers

Screen readers don’t always read exactly what is on the screen. Sometimes that is a good thing, but sometimes it leaves the user unable to understand the content. Punctuation is a good example: It won’t read out the word ‘comma’, instead it will pause. However, the way screen readers treat punctuation is inconsistent from one software to the next. It helps to understand what it may read vs what it won’t.

  • Characters that all screen readers read out loud: @ (the at symbol), & (ampersand), / (slash), © (copyright), ® registered, ™ (trademark), • (bullet), $ (dollar), % (percent), ° (degrees)
  • Some symbols that aren’t read by all screen readers that can impact meaning: * (asterisks), + (plus), = (equals), “” (quotation marks), () (parentheses), - (dash, minus)

Plain Language

According to Statistics Canada, 45 percent of British Columbians read at a Literacy Level 2 or below.  This means they have difficulty doing things like reading a newspaper or using instruction manuals. To make your content accessible to the public you need to use short, simple words and sentences. Avoid jargon. Explain complicated terms. Learn more about government standards for plain language.

Headings

Headings give structure to a web page. Headings are ranked, for example: Heading 1 is like a book title and Heading 2 is like a chapter title. Headings increase a page’s usability by making it easier to scan. Even sighted people don’t read full pages from top to bottom. Instead, one’s eyes flow down the page looking for relevant keywords, links and headings. Screen readers read headings like a table of contents to allow the user to understand what is on the page. Headings also improve search engine optimization (SEO). SEO relies on word matches from headings, page content and metadata.

Visual Content

Graphics are a great way to engage your audience. For many, creating visual content is more accessible than written content. This often true for: those with learning disabilities, language barriers or Attention Deficit Disorder. Any graphic or image that contains important information, such as infographics or timelines, must also include alternate text.

Videos should not auto-play and should be controlled using a keyboard (as well as a mouse). All videos must have options for closed-captioning or transcripts for the hearing impaired.

Hyperlinks

Sighted users scan pages for linked text, screen readers do the same. As a result, screen readers often do not have the context ahead of the link. To avoid the frustration this can cause, link text which properly explains where it goes. For example:

  • Don’t say: "Click here to read the intentions paper.” Instead say: “To learn more, read the Intentions Paper.”

Hyperlinks must be underlined. For many people, it is difficult to notice a hyperlink without the visual cue.

Forms

Users need to understand what is required and what is not in a form. Required fields are often noted using an asterisk, which some screen readers won’t read it out. Visual cues are important for sighted users. But to make sure it is read as required by a screen reader you need to add ARIA required=“true”, and ARIA required=“false” for optional fields.

If there are any errors or missed fields, an alert should immediately inform the user of the error and its location. Once the form is complete, users need to receive a message confirming their submission.

Other

  • Give users enough time to complete an action. Don’t rush them or set impractical timelines.
  • Explain what will happen after they participate. What are the next steps? What are the timelines?
  • Provide options for how people can communicate with you.
  • Design with mobile in mind. Make sure any graphics or images resize automatically.