Recibo una tarea que quiere que actualice el contenido de la página de privacidad. hay un ícono de corazón en uno de los valores clave en el archivo json de contenido. esto debe ser leído por todas las aplicaciones de lectores de pantalla como JAWS, Voice over y talk back
así es como abordo el problema.
Agregué span al archivo json span <span class="sr-only">heart</span>
Y luego agregó la clase en el css:
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }El ícono de comportamiento esperado debe ser leído por un lector de pantalla como JAWS, Voice over y Talkback
El comportamiento real solo lo lee NVDA
El ícono del corazón generalmente significa que desea marcar un elemento como "favorito". No tienes que usar literalmente texto que describa la forma del ícono. En su lugar, debe usar texto que describa el propósito del icono. En este caso, algo así como "marcar como favorito".
La mayoría de los iconos de corazones también son interactivos. Puede hacer clic en ellos con el mouse y cambia el ícono del corazón de una forma vacía/delineada a una forma llena. El ícono debe ser enfocable desde el teclado (usando la tecla de tabulación ) y seleccionable ( espacio o enter ). Eso generalmente se hace al hacer que el ícono sea un <button> real.
Si utiliza el elemento <button> con un <img> anidado para el icono, especifique un atributo alt para el <img> que diga "marcar como favorito". Tendrías algo como esto:
<button> <img src="heart.jpg" alt="mark as favorite"> </button> Para estar completo, probablemente tenga una imagen diferente cuando se seleccione el corazón, por lo que querrá que el texto alt indique que al seleccionar el corazón nuevamente se borrará el elemento como favorito.
<button> <img src="filledheart.jpg" alt="clear as favorite"> </button> Una segunda solución es usar aria-pressed para tener un botón de alternancia. Alternaría el valor del atributo entre verdadero/falso (y alternaría el ícono entre vacío y lleno).
Una tercera solución es convertir el corazón en una casilla de verificación. El corazón está esencialmente marcado o desmarcado (lleno o vacío), por lo que una casilla de verificación/interruptor se ajusta al paradigma.