Skip to content

Instantly share code, notes, and snippets.

@aquelito
Last active October 20, 2024 21:43
Show Gist options
  • Save aquelito/dbca8cbfe7ea398890091475e8103f45 to your computer and use it in GitHub Desktop.
Save aquelito/dbca8cbfe7ea398890091475e8103f45 to your computer and use it in GitHub Desktop.
UX Critères correspondances
We can make this file beautiful and searchable if this error is corrected: Illegal quoting in line 2.
phase;level;numero;critere;rgaa;wcag
DEV;-1,0;1.1;Structurer la zone d’entête principale avec <header role="banner">;9.2, 12.6;1.3.1(A), 2.4.1 (A), 4.1.2 (A)
DEV;-1,0;1.2;Identifier le moteur de recherche avec role="search";12.6;1.3.1(A), 2.4.1 (A), 4.1.2 (A)
DEV;-1,0;1.3;Structurer la zone de contenu principal avec <main role="main">;9.2, 12.6;1.3.1(A), 2.4.1 (A), 4.1.2 (A)
DEV;-1,0;1.4;Structurer les informations relatives au site avec <footer role="contentinfo">;9.2, 12.6;1.3.1(A), 2.4.1 (A), 4.1.2 (A)
DEV;-1,0;1.5;Structurer les menus de navigation principaux et secondaires avec <nav role="navigation">;9.2, 12.6;1.3.1(A), 2.4.1 (A), 4.1.2 (A)
DEV;-1,0;1.6;Structurer les menus de navigation avec des listes;9.3;1.3.1 (A)
MAQ,DEV;-1,0,1;1.7;Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>;9.1;1.3.1 (A), 2.4.1 (A), 2.4.6 (AA), 4.1.2 (A)
DEV;-1,0,1;2.1;Renseigner un <title> précis sur chaque page;8.5, 8.6;2.4.2 (A)
DEV;-1,0;3.1;Renseigner la langue principale de la page avec l’attribut lang sur la balise <html>;8.3, 8.4;3.1.1 (A)
DEV;0,1,2,3;3.2;Utiliser l’attribut lang pour signaler les changements de langue;8.7, 8.8;3.1.2 (AA)
DEV;-1,0;4.1;Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé;8.1, 8.2;1.3.2 (A), 4.1.1 (A), 4.1.2 (A)
DEV;0,1,2,3;4.2;Employer les balises HTML pour leur valeur sémantique;8.9;1.3.1 (A)
MAQ,DEV;0,1,2,3;5.1;Différencier les boutons des liens;7.1, 8.9;1.3.1 (A), 2.5.3 (A), 4.1.2 (A), 1.1.1 (A), 2.4.4 (A)
MAQ,DEV;0,1,2,3;5.2;Compléter les liens et les boutons non explicites avec aria-label ou title;6.1, 7.1;1.1.1 (A), 2.4.4 (A), 2.5.3 (A)
DEV;0,1,2,3;5.3;Ne pas utiliser les attributs aria-label et title sur des liens ou boutons explicites;6.1, 7.1;1.1.1 (A), 2.4.4 (A), 2.5.3 (A)
DEV;0,1;6.1;Gérer l’attribut alt des balises <img /> et <input type="images" />;1.1, 1.2, 1.3, 6.1, 11.9;1.1.1 (A), 4.1.2 (A), 2.4.4 (A), 2.5.3 (A)
DEV;0,1;6.2;Gérer l’alternative des SVG (images vectorielles);1.1, 1.2, 1.3, 6.1;1.1.1 (A), 4.1.2 (A), 2.4.4 (A), 2.5.3 (A)
DEV;0,1;6.3;Gérer l’alternative des icônes insérées via les CSS;1.1, 1.2, 1.3, 6.1;1.1.1 (A), 4.1.2 (A), 2.4.4 (A), 2.5.3 (A)
MAQ,DEV;-1,0,1,2,3;6.4;Baliser les images légendées avec <figure role="figure"> et <figcaption>;1.9;1.1.1 (A), 4.1.2 (A)
MAQ,DEV;0,1;7.1;Utiliser la balise <label> ainsi que les attributs for et id pour étiqueter les champs avec intitulé visible;11.1, 11.2;1.3.1 (A), 2.4.6 (AA), 3.3.2 (A), 4.1.2 (A), 2.5.3 (A)
STO,DEV;0,1,2,3;7.2;Utiliser title pour étiqueter les champs sans intitulé visible;11.1, 11.2;1.3.1 (A), 2.4.6 (AA), 3.3.2 (A), 4.1.2 (A), 2.5.3 (A)
DEV;0,1;7.3;Utiliser l’attribut autocomplete pour faciliter le remplissage automatique des champs;11.13;1.3.5 (AA)
MAQ,DEV;0,1;7.4;Intégrer les aides à la saisie directement dans les balises <label>;11.10;3.3.1 (A), 3.3.2 (A)
DEV;-1,0;7.5;Intégrer required ou aria-required="true" dans les champs obligatoires;11.10;3.3.1 (A), 3.3.2 (A)
MAQ,DEV;0,1;7.6;Intégrer les messages d’erreur et les suggestions de correction directement dans les balises <label>;11.10, 11.11;3.3.1 (A), 3.3.2 (A), 3.3.3 (AA)
MAQ,DEV;0,1,2,3;7.7;Regrouper et titrer les champs de même nature avec <fieldset> et <legend>;11.5, 11.6, 11.7;1.3.1 (A), 3.3.2 (A)
MAQ,DEV;0,1;8.1;Baliser les listes non ordonnées avec <ul> et <li>;9.3;1.3.1 (A)
MAQ,DEV;0,1;8.2;Baliser les listes ordonnées avec <ol> et <li>;9.3;1.3.1 (A)
MAQ,DEV;0,1;8.3;Baliser les listes de descriptions avec <dl>, <dt> et <dd>;9.3;1.3.1 (A)
MAQ,DEV;0,1;9.1;Baliser le titre des tableaux de données avec la balise <caption>;5.4, 5.5;1.3.1 (A),
MAQ,DEV;0,1;9.2;Baliser chaque cellule d’entête de ligne et de colonne avec <th>;5.6;1.3.1 (A)
MAQ,DEV;0,1;9.3;Utiliser l’attribut scope pour associer les cellules aux entêtes des tableaux de données simples;5.7;1.3.1 (A)
DEV;0,1;9.4;Intégrer role="presentation" dans chaque balise <table> de mise en forme;5.3;1.3.2 (A), 4.1.2 (A)
DEV;0,1;10.1;Utiliser CSS pour mettre en forme les textes;1.8, 10.1;1.4.5 (AA), 1.3.1 (A), 1.3.2 (A)
DEV;0,1,2,3;10.2;Garantir la lisibilité des contenus lorsque les images ne sont pas affichées;10.5;1.4.3 (AA)
DEV;0,1,2,3;10.3;Garantir la compréhension de l’information même lorsque CSS est désactivé;10.1, 10.2, 10.3, 10.9, 10.10;1.1.1 (A), 1.3.1 (A), 1.3.2 (A), 1.3.3 (A), 1.4.1 (A)
DEV;-1,0,1,2,3;11.1;Utiliser uniquement des tailles relatives (rem, em, %, etc.) pour les polices de caractères;10.4;1.4.4 (AA)
DEV;0,1,2,3;11.2;Garantir la lisibilité des contenus même lorsque la taille du texte est doublée;10.4;1.4.4 (AA)
MAQ,DEV;0,1,2,3;12.3;Garantir la visibilité de la prise de focus au clavier;10.7;1.3.2 (A), 4.1.2 (A)
DEV;0,1,2,3;12.1;Garantir le fonctionnement de l’interface à la souris et au clavier;4.11, 4.12, 7.3, 10.13, 10.14, 12.9, 12.11;2.1.1 (A), 2.1.2 (A), 1.3.1 (A), 2.4.7 (AA), 1.4.13 (AA
MAQ,DEV;0,1,2,3;12.2;Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture;12.8;2.4.3 (A)
STO,DEV;-1;12.4;Mettre en place un lien d’évitement;12.6, 12.7;1.3.1 (A), 2.4.1 (A), 4.1.2 (A), 2.4.3 (A), 3.2.3 (AA)
STO,DEV;-1;13.1;Renseigner l’attribut title sur chaque <iframe>;2.1, 2.2;4.1.2 (A)
DEV;0,1,2,3;14.1;Assurer la compréhension de l’information même en l’absence de couleurs;3.1;3.2.1 (A), 3.2.2 (A)
MAQ,DEV;0,1,2,3;14.2;Garantir la lisibilité des contenus même lorsque les propriétés d’espacement du texte sont personnalisées;10.12;1.4.12 (AA)
STO,MAQ,DEV;-1,0,1,2,3;14.3;Intégrer le résumé de chaque tableau de données complexe dans la balise <caption>;5.1, 5.2, 5.4;1.3.1 (A)
STO,MAQ,DEV;-1,0,1,2,3;14.4;Fournir une alternative textuelle à chaque balise <canvas>, <embed> et <object> informative;1.1, 1.3, 1.4, 1.6;1.1.1 (A), 4.1.2 (A)
STO,MAQ,DEV;-1,0,1,2,3;14.5;Fournir une alternative textuelle à chaque balise <canvas>, <embed> et <object> servant de lien ou de bouton;6.1, 6.2, 7.1, 11.9;1.1.1 (A), 2.4.4 (A), 2.5.3 (A)
DEV;-1,0,1,2,3;14.6;Masquer chaque balise <canvas>, <embed> et <object> décoratives ou illustratives aux technologies d’assistance;1.2;1.1.1 (A), 4.1.2 (A)
STO,MAQ,DEV;0,1,2,3;14.7;Ne pas lancer d’action tant que l’élément déclencheur est dans l’état « pressé »;13.11;2.5.2 (A)
STO;0,1,2,3;14.8;Permettre l’anticipation du comportement de l’interface;7.4;3.2.1 (A), 3.2.2 (A)
MAQ,DEV;-1,0,1,2,3;14.9;Regrouper les options de même nature avec <optgroup> dans les <select>;11.8;1.3.1 (A)
STO,DEV;-1;14.10;Renseigner l’attribut title sur chaque <frame>;2.1, 2.2;4.1.2 (A)
DEV;-1,0,1,2,3;14.11;Utiliser l’attribut dir pour signaler les changements de sens de lecture;8.10;1.3.2 (A)
DEV;0,1,2,3;14.12;Veiller à utiliser correctement les techniques de masquage de contenu;10.8;1.3.2 (A), 4.1.2 (A)
MAQ,DEV;-1,0,1,2,3;14.13;Baliser les blocs de citations avec <blockquote>;9.4;1.3.1 (A)
MAQ,DEV;-1,0,1,2,3;14.14;Baliser les citations en ligne avec <q>;9.4;1.3.1 (A)
DEV;0,1,2,3;14.15;Écrire le code HTML en suivant la logique de l’ordre de lecture;10.3;1.3.2 (A), 2.4.3 (A)
STO,MAQ,DEV;0,1,2,3;14.16;Indiquer dans l’alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA;1.4;1.1.1 (A)
DEV;0,1,2,3;14.17;Ne pas utiliser de balises ou d’attributs propres aux tableaux de données dans les tableaux de mise en forme;5.8;1.3.1 (A)
STO,MAQ,DEV;0,1,2,3;14.18;Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, <embed>, etc.);4.1, 4.8, 4.9;1.1.1 (A), 1.2.1 (A), 1.2.3 (A)
DEV;-1;14.19;Renseigner l’attribut alt de chaque image mappée et de ses balises <area />;1.1, 1.2, 1.3;1.1.1 (A), 4.1.2 (A), 2.4.4 (A), 2.5.3 (A)
DEV;3;14.20;Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes;5.7;1.3.1 (A)
MAQ,DEV;0,1,2,3;14.21;Veiller à la cohérence de l’ordre du flux HTML d’une page à l’autre;12.2;3.2.3 (AA)
DEV;3;14.22;Veiller à l’ordre de lecture des tableaux de mise en forme;5.3;1.3.2 (A), 4.1.2 (A)
@aquelito
Copy link
Author

aquelito commented Oct 20, 2024

Liste basée sur AcceDeWeb + correspondance RGAA 4.1, WCAG 2.1

hases : xx

  • (STO) Fonctionnelle => si mettre un captcha => joindre les critères.
  • (MAQ) Conception maquette => couleurs, formulaire, structure, responsive, masquage info...
  • (DEV) Développement => html, css, js
  • (RE7) Recettage => controle

Level : reprendre étape graphique

A faire

  • Ajouter des critères Opquast.
  • Ajouter des critères RGESN.
  • Comparer avec les critères sélectionnés par le RSE.

@aquelito
Copy link
Author

aquelito commented Oct 20, 2024

Stats

Phases :

  • STO : 11 occurrences
  • MAQ : 27 occurrences
  • DEV : 64 occurrences

Levels :

  • -1 : 25 occurrences
  • 0 : 59 occurrences
  • 1 : 50 occurrences
  • 2 : 33 occurrences
  • 3 : 35 occurrences

RGAA :

  • '1.1': 5
  • '1.2': 5
  • '1.3': 5
  • '1.4': 2
  • '1.6': 1
  • '1.8': 1
  • '1.9': 1
  • '2.1': 2
  • '2.2': 2
  • '3.1': 1
  • '4.1': 1
  • '4.8': 1
  • '4.9': 1
  • '4.11': 1
  • '4.12': 1
  • '5.1': 1
  • '5.2': 1
  • '5.3': 2
  • '5.4': 2
  • '5.5': 1
  • '5.6': 1
  • '5.7': 2
  • '5.8': 1
  • '6.1': 6
  • '6.2': 1
  • '7.1': 4
  • '7.3': 1
  • '7.4': 1
  • '8.1': 1
  • '8.2': 1
  • '8.3': 1
  • '8.4': 1
  • '8.5': 1
  • '8.6': 1
  • '8.7': 1
  • '8.8': 1
  • '8.9': 2
  • '8.10': 1
  • '9.1': 1
  • '9.2': 4
  • '9.3': 4
  • '9.4': 2
  • '10.1': 2
  • '10.2': 1
  • '10.3': 2
  • '10.4': 2
  • '10.5': 1
  • '10.7': 1
  • '10.8': 1
  • '10.9': 1
  • '10.10': 1
  • '10.12': 1
  • '10.13': 1
  • '10.14': 1
  • '11.1': 2
  • '11.2': 2
  • '11.5': 1
  • '11.6': 1
  • '11.7': 1
  • '11.8': 1
  • '11.9': 2
  • '11.10': 3
  • '11.11': 1
  • '11.13': 1
  • '12.2': 1
  • '12.6': 6
  • '12.7': 1
  • '12.8': 1
  • '12.9': 1
  • '12.11': 1
  • '13.11': 1

WCAG :

  • '1.1.1 (A)': 14
  • '1.2.1 (A)': 1
  • '1.2.3 (A)': 1
  • '1.3.1(A)': 5
  • '1.3.1 (A)': 22
  • '1.3.1 (A),'* : 1
  • '1.3.2 (A)': 9
  • '1.3.3 (A)': 1
  • '1.3.5 (AA)': 1
  • '1.4.1 (A)': 1
  • '1.4.3 (AA)': 1
  • '1.4.4 (AA)': 2
  • '1.4.5 (AA)': 1
  • '1.4.12 (AA)': 1
  • '1.4.13 (AA': 1
  • '2.1.1 (A)': 1
  • '2.1.2 (A)': 1
  • '2.4.1 (A)': 7
  • '2.4.2 (A)': 1
  • '2.4.3 (A)': 3
  • '2.4.4 (A)': 8
  • '2.4.6 (AA)': 3
  • '2.4.7 (AA)': 1
  • '2.5.2 (A)': 1
  • '2.5.3 (A)': 10
  • '3.1.1 (A)': 1
  • '3.1.2 (AA)': 1
  • '3.2.1 (A)': 2
  • '3.2.2 (A)': 2
  • '3.2.3 (AA)': 2
  • '3.3.1 (A)': 3
  • '3.3.2 (A)': 6
  • '3.3.3 (AA)': 1
  • '4.1.1 (A)': 1
  • '4.1.2 (A)': 24

WCAG manquants

  • '1.2.2 (A)'
  • '1.2.4 (AA)'
  • '1.2.5 (AA)'
  • '1.3.4 (AA)'
  • '1.4.2 (A)'
  • '1.4.10 (AA)'
  • '1.4.11 (AA)'
  • '1.4.13 (AA)'
  • '2.1.4 (AA)'
  • '2.2.1 (A)'
  • '2.2.2 (A)'
  • '2.3.1 (A)'
  • '2.4.5 (AA)'
  • '2.5.1 (A)'
  • '2.5.4 (A)'
  • '3.2.4 (AA)'
  • '3.3.4 (AA)'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment