css - ¿Puedo evitar: después de que los lectores de pantalla lean el pseudo-elemento?
section508 (4)
En este momento, creo que solo existen soluciones alternativas como el uso de una combinación de elementos HTML y aria-hidden , o un soporte limitado de los navegadores que implementan el módulo de voz CSS3 . Tenga en cuenta que este módulo todavía se encuentra en el nivel de recomendación de candidato , pero debe proporcionar un control más preciso sobre lo que se debe leer en voz alta o no.
Si el soporte del navegador fuera perfecto, una buena respuesta sería:
Utilice el módulo de voz CSS3.
Pero sí, esta es la Web, y el soporte del navegador no es perfecto, así que recomiendo usar una combinación de span con aria-hidden="true" incluso 4 años después de que se hiciera esta pregunta.
Pero uno debe saber que, aunque la propiedad aria-hidden impide que se lea el contenido del elemento, también oculta su presencia al usuario. La diferencia es sutil, pero la propiedad speak no ocultará la presencia del elemento mencionándola al decir cuántos niños pertenecen a un elemento.
Por ejemplo, consideremos este código:
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>What a beautiful day!</title>
<style type="text/css">
body {
counter-reset: headers;
}
h2::before {
counter-increment: headers;
content: counter(headers, upper-roman);
speak: none;
}
</style>
</head>
<body>
<h2>Early morning</h2>
<h2>Lunch</h2>
<h2>Before dinner</h2>
</body>
</html>
Y esto es lo que lee Voice Over para el elemento Lunch , en un navegador web compatible (aquí Firefox 59):
Cuenta el speak: none; elemento in (cuenta de pseudo-elementos para uno), pero no lo lee en voz alta.
Usando aria-hidden el elemento no se cuenta en absoluto.
No he probado otros lectores de pantalla, y su kilometraje puede variar.
Por favor considere el siguiente marcado:
<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="[email protected]">
Junto con eso tengo el siguiente css ...
.required:after {
color: red
content: "*";
......
}
Cuando enfoco un campo, un lector de pantalla leerá: Dirección de correo electrónico requerida "estrella". Me gustaría poder hacer esto con css solo para mostrar un visual * pero no quiero que los lectores de pantalla lo lean.
O de lo contrario, esto es algo tan común que los lectores de pantalla y los usuarios ignorarían la configuración de estrella o configuración. IE ¿No es un problema real?
¿Hay alguna forma posible?
Prueba esto, se dirige a los lectores de pantalla con una consulta de medios y oculta la estrella.
@media reader, speech, aural {
.required:after {
display: none;
visibility: hidden;
}
}
Actualizar:
Como el soporte para mi solución inicial no parece ser tan bueno, he pensado en una alternativa. ¡Se me ocurrió que la única forma de garantizar que no fuera leída por un lector de pantalla (sin marcado adicional) sería no tener ningún asterisco! Sin embargo, puede agregar una imagen con css para que parezca un asterisco como:
.required:after {
content:'''';
display: inline-block;
width: .5em;
height: .5em;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
background-size: .5em .5em;
vertical-align: top;
margin-left: .15em;
margin-top: .1em;
}
Si utiliza un intervalo separado para su icono, puede aplicar una etiqueta oculta de aria para evitar que los lectores de pantalla lo lean. Sin embargo, no estoy seguro de cuál es el apoyo para esto.
<label class="required" for="email-address">Email Address
<span class="icon" aria-hidden="true"></span>
<span class="audible">Required</span> </label>
<input type="text" id="email-address" placeholder="[email protected]">
Voy a lanzar esto aquí ya que no hay una respuesta final resaltada y es un tema muy discutido.
La solución anterior proporcionada por @Sam será en un futuro próximo la mejor opción para elegir. Hasta ahora no hay navegadores que tengan la consulta de medios de @media aural, speech por lo que, si la proporciona, solo funcionará en un futuro próximo.
¿Hay alguna otra manera de ocultar los pseudo elementos de los lectores de pantalla?
Sí, con límites. Puede utilizar el " juego de caracteres Unicode de uso privado ". Debido a que los caracteres son de uso privado, los lectores de pantalla no pueden pronunciarlos y, por lo tanto, ignorar al personaje.
Si esa no es una opción, intente atenerse a los elementos <span> o <i> con aria-hidden="true" en ellos. No es tan limpio como los pseudo elementos, pero al menos tienes el control total del contenido.
<button type="button">
<span class="i i-arrow-down" aria-hidden="true">Label
</button>