javascript - sublime - ¿Hay un equivalente al atributo "alt" para los elementos div?

insertar imagen html5 (8)

Los lectores de pantalla leerán la cadena establecida en el atributo "alt". El uso de este atributo es específicamente para etiquetas de imagen.

Si tengo un div como este:

<div id=myCoolDiv tabindex="0"> 2 <div>

¿Hay alguna forma de que un lector de pantalla capte un atributo para leer una cadena de la misma manera que se usa una etiqueta alt?

Por lo tanto, para el div listado a continuación, el lector de pantalla dirá, por ejemplo, "artículos del carrito de compras 2"

Intenté usar aria-label pero el lector de pantalla no lo capta:

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>

De acuerdo con el algoritmo de cálculo de texto alternativo del W3C y el Nombre y descripción accesibles: Cálculo y asignación de API 1.1 , definitivamente debe usar aria-label .

Dicho esto, no funciona con Jaws, es una pena para una herramienta tan cara.

La opción restante es usar un enlace que irá a la página de su carrito, usando tanto el title como aria-label para satisfacer a cualquiera:

<a href="#cart" title="2 shopping cart items" aria-label="2 shopping cart items">2</a>

También puede utilizar una opción de 1 píxel transparente:

2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />

En caso de que utilice Bootstrap Framework, existe una solución rápida y fácil. Debería usar sr-only o sr-only sr-only-focusable las classes CSS de Bootstrap en un elemento de span donde se escribirá el texto de screen-reader-only .

Verifique el siguiente ejemplo, un elemento de span con la clase glyphicon glyphicon-shopping-cart también se usa como icono de carrito.

<div id="myCoolDiv"> <h5> <span class="glyphicon glyphicon-shopping-cart"></span> 2 <span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span> </h5> <div>

Salida del lector de pantalla: "dos artículos del carrito de compras"
proporcionado por Fangs Screen Reader Emulator Complemento para Firefox

Puede encontrar el ejemplo de trabajo anterior en este: Fiddle

Como lo sugiere Oriol , en caso de que no utilice Bootstrap Framework , simplemente agregue lo siguiente en su archivo CSS.

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

Hay dos formas (que se pueden combinar) de tener un lector de pantalla para leer un texto alternativo:

Cualquier cosa con el rol img ARIA puede (DEBE) tener un atributo alt . Ver el papel img WAI-ARIA .
<div role="img" alt="heart"> ♥︎ </div>

Sin embargo, esto debe usarse solo en caso de que el elemento realmente represente una imagen (por ejemplo, el carácter Unicode del corazón).

Si un elemento contiene texto real, que solo necesita una lectura diferente, debe configurar la función ARIA en text y agregar aria-label con lo que quiera que lea el lector de pantalla. Ver papel de texto WAI-ARIA .
<div role=text aria-label="Rating: 60%"> Rating: ★★★☆☆︎ </div>

No lo desajuste con aria-labeledby que debe contener el ID de un elemento relacionado.

Puede combinar los dos casos anteriores en uno usando dos roles ARIA y agregando alt y aria-label :
<div role="img text" alt="heart" aria-label="heart"> ♥︎ </div>

Cuando se definen más roles de ARIA, el navegador debe usar el primero que sea compatible y procesar el elemento con ese rol.

Una última cosa importante es que debe configurar el tipo de página en HTML5 (que es compatible con ARIA por diseño).

<!DOCTYPE html>

El uso de HTML4 o XHTML requiere una DTD especial para habilitar el soporte ARIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

No, no hay equivalente a un atributo alt para los elementos <div> .

Por lo que intenta hacer, una solución basada en ARIA es una exageración. No solo está tropezando con problemas de compatibilidad del lector de pantalla, sino que también está aplicando los atributos de ARIA donde no son necesarios (y posiblemente no pertenezca si se encuentra en algo como un <div> ).

En su lugar, considere usar una técnica fuera de pantalla (como esta de The Paciello Group o esta de WebAIM ). El contenido oculto utilizando esta técnica todavía será leído por los lectores de pantalla, pero se ocultará visualmente.

Después de leer tu pregunta, creo que esto es lo que buscas.

Hice un bolígrafo demostrando esta técnica . Puede ser más fácil probar en la versión de página completa .

Edición : se agregaron HTML y CSS del ejemplo, pero tenga en cuenta que tanto las especificaciones como la tecnología de asistencia / navegador cambian con el tiempo, por lo tanto, si está leyendo esto en un año, debe continuar usando los enlaces anteriores para verificar que este CSS aún es La mejor práctica actual.

HTML

<div tabindex="0"> <span class="offscreen">Items in shopping cart: </span>2 </div>

CSS

.offscreen { position: absolute; clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }

Pruebe role="listitem" o role="group" y aria-labelledby="shopping cart items" . Ver Ejemplo 1 . El 2 es contenido de texto que debe ser leído por el lector de pantalla con el atributo leído como contexto al contenido. Consulte esta section .

ACTUALIZACIÓN 2

Agregue aria-readonly=true role=textbox si usa una entrada. Si hay dudas sobre si usar aria-label o aria-labelledby , lea este article . En la documentation para JAWS y probarlo yo mismo, se admite el hecho de que aria-label se ignora. Además, la semántica es muy importante cuando la accesibilidad es su preocupación. El uso de un div cuando podría usar una entrada no es semánticamente correcto y, como dije antes, JAWS aceptaría un elemento de formulario más fácilmente que un div. Supongo que este "carro de la compra" es un formulario o parte de un formulario, y si no le gustan sus bordes, input {border: 0 none transparent} o use <output> * que sería A + en la medida en que la semántica es preocupado.

Lo siento, @RadekPech me recordó; Olvidé agregar que el uso de aria-labelledby necesita texto visible y que el texto necesita una identificación que también se enumera como el valor (es) de aria-labelledby . Si no desea texto por motivos estéticos, utilice color: transparent , line-height: 0 o color:<same as background> . Eso debería satisfacer la visibilidad en lo que concierne al DOM * y seguir siendo invisible a simple vista. Tenga en cuenta que estas medidas se deben a que JAWS ignora aria-label .

* no probado

Ejemplo 3

<span id="shopping">Shopping</span>  <span id="cart">Cart</span>  <span id="items">Items</span>  <input id=''cart'' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value=''2''>

ACTUALIZACIÓN 1

Para JAWS, probablemente tengas que configurarlo un poco:

Haga clic en el elemento del menú Utilidades .
A continuación, Centro de configuración .
Esquemas de habla y sonidos
Esquema de Modiy ...
Pestaña HTML

En este cuadro de diálogo en particular, puede agregar atributos específicos y lo que se dice cuando se tabula un elemento. JAWS responderá a los elementos del formulario más fácilmente porque pueden desencadenar el evento de focus . Tendrá un tiempo más fácil haciendo el Ejemplo 2 en su lugar:

EJEMPLO 1

<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>

Ejemplo 2

<input id=''semantic'' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value=''2'' readonly>

Puede crear una clase como el texto del lector de pantalla con el siguiente css:

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; }

Luego, en su código, solo puede agregar un <span> con el texto del lector de pantalla como sigue:

<div> I am a div! <span class="screen-reader-text">This is my screen reader text</span> </div>

Vea un ejemplo aquí: https://jsfiddle.net/zj1zuk9y/

(Fuente: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/ )

Tratar:

HTML

<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>

CSS

.aria-hidden { position: absolute; left: -100000px; }

Esto anunciará el texto dentro del lapso. Y el div padre no perderá el enfoque visual. La clase Aria-hidden ocultará el lapso del área visible de la pantalla, pero la leerá como dentro de la div que tiene el foco.

Use una imagen dentro del div que tenga la etiqueta como su atributo alt . De esa manera, los que no tienen lectores de pantalla solo ven el número y una imagen, mientras que los que tienen lectores escucharán la oración completa:

<div> <img src="http://tny.im/57j" alt="Shopping cart items" /> 2 </div>

Visto como: artículos del carrito de compras http://icons.iconarchive.com/icons/icons8/ios7/16/Ecommerce-Shopping-Cart-Empty-icon.png 2
Leer como: "Artículos del carrito de compras: 2"

El atributo alt existe para las imágenes porque no hay manera de "leer en voz alta" el contenido de la imagen, por lo que se usa el texto proporcionado. Pero para el div, ya contiene texto e imágenes. Por lo tanto, si desea que un lector de pantalla lo lea, debe incluir el texto y el texto alternativo en el contenido del div.