Lorsque les styles sont désactivés, l'information "(site externe)" est perdue.
Par exemple sur la page Nos offres d'accompagnement sur les liens "Observatoire de la qualité des démarches en ligne".

Cela invalide le critère 10.2 du RGAA.
(Cf. https://twitter.com/halnaf/status/1600619079605563394)

Note : le DSFR a le même problème avec le composant lien

Sur le site, remplacer "[email protected]" par "contact[a]design.numerique.gouv.fr" pour limiter les spams.

Lorsqu'on lance une recherche vide et que l’on arrive sur la page https://www.numerique.gouv.fr/rechercher/, le focus est automatiquement positionné sur le champ de recherche au chargement de la page. L’utilisateur naviguant au clavier n’a donc pas accès au contenu précédent le champ, à moins de tabuler en arrière.

Supprimer l’autofocus sur le champ au chargement de la page

Les indications de champs obligatoires, les indications de format de saisie et les messages d'aides ou d'erreurs doivent être indiqués à l'utilisateur avant la saisie par l'un des moyens suivants :
Pour l'indication des formats obligatoires de saisie, les messages d'aides ou les messages d'erreurs : • Dans l'étiquette : balise , le passage de texte lié avec aria-labelledby="@id-texte", le title="Intitulé" ; • Ou un passage de texte lié au champ concerné par la propriété aria-describedby="@id-texte" ;

Corrections
• Utiliser une des méthodes décrites ci-dessus pour lier les indications de champs obligatoires, les indications de format obligatoires, les messages d'aides ou les messages d'erreur aux champs concernés ;
• Vérifier que toutes les indications de champs obligatoires, les indications de format obligatoires, les messages d'aides ou les messages d'erreur sont correctement liés aux champs concernés.
Indication de format : <label for="form-email"> Votre email <span class="required">*</span> <span([email protected])</span> </label>
Message d'erreur : <label for="form-email"> Votre email <span class="required">*</span> <span([email protected])</span> </label> <input required="" id="form-email" type="email" name="from" describedby="erreur"> <p id="erreur">Saisissez une adressemail valide, par exemple : [email protected]</p>

Bonjour, la page https://design.numerique.gouv.fr/misc/accessibilite/ indique que le code source du site est sous licence libre, mais le dépôt ne contient pas de licence. Je vois dans le README que c'est en cours de réévaluation.

Si je peux aider à répondre à des questions, n'hésitez pas.

Est-il possible de mettre à jour le document traduit de la norme UE (https://design.numerique.gouv.fr/assets/doc/fr_301549v020102p.pdf (qui à été également reprise ici :
https://accessibilite.numerique.gouv.fr/doc/fr_301549v020102p.pdf) avec des signets (comme c'est disponible pour la version disponible ici : https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf)

Pour restituer en temps réel le nombre de résultats, ajouter les propriétés aria-live="polite" et aria-atomic="true" sur la zone de texte du nombre de résultats
<div class="ais-body ais-stats--body" aria-live="polite" aria-atomic="true"> <div> <h2 class="h4">Il y a 101 résultats</h2> </div> </div>

S'il faut un coup de main pour voir ça, chuis là.

1. Changement d’ordre des filtres :
   Sur la page Agenda, les éléments des filtres « Type » et « Thématique » se réordonnent après chaque action de sélection/désélection de l’utilisateur. Ceci perturbe la compréhension du parcours de tabulation et donc la navigation au clavier, impactant les aveugles ou déficients visuels qui utilisent des lecteurs d'écrans ainsi que les handicapés moteurs qui ne peuvent utiliser la souris.
2. Confusion en liens et éléments de formulaire :
   Pour les aveugles et les grands malvoyants qui utilisent un lecteur d’écran, le manque de distinction claire entre les liens et des éléments de formulaires tels que des cases à cocher, peut poser de graves problèmes.
   Ainsi, les filtres « Thématique » implémentés sous la forme de liens qui déclenchent une action de la page risquent de perturber l’utilisateur qui s’attendra au chargement d’une nouvelle page. De manière générale, les liens (<a href=>) devraient être réservés à l’affichage d’une nouvelle page ou la création de liens d’accès rapide dans le contenu (<a href="#contenu">).
3. Actualisation de la liste sans rechargement de page :
   L’actualisation en temps réel de la liste des événements au fil de l’ajout ou suppression de filtres n’est pas restituée pour les utilisateurs de lecteurs d’écran. Les handicapés moteurs rencontreront également un obstacle à la consultation des résultats car le module des filtres figure dans le code après la liste des événements, ce qui les oblige à revenir en arrière dans le parcours de tabulation pour consulter la liste actualisée. Il faudrait donc rendre possible l’accès direct à liste des événements au moyen d’un bouton, par exemple « Voir les résultats ».

Corrections

1. Si possible, ne pas réordonner les des filtres « Type » et « Thématique ».
2. Pour les filtres « Thématique » utilisant une balise , adopter le motif de conception ARIA « checkbox », et ajoutez une propriété title="Actif/Non actif" sur chaque élément afin de satisfaire également le critère 3.1 concernant l’information donnée par la couleur.
3. Implémenter un bouton « Voir les résultats » à la fin de la zone de filtres. Ce bouton doit repositionner le focus sur l’élément englobant les événements, en utilisant la méthode JavaScript focus() et en ajoutant une propriété tabindex="-1" sur cet élément .

Par exemple sur la page d'accueil

• Absence de titres sur les articles de la section « A la une »
• Absence de titre h1 : la présence d’un titre de niveau 1 n’est pas obligatoire, mais est néanmoins conseillée afin d’optimiser la restitution

Sur la page agenda Rupture dans la hiérarchie des titres : on ne trouve pas de h2 entre le h1 et le h3 « Carte ».

Vérifier sur toutes les pages

• La présence d'au moins un titre h1. Par exemple sur la page d’accueil, le texte « numerique.gouv.fr » pourrait faire office de h1.
• Que la structure de titre ne contient pas de rupture niveau.
• Que tous les passages de textes qui apparaissent jouer le rôle de titre sont structurés avec des balises hx. Par exemple, le

3 exemples de libellé de lien non pertinent :

• Page d'accueil : L’information de date présente dans l’image n’est pas restituée dans l’intitulé du lien.
• Page de recherche : L’image possède une alternative « undefined » qui rend l’intitulé du lien non pertinent.
• Page agenda (icône calendrier) : L’image possède une alternative « icon » qui rend l’intitulé du lien non pertinent.

Vérifier tous les liens

Le design pattern ARIA utilisé pour le menu de navigation ne convient pas (role=menu sur le <ul#menu>) :

• Celui-ci est normalement utilisé par exemple pour des barres d'outils dans des applications web ou dans les champs WYSIWYG.
• Pour respecter le design pattern, les <li> enfants devraient avoir un attribut ARIA comme role=menuitem. Il devrait être également possible de naviguer entre les liens au clavier avec les flèches haut et bas.
• Enfin, le role=navigation sur la balise parente <nav> suffit ici pour indiquer le menu de navigation aux lecteurs d'écran.

Je ne sais pas si ça vous intéresse, mais j'ai créé un générateur de logos disponible dans le dépôt :

https://github.com/kpym/marianne

Pour le moment c'est une version alpha.

Remplacer "process" par "processus" ?

Vu dans :

• design.numerique.gouv.fr/content/roles/manager.md

  Line 18 in 706ccde

  * s’assurer que chaque étape du projet, chaque process, chaque intervention prend en compte l’accessibilité.

• design.numerique.gouv.fr/content/roles/po.md

  Line 18 in 706ccde

  * s’assurer que chaque étape du projet, chaque process, chaque intervention prennent en compte l’accessibilité ;

• design.numerique.gouv.fr/CONTRIBUTING.md

  Line 18 in eda4010

  ## Les process de mise à jour de DesignGouv

Bonjour,

Dans la page "https://design.numerique.gouv.fr/outils/", sous le chapitre "Le système de design de l’État" le lien du texte "système de design de l’État" pointant sur le site externe "https://systeme-de-design.gouv.fr/" ne fonctionne pas.

Merci.

certaines pages du footer (recrutement / contact) ne ramènent pas en haut de la page, contrairement à la page équipe.

Sur Firefox, le focus n'est pas visible sur tous les CTA ("Voir les défis", "L'accessibilité en détails", etc.).

Sur Chrome, la couleur de l'outline est définie par défaut avec -webkit-focus-ring-color.

Sur Firefox, l'outline reprend la couleur du texte dans le lien ou le bouton. Or, le texte est blanc lorsque le lien a le focus. Du coup, l'outline est également blanc et n'est pas visible avec le fond du site.

Pour corriger cela, on peut dans le CSS rajouter une propriété outline indiquant la couleur, pour les boutons/liens à l'état :focus.

Pour les tableaux de données simple :

• Ajoutez un attribut scope="col" sur chaque balise représentant un en-tête de colonne
• Ajoutez un attribut scope="row" sur chaque balise représentant un en-tête de ligne.

https://www.numerique.gouv.fr/publications/politique-logiciel-libre/#contenu

Par exemple sur les filtres de la page Agenda, les champs suivant sont dépourvus d'étiquette :
• Les champs « Date »
• Les cases à coche « Type »
• Le champ « Mot clé »
Corrections
• Vérifier que pour chaque champ de formulaire uns étiquette visible est présente et liée au champ de saisie par l'un des moyens suivants : o Le champ possède une propriété aria-labelledby="@ID-texte" qui permet de lier un passage de texte faisant office d'étiquette visible ; o Le champ possède Une propriété aria-label="[intitulé]" accompagné d'un texte visible à proximité du champ ; o L'étiquette est créée avec une balise correctement liée au champ ; o L'étiquette est créée avec un attribut title="[intitulé]".
• Vérifier que toutes les étiquettes sont pertinentes et permettent de comprendre la saisie attendue. Dans toute la mesure du possible la méthode faisant intervenir la balise html est à privilégier.

Utiliser une structure fieldset/legend pour structurer ces groupes de champs :
• Les deux champs date
• Les cases à cocher « Type »
• Les cases à cocher « Thématique »

sur cette page https://design.numerique.gouv.fr/outils/, ajouter Ara ET supprimer les modèles de grilles et de rapports je suppose.

pour les images-liens, l'intitulé du lien doit se trouver dans l'attribut alt du lien

Dans le pied de page, l'icône rss possède un attribut aria-hidden qui masque l'alternative à l'image bien renseignée :(

L'ordre des commandes n'est pas bon, avant de faire yarn il faut se placer dans le dossier

Dans le sommaire, indiquer via l'attribut title la page active.
ex. title="Gouvernance - page active"
https://www.numerique.gouv.fr/publications/politique-logiciel-libre/#contenu

Ex : un lien vers la checklist PiDila et une recherche du mot "étapes" :
https://design.numerique.gouv.fr/outils/checklist-pidila/?search=%C3%A9tapes

Attendu : une liste filtrée (6 résultats)

Actuellement : les 199 critères sont affichés

Par exemple sur le champ de recherche de la page « Résultats de recherche » et la page « Agenda », Lorsque l’utilisateur clique sur le bouton de réinitialisation, le bouton est masqué en CSS avec un display:none, ce qui entraîne la perte du focus sur le bouton.

Sur la page de Résultats de recherche et la page Agenda :
Le bouton « Voir plus de résultats » affiche les nouveaux éléments, mais ceux-ci figurant dans le code avant le bouton, l’utilisateur devra revenir en arrière dans la tabulation pour les consulter.
Corrections
• Au click sur le bouton de réinitialisation, repositionner le focus sur le champ de recherche, en utilisant la méthode JavaScript focus().
• Au click sur le bouton "Voir plus de résultats" , repositionner le focus sur le premier des nouveaux résultats affichés, en utilisant la méthode JavaScript focus() et en ajoutant une propriété tabindex="-1" sur cet élément.

Bonjour, je me permets de remonter un petit détail, si on a le mode sombre niveau système, on a un petit flash blanc à l'ouverture de la page.

Au cas où, une SE a fixé le problème de cette façon : demarches-simplifiees/demarches-simplifiees.fr#9727

Cordialement

Certaines personnes, dont les personnes porteuses d'un autisme type Asperger, ont du mal à saisir les parcours visuels des pages web, et à cliquer sur les bons boutons. Ceux qui conduisent directement à la page qui les concernent.
L'ergonomie, y compris celle de ce site (tout est gris sur fond blanc, aucune distinction entre les boutons, voire pas de cadre pour signaler qu'il s'agit d'un bouton), n'est pas assez approfondie en leur direction.
Peut-être travailler avec un groupe de volontaires qui donnerait des indications pour améliorer les parcours sur les pages (y compris sur ce site)... Et proposer un "code de bonne ergonomie" ?
Assortir les pages d'un "tutoriel" soit des bulles mobiles selon l'emplacement de la souris (avec affichage "temporisé").
Voir avec le service du ministère concerné (Cohésion sociale...) s'ils ont un projet de même nature.

Bonjour,

J'obtiens ce message d'erreur sur une fresh install npm (8.3.1)

~/design.numerique.gouv.fr$ gridsome develop
Gridsome v0.7.23

Initializing plugins...
AirtableError {
  error: 'NOT_FOUND',
  message: 'Could not find what you are looking for',
  statusCode: 404
}

Donc du coup je me pose bien cette même question : what i'm looking for ??? :)

Merci !

Quelques corrections :

En 1 découverte du sujet :
Certains de vos usagers sont
aveugleS ou avec déficit visuel (2 millions de personnes)
sourdeS ou malentendants

En 2C
DéployeZ (ce serait d'ailleurs intéressant de choisir entre eZ et eR pour la terminaison des verbes, c'est une fois l'un, une fois l'autre.)

En 9a
Poursuivre les formations en continu

Bon courage et merci pour la ressource...

Sur la page https://design.numerique.gouv.fr/accessibilite-numerique/

Il n'y a pas de contenu sous chacun des titres

• "Obligations légales et sanctions"
• "RGAA"
• "Schéma pluriannuel"
• "Déclaration d’accessibilité"

Il faudrait transformer ces titres en une liste de liens.

cf. https://twitter.com/MiDvorak/status/1600514689678643201?s=20&t=ddpWUoUXHCpQ2ar3Eo7T1g