EnglishCommencer

Alternatives, contrastes et clavier

Trois exigences d'accessibilité : l'alternative textuelle d'une image selon son rôle, le contraste des textes (4,5:1 et 3:1) et la navigation au clavier (ordre de tabulation, focus visible, lien d'évitement, piège clavier).

  • 27 cartes
  • 5 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les chiffres
  5. Mises en situation

Quelques cartes du deck

  • Alternative textuelle : de quoi s'agit-il ?

    Voir la réponse

    Texte qui remplit la même fonction qu'un contenu non textuel, pour qui ne peut pas le voir : en HTML, l'attribut alt d'une image.

    Elle décrit la fonction ou l'information, pas l'apparence : pour une image-lien, on écrit où le lien mène, pas « flèche bleue ».

  • Quelle valeur d'alt convient à cette icône, placée à côté du texte « Imprimer » dans le même lien ?

    ```html
    <a href="/imprimer">
    <img src="imprimante.svg" alt="?">
    Imprimer
    </a>
    `

    • alt=""
    • alt="Imprimante"
    • alt="Imprimer"
    • Pas d'attribut alt du tout
    Voir la réponse

    alt=""

    Le texte du lien dit déjà tout : l'icône est redondante, donc décorative. Un alt « Imprimer » ferait lire « Imprimer Imprimer » ; sans attribut, le lecteur peut lire le nom du fichier.

  • Au clavier, la touche … avance d'un élément focalisable et … recule.

    Voir la réponse

    Au clavier, la touche Tab avance d'un élément focalisable et Maj+Tab recule.

    Les liens munis d'un href, les boutons et les champs de formulaire sont focalisables d'office ; un div ne l'est que si on lui donne un tabindex.

  • Image décorative : de quoi s'agit-il ?

    Voir la réponse

    Image qui n'apporte aucune information et ne remplit aucune fonction ; on la masque aux lecteurs d'écran avec un attribut alt présent mais vide.

    alt="" est voulu : sans l'attribut, le lecteur d'écran lit souvent le nom du fichier (« bordure-ornement-02.png »).

Réviser ce deck