Short review of on its accessibility and usability for people with disabilities

Disclaimer: This document is a short, follow up review. Its main purpose is to raise awareness for education and training purposes. This document is also meant to help to bring the product to be fully Web Accessible for all users including people with disabilities.

Scope of review

Reviewed on October 31, 2019

General notes:

<img src="./img/promos/1170x347-1.png" alt="">
<p>Banff National Park </p>

Here is how an example figcaption should be constructed:

    <img src="/media/examples/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>


Here is the example from’s front page, copied on October 18, 2019:

<figure class="well well-sm brdr-rds-0 eqht-trgt" style="vertical-align: top; min-height: 394px;">
	<img class="img-responsive full-width" src="/content/dam/canada/activities/20190911-1-520x200.jpg" alt="">
	<figcaption class="h5">Early Learning and Child Care</figcaption>
	<p>The new Expert Panel will provide a better understanding of the early learning and child care landscape in Canada.</p>

image 1

The tooltip here could have been “start the slide show”, for example.

image 2


  1. All comments in the document refer to English and French pages unless specified otherwise.

  2. Testing done using: Firefox 67, NVDA, keyboard-only

  3. Pages were tested against WCAG 2.1 level A, AA. (only fixes for WCAG 2.0 AA are strictly required at present)

Table of Contents

WCAG 2.1 accessibility issues levels A, AA and AAA

1.1 Text Alternatives

1.1.1 Non-text Content - Level A

image 3

The images used as examples throughout the page, such as the ones displayed above, are not decorative but they are all marked-up as decorative using alt=””. The text inside them provides necessary information about the image sizes and there is no information about the image sizes provided elsewhere.

1.2 Time-based Media

1.3 Adaptable

1.4 Distinguishable

1.4.4 Resize text - Level AA

Some examples break when text is resized.

image 4

1.4.10 Reflow (WCAG 2.1 Level AA)

Many examples’ layouts break at very small screens, threshold seems to be 340px.

image 5

2.1 Keyboard Accessible

2.1.4 Character Key Shortcuts (WCAG 2.1 Level A)

Not tested

2.2 Enough Time

2.3 Seizures

2.4 Navigable

2.4.1 Bypass Blocks - Level A

image 6

The link provided to bypass blocks does nothing for the reason that its target ID wb-cont does not exist in any element in the page.

2.4.3 Focus Order - Level A

image 7

In this second example, though the user controls are placed after the image, their order in the DOM is before the image. Consequently, the controls receive focus before the image does.

There are other examples with incorrect focus order.

2.5 Input Modalities

2.5.4 Motion Actuation (WCAG 2.1 Level A)

NOT tested

3.1 Readable

3.2 Predictable

3.3 Input Assistance

4.1 Compatible