Web Accessibility Job Aid
Colour
When used correctly, contrast and colour can help brighten a page; however, not all visitors can see colour the same way. The examples below present 6 ways that visitors may see the St. Joseph’s Hospice site colours. Viewed at full size the colours selected for this site pass accessibility testing.
Blurred vision:
Deuteranopia (no green):
Reduced contrast:
Tritanopia (no blue):
Protanopia (no red):
Achromatopsia (no colour):
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 background colours that pass contrast testing (WCAG AA) with the text (foreground) 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 all content on the page. When colour alone conveys a message (e.g. red for “overdue”), it fails to reach users who are unable to see that colour.
Text
Use Accessible Fonts for web publications. Arial has been selected as the default accessible font style across this site; that default is assigned to Headings, Paragraphs and Buttons. While it is recommended this default style remain unchanged, other available accessible fonts are Georgia, Palatino, Lucida Sans and Verdana.
Accessibility Impact: Accessible fonts are designed for reading by a diverse audience, including individuals with visual disabilities or reading disabilities.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 as required, and for the right reasons (e.g. emphasis).
Use Paragraph 1 to 3 to enter the preferred text sizes.
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. Example:
Avoid using: Click here to buy tickets
Try to use: Buy tickets here
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 and on a white background.
Text Block Background (Optional)
Select “Style Background”
Toggle "Background" on
Use the Colour Contrast Checker to choose background colours that pass contrast testing.
Avoid changing the “Blend Mode” or turning on “Blur”
Images
Images can have multiple uses. They can be used as page decoration, or they can be informative. When using images it is important to consider their role on the page, and to ensure that text descriptions are included where appropriate. 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.
If the image is for decorative purposes only, mark it as Decorative (use double quotes as the Alt Text)
Avoid setting images as section backgrounds. The use of a background image is decorative only; Alt text cannot be applied. In the rare case where an image background benefits the page, ensure that image contains no message (visual or 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:
Select Add Block > Image
Place and size the image
Select Edit
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 = ““
The image above conveys a message.
Alt text = Hospice staff presenting a $5000 cheque to GM Blue Plan Engineering Limited
The image above contains text that conveys a key message.
Alt text = Handbags for Hospice. May 8th, 2025. Presented by Oxford Dodge Chrysler
Charts / Graphs
To ensure that charts and graphs are accessible, always provide as much description as possible. Use the recommended colour palettes, and be sure to include a legend.
Accessibility Impact: Being descriptive, providing a legend and using recommended colour palettes ensures that charts and graphs can be read by a diverse audience, including individuals with visual disabilities or reading disabilities.
Sample Pie Chart
Recommended Colour Palettes:
ItaliaCobblestoneCoolMutedPrimaryWarm
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 samples below represents the code for a 2 row, 2 column table (horizontal and vertical):
Vertical Table:
<table cellpadding="3" border="1">
<tr>
<th scope=”col”>Column Heading 1</th>
<th scope=”col”>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 |
Horizontal Table:
<table cellpadding="3" border="1">
<tr>
<th scope=”row”>Row Heading 1</th>
<td>Content Here</td>
</tr>
<tr>
<th scope=”row”>Row Heading 2</th>
<td>Content Here</td>
</tr>
</table>
| Row Heading 1 | Content Here |
|---|---|
| Row Heading 2 | Content Here |