html - español - ¿Cómo anunciar que un sitio web no tiene soporte para lectores de pantalla?
title html español (4)
¿Pones el foco en un elemento inicial? Si es así, puede agregar un texto de lector de pantalla adicional que no sea visible y que se leerá junto con el elemento que tiene el foco. Como han mencionado otros, haga una búsqueda en Google para la clase "sr-only" o vea esto: ¿Qué es sr-only en Bootstrap 3? . Quizás algo como esto:
<button>
I''m the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
Si no tiene un enfoque inicial, entonces podría hacer que el primer elemento en el DOM tenga un tabindex="0" que contenga el texto oculto, de modo que cuando el usuario del lector de pantalla comience a hojear la interfaz, escuchará el el texto es lo primero, pero esa es una solución menos deseable porque normalmente no desea que un elemento no interactivo tenga tabindex="0" . Algo como esto:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
Una tercera solución posible, similar a la primera, es tener texto adicional asociado con su primer encabezado o elemento principal y enfocar ese elemento usando tabindex="-1" . El "-1" significa que un usuario no puede usar la tecla Tab para llegar a ella. Algo como:
<html>
<script>
function myload() {
document.getElementById("myid").focus();
}
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
Podemos usar <noscript> para decir Lo sentimos, este sitio web requiere JavaScript para ejecutarse .
¿Cuál es la forma análoga de anunciar que el sitio no admite lectores de pantalla ? Algo como <noscreenreader>Sorry, ...</noscreenreader> .
(Historia breve: es una aplicación que depende de la idea de nunca usar palabras. Se basa en gran medida en las imágenes para transmitir información. No tendría sentido anunciar nada en el lenguaje hablado).
Hay un atributo de role "alerta" en WAI ARIA que actuará de manera similar a un cuadro de alerta JS visible para la tecnología de asistencia / lectores de pantalla, es decir, de forma predeterminada, su texto se leerá inmediatamente después de que se cargue la página.
(WAI ARIA significa "Iniciativa de Accesibilidad Web - Aplicaciones de Internet Ricas y Accesibles" por el W3C, que amplía las posibilidades de las aplicaciones web para tecnologías de asistencia como lectores de pantalla)
Por lo tanto, podría crear un elemento invisible que contenga ese atributo directamente al comienzo de su <body> , similar a mi ejemplo a continuación.
(Nota: No use la display: none en un mensaje como ese: ¡la mayoría de los lectores de pantalla lo tomarán como una orden para NO leer su texto!)
#screenreader_alert {
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
}
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>
Para más información: https://w3c.github.io/aria-practices/#alert
Los lectores de pantalla funcionan en la parte superior del navegador, por lo que no hay una forma sencilla (solo algunas técnicas de Flash complicadas) para detectar cuándo alguien está usando una.
Lo mejor es colocar la advertencia al principio del contenido y ocultarlo para los usuarios videntes. Este artículo menciona varias técnicas.
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>
FWIW, con respecto a los usuarios que no usan lectores de pantalla, creo que hay una ventaja de usar la sangría de texto para ocultar el texto en lugar de otras opciones.
Si verifica la prueba a continuación con el lector de pantalla incorporado en OSX, se leen los primeros 2 párrafos, pero no el tercero.
<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>
https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa