Quiz 18 — Accessibilité & RTL
⏱️ TL;DR — 50 questions sur l’accessibilité (ARIA, focus, contrastes) et le support droite-à-gauche (Partie 12). Réponds de tête, puis déplie.
1. Classe qui masque visuellement mais garde l’accès lecteur d’écran ?
Réponse
visually-hidden.
2. Que faut-il sur un bouton-icône ?
Réponse
Un aria-label.
3. Bootstrap respecte-t-il prefers-reduced-motion ?
Réponse
Oui.
4. Styliser un titre sans casser la hiérarchie ?
Réponse
<h2 class="h4">.
5. Différence d-none / visually-hidden ?
Réponse
d-none retire des lecteurs d’écran ; visually-hidden non.
6. Que gère Bootstrap pour la modale ?
Réponse
Focus trap + restitution du focus.
7. Que devez-vous fournir vous-même ?
Réponse
alt, labels, aria-label, hiérarchie des titres.
8. Lien d’évitement (skip link) visible au focus ?
Réponse
visually-hidden-focusable.
9. Rôle ARIA d’une alerte importante ?
Réponse
role="alert".
10. Oubli d’accessibilité le plus fréquent ?
Réponse
Bouton-icône sans aria-label.
11. Supprimer l’outline de focus : bon ou mauvais ?
Réponse
Mauvais (sauf remplacement visible).
12. Bootstrap fournit quels styles de focus ?
Réponse
:focus-visible.
13. alt="" : quand ?
Réponse
Image décorative.
14. Relier un label à un champ ?
Réponse
for = id.
15. Le placeholder remplace-t-il un label ?
Réponse
Non.
16. Rendre un spinner accessible ?
Réponse
role="status" + visually-hidden.
17. Ne pas sauter de niveau de titre : pourquoi ?
Réponse
Structure logique pour lecteurs d’écran / SEO.
18. Le contraste de la palette 5.3 vise quel niveau ?
Réponse
Un bon contraste (objectif WCAG).
19. Lint d’accessibilité en React ?
Réponse
eslint-plugin-jsx-a11y.
20. role="switch" sur un switch : utilité ?
Réponse
L’annoncer comme interrupteur (pas simple case).
21. Deux réglages qui activent le RTL ?
Réponse
dir="rtl" (+lang) et bootstrap.rtl.css.
22. Que signifie start en RTL ?
Réponse
Le début = la droite.
23. Pourquoi ms-3 plutôt que ml-3 ?
Réponse
ms-3 s’inverse automatiquement en RTL.
24. Outil qui génère le CSS RTL ?
Réponse
RTLCSS.
25. Les nombres s’inversent-ils en RTL ?
Réponse
Non (restent LTR).
26. text-right (v4) devient… ?
Réponse
text-end.
27. float-left devient… ?
Réponse
float-start.
28. border-left devient… ?
Réponse
border-start.
29. Contenu bidirectionnel dans une page ?
Réponse
Poser dir localement (ex. sur un blockquote).
30. Icônes directionnelles en RTL : attention ?
Réponse
Elles doivent s’inverser (flèches suivant/précédent).
31. Logos/images en RTL : toujours en miroir ?
Réponse
Non, certains ne doivent pas être inversés.
32. Le code reste-t-il LTR en RTL ?
Réponse
Oui.
33. Baser toute l’UI sur start/end : quand ?
Réponse
Dès le départ si RTL prévu.
34. Attribut qui donne la langue ?
Réponse
lang.
35. visually-hidden sert typiquement à ?
Réponse
Textes pour lecteurs d’écran (labels de spinner, skip link).
36. Un bouton de fermeture accessible ?
Réponse
btn-close + aria-label="Fermer".
37. aria-current="page" sert à ?
Réponse
Marquer la page/lien courant.
38. aria-expanded sur un toggler ?
Réponse
Indiquer l’état ouvert/fermé.
39. Focus management d’un offcanvas : géré ?
Réponse
Oui (comme la modale).
40. Un dark mode aide-t-il l’accessibilité ?
Réponse
Potentiellement (confort visuel) si contraste respecté.
41. react-bootstrap gère-t-il vos alt ?
Réponse
Non.
42. role="tablist" : utilité ?
Réponse
Signaler un système d’onglets.
43. Les composants ont-ils des ARIA par défaut ?
Réponse
Oui, dans les exemples officiels.
44. Un texte de lien « cliquez ici » : bon pour l’a11y ?
Réponse
Non (préférer un intitulé explicite).
45. La feuille RTL est le… du CSS normal ?
Réponse
Miroir.
46. ps-*/pe-* : padding logique ?
Réponse
Oui (start/end).
47. Concevoir RTL en dernière minute : problème ?
Réponse
Réécrire tout si left/right en dur — c’est un choix d’archi.
48. Un tooltip doit être attaché à un élément… ?
Réponse
Focusable.
49. Le Reboot aide-t-il l’accessibilité ?
Réponse
Oui (unités rem, base cohérente).
50. Résumé : Bootstrap fait beaucoup mais… ?
Réponse
L’accessibilité finale dépend de vous (alt, labels, aria).
Quiz suivant : Quiz 19 — Production & migration.