Web Accessibility Job Aid

Add/Edit a Page Section

  1. Select Add Section > Add a blank section

  2. Select Edit Section

  • Design Tab: use the properties to create a balanced presentation. Avoid overcrowding content

  • Background Tab: Use a Colour Contrast Checker to choose background colours that pass contrast testing (WCAG AA) with the text colour. the content (e.g. text colour). Avoid using the Image, Video and Art options as backgrounds.
    Accessibility Impact: Visitors, including those with visual disabilities, must be able to perceive content on the page.

Text

  1. Select Add Block > Text

  2. Select Edit

  3. Enter text content

    • Use Heading 1 to 4 as required to create hierarchical section headings. Set the Page Title to Heading 1 to initiate the section hierarchy.
      Accessibility impact: Screen readers can help blind site visitors navigate a page by jumping from heading to heading. Using proper headings allows them to navigate page sections and sub-sections in the same manner the as the visual user.

    • Use the Paragraph 1 to 3 options to enter the preferred text sizes.

    • Apply text styles/colour as required, and for the right reasons (e.g. emphasis). Limit use of italics.
      Accessibility Impact: Overuse of italics can create challenges for clients with visual/cognitive disabilities, such as dyslexia.

    • Apply text colour as required. The current site palette is accessibility tested against a white background. #000000 (Black) is recommended as the site standard for text

    • Use descriptive and clearly identifiable links. Avoid vague, non-inclusive wording such as “click here”. #476864 (blue-green) is recommended for link colour.

      Accessibility Impact:

      • Screen readers can help blind site visitors navigate a page by jumping from link to link. A link that reads as “click here” does not tell that visitor what to expect when they open it. Terms like this also imply mouse use and are not inclusive to visitors who navigate content using tools such as keyboards, breath/bite controllers, eye trackers, etc.

      • Visitors, including those with visual disabilities, must be able to perceive a link on the page. The colour selection passes Link Contrast Checker testing when placed beside black text

Text Block Background (Optional)

  1. Select “Style Background”

  2. Toggle "Background" on

    • Use the Colour Contrast Checker to choose background colours that pass contrast testing (WCAG AA) with the text colour. AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
      Accessibility Impact: Visitors, including those with visual disabilities, must be able to perceive content on the page.

    • Avoid changing the “Blend Mode” or turning on “Blur”
      Accessibility Impact: text/background effects increase the risk of colour contrast issues

Colour

When used correctly, contrast and colour can help brighten a page.

  • Limit the use of colour and number of colours on the page.

  • Avoid using colour exclusively to convey a message, whether as coloured text or as background. Always include a text equivalent that conveys the same message.

  • Use the Colour Contrast Checker to choose text box and button background colours that pass contrast testing (WCAG AA).

Accessibility Impact: Visitors, including those with visual disabilities, must be able to perceive content on the page, and must be able to understand the meaning if colour is conveying a message. For example, using red alone to convey that something is “overdue” is insufficient; ensure the WORD “overdue” is also included.

Images

Images can have multiple uses. They can be used as page decoration, or they can be informative. When placing images on a page:

  • Limit the number of images

  • Apply effective Alternate Text (Alt Text) descriptions that convey the same message as the image

  • If the image contains text, that message must be included in the Alt Text of the image

  • If the image is for decorative purposes only, mark it as Decorative (use double quotes as the Alt Text)

Accessibility Impact: Ensuring that effective Alt Text is included ensures that visitors who cannot see the image can understand what the item is, and if there is any message being conveyed by the image.

To place an image and apply Alternate Text:

  1. Select Add Block > Image

  2. Place and size the image

  3. Select Edit

  4. At the bottom of the Content tab, enter the appropriate description in the Image Alt Text field

The examples on the right represent three different variations of alternate text, relative to the content of the image and the purpose on a page

""

The image above is decorative.

Alt text = ““

Hospice staff presenting a $5000 cheque to GM Blue Plan Engineering Limited

The image above conveys a message.

Alt text = Hospice staff presenting a $5000 cheque to GM Blue Plan Engineering Limited

Handbags for Hospice. May 8th, 2025. Presented by Oxford Dodge Chrysler

The image above contains text that conveys a message.

Alt text = Handbags for Hospice. May 8th, 2025. Presented by Oxford Dodge Chrysler

Tables

There is no web block to support tables. Tables can only be created using the Code block. When coding a table, ensure that the table heading <th> syntax is used for either the top row (vertical table) or the left column (horizontal table).

Accessibility Impact: using the table heading syntax ensures that screen readers align the data in the columns with the heading that describes the data.

The sample below represents the code for a 2 row, 2 column table; the visible product is to the right:

<table cellpadding="3" border="1"><tr>
<th>Column Heading 1</th>
<th>Column Heading 2</th>
</tr>
<tr>
<td>Content Here</td>
<td>Content Here</td>
</tr>
</table>

Column Heading 1 Column Heading 2
Data Here Data Here