Archives Wild Code School
A11y

Accessibility: Quiz App made accessible

Quête 2 sur 2

Accessibilité

⛰️ Challenge : rendre ton appli Quiz accessible

Continue à travailler sur ton projet d'appli Quiz et rends ton application plus accessible. Voici quelques idées de ce que tu peux faire.

Assure-toi que :

  • tu as utilisé du HTML sémantique dès que possible.
  • tous tes éléments interactifs ont un accessible name (nom accessible). Par exemple, s'il y a une icône sur laquelle l'utilisateur peut cliquer, elle n'a peut-être pas encore de nom accessible.
  • tes pages ont un seul élément h1 et ne sautent pas de niveaux de titres.
  • le contenu textuel de tes éléments interactifs est descriptif.
Bravo

Quand tu es satisfaite du niveau d'accessibilité de ton appli Quiz, envoie l'URL vers le dépôt GitHub dans le champ de réponse.


🔍 Ressources

↗
MDN : Accessibilité
developer.mozilla.org
↗
The A11y Project : Liste de contrôle
a11yproject.com
↗
Web Accessibility Initiative : Introduction à l'accessibilité web
w3.org
↗
L'accessibilité web pour les designers
webaim.org

Accessibility

⛰️ Challenge: Quiz App made accessible

Continue to work on your Quiz App project and make your application more accessible. Here are some ideas of what you can do.

Make sure:

  • you used semantic HTML whenever possible.
  • all of your interactive elements have an accessible name. If there is an icon for example that the user can click, it might not have an accessible name yet.
  • your pages have one h1 element and do not skip heading levels.
  • the text content of your interactive elements is descriptive.
Bravo

When your are satisfied with the level of accessibility on your Quiz App, upload the URL to the GitHub repo to the solution prompt.


🔍 Resources

↗
MDN: Accessibility
developer.mozilla.org
↗
The A11y Project: Checklist
a11yproject.com
↗
Web Accessibility Initiative: Introduction to Web Accessibility
w3.org
↗
Web Accessibility for Designers
webaim.org