2.4: Cosas a tener en cuenta
- Page ID
- 154584
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
Es importante que Lulu y su equipo se den cuenta de que las barreras que existen en su contenido web no son necesariamente únicas y que una cosa que simplifica el trabajo de un auditor de accesibilidad web es que hay un número relativamente pequeño de problemas que ocurren una y otra vez otra vez. Ser consciente de estas barreras comunes significa que a menudo es posible escanear rápidamente el contenido e identificar la mayoría de los problemas de accesibilidad. Lulu y su webmaster deberían familiarizarse con la siguiente lista de las diez principales barreras potenciales a tener en cuenta, ¡y tú también deberías! De ninguna manera es una lista completa, sino que representa los problemas de accesibilidad más comunes.
1. Imágenes sin descripción de texto
Las imágenes sin descripción de texto serán inaccesibles para quienes son ciegos. Las descripciones de texto generalmente se agregan usando el atributo “alt” con el elemento HTML img. Tenga en cuenta que la longitud del texto alt no debe ser mayor de 125 caracteres. Los lectores de pantalla normalmente dejarán de leer el texto en ese momento. Si se necesita una descripción más larga, hay una variedad de formas de describir la imagen más a fondo, ya sea en el texto circundante, en una leyenda de figura, o usando el atributo ARIA aria-describedby. ARIA se discutirá más a fondo en la Unidad 8. En cada caso, alt todavía se usaría para proporcionar una breve descripción y referirse a la descripción más larga en otra parte.
Técnico: Usar el atributo alt para hacer referencia a una descripción más larga <img src=” abelincoln.jpg "alt="Abraham Lincoln at his desk, see description below”/>
En la imagen de arriba, Abraham Lincoln prepara el texto para la Proclamación de Emancipación. Varios otros están sentados alrededor del escritorio, consultando con Lincoln sobre el documento.
Las imágenes de texto también serán inaccesibles para los usuarios ciegos, y también potencialmente inaccesibles para las personas con baja visión, quienes pueden intentar magnificar la imagen dando como resultado que el texto a menudo se degrada hasta el punto de que se vuelva ilegible. Las personas con discapacidades de lectura que usan software de lectura también pueden tener problemas con las imágenes de texto, ya que no pueden ser leídas por el software.
Hay ocasiones en las que las imágenes son estrictamente decorativas o no contienen información útil. En tales casos se debe seguir utilizando el atributo alt, pero su valor se deja vacío (i.e., alt= "”). Esto obliga a un lector de pantalla a ignorar la imagen. Si no se incluye un atributo alt vacío, los lectores de pantalla leerán el nombre del archivo de la imagen, lo que puede interferir con la comprensión de la información circundante, o dejar a un usuario del lector de pantalla preguntándose si le falta algo en la imagen.
2. Elementos Funcionales que Solo Funcionan con un Ratón
No es probable que las personas ciegas usen un mouse al operar una computadora (aunque hay algunas que lo hacen). La mayoría confía exclusivamente en un teclado para navegar por las características de la página. Cualquier elemento que solo opere con un mouse no será accesible para usuarios ciegos. Las personas con movilidad limitada pueden confiar en un teclado. Las personas con baja visión también pueden confiar en el acceso del teclado. Los “usuarios de poder” también tienden a usar un teclado para navegar más que los usuarios promedio. La usabilidad se verá afectada para todas estas personas cuando falte el acceso al teclado.
Figura: Los elementos de arrastrar y soltar deben ser controlados por el teclado, o una alternativa equivalente proporcionada
3. Texto que parece un encabezado, pero no lo es
Las personas ciegas y que utilizan un lector de pantalla para navegar por el contenido web tendrán una función en el lector de pantalla para enumerar los encabezados en una página, por lo que potencialmente pueden saltar a cualquiera de esos encabezados y comenzar a leer. La lista de encabezados también proporciona una buena visión general del contenido de la página, lo que facilita la búsqueda de información específica. Cuando se usa una presentación de texto “similar a un título” (por ejemplo, hacer que el texto sea grande y negrita), faltará la estructura proporcionada por los encabezados adecuados, lo que requerirá que estos usuarios naveguen por toda la página para descubrir su contenido. Esto aumenta en gran medida el esfuerzo necesario para moverse a través del contenido web. Siempre asegúrese de que se usen los encabezados HTML adecuados para representar secciones de página en lugar de texto con estilo.
Técnico: Uso de encabezados adecuados:
Accesible:
<h1>El último capítulo</h1>
Inaccesible:
<p style="font-size:22pt; font-weight:bold;">El último capítulo</p>
De igual manera, los encabezados no deben usarse para aplicar estilo a texto grande en negrita, donde el texto no es un título de encabezado o sección. Esto crea confusión al escuchar una lista de encabezados con un lector de pantalla.
4. Enlaces que no describen el destino o la función
Al igual que los encabezados, los lectores de pantalla pueden enumerar todos los enlaces de una página para recopilar un resumen de los recursos que conducen de ella. Si la lista de enlaces está compuesta por frases sin sentido como “haga clic aquí” o “este enlace” o “más”, se proporciona poca o ninguna información útil al usuario del lector de pantalla. Para la mayoría de los usuarios, enlaces sin sentido como este hacen que el contenido sea más difícil de usar. Si eres capaz de ver, imagínate encontrándote con estos enlaces y teniendo que leer el texto circundante para averiguar a dónde lleva el enlace, o tener que hacer clic en el enlace para descubrir su destino.
5. Listas que parecen listas, pero no lo son
Los lectores de pantalla reconocerán una lista con el formato adecuado utilizando el marcado de lista ordenado o desordenado en HTML (OL o UL), anunciando la lista y el número de elementos de la lista, e indicando la posición de uno en la lista mientras navega por ella. Esta información ayuda con la memoria y la comprensión. Sin el marcado de lista adecuado, a menudo se requiere más esfuerzo para comprender una lista de elementos.
6. Falta la navegación “dentro de la página”
Ya te han presentado dos posibles formas de navegar dentro de las páginas, usando encabezados y enlaces. Hay una variedad de otras formas de moverse dentro de las páginas, como proporcionar “enlaces de derivación”, a menudo creados para permitir que los usuarios de tecnología de asistencia se salten elementos repetitivos como los menús de navegación y salten a un ancla más abajo en la página. Los hitos ARIA también se pueden usar para este propósito, asignando roles específicos a elementos (por ejemplo, banner, navegación, principal) que pueden ser listados por lectores de pantalla y saltados directamente a (por ejemplo, <div role="main">... </div>). Sin formas de navegar dentro de una página, es posible que se requiera que los usuarios de lectores de pantalla se muevan por el contenido en secuencia de principio a fin para encontrar la información que buscan, lo que requiere mucho esfuerzo innecesario.
7. Mala visibilidad, contraste o uso del color por sí solo
Proporcionar un buen contraste entre el texto y el fondo sobre el que aparece es importante por diversas razones. Para aquellos con baja visión, o para lectores mayores, el texto puede volverse ilegible si no contrasta bien con el fondo. Usar una imagen como fondo también puede ser problemático, particularmente cuando el contenido cambia de tamaño y el texto se mueve sobre varios tonos de oscuridad y luz, lo que dificulta la lectura de partes del texto.
La visibilidad del indicador de enfoque del cursor también es importante cuando se navega usando un teclado. Alguien con baja visión que pueda tener la pantalla magnificada varias veces puede encontrar más fácil navegar con un teclado que con un mouse. Si no pueden ver dónde se encuentra el foco del teclado, la navegación del teclado se vuelve difícil o inutilizable.
Como ejemplo, puede encontrarse con una función que usa un botón de inicio verde y un botón de parada rojo. Es posible que algunos usuarios daltónicos o aquellos con baja visión no puedan distinguir los botones. Agregar las palabras “Inicio” al botón verde y “Detener” al botón rojo proporciona el indicador adicional además del color.
8. Video sin Subtítulos (o Subtítulos automáticos)
Es bastante común hoy en día que las organizaciones alberguen sus colecciones de videos con servicios como YouTube o Vimeo. Es importante que cualquier diálogo hablado significativo en los videos sea subtitulado para que el contenido de la pista de audio esté disponible para quienes no puedan escucharla. Obviamente esto incluirá a personas sordas, pero también podría incluir a personas que vean el video en un ambiente ruidoso, o viendo con el sonido rechazado donde sea necesario el silencio.
YouTube ahora ofrece subtitulado automatizado. Toma la pista de audio del video y utiliza tecnología de reconocimiento de voz para convertir el sonido en texto. Esta puede ser una característica útil para subtitular rápidamente un video, pero los productores de video no deben confiar en subtítulos automatizados para proporcionar subtítulos para sus videos. La tasa de precisión en muchos casos será bastante baja, hasta el punto en que los subtítulos no tengan sentido.
Los subtítulos automatizados se pueden utilizar como punto de partida para los subtítulos generados de forma manual, pero no se consideran una alternativa aceptable a la pista de audio en un video para fines de accesibilidad. Ahora hay una variedad de herramientas gratuitas disponibles, como el editor de subtítulos de YouTube o el editor de subtítulos de Amara, que hacen que sea relativamente fácil para cualquiera crear subtítulos.
Aquí hay un ejemplo de lo que puede suceder con los títulos automatizados.
Video: Cuando los subtítulos automáticos automáticos de YouTube salen mal
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1196
© Bibliotecas McMaster. Publicado bajo los términos de una Licencia Estándar de YouTube. Todos los derechos reservados.
9. Información que se actualiza sin recargar la página
Es muy común hoy en día que partes de páginas web se actualicen automáticamente con nueva información, como noticias o feeds de Twitter, por ejemplo. Los lectores de pantalla suelen tomar una instantánea estática de una página web antes de comenzar a leer, por lo que cualquier información nueva que pueda agregarse a una página después de la carga generalmente pasará desapercibida. Cuando se presenta contenido actualizado en un sitio, se debe formatear de tal manera que los usuarios del lector de pantalla sean informados de los cambios.
Afortunadamente, con la aparición de ARIA, proporcionar las actualizaciones a los lectores de pantalla es relativamente sencillo. Los desarrolladores deben agregar una “región viva” donde esté presente la actualización de la información, utilizando el atributo “aria-live” dentro del elemento que contiene la información de actualización.
Una región viva agregada a un div.
<div aria-live="polite">actualizar la información va aquí</div>Tenga en cuenta que el valor para aria-live especifica cuándo se anuncia el contenido de la región. El valor “cortés” en el ejemplo significa que las actualizaciones se anuncian cuando el lector de pantalla no está leyendo otra cosa. También puede usar el valor “asertivo” que interrumpe el lector de pantalla para leer la información de actualización. Los desarrolladores también pueden agregar los atributos aria-relevant y aria-atomic para definir lo que se lee cuando una región en vivo se actualiza: aria-relevant establecido en “adiciones” para nuevo contenido, “eliminaciones” para elementos eliminados, y “all” para anunciar ambos, y aria-atomic establecido en “false” para anunciar solo los cambios, o “true” para anunciar la región viva en su conjunto.
10. Tablas que presentan datos que no tienen encabezados de fila o columna
Al navegar por tablas que contienen datos usando un lector de pantalla, a menudo es necesario que los usuarios del lector de pantalla conozcan los encabezados de columna o fila para determinar el significado de los datos en una celda de datos de tabla, particularmente para tablas más grandes donde es difícil rastrear la ubicación de uno auditivamente en la tabla. Para que las celdas de encabezado de tabla sean legibles desde dentro de una celda de datos (TD), deben marcarse como una celda de encabezado de tabla (TH) adecuada.
Para obtener información más detallada y más lecturas, es posible que desee revisar:
Lecturas y Referencias:
Volver arriba