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 July 16, 2019


  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.2 Time-based Media

1.3 Adaptable

1.3.2 Meaningful Sequence (Level A)

  1. Tab order: Starts from the menu on the right (Most requested), goes to content (Services and information), then goes to right again (More information for)
  1. Within the carousel: The tab order of “Title of destination page – call to action” link comes after the user controls (Right-left arrows, item x of x, pause)

  2. Is presenting social media icons right after h1 a good idea?

image 1

1.3.3 Sensory Characteristics - Level A

Social media icons, which are read to screen readers, do not have tooltips. The design assumes that the users know what all these logos stand for.

image 2

1.4 Distinguishable

1.4.4 Resize text (Level AA)

On 200% resize, the carousel has issues.

image 3

On smaller screens, 200% resize breaks the placeholder of the search field.

image 4

1.4.10 Reflow (WCAG 2.1 Level AA)

On small screens, content of carousel is dislocated. (Please see 1.4.4 as well.) The text that reads “Item 3 of 3”, as indicated by red arrow, is not perceivable.

image 5

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

2.1.2 No Keyboard Trap (Level A)

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.2 Page Titled (Level A)

A debatable issue: The placeholder title used is almost the same as the h1. Should Titles and h1s not be different?

<title>[Theme title] -</title>
<h1 property="name" id="wb-cont">[Theme title]</h1>

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