Short review of https://wet-boew.github.io/themes-dist/GCWeb/demos/tabs/tabs-carousel-en.html 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 18, 2019

General notes:

The codes provided in this page are not publisher-friendly and there are incorrect practices. A redesign might be beneficial.

“Dot dot dots” in codes are interpreted differently by different people and they are not informative. Actual code could have been used instead.

Please consider these user controls:

image 1

This is the example code provided for that portion:

<ul role="tablist">
	<li class="active"><a href="#panel1">Tab 1: ...</a></li>
	<li><a href="#panel2">Tab 2: ...</a></li>
	...
</ul>

Below is the actual code block that renders the same portion:

<ul role="tablist" aria-live="off">
<li class="control prv"><a class="prv" href="javascript:;" role="button" title="Previous"><span class="glyphicon glyphicon-chevron-left"></span><span class="wb-inv">Previous</span></a></li> <li class="control  tab-count" tabindex="0"><div>Item <div class="curr-count"><span class="curr-index">1</span> of 3</div></div></li><li class="control nxt"><a class="nxt" href="javascript:;" role="button" title="Next"><span class="glyphicon glyphicon-chevron-right"></span><span class="wb-inv">Next</span></a></li> 
<li class="active" role="presentation"><a href="#panel1" tabindex="0" role="tab" aria-selected="true" aria-controls="panel1" id="panel1-lnk">Tab 1: Take Note: Renewal of the Aviation Document Booklet.</a></li>
<li class="" role="presentation"><a href="#panel2" tabindex="-1" role="tab" aria-selected="false" aria-controls="panel2" id="panel2-lnk">Tab 2: Take Note: Grade Crossing Improvement Program (GCIP).</a></li>
<li role="presentation"><a href="#panel3" tabindex="-1" role="tab" aria-selected="false" aria-controls="panel3" id="panel3-lnk">Tab 3: Take Note: Tanker Safety Expert Panel.</a></li>
<li class="control plypause"><a class="plypause" href="javascript:;" role="button" title="Play"><span class="glyphicon glyphicon-play"></span> <span>Play</span><span class="wb-inv">  -  Start tab rotation</span></a></li>
</ul>
<figcaption>
<p>
	...
</p>
</figcaption>

Here is how an example figcaption should be constructed:

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

(Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)

Here is the example from Canada.ca’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>
</figure>

The size of the original image is 730X250 pixels

image 2

https://wet-boew.github.io/themes-dist/GCWeb/demos/tabs/img/protect-environment.jpg

This is its 730X250 pixels portion displayed on a 1920X1080 monitor:

image 3

image 4

image 5

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

Notes:

  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.4 Distinguishable

1.4.4 Resize text - Level AA

Some examples break when text is resized.

image 6

1.4.10 Reflow - Level AA

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

image 7

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.3 Focus Order - Level A

image 8

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