Quieres ocultar algo en una página, así que:
.hide {
display: none;
}¡Pero espera! Al aplicar esa clase a un elemento, inmediatamente ha hecho que ese contenido sea “inaccesible” para los lectores de pantalla. Probablemente hayas sabido esto desde siempre, pero aún así, la manzana venenosa se cuela en nuestro código de vez en cuando.
No quiero volver a codificar todos los detalles. Su mejor opción es leer “Now You See Me” de Aaron Gustafson en A List Apart para comprender esto si aún no lo ha hecho.
Una forma de animarse a hacer lo correcto es crear nombres de clase más apropiados. Su clase de ocultación habitual debe colocar el contenido fuera de la pantalla, lo que aún lo deja accesible al lector de pantalla:
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}yo suelo !important aquí porque si se ha tomado la molestia de agregar una clase “oculta” a algo, probablemente lo diga en serio y no quiera pensar demasiado si el valor de especificidad es lo suficientemente fuerte. Y si sabes que necesitas display: none algo, la clase debería ayudarte a entenderlo:
.remember-this-will-NOT-be-read {
display: none !important;
}Otra opción para la ocultación accesible proviene de algunas investigaciones de Snook y el texto estándar de HTML5:
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}OK lo tienes. Fácil cuando tienes el control total de los nombres de las clases y todo lo que haces es aplicarlos y eliminarlos. Pero las cosas se complican un poco con las bibliotecas JS que aplican su propio CSS. Por ejemplo, en jQuery, después de ti .slideUp(), tendrás un display: none en el CSS en línea para tratar. Sí, los lectores de pantalla ejecutan JavaScript y sí, eso sigue siendo un problema.
Una vez más, Aaron Gustafson nos tiene cubiertos allí, quien sugiere aplicar el nombre de clase accesible después de que se realiza el deslizamiento y luego eliminar el display: none deslizándolo en la otra dirección.
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function() {
if (visible) {
$text.slideUp('fast',function() {
$text.addClass('hide')
.slideDown(0);
});
} else {
$text.slideUp(0,function() {
$text.removeClass('hide')
.slideDown('fast');
});
}
visible = !visible;
});Aquí hay una demostración de eso:
Vea el Pen Hiding con jQuery por Programar Plus(@ css-tricks) en CodePen.
Ahora tenemos las herramientas que necesitamos para dejar de usar display: none y comience a utilizar métodos de “ocultación” más accesibles.
Páginas de preguntas frecuentes
Si está ocultando la respuesta hasta que se haga clic en la pregunta, escóndela con un nombre de clase accesible. Tenga cuidado de no .hide () y luego slideToggle (), ¡eso no es lo suficientemente bueno!
Etiquetas
Es tentador de usar placeholder texto como un reemplazo de etiqueta (especialmente ahora con algunos navegadores mejorados UX de dejar el texto hasta que realmente escriba), pero no display: none o quitar el labels. Hace poco escuché una historia desgarradora sobre una niña ciega que intentaba postularse para la universidad y le faltaba el formulario. labels así que no tenía idea de qué poner en qué campos. Entonces, si vas a usar placeholder texto como reemplazo de la etiqueta, utilice una técnica de ocultación accesible para las etiquetas.
Pestañas
El hecho de que un panel de contenido no sea el “actualmente activo” no significa que deba ser inaccesible. Escóndelo con una técnica de ocultación accesible. O puede que ni siquiera lo necesite. Si todos los paneles tienen la misma altura, puede cambiar cuáles son visibles ajustando z-index.
@preguntas de los medios
Activar Voice Over en OS X y usar Safari es un lector de pantalla. Ahora imagina que la ventana de Safari estaba abierta a un ancho muy estrecho y la página tenía algunas consultas @media para manejar ventanas gráficas más pequeñas. Y decir que @media query oculta algunas cosas con display: none para acomodar mejor visualmente el espacio. Esto podría ser bueno o malo para la accesibilidad. ¿Estás escondiendo un montón de basura que no es importante para la página? ¿O estás ocultando cosas útiles a las que una persona que usa un lector de pantalla debería tener acceso como lo haría normalmente?
Ningún experto aquí
Toda esta publicación se basa en la premisa de que display: none es malo para la accesibilidad. No se basa en mi conocimiento profundo y completo de los lectores de pantalla y la accesibilidad general. Si tiene más que agregar, cosas que corregir o una experiencia personal que compartir, por favor hacer.