-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
392 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| --- | ||
| title: Questionnaire à étapes | ||
| dateModified: 2024-07-16 | ||
| description: "Ajout d'un modèle de questionnaire à la composante du Formulaire à étapes existant." | ||
| lang: fr | ||
| altLangPage: "index.html" | ||
| css: | ||
| - stepsquiz.css | ||
| script: | ||
| - js/stepsquiz.js | ||
| --- | ||
| <p>Ajout d'un modèle de questionnaire à la composante du Formulaire à étapes.</p> | ||
|
|
||
| <h2>Plan de mise en œuvre pour GCWeb</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-04-stepsquiz" | first %} | ||
|
|
||
| <ul> | ||
| {% for deliverable in implPlan.implementationPlan %} | ||
| <li>{{ deliverable.due }} - {{ deliverable.what }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Todo and for future consideration</p> | ||
| <ul> | ||
| {% for todo in implPlan.todos %} | ||
| <li>{{ todo }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Accessibility reports</p> | ||
| <ul> | ||
| {% for a11y in implPlan.a11y %} | ||
| <li>{{ a11y }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Sponsor: {{ implPlan.sponsor }}</p> | ||
|
|
||
| <section> | ||
| <h2>Objectif</h2> | ||
| <p>Cette fonctionnalité fournit un modèle de questionnaire lorsqu'elle est appliquée à la composante du Formulaire à étapes existant.</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Comment l'utiliser</h2> | ||
| <ol> | ||
| <li>Ajout de la classe CSS <code>quiz</code> à l'élément <code><div></code> contenant la classe CSS <code>wb-steps</code> de la composante du Formulaire à étapes.</li> | ||
| </ol> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Liste des changements</h2> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Date:</dt> | ||
| <dd>2024-07-15</dd> | ||
| <dt>Description:</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Fonctionnalité de traduction française sur basculement de langue pour deux éléments de texte trouvés dans la composante.</li> | ||
| <li>Ajout d'un élément <code><label></code> autour de l'élément <code><progress></code> afin de résoudre un problème d'accessibilité (ref: <a href="reports/a11y-1-en.html">Accessibility assessment no.1 - Progress bar</a>).</li> | ||
| </ul> | ||
| </dd> | ||
| <dt>Impact sur le ministère parrain :</dt> | ||
| <dd>Prévient une éventuelle plainte liée aux langues officielles et/ou à l’accessibilité.</dd> | ||
| <dt>Impact sur les usagés :</dt> | ||
| <dd>Accès à du contenu conforme aux langues officielles et répondant aux lignes directrices d'accessibilité WCAG 2.1 (Option : Niveau AA).</dd> | ||
| </dl> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Exemples pratiques</h2> | ||
| <ul> | ||
| <li><a href="#default-1">Questionnaire à étapes - Par défaut (pleine largeur)</a></li> | ||
| <li><a href="stepsquiz-limited-fr.html">Steps Quiz - Contenu à largeur limitée</a></li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section> | ||
| <div class="wb-frmvld provisional wb-steps quiz"> | ||
| <h2 id="default-1">Exemple - Par défaut (pleine largeur)</h2> | ||
| <form action="#" id="quiz-example"> | ||
| <fieldset> | ||
| <legend>1. Quel est ton fruit préféré ?</legend> | ||
| <div> | ||
| <p>Mon fruit préféré est :</p> | ||
| <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio"> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="apple-1" value="Apple"> | ||
| <label for="apple-1">pomme</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="orange-1" value="Orange"> | ||
| <label for="orange-1">Orange</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="banana-1" value="Banana"> | ||
| <label for="banana-1">Banane</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="kiwi-1" value="Kiwi"> | ||
| <label for="kiwi-1">Kiwi</label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>2. Quel est ton animal préféré ?</legend> | ||
| <div> | ||
| <p>Mon animal préféré est :</p> | ||
| <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio"> | ||
| <li class="radio"> | ||
| <input type="radio" name="animal" id="dog-1" value="Dog"> | ||
| <label for="dog-1">Chien</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="animal" id="cat-1" value="Cat"> | ||
| <label for="cat-1">Chat</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="animal" id="bird-1" value="Bird"> | ||
| <label for="bird-1">Oiseau</label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>3. Condiments</legend> | ||
| <div> | ||
| <p>Choisissez vos condiments :</p> | ||
| <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio"> | ||
| <li class="checkbox"> | ||
| <input type="checkbox" id="ketchup-1" value="Ketchup" name="condiments"> | ||
| <label for="ketchup-1">Ketchup</label> | ||
| </li> | ||
| <li class="checkbox"> | ||
| <input type="checkbox" id="relish-1" value="Relish" name="condiments"> | ||
| <label for="relish-1">Relish</label> | ||
| </li> | ||
| <li class="checkbox"> | ||
| <input type="checkbox" id="mustard-1" value="Mustard" name="condiments"> | ||
| <label for="mustard-1">Moutarde</label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fieldset> | ||
| <input type="submit" name="submit" value="Soumettre" class="btn btn-primary" /> | ||
| </form> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| --- | ||
| title: Accessibility assessment #1 - Progress bar | ||
| dateModified: 2024-07-15 | ||
| description: "Accessibility assessment for the progress bar element." | ||
| lang: en | ||
| --- | ||
| <p>Partial. Evaluation of new Success Criteria at Level A and Level AA of WCAG 2.1 and WCAG 2.2</p> | ||
|
|
||
| <h2>GCWeb implementation plan</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-04-stepsquiz" | first %} | ||
|
|
||
| <nav> | ||
| <h3>On this page</h3> | ||
| <ul> | ||
| <li><a href="#summary">Summary</a></li> | ||
| <li><a href="#acr">Assessement details</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <section> | ||
| <h3 id="summary">Summary</h2> | ||
| <p>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.</p> | ||
|
|
||
| <dl > | ||
| <dt>Type:</dt> | ||
| <dd>Accessibility assessment</dd> | ||
| <dt>Asserted by:</dt> | ||
| <dd><a href="https://esdc.prv/en/hrsb/accessibility/roadmap.shtml">ESDC Accessibility Office</a></dd> | ||
| <dt>Date:</dt> | ||
| <dd>2024-06-25</dd> | ||
| <dt>Subject:</dt> | ||
| <dd> | ||
| <ul class="list-unstyled"> | ||
| <li><strong>Page / Screen title</strong>: Questionnaire - What to do when someone dies</li> | ||
| <li><strong>Page URL</strong>: <a href="https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html">https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html</a></li> | ||
| <li><strong>Applicability:</strong> In the context of the life events project conduct by Canada.ca Journey Lab.</li> | ||
| <li><strong>HTML element:</strong> <code><progress></code></li> | ||
| </ul> | ||
| </dd> | ||
| <dt>Toward a conformity at:</dt> | ||
| <dd>WCAG 2.1 (Option: Level AA)</dd> | ||
| <dt>Summary:</dt> | ||
| <dd>Partial evaluation focused only on the component not its container. Evaluated all Success Criteria at Level AA of WCAG 2.2</dd> | ||
| </dl> | ||
|
|
||
| <h3 id="acr">Assessment details</h3> | ||
| <table class="table table-hover table-bordered" cellspacing="0" rules="all" border="1" id="MainContent_FormView_GridViewPoints" style="border-collapse:collapse;"> | ||
| <tbody | ||
| <tr> | ||
| <th scope="col">Standard Name</th><th scope="col">Point Name</th> | ||
| </tr> | ||
| <tr> | ||
| <td>Web Content Accessibility Guidelines</td><td>1.3.1 Info and Relationships (Level A)</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Web Content Accessibility Guidelines</td><td>3.3.2 Labels or Instructions (Level A)</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Web Content Accessibility Guidelines</td><td>4.1.2 Name, Role, Value (Level A)</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Error Title:</dt> | ||
| <dd>Form elements must have labels.</dd> | ||
| <dt>Error Severity:</dt> | ||
| <dd>Critical</dd> | ||
| <dt>Date fixed:</dt> | ||
| <dd>2024-07-15</dd> | ||
| <dt>Description:</dt> | ||
| <dd>The progress bar does not have a label.</dd> | ||
| <dt>Impact on Users:</dt> | ||
| <dd>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:"</dd> | ||
| <dt>Pattern (required if on multiple pages):</dt> | ||
| <dd>This occurs on all Questionnaire pages.</dd> | ||
| <dt>Steps to Reproduce:</dt> | ||
| <dd> | ||
| <ol> | ||
| <li>Load the page <a href="https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html">https://www.canada.ca/en/employment-social-development/employment-social-development/navigating-death/questionnaire.html</a>.</li> | ||
| <li>Open a screen reader such as NVDA.</li> | ||
| <li>Read the page.</li> | ||
| <li>Note that the screen reader reads "clickable progress bar 1 1 of 4 grouping My relationship to the deceased is:".</li> | ||
| <li>right click on the progress bar and choose inspect.</li> | ||
| <li>Note that the progress bar does not have a label</li> | ||
| </ol> | ||
| </dd> | ||
| <dt>Sample Code:</dt> | ||
| <dd><code><p><progress max="4" class="progressBar" value="1"></progress></p> <p role="status" class="progressText">1 of 4</p></code></dd> | ||
| <dt>Remediation:</dt> | ||
| <dd>Recommendation would be to add a label to the progress bar component that is descriptive of what it represents. For example: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility</a></dd> | ||
| </dl> | ||
| </section> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.