apps.education-front issueshttps://gitlab.mim-libre.fr/alphabet/apps.education-front/-/issues2020-04-15T13:48:52Zhttps://gitlab.mim-libre.fr/alphabet/apps.education-front/-/issues/8A11Y Correctifs pour accessibilité2020-04-15T13:48:52ZMahëd BenzergaA11Y Correctifs pour accessibilité### Liste des pages
* Accueil + Popin accès à la plateforme
* Application (Vérifier chaque application)
* Bonnes pratiques
* CGU
* Mentions légales
* Accessibilité
### Audit pour toutes les pages
* [X] Validation W3C du HTML
* [X] **Va...### Liste des pages
* Accueil + Popin accès à la plateforme
* Application (Vérifier chaque application)
* Bonnes pratiques
* CGU
* Mentions légales
* Accessibilité
### Audit pour toutes les pages
* [X] Validation W3C du HTML
* [X] **Valide pour AA avec toutes les perceptions de couleur** Contrôle du contraste avec différentes perception des couleurs (WCAG Color Contrast Checker)
* [X] Navigation au clavier pour toutes les pages
* [ ] Mise en place des landmarks
### [Page accessibilité](#7)
### Accessibilité
* [x] Corriger toutes les erreurs W3C pour rendre le site compatible avec les outils d'accessibilité comme la synthèse vocale
* [x] Les images doivent avoir des textes alternatifs claires (attribut alt dans les balises img)
* [x] Rendre invisible les SVGs décoratifs (sans sémantique) avec aria-hidden (Voir RGAA 1.2.4)
* [x] Ajouter des textes ("nom accessibles") aux éléments sur lequel il est possible de tabuler (voir Inspecteur A11Y) - Ajouter des textes équivalents pour les images boutons suivant les cas (Ex: Bouton avec un crayon: Texte ==> "Editer")
* [ ] l'élement qui a le focus doit être très visible (border large en CSS)
* [ ] La zone de saisie d'académie n'est pas accessible (voir Inspecteur Firefox)
## Ressources
* [Exemple de déclaration d'accessibilité](https://www.numerique.gouv.fr/uploads/rgaa/rgaa4-2019-exemple-declaration.pdf)
* [Guide RGAA 4.0](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)
* Voir toutes les recommandations du RGAA https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode/criteres/#test-1-2-4
Mahëd BenzergaMahëd Benzergahttps://gitlab.mim-libre.fr/alphabet/apps.education-front/-/issues/7A11Y Créer une page d'accessibilité (Conformité RGAA et mentions légales)2020-04-16T14:21:42ZMahëd BenzergaA11Y Créer une page d'accessibilité (Conformité RGAA et mentions légales)## Mentions légales
* [X] Ajouter à la home la mention d'état de conformité (Accessibilité : partiellement conforme)
* [X] Ajouter email de contact pour signalement d'un problème d'accessibilité
* [X] Ajouter contact au Défenseur des dr...## Mentions légales
* [X] Ajouter à la home la mention d'état de conformité (Accessibilité : partiellement conforme)
* [X] Ajouter email de contact pour signalement d'un problème d'accessibilité
* [X] Ajouter contact au Défenseur des droits
* [X] Droit à la compensation
* [ ] Aide à l'utilisation du site
* [ ] Calculer le taux de conformité et rédiger les résultats
* [ ] Schéma pluriannuel d'accessibilité
* [ ] Plan annuel d'actions 2020
## Déclaration de conformité RGAA
* [ ] Reprendre le texte sur https://www.numerique.gouv.fr/publications/rgaa-accessibilite/obligations/#d%C3%A9claration-daccessibilit%C3%A9 pour faire la déclaration d'accessibilité (Etat de conformité: non-conforme)
## Critères de conformité RGAA
### 1. Images
* **VALIDE** Critère 1.1 [A] Chaque image porteuse d'information a-t-elle une alternative textuelle ?
* **VALIDE** Critère 1.2 [A] Chaque image de décoration est-elle correctement ignorée par les technologies d'assistance ?
* **VALIDE** Critère 1.3 [A] Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
* **NON APPLICABLE** Critère 1.4 [A] Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d'identifier la nature et la fonction de l'image ?
* **NON APPLICABLE *Critère 1.5 [A] Pour chaque image utilisée comme CAPTCHA, une solution d'accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?
* **VALIDE** Critère 1.6 [A] Chaque image porteuse d'information a-t-elle, si nécessaire, une description détaillée ?
* **VALIDE** Critère 1.7 [A] Pour chaque image porteuse d'information ayant une description détaillée, cette description est-elle pertinente ?
* **NON VALIDE** Critère 1.8 [AA] Chaque image texte porteuse d'information, en l'absence d'un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
* **NON APPLICABLE** Critère 1.9 [A] Chaque légende d'image est-elle, si nécessaire, correctement reliée à l'image correspondante ?
### 2. Cadres
* **NON APPLICABLE** Critère 2.1 [A] Chaque cadre a-t-il un titre de cadre ?
* **NON APPLICABLE** Critère 2.2 [A] Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?
### 3. Couleurs
* **VALIDE** Critère 3.1 [A] Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
* **VALIDE** Critère 3.2 [AA] Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
* **VALIDE** Critère 3.3 [AA] Dans chaque page web, les couleurs utilisées dans les composants d'interface ou les éléments graphiques porteurs d'informations sont-elles suffisamment contrastées (hors cas particuliers) ?
### 4. Multimédia
* **NON APPLICABLE** Critère 4.1 [A] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.2 [A] Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.3 [A] Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.4 [AA] Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?
* **NON APPLICABLE** Critère 4.5 [AA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.6 [AA] Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ?
* **NON APPLICABLE** Critère 4.7 [A] Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.8 [A] Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?
* **NON APPLICABLE** Critère 4.9 [A] Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ?
* **NON APPLICABLE** Critère 4.10 [A] Chaque son déclenché automatiquement est-il contrôlable par l'utilisateur ?
* **NON APPLICABLE** Critère 4.11 [A] 13:39 16/04/2020La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ?
* **NON APPLICABLE** Critère 4.12 [A] La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?
* **NON APPLICABLE** Critère 4.13 [A] Chaque média temporel et non temporel est-il compatible avec les technologies d'assistance (hors cas particuliers) ?
### 5. Tableaux
* **NON APPLICABLE** Critère 5.1 [A] Chaque tableau de données complexe a-t-il un résumé ?
* **NON APPLICABLE** Critère 5.2 [A] Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?
* **NON APPLICABLE** Critère 5.3 [A] Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible (hors cas particuliers) ?
* **NON APPLICABLE** Critère 5.4 [A] Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
* **NON APPLICABLE** Critère 5.5 [A] Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?
* **NON APPLICABLE** Critère 5.6 [A] Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?
* **NON APPLICABLE** Critère 5.7 [A] Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?
* **NON APPLICABLE** Critère 5.8 [A] Chaque tableau de mise en forme ne doit pas utiliser d'éléments propres aux tableaux de données. Cette règle est-elle respectée ?
### 6. Liens (en cours)
* Critère 6.1 [A] Chaque lien est-il explicite (hors cas particuliers) ?
* Critère 6.2 [A] Dans chaque page web, chaque lien, à l'exception des ancres, a-t-il un intitulé ?
### 7. Scripts (en cours)
* Critère 7.1 [A] Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
* Critère 7.2 [A] Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?
* Critère 7.3 [A] Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
* Critère 7.4 [A] Pour chaque script qui initie un changement de contexte, l'utilisateur est-il averti ou en a-t-il le contrôle ?
* Critère 7.5 [AA] Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d'assistance ?
### 8. Éléments Obligatoires (en cours)
* Critère 8.1 [A] Chaque page web est-elle définie par un type de document ?
* Critère 8.2 [A] Pour chaque page web, le code source généré est-il valide selon le type de document spécifié (hors cas particuliers) ?
* Critère 8.3 [A] Dans chaque page web, la langue par défaut est-elle présente ?
* Critère 8.4 [A] Pour chaque page web ayant une langue par défaut, le code de langue est-il pertinent ?
* Critère 8.5 [A] Chaque page web a-t-elle un titre de page ?
* Critère 8.6 [A] Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
* Critère 8.7 [AA] Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
* Critère 8.8 [AA] Dans chaque page web, le code de langue de chaque changement de langue est-il valide et pertinent ?
* Critère 8.9 [A] Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?
* Critère 8.10 [A] Dans chaque page web, les changements du sens de lecture sont-ils signalés ?
### 9. Structuration de l'information (en cours)
* Critère 9.1 [A] Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
* Critère 9.2 [A] Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
* Critère 9.3 [A] Dans chaque page web, chaque liste est-elle correctement structurée ?
* Critère 9.4 [A] Dans chaque page web, chaque citation est-elle correctement indiquée ?
### 10. Présentation de l'information (en cours)
* Critère 10.1 [A] Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?
* Critère 10.2 [A] Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
* Critère 10.3 [A] Dans chaque page web, l'information reste-t-elle
compréhensible lorsque les feuilles de styles sont désactivées ?
* Critère 10.4 [A] Dans chaque page web, le texte reste-t-il lisible lorsque la
taille des caractères est augmentée jusqu'à 200%, au moins (hors cas
particuliers) ?
* Critère 10.5 [A] Dans chaque page web, les déclarations CSS de couleurs de fond d'élément et de police sont-elles correctement utilisées ?
* Critère 10.6 [A] Dans chaque page web, chaque lien dont la nature n'est pas évidente est-il visible par rapport au texte environnant ?
* Critère 10.7 [A] Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
* Critère 10.8 [A] Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d'assistance ?
* Critère 10.9 [A] Dans chaque page web, l'information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?
* Critère 10.10 [A] Dans chaque page web, l'information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?
* Critère 10.11 [AA] Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à la fois à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou une largeur de 320px (hors cas particuliers) ?
* Critère 10.12 [AA] Dans chaque page web, les propriétés d'espacement du texte peuvent-elles être redéfinies par l'utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?
* Critère 10.13 [AA] Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d'un composant d'interface sont-ils contrôlables par l'utilisateur (hors cas particuliers) ?
* Critère 10.14 [A] Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ?
### 11. Formulaires (en cours)
* Critère 11.1. Chaque champ de formulaire a-t-il une étiquette ?
* Critère 11.2. Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?
* Critère 11.3. Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répété plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?
* Critère 11.4. Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?
* Critère 11.5. Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
* Critère 11.6. Dans chaque formulaire, chaque regroupement de champs de formulaire a-t-il une légende ?
* Critère 11.7. Dans chaque formulaire, chaque légende associée à un regroupement de champs de même nature est-elle pertinente ?
* Critère 11.8. Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupées de manière pertinente ?
* Critère 11.9. Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
* Critère 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
* Critère 11.11. Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
* Critère 11.12. Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, la saisie des données vérifie-t-elle une de ces conditions ?
* Critère 11.13. La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
### 12. Navigation (en cours)
* Critère 12.1. Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?
* Critère 12.2. Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?
* Critère 12.3. La page « plan du site » est-elle pertinente ?
* Critère 12.4. Dans chaque ensemble de pages, la page « plan du site » est-elle atteignable de manière identique ?
* Critère 12.5. Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?
* Critère 12.6. Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
* Critère 12.7. Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?
* Critère 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?
* Critère 12.9. Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
* Critère 12.10. Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ?
* Critère 12.11. Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?
### 13. Consultation (en cours)
* Critère 13.1. Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?
* Critère 13.2. Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ?
* Critère 13.3. Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
* Critère 13.4. Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?
* Critère 13.5. Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?
* Critère 13.6. Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?
* Critère 13.7. Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?
* Critère 13.8. Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
* Critère 13.9. Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portait ou paysage) (hors cas particuliers) ?
* Critère 13.10. Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d’un geste complexe peuvent-elles être également disponibles au moyen d’un geste simple (hors cas particuliers) ?
* Critère 13.11. Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ?
* Critère 13.12. Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ?
## Exemples de déclaration de conformité RGAA
* https://www.impots.gouv.fr/portail/accessibilite?l=fr
* https://www.education.gouv.fr/declaration-d-accessibilite-99950
https://gitlab.mim-libre.fr/alphabet/apps.education-front/-/issues/27L’hébergement des fontes devrait être local2024-03-26T15:10:33ZDaniel DehenninL’hébergement des fontes devrait être localLes fontes dites Google sont une collection de fontes opensources qui ne peuvent pas être utilisées directement depuis les serveurs de distribution Google au sein de la communauté européenne ([Google Fonts illegal in EU](https://www.usec...Les fontes dites Google sont une collection de fontes opensources qui ne peuvent pas être utilisées directement depuis les serveurs de distribution Google au sein de la communauté européenne ([Google Fonts illegal in EU](https://www.usecue.com/blog/google-fonts-illegal-in-eu/)).
Il faut les héberger localement.
Il est à noter que cette jurisprudence européenne s’applique très certainement à tout réseau de distribution de contenu états-unien, il faudrait donc ne plus dépendre de `cdn.materialdesignicons.com` non plus.
![Apps.education.fr_Accueil___Mozilla_Firefox_001](/uploads/5dcf770ee7bcc9a656fd44b7eda77959/Apps.education.fr_Accueil___Mozilla_Firefox_001.png)V14 (group)