Esta es la tercera publicación de una pequeña serie que estamos haciendo sobre accesibilidad de formularios. Si te perdiste la segunda publicación, mira Administrar el enfoque del usuario con: focus-visible. En esta publicación veremos el uso de un lector de pantalla al navegar por un formulario y también algunas de las mejores prácticas.

¿Qué es un lector de pantalla?

Es posible que haya escuchado el término "lector de pantalla" mientras navegaba por la Web. Es posible que incluso esté utilizando un lector de pantalla en este momento para ejecutar pruebas de accesibilidad manuales en las experiencias que está creando. Un lector de pantalla es un tipo de AT o tecnología de asistencia.

Un lector de pantalla convierte texto digital en voz sintetizada o salida Braille, lo que se ve comúnmente con un lector Braille.

En este ejemplo, usaré Mac VO. Mac VO (VoiceOver) está integrado en todos los dispositivos Mac; Sistemas iOS, iPadOS y macOS. Dependiendo del tipo de dispositivo en el que esté ejecutando macOS, la apertura de VO puede diferir. La Macbook Pro que ejecuta VO en la que estoy escribiendo esto no tiene la barra táctil, por lo que usaré las teclas de acceso directo según el hardware.

Mejora del VO en macOS

Si está utilizando una Macbook Pro actualizada, el teclado de su máquina se parecerá a la imagen a continuación.

Comenzarás manteniendo presionado el cmd y luego presionando Touch ID tres veces rápidamente.

Si tiene un MBP (MacBook Pro) con TouchBar, utilizará el acceso directo cmd+fn+f5 para activar VO. Si está utilizando un teclado tradicional con su computadora de escritorio o portátil, las teclas deben ser las mismas o tendrá que activar VO en la configuración de Accesibilidad. Una vez que VO esté activado, será recibido con este cuadro de diálogo junto con un mensaje vocalizado. introducción al VO.

Si hace clic en el botón "Usar VoiceOver", estará en camino de utilizar VO para probar sus sitios web y aplicaciones. Una cosa a tener en cuenta es que VO está optimizado para su uso con Safari. Dicho esto, cuando ejecute la prueba del lector de pantalla, asegúrese de que Safari sea el navegador que está utilizando. Esto también se aplica al iPhone y al iPad.

Hay dos formas principales en las que puedes utilizar VO desde el principio. La forma en que lo uso personalmente es navegando a un sitio web y usando una combinación de tab, control, option, shift y las teclas de flecha, puedo navegar a través de la experiencia de manera eficiente solo con estas teclas.

Otra forma común de navegar por la experiencia es utilizando el Rotor de voz en off. El Rotor es una función diseñada para navegar directamente a donde desea estar en la experiencia. Al utilizar el Rotor, eliminas la necesidad de recorrer todo el sitio; considéralo como "Elige tu propia aventura".

Las teclas de modificación

Las teclas modificadoras son la forma en que utilizas las diferentes funciones en VO. La tecla modificadora predeterminada o VO is control + option pero puedes cambiarlo a bloqueo de mayúsculas o elegir ambas opciones para usarlas indistintamente.

Usando el rotor

Para utilizar el rotor, debe utilizar una combinación de su(s) tecla(s) modificadora(s) y la letra "U". Para mí, mi clave modificadora es caps lock. Yo presiono caps lock + U y el rotor gira para mí. Una vez que aparece el Rotor, puedo navegar a cualquier parte de la experiencia que desee usando las flechas izquierda y derecha.

Navegar por nivel de encabezado

Otra forma interesante de navegar la experiencia es por nivel de título. Si usas la combinación de tus teclas modificadoras + cmd + H puede recorrer la estructura del documento según los niveles de encabezado. También puede retroceder el documento presionando shift en la secuencia así, teclas modificadoras + shift + cmd + H.

Historia y mejores prácticas

Los formularios son uno de los elementos nativos más poderosos que tenemos en HTML. Ya sea que esté buscando algo en una página, enviando un formulario para comprar algo o enviando una encuesta. Los formularios son la piedra angular de la web y fueron un catalizador que introdujo la interactividad en nuestras experiencias.

La historia del formulario web se remonta a septiembre de 1995 cuando se introdujo en el Especificaciones HTML 2.0. Algunos dicen que los buenos tiempos de la web, al menos yo digo eso. Stephanie Stimac escribió un artículo fantástico sobre Smashing Magazine titulado, "Estandarización de la selección y más allá: el pasado, el presente y el futuro de los controles de formularios HTML nativos.

Las siguientes son cinco prácticas recomendadas a seguir al crear un formulario accesible para la web.

1. Asegúrate de estar utilizando un elemento de formulario. Los formularios son accesibles de forma predeterminada y deben usarse sobre div en todo momento.

<form>
  <!-- Form controls are nested here. -->
</form>

2. Asegúrese de utilizar el for y id atributos en labely inputEs para que queden vinculados. De esta manera, si hace clic o toca la etiqueta, el foco se desplazará a la entrada y podrá comenzar a escribir.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Si se requiere un campo para completar el formulario, use el atributo requerido y el atributo aria-required. Estos restringirán el envío del formulario. El atributo aria-required le dice explícitamente al técnico de asistencia que el campo es obligatorio.

<input type="text" id="name" name="name" required aria-required/>

4. Utilizar el, :focus, :focus-within y :focus-visible Pseudoclases de CSS para administrar y personalizar cómo un usuario recibe atención.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button se utiliza para invocar una acción, como enviar un formulario. ¡Úsalo! No cree botones usando div's. A div por definición es un divisor. No tiene propiedades de accesibilidad inherentes.

De demostración

Si desea consultar el código, navegue hasta el Repositorio de GitHub de demostración de VoiceOver. Si desea probar la demostración anterior con el lector de pantalla de su elección, consulte Navegar por un formulario web con VoiceOver.

Software de lectura de pantalla

A continuación se muestra una lista de varios tipos de software de lectura de pantalla que puede utilizar en su sistema operativo determinado. Si una Mac no es su máquina preferida, existen opciones para Windows y Linux, así como para dispositivos Android.

NVDA

NVDA es un lector de pantalla de NV Access. Actualmente sólo es compatible con PC que ejecutan Microsoft Windows 7 SP1 y versiones posteriores. Para obtener más acceso, consulte el Página de descarga de NVDA versión 2024.1 en el sitio web de NV Access!

MANDÍBULAS

Si entendiste la referencia anterior, estás en buena compañía. Según el sitio web de JAWS, esto es en pocas palabras:

Echa un vistazo a JAWS por ti mismo Y si esa solución se adapta a tus necesidades, ¡definitivamente inténtalo!

narrador

Narrador es una solución de lector de pantalla integrada que se envía con Windows 11. Si elige utilizarlo como su lector de pantalla preferido, el enlace a continuación es para obtener documentación de soporte sobre su uso.

Guía completa de Narrador

Orca

Orca es un lector de pantalla que se puede utilizar en diferentes distribuciones de Linux que ejecutan GNOME.

TalkBack

Google TalkBack es el lector de pantalla que se utiliza en los dispositivos Android. Para obtener más información sobre cómo encenderlo y usarlo, consulte este artículo en el sitio de soporte de accesibilidad de Android.

Soporte del navegador

Si está buscando soporte real del navegador para elementos HTML y atributos ARIA (Aplicación de Internet enriquecida accesible), le sugiero caniuse.com para HTML y Soporte de accesibilidad para ARIA para obtener el último 4-1-1 sobre compatibilidad con navegadores. Recuerde, si el navegador no es compatible con la tecnología, es probable que el lector de pantalla tampoco lo sea.

DigitalA11Y puede ayudar a resumir la información del navegador y del lector de pantalla con su artículo,  ¡Lectores de pantalla y navegadores! ¿Cuál es la mejor combinación para las pruebas de accesibilidad?

Enlaces

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
• Fuente: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/