Skip to content

Commit

Permalink
docs(WCAG): déclaration de conformité
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed May 15, 2024
1 parent 3a95631 commit 7374fa1
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 9 deletions.
8 changes: 8 additions & 0 deletions accessibilite.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> <title>Déclaration d’accessibilité — Orange Confort+</title> <!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
Copyright © 2014 Monotype Imaging Inc. All rights reserved.
Orange Company had buy the right for used Helvetica onto digital applications.
If you are not authorized to used it, don’t include the orangeHelvetica.css
See NOTICE.txt for more information.
--> <link href="css/orange-helvetica.min.css" rel="stylesheet"> <link href="css/boosted.min.css" rel="stylesheet"> <style>.pie{width:12.5rem;height:12.5rem;background-image:linear-gradient(to right,transparent 50%,#f16e00 0)}.pie::after{content:'';position:absolute;width:50%;height:100%;border-radius:0 100% 100% 0/50%;background-color:#f16e00;transform-origin:left}.pie[data-value="66"]::after{transform:rotate(57.6deg)}.pie-val{inset:.9375rem;line-height:10rem;z-index:2}</style> <link href="accessibility.html" rel="alternate" hreflang="en"> </head> <body> <header role="banner"> <a id="top"></a> <nav aria-label="Langues alternatives" class="bg-dark navbar-dark navbar navbar-expand-lg supra" role="navigation"> <div class="container"> <ul class="me-5 ms-auto navbar-nav"> <li class="nav-item"><a href="accessibilite.html" class="nav-link active" aria-current="page">Français</a></li> <li class="nav-item"><a href="accessibility.html" class="nav-link" hreflang="en" lang="en">English</a></li> </ul> </div> </nav> <nav aria-label="Liens utiles" class="bg-dark navbar-dark navbar navbar-expand-lg" role="navigation"> <div class="container"> <a href="index.html" class="ms-5 me-auto me-lg-4 navbar-brand text-white"> <img alt="Orange" class="ms-5" height="50" src="assets/img/orange_logo.svg" width="50"> <h1 class="title">Confort<span class="text-primary">+</span></h1> </a> <ul class="me-5 ms-auto navbar-nav flex-row"> <li class="nav-item"> <a href="https://addons.mozilla.org/fr/firefox/addon/orange-confort/" class="nav-link gap-2 nav-icon" rel="noopener" target="_blank"> <svg aria-hidden="true" height="30" width="30"> <use xlink:href="assets/img/logos.svg#firefox"></use> </svg> <span>Extension Firefox</span> </a> </li> <li class="nav-item"> <a href="https://chrome.google.com/webstore/detail/orange-confort%2B/ddnpdohiipephjpdpohikkamhdikbldp?hl=fr" class="nav-link gap-2 nav-icon" rel="noopener" target="_blank"> <svg aria-hidden="true" height="31" width="30"> <use xlink:href="assets/img/logos.svg#chrome"></use> </svg> <span>Extension Chrome</span> </a> </li> <li class="nav-item me-5"> <a href="https://github.com/Orange-OpenSource/Orange-Confort-plus/" class="nav-link gap-2 nav-icon" rel="noopener" target="_blank" hreflang="en"> <svg aria-hidden="true" height="30" width="30"> <use xlink:href="assets/img/logos.svg#github"></use> </svg> <span class="visually-hidden">Orange Confort+ sur </span> <span>GitHub</span> </a> </li> </ul> </div> </nav> </header> <main class="container" role="main"> <div class="row my-5"> <div class="offset-md-1 col-md-10"> <h1 class="display-2">Déclaration d'Accessibilité&nbsp;: Confort<span class="text-primary">+</span></h1> <p class="offset-md-1 lead mb-5 ps-3"> Ce site est conforme à 66% aux critères <abbr lang="en" title="Web Content Accessibility Guidelines">WCAG</abbr>. </p> <div class="border-bottom border-light border-top pb-4 pt-5"> <div class="row"> <div class="col-lg-3"> <h2 class="text-center bg-body-secondary pie position-relative rounded-circle" data-value="66"> <span class="visually-hidden">État de conformité&nbsp;: </span> <span class="display-3 bg-white mb-0 pie-val position-absolute rounded-circle">66%</span> </h2> </div> <div class="col-lg-3"> <h3 class="h5 mb-1">Date de l’audit</h3> <p><time datetime="2023-12-08">08/12/2023</time></p> <h3 class="h5 mb-1">Identité du déclarant</h3> <p> <a href="https://a11y-guidelines.orange.com/">Centre de Compétences d’Accessibilité Numérique du Groupe Orange</a> </p> <h3 class="h5 mb-1">Référentiel</h3> <p> <a href="https://www.w3.org/TR/WCAG22/" hreflang="en"> <abbr lang="en" title="Web Content Accessibility Guidelines">WCAG</abbr> version 2.2, niveau AA </a> </p> </div> <div class="col-lg-6"> <h3 class="h5 mb-1">Technologies utilisées pour la réalisation du site</h3> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h3 class="h5 mb-1">Méthodes et outils utilisés pour vérifier l’accessibilité</h3> <ul> <li><strong>Tests automatiques&nbsp;:</strong> aXe 4.9.3</li> <li><strong>Tests manuels&nbsp;:</strong> <a href="https://la-va11ydette.orange.com/?list=rgaa&lang=fr">va11ydette d’Orange</a>, Color Contrast Analyser V 3.1.2, analyse de la source</li> <li><strong>Tests fonctionnels&nbsp;:</strong> NVDA 2023.4, Navigation clavier</li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="offset-md-1 col-md-10"> <h2 class="display-3">Contexte</h2> </div> <div class="col-md-8 offset-md-2 lead mb-5"> <p> Orange s’engage à rendre ses sites web, ses applications mobiles et son mobilier urbain numérique accessibles conformément à l’article 106 de la loi n°2016-1321 du 7 octobre 2016 pour une République numérique, tel que décrit dans son <a href="https://oran.ge/accessibilite-schema" title="schéma pluriannuel d’amélioration de l’accessibilité numérique (PDF, 230Ko)">schéma pluriannuel d’amélioration de l’accessibilité numérique (PDF, 230Ko)</a>. </p> </div> <div class="offset-md-1 col-md-10"> <h2 class="display-3 mt-4">Page(s) ayant fait l’objet de la vérification de conformité</h2> </div> <div class="col-md-8 offset-md-2 lead mb-5"> <p>L’audit de vérification a été effectué sur les pages suivantes à l'aide de la va11ydette d'Orange&nbsp;:</p> <ol> <li><strong>Confort+&nbsp;:</strong> https://confort-plus.orange.com/</li> </ol> </div> <div class="offset-md-1 col-md-10"> <h2 class="display-3 mt-4">Résultat des tests</h2> </div> <div class="col-md-8 offset-md-2 lead mb-3"> <p> L’audit révèle que le taux moyen de conformité du site s’élève à 66% (moyenne des taux de conformité des pages). </p> </div> <div class="col-md-8 offset-md-2 mb-3"> <table class="table table-striped"> <caption class="visually-hidden">Synthèse par niveaux</caption> <thead> <tr> <th scope="row">Niveau</th> <th scope="col" class="text-center">A</th> <th scope="col" class="text-center">AA</th> <th scope="col" class="text-center">Total</th> </tr> </thead> <tbody> <tr> <th scope="row">Nombre de critères</th> <td class="text-center">32</td> <td class="text-center">24</td> <td class="text-center">56</td> </tr> <tr> <th scope="row">Conformes</th> <td class="text-center">9</td> <td class="text-center">10</td> <td class="text-center">19</td> </tr> <tr> <th scope="row">Non-conformes</th> <td class="text-center">6</td> <td class="text-center">4</td> <td class="text-center">10</td> </tr> <tr> <th scope="row">Non-applicables</th> <td class="text-center">16</td> <td class="text-center">10</td> <td class="text-center">26</td> </tr> <tr class="table-active"> <th scope="row">Conformité</th> <td class="text-center fw-bold">60%</td> <td class="text-center fw-bold">71%</td> <td class="text-center fw-bold">66%</td> </tr> </tbody> </table> </div> <div class="col-md-8 offset-md-2 lead mb-5"> <h3>Non-conformités</h3> <ul> <li><strong>1.1.1</strong> Contenu non textuel — Niveau A</li> <li><strong>1.3.1</strong> Information et relations — Niveau A</li> <li><strong>1.4.1</strong> Utilisation de la couleur — Niveau A</li> <li><strong>1.4.10</strong> Reflow — Niveau AA</li> <li><strong>2.4.6</strong> En-têtes et étiquettes — Niveau AA</li> <li><strong>2.4.7</strong> Visibilité du focus — Niveau AA</li> <li><strong>3.3.1</strong> Identification des erreurs — Niveau A</li> <li><strong>3.3.2</strong> Étiquettes ou instructions — Niveau A</li> <li><strong>4.1.2</strong> Nom, rôle et valeur — Niveau A</li> <li><strong>4.1.3</strong> Messages d’état — Niveau AA</li> </ul> </div> <div class="offset-md-1 col-md-10"> <h2 class="display-3 mt-4">Retour d’information et contact</h2> </div> <div class="col-md-8 offset-md-2 lead mb-5"> <p> Vous pouvez nous aider à améliorer l’accessibilité du site en nous signalant les problèmes éventuels que vous rencontrez. Pour ce faire, <a href="mailto:confort.plus@orange.com">envoyez un courriel à confort.plus@orange.com</a>. </p> </div> <div class="offset-md-1 col-md-10"> <h2 class="display-3 mt-4">Voies de recours</h2> </div> <div class="col-md-8 offset-md-2 lead mb-5"> <p> Vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante, dans ce cas&nbsp;: </p> <ul> <li>Écrire un message au <a href="https://formulaire.defenseurdesdroits.fr/">Défenseur des droits</a>.</li> <li> Ou contacter le <a href="https://www.defenseurdesdroits.fr/saisir/delegues">délégué du Défenseur des droits dans votre département</a>. </li> <li> Ou envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) <br> <address> Défenseur des droits <br> Libre réponse 71120 <br> 75342 Paris CEDEX 07</address> </li> </ul> </div> </div> </main> <footer class="bg-dark navbar-dark footer" role="contentinfo"> <div class="container d-flex footer-service"> <ul class="navbar-nav gap-3 gap-md-5 mx-auto"> <li class="ms-1"> <a href="https://addons.mozilla.org/fr/firefox/addon/orange-confort/" class="nav-link gap-2" rel="noopener" target="_blank"> <svg aria-hidden="true" height="30" width="30"> <use xlink:href="assets/img/logos.svg#firefox"></use> </svg> <span>Extension Firefox</span> </a> </li> <li> <a href="https://chrome.google.com/webstore/detail/orange-confort%2B/ddnpdohiipephjpdpohikkamhdikbldp?hl=fr" class="nav-link gap-2" rel="noopener" target="_blank"> <svg aria-hidden="true" height="31" width="30"> <use xlink:href="assets/img/logos.svg#chrome"></use> </svg> <span>Extension Chrome</span> </a> </li> <li> <a href="https://github.com/Orange-OpenSource/Orange-Confort-plus/" class="nav-link gap-2" rel="noopener" target="_blank" hreflang="en"> <svg aria-hidden="true" height="30" width="30"> <use xlink:href="assets/img/logos.svg#github"></use> </svg> <span class="visually-hidden">Orange Confort+ sur </span> <span>GitHub</span> </a> </li> </ul> </div> <div class="border-bottom border-1 border-dark"></div> <div class="container footer-terms"> <div class="row"> <div class="offset-md-1 col-md-10 d-flex"> <p class="fw-bold mb-0">© Orange 2023</p> <p class="mb-0 ms-auto"> Orange Confort+ utilise les polices <a href="http://opendyslexic.org/get-it-free/" rel="noopener" target="_blank" hreflang="en">OpenDyslexic</a>, <a href="https://github.com/Orange-OpenSource/font-accessible-dfa" rel="noopener" target="_blank" hreflang="en">Accessible DfA</a> et <a href="https://www.luciole-vision.com/" rel="noopener" target="_blank">Luciole</a> <small class="text-light">(© Laurent Bourcellier & Jonathan Perez <a href="https://creativecommons.org/licenses/by/4.0/legalcode.fr" rel="noopener" target="_blank">Licence CC-BY</a>)</small>. </p> </div> </div> </div> </footer> <div class="back-to-top"> <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-bs-label="Retour en haut"> <span class="visually-hidden">Retour en haut</span> </a> </div> <script src="js/toolbar.min.js"></script>
Loading

0 comments on commit 7374fa1

Please sign in to comment.