Bonjour Corinne,
À chaud en lisant l'email :
On peut imaginer l'intégration suivante (je mets un <h1> pour l'exemple,
mais évidemment il peut s'agir d'une autre balise ou d'un autre niveau
selon le contexte) :
<h1>
Nos prest
<img alt="a" src="..." />
tions
</h1>
Le problème étant que le lecteur d'écran annoncera l'image, et la
lecture sera découpée.
Une solution simple avec cette intégration serait d'ajouter aria-label
sur le <h1> :
<h1 aria-label="Nos prestations">
Nos prest
<img alt="a" src="..." />
tions
</h1>
Le lecteur d'écran annoncera donc correctement "Nos prestations", le
titre s'affichera également correctement sans CSS ou lorsque l'image ne
sera pas chargée.
Restitution testée avec NVDA (dernière version) sur Firefox 56.0, ça
devrait fonctionner avec Jaws également.
Par contre, c'est un peu galère avec VoiceOver (iOS) qui annonce :
1. "Nos prestations (niveau d'entête 1)"
2. "a (niveau d'entête 1)"
3. "Nos prestations (niveau d'entête 1)"
Je vois bien une solution en ajoutant aria-hidden sur les éléments
contenus dans le <h1> :
<h1 aria-label="Nos prestations">
<span aria-hidden="true">
Nos prest
<img alt="a" src="..." />
tions
</span>
</h1>
Ça n'est pas hyper propre et j'ai peur qu'on provoque quelques
régressions avec d'autres lecteurs d'écran.
Le top du top serait éventuellement de créer une police spécifique qui
afficherait un "A" sous la forme de la marque Alsace.
Bien à toi,
Sébastien Delorme
[email protected]
Tél. 01 45 26 77 89 / Port. 06 10 70 16 01
----------------------------------------------------------------
Atalan
Accessibilité numérique et sensibilisation au handicap
www.atalan.fr
Atalan est coordinateur des projets AcceDe Web et AcceDe PDF
www.accede.info
Le 02/10/2017 à 12:26, Corinne Schillinger a écrit :
Bonjour à tous,
Je me trouve face à un problème d'intégration que je ne voie pas
comment régler de manière accessible.
Du coup, je m’en remets à vos lumières. :)
Sur la maquette que je dois traiter, une icône est utilisée au sein
d’un mot en substitution d’une lettre.
Une image valant mille mots, voici ce dont il est question :
Le « A » est remplacé par l’icône de la marque Alsace, que je ne peux
obtenir qu’en utilisant une image.
La solution qui me semble la plus appropriée consiste à transformer le
titre « nos prestations » en une image en renseignant l’alternative de
cette dernière.
Mais peut-être avec-vous une suggestion plus pertinente ?
Je vous souhaite à tous un bon appétit et une bonne après-midi,
Corinne
—
Mail :[email protected] <mailto:[email protected]>
Téléphone : 03 88 74 72 37
Site internet :http://www.inseo.fr
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
