Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Améliorations accessibilité #529

Merged
merged 76 commits into from
Jun 10, 2022
Merged

Améliorations accessibilité #529

merged 76 commits into from
Jun 10, 2022

Conversation

Clemog
Copy link
Contributor

@Clemog Clemog commented May 4, 2022

@laem
Copy link
Contributor

laem commented May 4, 2022

Je regarde les outils qui permettent de vérifier l'accessibilité sur le long terme de notre application. Sinon, tout ce travail pourrait être invalidé à la moindre refacto UX d'une section, ce qui arrive souvent.

Les gens semble se tourner vers ces deux libs :

react-axe is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console. It uses the open-source axe testing library to flag any issues and their severity.

eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX. Using this in combination with a tool that tests the final rendered DOM, such as react-axe, can help you find and fix any accessibility concerns on your site.

Edit : axe ne marche pas, CF : dequelabs/axe-core-npm#479, c'est un peu inquiétant ^^
Pour eslint, ça fonctionne, mais il y a très peu d'erreurs, ça ne me semble pas satisfaisant pour gérer l'accessibilité.

En termes d'outils automatiques, je pense qu'on peut rester sur de l'eslint dans notre éditeur de dev, et utiliser par exemple l'extension navigateur Axe.

image

@laem
Copy link
Contributor

laem commented May 4, 2022

@Clemog je crois que prettier était mal configuré dans l'app, j'essaie de corriger ça.

image

Edit : voilà c'est mieux, j'ai bien une erreur d'accessibilité sur le alt :)

Bon, les erreurs remontées par eslint sont peu pertinentes. Les seules pour l'accessibilité c'est a11y/alt-text. Je vais en profite pour les corriger, mais à part ça je pense pas que ce soit une bonne idée de forcer le zéro erreur eslint au yarn start / compile.

image

Clemog and others added 13 commits May 4, 2022 16:38
Je n'arrive pas à limiter aux règles jsx-a11y via le fichier .eslintrc.required.js :/
Barres plus grosses nécessaires, car le contraste diminue
quand la taille du texte diminue
…saisie

Je ne suis pas certain que ce soit bon car la div d'explication n'est présente que si l'aide à la saisie est utilisée alors que l'attribut est rattaché à l'input dans tous les cas.
Si l'aide à la saisie n'est pas utilisée, l'input cherche une description qui n'existe pas
Lien entre question et groupe de réponses
J'ai tenté qque chose @laem  .. A voir
@laem
Copy link
Contributor

laem commented May 10, 2022

  • ajouter un attribut aria-current
  • mettre en texte l'avancement du test
  • idem pour les sondages sur les graphiques

Critère 10.9

Les modifs des premiers commit ne sont pas nécessaires suite à ce développement normalement
A priori seul ce changement suffit par rapport au précédent commit
- Avancement du groupe en % postionné hors écran
- Titres pour les listes "total" et "par catégorie"
- Role "button" attribué aux tag pour interprétation aria
@laem
Copy link
Contributor

laem commented Jun 9, 2022

@Clemog vu le nombre d'améliorations dans cette PR, est-ce qu'on peut la mettre en ligne ? Elle a été commencée il y a un mois. Un mois = 150 000 visiteurs qui n'ont pas pu profiter des premiers commits :)

@Clemog Clemog merged commit 4681f7b into master Jun 10, 2022
@Clemog Clemog deleted the accessibilité-audit branch June 10, 2022 14:33
@Clemog Clemog restored the accessibilité-audit branch June 10, 2022 14:41
@Clemog Clemog deleted the accessibilité-audit branch June 10, 2022 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Prioritaire Priorité haute = à traiter rapidement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants