Je travaille sur l’initiative COVID-19 RAMP. Nous avons choisi Discourse pour notre forum et nous en sommes très satisfaits.
Un collègue et moi-même avons examiné l’accessibilité. Je pense que nous avons résolu les problèmes de faible contraste grâce à la fonctionnalité CSS de l’administration. Cependant, selon WAVE, nous rencontrons certains problèmes que nous ne sommes pas sûrs de pouvoir résoudre seuls, à savoir :
Image liée sans texte alternatif : il s’agit des images d’avatars. Bien qu’il y ait un titre descriptif, l’attribut alt est vide.
Il manque une étiquette sur chaque page :
<div><input type="text"></div>
Il y a un en-tête vide sur chaque page :
<div class="title"><h3></h3><!-- --></div>
De nombreux boutons vides ont été signalés, associés à des SVG.
Il existe des liens vides, par exemple : <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
et <a href="" class="edit-topic" title="modifier le titre et la catégorie de ce sujet" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.
Il y a un en-tête de tableau vide : <th data-sort-order="posters" class="posters"></th>
Je serais très surpris si nous sommes les seuls à rencontrer ces problèmes. Je me demande donc si WAVE ne surinterprète pas les choses ou si nous passons à côté d’une ou deux astuces. Toute aide serait grandement appréciée.
Merci de vous y intéresser. Il y en a une dont je ne suis pas sûr de pouvoir la trouver (le titre vide), mais je récupère le reste via la fonctionnalité « code » de WAVE et je peux les localiser (avec un peu d’effort) grâce à l’inspecteur F12.
Je ne suis pas certain que les fuseaux horaires soient en notre faveur (je suis au Royaume-Uni, UTC+01:00), mais je serais ravi de participer à un appel Teams ou similaire pour faire une démonstration, si cela vous aide.
Certains lecteurs d’écran ignorent correctement les avatars, mais d’autres lisent le nom/nom d’utilisateur deux fois à cause de cela.
J’ai créé une PR pour supprimer l’attribut title des avatars de publication :
Il s’agit de la zone de saisie où nous affichons l’URL à copier et partager. Voici une PR pour y ajouter un attribut aria-label :
Je n’ai pas pu trouver celui-ci… cela pourrait dépendre des paramètres du site ? Il faut que j’investigue un peu plus.
Nous n’étiquetons pas cela pour les utilisateurs voyants car nous pouvons jeter un coup d’œil à la colonne et faire une hypothèse sur son contenu… c’est beaucoup plus difficile à faire si on ne peut pas voir… ajouter une étiquette pour les lecteurs d’écran a du sens :
Les problèmes restants que je n’ai pas couverts concernent les boutons, je dois encore les examiner…
Un grand merci pour vos réponses rapides et les actions entreprises à ce moment-là. Puis-je confirmer que les demandes fusionnées sont désormais intégrées dans le code depuis une certaine version ?
Par ailleurs, serait-il utile que je (nettoie et) partage le thème que nous avons modifié afin de satisfaire aux tests d’accessibilité WAVE ?
Je vais me décider à effectuer toutes les mises à jour plus tard (j’espère) et je reviendrai vers vous.
Concernant le thème, tout est devenu un peu confus. Nous utilisons (et avons modifié) le thème Light. Voici les modifications de haut niveau que nous avons apportées aux couleurs :
L’astuce ingénieuse qui m’est venue tardivement consiste simplement à tester la page des couleurs pour l’accessibilité.
Nous avons ensuite effectué un grand nombre de modifications à l’aide de l’éditeur CSS (admin/customize/themes/3/common/scss/edit), mais je ne suis pas sûr de savoir comment vous les transmettre (je peux copier-coller, mais je ne sais pas si c’est ce que vous souhaitez, ni si vous voulez que cela figure dans ce fil de discussion). Je pense que si nous pouvions voir les autres couleurs mentionnées (par exemple var(–primary-medium)) dans une interface de haut niveau, les choses deviendraient plus simples. Par exemple, un cas classique était #919191 → #595959, mais ma méthode ne fait que traiter les symptômes que je remarque en parcourant les pages (et puis, la nature dynamique du « site » signifie que ce qui passe aujourd’hui peut ne plus passer demain).
Je suis prêt à essayer une autre approche, faites-moi simplement savoir. Cependant, à aucun moment je ne pourrai exécuter un service de démonstration, examiner le code, etc.
Je dois également noter que je n’ai pas pu corriger admin/upgrade du tout (et il présente de nombreux problèmes de contraste) ; je ne sais pas s’il ne suit pas le CSS ou quelle en est la raison.
Je me souviens que le côté administration de Discourse dispose de feuilles de style séparées (plus difficiles à modifier) pour rendre plus difficile le fait que les utilisateurs se verrouillent accidentellement hors d’une interface d’administration utilisable avec des modifications CSS.
J’ai un peu pris du retard là-dessus, bien que nous ayons mis à jour le forum. Mais j’ai pensé répondre aux personnes qui ont pris le temps (un grand merci !) d’examiner ce fil de discussion.
Merci. Si je clique sur votre lien, Wave détecte 13 problèmes d’accessibilité (contraste faible), mais pas sur les couleurs elles-mêmes. C’est parce que, contrairement à la page des couleurs, il ne montre pas comment elles sont utilisées (comme arrière-plan ou premier plan avec du texte).
Faites-moi savoir comment je peux aider ; cela présente en effet de nombreuses erreurs de contraste.
J’ai jeté un autre coup d’œil et le nombre d’erreurs a considérablement diminué, un grand merci à @awesomerobot et à tous les autres qui ont apporté leur aide !
Je rencontre toujours les erreurs suivantes :
Lors de la visite d’une catégorie : Bouton vide dans le code suivant :
Et les permutations des éléments dans l’instruction ci-dessus
Recherche avec des résultats valides : Titre vide
<h3 class="search-footer"><!----></h3> (J’ai modifié la mise en forme ici, en supprimant les espaces et les sauts de ligne)
Recherche avec des résultats valides : Cinq étiquettes de formulaire manquantes dans la recherche avancée (je peux fournir plus d’informations si nécessaire)
Dans les messages notés (je ne suis pas sûr de la mesure dans laquelle cela est adopté dans l’ensemble de Discourse, il s’agit d’une extension que @angus a aimablement développée pour nous) : Étiquette de formulaire manquante
De nombreuses instances (40 sur la page que j’examine, avec deux utilisateurs qui ont noté) ressemblant à ceci : <input class=" disabled" type="radio" value="1" checked="" disabled="">. Cela se trouve sous <span class="star-rating">.
