Comment transmettre le bouton "primaire vs secondaire" pour les utilisateurs de lecteurs d'écran

Question

J'ai une application qui doit être accessible aux lecteurs d'écran.

Cette application utilise du texte en gras sur le bouton principal pour transmettre des informations sur le "choix recommandé" comme dans l'exemple ci-dessous

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

J'adapte ce modèle pour les utilisateurs de lecteurs d'écran, mais il ne semble tout simplement pas possible de l'implémenter à l'aide d'astuces wai-aria.

Ma question est donc multiple:

• Ce modèle est-il toujours viable pour les utilisateurs de lecteurs d'écran? (J'imagine)
• Comment dois-je adapter ce modèle aux utilisateurs de lecteurs d'écran?

(point bonus si vous connaissez un truc wai-aria)

Answer 1

Eh bien, vous pouvez faire beaucoup de choses. l'étiquette aria et le texte visuellement caché sont les premiers à venir à l'esprit.

Exemple d'étiquette Aria:

<button aria-label="primary (or other meaningful text)">Button text here</button>.

Texte visuellement masqué, uniquement "visible" pour les lecteurs d'écran:

<button><span class="visually-hidden">Primary Action</span> Button text here<button>

visuellement caché serait une classe qui n'utilise pas display: none en css. Quelque chose comme: // classe d'assistance non sémantique de HTML5Boilerplate

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}