Merci à vous deux pour vos retours ! La solution d’Aurélien semble être la plus robuste. Du coup, je vais partir là-dessus : <span aria-hidden="true">Nos prest<img alt="a">tions</span> <span class="sr_only »>Nos prestations</span>
Merci pour l’étude de cas. ;) Corinne — Mail : [email protected] <mailto:[email protected]> Téléphone : 03 88 74 72 37 Site internet : http://www.inseo.fr <http://www.inseo.fr/> > Le 2 oct. 2017 à 12:42, Sébastien Delorme <[email protected]> a écrit : > > 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 : > "Nos prestations (niveau d'entête 1)" > "a (niveau d'entête 1)" > "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] <mailto:[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 <http://www.atalan.fr/> > > Atalan est coordinateur des projets AcceDe Web et AcceDe PDF > www.accede.info <http://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 : >> >> <Capture d’écran 2017-10-02 à 12.13.45.png> >> 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 <http://www.inseo.fr/> >> >> >> >> >> >> _______________________________________________ >> liste_gta mailing list >> [email protected] <mailto:[email protected]> >> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org >> <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
signature.asc
Description: Message signed with OpenPGP using GPGMail
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
