Accessibility assessment

Summary

This is an informal assessment based on an accessibility testing rule set. It cannot be seen as an accessibility conformance report. The latter is published separately from the assessment and only indicates if the requirements are satisfied, not satisfied, or if further testing is needed as specified by establishing the conformity described in WCAG 2.1. This assessment can contain false positives, false negatives, or be accurate. The assessment interpretation, via the accessibility conformance report, can consider other independent assessments in order to establish the conformance.

Type:

Accessibility assessment

Asserted by:

ESDC Accessibility Office

Date:

2024-06-25

Subject:

• Page / Screen title: Questionnaire - What to do when someone dies
• Page URL: https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html
• Applicability:The main content of the page including the interactive form, excluding the site header, site footer and the page details section.
• CSS selector of the applicability: main

Toward a conformity at:

WCAG 2.1 (Option: Level AA)

Summary:

Partial evaluation focused only on the component not its container. Evaluated all Success Criteria at Level AA of WCAG 2.2

Assessment details

Error 1 - Form elements must have labels

Error Title:

Form elements must have labels.

Error Severity:

Critical

Date fixed:

2024-07-15

Description:

The progress bar does not have a label.

Impact on Users:

Screen reader users do not hear anything that would make them think it is a progress bar, they only hear : "clickable progress bar 1 1 of 4 grouping My relationship to the deceased is:"

Pattern (required if on multiple pages):

This occurs on all Questionnaire pages.

Steps to Reproduce:

1. Load the page https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html.
2. Open a screen reader such as NVDA.
3. Read the page.
4. Note that the screen reader reads "clickable progress bar 1 1 of 4 grouping My relationship to the deceased is:".
5. right click on the progress bar and choose inspect.
6. Note that the progress bar does not have a label

Sample Code:

<p><progress max="4" class="progressBar" value="1"></progress></p> <p role="status" class="progressText">1 of 4</p>

Remediation:

Recommendation would be to add a label to the progress bar component that is descriptive of what it represents. For example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility