Déclaration d'accessibilité

1. Note générale concernant le document

Ce document est basé sur l’exemple de déclaration d’accessibilité RGAA 4.0 mis à disposition par la Direction interministérielle du numérique en date de novembre 2019.

La Métropole de Lyon s’engage à rendre ses sites internet, intranet, extranet et ses progiciels accessibles [et ses applications mobiles et mobilier urbain numérique] conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.

2. Schéma pluriannuel de mise en accessibilité

La Métropole de Lyon met en œuvre la stratégie et les actions suivantes :

  • Actions à venir en 2022 :
    • Finalisation pour l'ensemble des sites de la mise à jour des certificats pour se conformer au RGAA version 4
    • Amélioration du taux d'accessibilité des sites en fonction des audits et des retours des ateliers (l'objectif étant qu'il soit supérieur à 75% pour tous les sites)

3. Établissement de cette déclaration d’accessibilité

Cette déclaration d’accessibilité s’applique au site Ecolyo (https://ecolyo.com) et a été établie le 17/02/2021. La version du RGAA utilisée pour réaliser les tests est la version RGAA 4.1 du 18/02/2021.

La déclaration d’accessibilité est valide à partir de sa date de publication. Elle doit être mise à jour :

  • à la date de modification substantielle ou de refonte du site concerné.
  • 3 ans date de publication de la déclaration, ou,
  • 18 mois après après la la date de publication d’une nouvelle version du référentiel, pour les personnes qui appliquent la méthode technique.

Il peut cependant être souhaitable de mettre à jour plus régulièrement la déclaration d’accessibilité, y compris pour une même version de la méthode technique, afin de souligner les efforts réalisés et de mettre à jour le pourcentage de critères respectés.

4. Technologies utilisées pour la réalisation du site

  • HTML5
  • CSS3
  • JavaScript

5. Environnement de test

Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie par la base de référence du RGAA 4.1, avec les versions suivantes :

Agent utilisateur Technologie d'assistance
Firefox 86.0 Chrome 80.0.4324.150 NVDA 2020.4

6. Outils pour évaluer l’accessibilité

  • Colour Contrast Analyzer
  • Extension Web developer pour Firefox
  • Extension Stylus pour Firefox
  • Validateur W3C

7. Pages du site ayant fait l’objet de la vérification de conformité

N° Nom de la page Url
P01 Accueil https://ecolyo.com/
P02 Formulaire contact Pas d'url directe
P03 Mentions légales (connecté) /options/legalnotice
P04 Plan du site Pas de page
P05 Moteur de recherche Pas de page
P06 Accessibilité Pas de page
P07 Conso (connecté) /consumption
P08 Défis (connecté) /challenges
P09 Ecogestes (connecté) /ecogestures
P10 FAQ (connecté) /options/FAQ
P11 Options (connecté) /options

8. État de conformité

Le site Ecolyo (https://ecolyo.com/) n’est pas conforme avec le référentiel général d’amélioration de l’accessibilité (RGAA), version 4.1 en raison des non-conformités et des dérogations énumérées ci-dessous.

9. Résultats des tests

L’audit de conformité réalisé par la société AUSY révèle que 35,71% des critères du RGAA version 4.1 sont respectés.

Des corrections sont en cours. Une mise à jour du pourcentage sera donc réalisée au 1er trimestre 2023.

10. Contenus non accessibles

10.1 Non-conformités

10.1.1 Thématique Images

  • Une image porteuse d’information img nécessite une description détaillée. Exemple : logo « investir l’avenir ». L’image doit être pourvue au moins d’une alternative textuelle. Exemples : attribut WAI-ARIA : aria-labelledby, aria-label, alt ou title.
  • Une image porteuse d’information svg nécessite une alternative textuelle et doit être pourvue d’un attribut WAI-ARIA role="img". Exemple : « logo Grand Lyon la métropole ». L’alternative textuelle sera contenue dans l’attribut aria-labelledby ou aria-label.
  • Une image de décoration img doit être ignorée par les technologies d’assistance. Elle doit avoir un attribut alt vide ou être pourvue d’un attribut WAI-ARIA aria-hidden="true" ou role="presentation". Exemples : compteurs Linky, Téléo, Gazpar, security-shield, caractère « + » avant le lien « Un site de la Métropole de Lyon » (P01), coques en stock (P08), …
  • Une image décorative object (avec un attribut type="image/…") doit être ignorée par les technologies d’assistance. Elle doit être pourvue d’un attribut WAI-ARIA aria-hidden="true" et ne doit pas posséder d’attribut aria-labelledby, aria-label et title. Exemple : image décorative (P01)
  • Une image décorative svg doit être ignorée par les technologies d’assistance. Elle doit être pourvue d’un attribut WAI-ARIA aria-hidden="true". Elle doit être dépourvue d’alternative textuelle (ainsi que ses enfants) : attributs aria-labelledby et aria-label ; élément title et desc ; attribut title. Exemple : image décorative (P01), nombreuses images (P07 et P08)
  • Des images porteuses d’information possèdent une alternative non pertinente. Exemples : logos (P01)
  • Les conditions de restitution d’une alternative textuelle via des technologies d’assistance (par exemple une loupe d’écran) nécessitent qu’elle soit la plus courte possible. Une longueur maximale de 80 caractères est fortement recommandée ; elle limitera le nombre de manipulations nécessaires pour lire l’alternative par les utilisateurs de plages braille ou de loupes d’écran notamment.

10.1.2. Thématique Couleurs

  • Le rapport de contraste est insuffisant pour les éléments du menu ECOLYO (Banks, Contacts, Drive, …). Il est de 2.6 au lieu de 3. Pages P03, P07, P08, P09, P10 et P11.

10.1.3 Thématique Liens

  • Un lien image ne possède pas d’intitulé. Fournir une alternative textuelle à l’image qui permettra de comprendre la fonction et la destination du lien. Lien image Cloud pages P03, P07, P08, P09, P10 et P11.
  • Un lien composite contient à la fois un texte et un ou plusieurs éléments de type image. Dans la mesure où le texte visible est suffisant à comprendre la destination du lien, alors l’image est une image de décoration. Elle doit être ignorée par les technologies d’assistance.
    • Lien « Devenir testeur » (P01) :
    • Le lecteur d’écran énonce : « ecolyo-icon graphique devenir testeur lien »
    • La balise img doit avoir un alt vide ou un attribut WAI-ARIA aria-hidden="true" ou role="presentation" (par exemple).
    • Lien « Retour à l’accueil » (Pages P03, P07, P08, P09, P10 et P11)
    • Le lecteur d’écran énonce : « Retour à l’accueil 1 sur 1 »
    • La balise img doit avoir un alt vide ou un attribut WAI-ARIA aria-hidden="true" ou role="presentation" (par exemple).
    • Idem pour les liens composites du menu (Conso, Défis, …).
    • Pages P03, P07, P08, P09, P10 et P11.
    • Lien « 3,81 € » page P07 :
    • Le lecteur d’écran énonce : « 3 euros quatre-vingt-un lien »
    • Comprenez-vous la fonction et la destination du lien ? Pas moi ! Et un utilisateur non-voyant ?
    • Rendre les intitulés de liens plus explicites (plusieurs liens).
    • Lien « Mega Winter is living » page P08
    • Lien « Lire la FAQ » page P11
    • Le lecteur d’écran énonce « Lire la faq lien lire la faq bouton »
    • Quel est l’intérêt d’inclure un bouton dans un lien (entre les balises et ) ?
    • Vérifier les liens composites sur toutes les pages
  • Le lien « Un site de la Métropole de Lyon » est conforme. Toutefois il pourrait englober l’image « + » et devenir un lien composite avec une image de décoration. Page P01.
  • Il y a un problème sur les liens du menu Ecolyo. La présence d’un paragraphe (balise

    ) à l’intérieur du lien (entre les balises a et /a) rend les liens non explicites. De plus, il faut tabuler 2 fois pour passer au lien suivant. Remplacer la balise p par une balise span par exemple. Pages P03, P07, P08, P09, P10 et P11.

10.1.4. Thématique Scripts

  • Le clic sur le bouton Partagez-nous vos retours initie un changement de contexte : une nouvelle fenêtre s’ouvre. L’utilisateur n’est pas prévenu du changement de contexte : La balise button n’est pas explicite. Le lecteur d’écran énonce « Bouton » Préconisation : « Accédez au formulaire (ou à la nouvelle fenêtre) pour donner votre retour » par exemple. Pages P03, P07, P08, P09, P10 et P11.
  • Le clic sur le bouton initie un changement de contexte : mise à jour dynamique d’un champ de formulaire L’utilisateur n’est pas prévenu du changement de contexte : La balise button n’est pas explicite. Le lecteur d’écran énonce « Bouton » Préconisation : « Afficher votre mot de passe en clair » par exemple. Page P11.

10.1.5. Thématique Éléments obligatoires

  • Thématique Éléments obligatoires
  • Présence d’erreurs dans le code
  • Toutes les pages
  • L’indication de langue par défaut n’est pas pertinente : html lang="en"
    • Page P01
  • Les titres de pages sont tous identiques : « Ecolyo »
    • Impossible de retrouver une page précise dans l’historique de navigation
  • Présence de textes en langue anglaise sans indication de langue (attribut lang et/ou xml:lang sur l’élément lui-même ou l’un de ses parents). Exemple : Méga Winter is leaving, Winter is leaving, … Page P08

10.1.6. Thématique Structuration de l'information

  • Des passages de textes présents dans les pages constituent des titres. Il faut les structurer à l’aide d’une balise hx ou d’une balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level. Pages P07 à P11.
  • La zone d’en-tête de la page n’est pas structurée via une balise header.
  • La zone de contenu principal n’est pas structurée via une balise main. Page P01.
  • La zone d’en-tête de la page n’est pas structurée via une balise header.
  • La zone de pied de page n’est pas structurée via une balise footer. Page P03 à P11.
  • La notion d’éléments « regroupés visuellement sous forme de liste » se caractérise par la présence d’une série d’éléments se suivant visuellement les uns les autres, avec une forme visuelle, une nature et un fonctionnement identique, mais sans avoir directement de marqueur visuel de liste (non ordonnée ou ordonnée), comme par exemple un menu de navigation. Les éléments Linky, Téléo et Gazpar pourraient être regroupés sous forme de liste. Une liste est structurée :
    • Soit au moyen des éléments ul et li ;
    • Soit au moyen d’éléments pourvus d’attributs WAI-ARIA role="list" et role="listitem". Page P01

10.1.7 Thématique Présentation de l’information

  • Quelques pertes d’informations en zoom graphique 200%. Exemple : sur le Menu et dans la page P10.

10.1.8. Thématique Navigation

  • Présence à tort d’attributs de présentation de l’information height, width sur des balises svg.Pages P03, P07, P08, P09, P10 et P11.
  • Quelques pertes d’information en zoom graphique 200% sur les liens Comment ça marche, La sécurité et Tester Ecolyo. Légers chevauchements en zoom texte seulement. Page P01.
  • L’indication visuelle de prise de focus est absente sur les liens Comment ça marche, La sécurité et Tester Ecolyo.
  • Constaté au survol de la souris avec FIREFOX. Avec CHROME c’est bon.Page P01.
  • Un lien dont la nature n’est pas évidente peut être confondu avec le texte environnant.
    • La couleur du lien doit avoir un rapport de contraste supérieur ou égal à 3:1 par rapport au texte environnant.
    • Le lien doit disposer d’une indication visuelle au survol autre qu’un changement de couleur.
    • Le lien doit disposer d’une indication visuelle au focus autre qu’un changement de couleur.
  • Il n’y a pas d’indication visuelle au survol de la souris. Page P03.
  • Revoir tous les éléments pouvant recevoir le focus à la souris et à la tabulation. L’indication visuelle du focus du navigateur ne doit pas être supprimée ou dégradée sauf si un style du focus défini par l’auteur est visible et suffisamment contrasté au regard du critère 3.3 Pages P07, P08, P09, P10 et P11.
  • Lorsque le contenu dont le sens de lecture est horizontal est affiché dans une fenêtre réduite à une largeur de 320px :
    • Les liens Comment ça marche, La sécurité et Tester Ecolyo disparaissent. Page P01.
    • Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages P03, P07 et P10.
  • Lorsque le contenu dont le sens de lecture est vertical est affiché dans une fenêtre réduite à une hauteur de 256px :
    • Les liens Comment ça marche, La sécurité et Tester Ecolyo disparaissent. Page P01
    • Le texte « Ecolyo vous permet de centraliser le suivi … » est tronqué dans sa partie droite, ainsi que les images Linky, Téléo et Gazpar. Page P01
    • Le bandeau menu (Cloud, Ecolyo et Paramètres) disparaît. Pages P03, P07 et P10.
  • Lorsque les propriétés d’espacement du texte sont redéfinies par l’utilisateur, le bandeau « Ce service est actuellement en expérimentation » est tronqué dans sa partie haute. Page P01.

10.1.9. Thématique Formulaires

  • Dans la fenêtre Partagez-nous vos retours : Les champs de formulaire Description et Email ne remplissent pas au moins une de ces conditions :
    • Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
    • Possède un attribut WAI-ARIA aria-label ;
    • Est associé à un élément  label  ayant un attribut for ;
    • Possède un attribut title ;
    • Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
  • Note au sujet de l’utilisation de placeholder : lorsque l’attribut placeholder est présent, il est susceptible d’être restitué à la place de l’attribut title. Par conséquent, lorsque ces deux attributs title et placeholder sont présents, ils doivent être identiques. Pages P03, P07, P08, P09, P10 et P11.
  • Le champ de formulaire input type="checkbox" ne remplit pas au moins une de ces conditions :
    • Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
    • Possède un attribut WAI-ARIA aria-label ;
    • Est associé à un élément label ayant un attribut for ;
    • Possède un attribut title ;
    • Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
  • Le lecteur d’écran énonce « case à cocher non cochée ». Mais on ne sait pas de quoi il s’agit !Page P07.
  • A propos du bouton permettant de voir le mot de passe en clair :
  • Le lecteur d’écran énonce « Bouton ». Mais on ne sait pas de quoi il s’agit !Page P11.
  • Le bouton permettant d’accéder à la fenêtre Partagez-nous vos retours n’est pas explicite :
  • Le lecteur d’écran énonce « Bouton »Pages P03, P07, P08, P09, P10 et P11.
  • Dans la fenêtre Partagez-nous vos retours,
    • Les trois boutons de même nature devraient être regroupés dans un fieldset avec une légende
    • Les intitulés des trois boutons pourraient être plus explicites
    • Idem pour le bouton Envoyer. Lecteur d’écran énonce « Envoyer bouton ». Envoyer quoi ?
    • Le bouton de fermeture n’est pas explicite. Lecteur d’écran énonce « Bouton »
    • De plus le focus (tabulation) sort de la fenêtre. La fenêtre n’est pas modale ?
      • Pages P03, P07, P08, P09, P10 et P11.
  • D’autres bouton ne sont pas explicites :
    • < << >> > (P07)
    •  Mentions légales (P03)
    •  FAQ (P10)
    •  Gaz, Supprimer et Mettre à jour (P11)
  • Le lecteur d’écran énonce « Bouton », « Supprimer bouton » et « Mettre à jour bouton ». On supprime ou on met à jour quoi ?

10.1.10. Thématique navigation

  • Absence de zones de regroupement de contenus (zones d’en-tête, de navigation principale, de contenu principal, de pied de page, de moteur de recherche)
    • Pas de zone d’entête, de zone de contenu principal et de moteur de recherche
    • Menu de navigation : aucun critère respecté. Exemple : Ajouter role="navigation“
    • Pied de page : aucun critère respecté. Exemple : Ajouter role="contentinfo"
      • Pages P03, P07, P08, P09, P10 et P11.
  • Absence de liens d’évitement ou d’accès rapide Pages P03, P07, P08, P09, P10 et P11.
  • Il y a un gros problème sur la tabulation, notamment dans les sous-listes des menus :
    • Le focus passe sur les éléments de la liste, même si la liste n’est pas ouverte.
    • Quand la liste est ouverte, le focus sort de la liste ou de la fenêtre modale et revient sur la page
    • Menus Ecolyo, Paramètres ainsi que la fenêtre Partagez-nous vos retours
    • De plus, il est impossible d’ouvrir ou fermer les listes autrement qu’avec la souris ages P03, P07, P08,
      • P09, P10 et P11.
    • Il faut deux tabulations pour aller du premier au second lien Devenir Testeur.
    • Piège au clavier. Page P01.
    • Il faut deux tabulations pour aller du lien Options au bouton  Mentions légales.
    • Piège au clavier. Page P03.
  • Éléments Gaz, Se connecter à l’électricité et Se connecter à l’eau :
    • Le focus passe sur les éléments de la liste, même si celle-ci n’est pas développée. Page P11.
  • Éléments Lire la FAQ :
    • La tabulation boucle à l’intérieur de ce lien-bouton.
    • Le lecteur d’écran énonce « Lire la FAQ lien » puis « Lire la FAQ bouton » et reboucle
    • Piège au clavier. Impossible d’aller plus loin dans la page.
    • Ce cas n’est pas reproduit avec le navigateur CHROME Page P11.

10.1.11. Thématique Consultation

  • Image avec balancier
    • Il est impossible de stopper le mouvement de balancier (contenu en mouvement)
    • La durée du mouvement doit être inférieure à 5 secondes
    Toutefois, si le mouvement fait partie intégrante du composant, sans pouvoir en donner le contrôle à l’utilisateur, il est possible de rendre le critère Non applicable. Exemple barre de progression. Page P01.

10.2. Dérogations pour charge disproportionnée

Sans objet

10.3. Contenus non soumis à l’obligation d’accessibilité

Sans objet

11. Retour d’information et contact

Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable du site Ecolyo (https://ecolyo.com/) pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme :

12. Voies de recours

Cette procédure est à utiliser dans le cas suivant. 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 :