Tengo una aplicación angular2 y estoy vinculando un texto dinámico a ARIA-LABEl para un DIV anidado. Pero cuando uso el lector JAWS para ubicar DIV en la página, no lee el texto asignado. Este es el texto que intento leer: attr.aria-label="Detalles del producto para {{productDetails?.ProductName}} "
Además, si asigno un rol de encabezado a este div, lee el texto dinámico pero no antepone "Detalles del producto para" antes del texto.
<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text"> <div autofocus attr.aria-label="Product details for {{productDetails?.ProductName}}" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}} </div> <div autofocus class="products-result-compare"> <!--{{getDescription(productDetails?.Description)}}--> Small description </div>Su descripción carece de detalles o un ejemplo de trabajo, por lo que en lugar de intentar ofrecer una solución, todo lo que puedo ofrecer es esto: aria-label no funciona en <div> ni <span> .
Un <div> y <span> no son puntos de referencia ni contenido interactivo. Un lector de pantalla no leerá una aria-label (y con razón).
Sin saber el uso, tengo dos sugerencias que podrían ayudar:
Coloque la aria-label directamente en el control (sabiendo que anulará el texto del control).
Utilice algún texto fuera de la pantalla si desea que solo lo encuentren los usuarios de lectores de pantalla.
Usa una técnica fuera de la pantalla:
<div class="sr-only"> Here be redundant or extraneous content </div>El CSS podría verse así (teniendo en cuenta también los lenguajes RTL):
.SRonly { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); top: auto; left: -9999px; width: 1px; height: 1px; overflow: hidden; } html[dir=rtl] .SRonly { left: inherit; left: unset; right: -9999px; }Existen otras técnicas , pero su valor depende de tu audiencia y su perfil tecnológico.
Tu uso del autofocus en esos <div> me pone nervioso. Espero que no los estés usando como controles interactivos (como botones). Idealmente , nunca use un div como contenido interactivo .
Lo que se dijo anteriormente es correcto, PERO hay una solución adecuada:
Un <div> y <span> no son puntos de referencia ni contenido interactivo. Un lector de pantalla no leerá una aria-label (y con razón).
La solución adecuada para tener un lector como JAWS o NVDA para leer un <div> es agregar una etiqueta de role , junto con una aria-label .
<div role="navigation" aria-label="Main"> <!-- list of links to main website locations --> </div>Aquí hay 2 enlaces con la amplia lista de varios roles que DEBERÍAN agregarse:
Encontré una respuesta a esto que funcionó mucho mejor para mí sin ningún CSS personalizado, así que quería compartir:
<div role="heading" aria-level="1"> <span aria-label="This is what screen-reader will say"> <!-- no content shown, but is a heading for screen reader --> </span> </div>La etiqueta aria no se lee en un encabezado, pero se lee si está contenido dentro del encabezado.