Accesibilidad

Mejora de la accesibilidad de las páginas web

Alice Boxhall

Dave Gash

Meggin Kearney

Rob Dodson

Este conjunto de documentos es una versión basada en texto de parte del contenido que se aborda en el Curso de Udacity sobre Accesibilidad. En lugar de ser una transcripción directa del curso en video, está diseñado para ser y conciso de los principios y las prácticas de accesibilidad, con los recursos del curso contenido original como base.

Resumen

• Descubre qué significa la accesibilidad y cómo se aplica al desarrollo web.
• Aprende a hacer que los sitios web sean accesibles y fáciles de usar para todos.
• Aprende a incluir accesibilidad básica con un impacto mínimo en el desarrollo.
• Descubre qué funciones HTML están disponibles y cómo usarlas para mejorar accesibilidad.
• Aprende técnicas avanzadas de accesibilidad para crear contenido pulido experiencias de accesibilidad.

Comprender la accesibilidad, su alcance y su impacto pueden ayudarte a mejorar la Web desarrollador. Esta guía está pensada para ayudarte a entender cómo puedes hacer que tu sean accesibles y fáciles de usar para todos.

"Accesibilidad" puede ser difícil de deletrear, pero no tiene que ser difícil para lograr. En esta guía, descubrirás cómo obtener beneficios fáciles mejorar la accesibilidad con un esfuerzo mínimo, cómo se pueden usar las funciones integradas para HTML para crear interfaces más accesibles y sólidas, y cómo aprovechar algunas técnicas avanzadas para crear experiencias accesibles pulidas.

También descubrirás que muchas de estas técnicas te ayudarán a crear interfaces que son más agradables y fáciles de usar para todos los usuarios, no solo para aquellos con discapacidades.

Por supuesto, muchos desarrolladores solo tienen una comprensión confusa de lo que ofrece algo que ver con los contratos gubernamentales, las listas de tareas y las lectores, ¿verdad? y hay muchos conceptos erróneos que dan vueltas por ahí. Por ejemplo, muchos desarrolladores creen que abordar la accesibilidad los obligará para elegir entre crear una experiencia encantadora y atractiva, y una que es tosco y feo, pero es accesible.

Ese no es, por supuesto, el caso en absoluto, así que aclaremos eso antes de en otra cosa. ¿Qué entendemos por accesibilidad y qué estamos aquí para aprender?

¿Qué es la accesibilidad?

En términos generales, cuando decimos que un sitio es accesible, nos referimos a que contenido está disponible y se puede operar su funcionalidad, literalmente cualquiera. Como desarrolladores, es fácil suponer que todos los usuarios pueden ver y usar un teclado, mouse o pantalla táctil, además de interactuar con el contenido de la página como lo haces tú. Esto puede dar como resultado una experiencia que funcione bien para algunas personas pero genera problemas que van desde simples molestias hasta impedimentos para otras personas.

La accesibilidad, entonces, se refiere a la experiencia de los usuarios que podrían estar fuera del rango reducido de lo "típico" usuario, que podría acceder a elementos o interactuar con ellos diferente de lo que esperabas. Específicamente, involucra a los usuarios que tener algún tipo de impedimento o discapacidad, y ten en cuenta que esa experiencia podría no ser física ni temporal.

Por ejemplo, aunque tendemos a centrar nuestra discusión sobre la accesibilidad en los usuarios con discapacidades físicas, todos podemos relacionarnos con la experiencia de usar una a la que no podemos acceder por otros motivos. ¿Alguna vez tuviste un problema al utilizar un sitio para computadoras de escritorio en un teléfono celular, o vio el mensaje "Este contenido no está disponible en tu área", o no pudimos encontrar un menú familiar en una tablet? Esos son problemas de accesibilidad.

A medida que aprendas más, descubrirás que abordar problemas de accesibilidad en esta un sentido más amplio y general casi siempre mejora la experiencia del usuario para para todos. Veamos un ejemplo:

Este formulario tiene varios problemas de accesibilidad.

• El texto tiene poco contraste, lo cual dificulta la lectura para los usuarios con visión reducida.
• Tener etiquetas a la izquierda y campos a la derecha dificulta que muchas que las personas las asocien y es casi imposible para alguien que necesita hacer zoom. usar la página; Imagina mirar esto en un teléfono y tener que desplazar lateralmente para descubrir qué funciona con qué.
• La opción "¿Recuerdas los detalles?" la etiqueta no está asociada a la casilla de verificación, por lo que presionar o hacer clic solo en el pequeño cuadrado en lugar de solo hacer clic en la etiqueta; también, alguien que usara un lector de pantalla tendría problemas para averiguar la asociación.

Ahora, usemos nuestra varita de accesibilidad y veamos el formulario con los problemas corregidos. Oscureceremos el texto, modificaremos el diseño para que las etiquetas cerca de los elementos que etiquetan y arreglar la etiqueta para que se asocie la casilla de verificación para que también puedas alternar con un clic en la etiqueta.

¿Cuál preferirías usar? Si dijiste "la versión accesible", estás en tu forma de entender una premisa principal de esta guía. A menudo, algo que es una bloqueador completo para algunos usuarios también es un punto débil para muchos otros, así que y solucionas el problema de accesibilidad, mejoras la experiencia para todo el mundo.

Lineamientos de accesibilidad para el contenido web

En esta guía, consultaremos los Lineamientos de accesibilidad para el contenido web (WCAG) 2.0, un conjunto de lineamientos y las prácticas recomendadas reunidas por expertos en accesibilidad para abordar qué "accesibilidad" de forma metódica.

Las WCAG se organizan en torno a cuatro principios a menudo llamados con el acrónimo POUR:

• Perceptible: ¿Los usuarios perciben el contenido? Esto nos ayuda a tener en cuenta porque algo es perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirla.

• Viable: ¿Pueden los usuarios usar componentes de la IU y navegar por el contenido? Para ejemplo, algo que requiere una interacción al colocar el cursor sobre un elemento alguien que no puede usar un mouse o una pantalla táctil.

• Comprensible: ¿Los usuarios pueden comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es lo suficientemente coherente como para evitar confusiones?

• Robust: ¿Puede una amplia variedad de usuarios-agentes consumir el contenido? (navegadores)? ¿Funciona con tecnología de accesibilidad?

Si bien las WCAG brindan una visión general completa de lo que significa que el contenido sea accesible, también puede ser un poco abrumador. Para ayudar a mitigar esto, WebAIM(Web Accessibility in Mind) cuenta con resumió las pautas de las WCAG en una lista de verificación fácil de seguir, dirigida específicamente para el contenido web.

La lista de tareas de WebAIM puede ofrecerte un resumen breve y de alto nivel de lo que necesitas implementar, mientras que también vincula a la especificación de WCAG subyacente si necesitas una definición.

Con esta herramienta a mano, puedes trazar la dirección de tu trabajo de accesibilidad y tener la confianza de que, siempre que el proyecto cumpla con los criterios descritos, los usuarios deben tener una experiencia positiva al acceder a tu contenido.

Comprender las tendencias de los usuarios diversidad

Al aprender sobre accesibilidad, es útil comprender el la diversa gama de usuarios en el mundo y los tipos de temas de accesibilidad que los afectan. Para explicarlo con más detalle, esta es una sesión informativa de preguntas y respuestas. con Victor Tsaran, un gerente técnico de programas en Google, que es totalmente ciego.

¿En qué trabajas en Google?

Aquí en Google mi trabajo es ayudar a garantizar que nuestros productos funcionen para todos nuestros diversos usuarios, sin importar las discapacidades o capacidades que tengan.

¿Qué tipos de discapacidades tienen los usuarios?

Cuando pensamos en los tipos de discapacidades que dificultarían alguien acceda a nuestro contenido, muchas personas imaginarán inmediatamente a un usuario ciego como yo. Y es cierto, esta discapacidad puede hacerla frustrante o incluso es imposible usar muchos sitios web.

Muchas técnicas web modernas tienen el lamentable efecto secundario de crear que no funcionan bien con las herramientas que utilizan los usuarios ciegos para acceder a la web. Sin embargo, la accesibilidad es mucho más que eso. Lo encontramos piensa en cuatro grupos amplios: visual, motriz, auditiva y cognitiva.

Veamos de a uno. ¿Puedes dar algunos ejemplos de discapacidad visual?

La discapacidad visual se puede dividir en algunas categorías: usuarios sin visión, como yo, podrían usar un lector de pantalla, braille o una combinación de ambos.

Es bastante inusual no tener una visión, pero aun así es muy probable que conozcas o hayas conocido a, al menos, una persona que no pueda ver en todos. Sin embargo, también hay muchos más de lo que llamamos visión reducida usuarios.

Es un rango amplio, desde alguien como mi esposa, que no tiene córneas; por lo tanto, aunque puede ver cosas, le cuesta leer las impresiones impresas. y se considera legalmente ciega. Para alguien que puede ser pobre, y necesita usar anteojos recetados muy fuertes.

La variedad es amplia, y, por supuesto, hay una gran variedad de alojamientos. que usan las personas de esta categoría: algunas usan un lector de pantalla o un braille (incluso escuché a una mujer que lee braille en pantalla porque es más fácil de ver que el texto impreso), o bien pueden usar la función tecnología sin la funcionalidad completa del lector de pantalla, o podrían usar una lupa que acerca la imagen en parte de la pantalla o que podrían usar hacer zoom en su navegador para agrandar todas las fuentes. También podrían usar de alto contraste, como el modo de alto contraste del sistema operativo, extensión de navegador de alto contraste o un tema de alto contraste para un sitio web.

Muchos usuarios incluso usan una combinación de estas opciones, como mi amiga Laura, que usa un combinación de modo de alto contraste, zoom del navegador y texto a voz.

La visión reducida es algo con lo que muchas personas se pueden identificar. Para empezar, todos experimentan un deterioro de la visión a medida que envejecemos, así que, incluso si no lo has experimentado es probable que hayas escuchado a tus padres quejarse de eso. Sin embargo, muchos las personas experimentan la frustración de sacar su laptop junto a una ventana soleada y descubre que, de repente, no puede leer nada. O cualquiera que haya tenido un láser una cirugía o simplemente tiene que leer algo desde el otro lado de la habitación podría haber utilizado uno de los alojamientos que mencioné. Así que creo que es bastante fácil que los desarrolladores tengan empatía por los usuarios de baja visión.

Ah, y no debo olvidar mencionar a las personas con baja visión de los colores, ¡alrededor del 9% de los hombres tiene alguna forma de deficiencia de la visión de los colores! Además de aproximadamente el 1% de las mujeres. Es posible que tengan problemas para distinguir el rojo del verde o el amarillo del azul. Piensa en eso la próxima vez que diseñes una validación de formulario.

¿Qué hay de las discapacidades motrices?

Sí, discapacidades motrices o motrices. Este grupo abarca al máximo de aquellos que preferirían no usar mouse, porque quizás han tenido RSI o algo así y que lo sienta doloroso para una persona con parálisis física y tienen un rango de movimiento limitado en ciertas partes del cuerpo.

Los usuarios con discapacidad motriz pueden utilizar un teclado, un dispositivo interruptor, un control por voz o incluso un dispositivo de seguimiento ocular para interactuar con su computadora.

Al igual que los problemas de la visión, la movilidad también puede ser una discapacidad temporal o situacional Problema: Tal vez se te rompió la muñeca en la mano del mouse. Tal vez el panel táctil en tu laptop o en un tren inestable. Puede haber un muchas situaciones en las que la movilidad de un usuario se ve impedida, y al asegurarnos de que para satisfacerlas, mejoramos la experiencia en general, tanto para cualquier persona con discapacidad permanente, pero también para cualquier persona que temporalmente descubre que no puede usan una IU basada en punteros.

Excelente, hablemos sobre discapacidades auditivas.

Este grupo puede incluir desde personas totalmente sordas hasta personas con hipoacusia. Y al igual que la vista, la audición tiende a degradarse con la edad. Muchos de nosotros usamos con dispositivos auditivos que nos ayuden.

En el caso de los usuarios con discapacidad auditiva, debemos asegurarnos de no depender de el sonido, así que asegúrate de usar los subtítulos y las transcripciones de los videos, y si el sonido forma parte de la interfaz.

Y como vimos con las discapacidades visuales y motrices, es muy fácil imaginar una situación en la que alguien cuyos oídos funcionan bien se beneficiaría de estos alojamiento. Muchos de mis amigos dicen que les encanta que los videos tengan subtítulos y transcripciones porque significa que, si están en una oficina de planta abierta, y no llevaron los auriculares, aún pueden ver el video.

Muy bien, ¿podrías contarnos un poco sobre las discapacidades cognitivas?

Existe una variedad de afecciones cognitivas, como trastorno de déficit de atención y autismo, lo que puede significar que las personas quieren o necesitan acceder a las cosas de otra forma. El Los alojamientos para estos grupos son por naturaleza extremadamente diversos, pero encontrarás cierta superposición con otras áreas, como el uso de la funcionalidad de zoom para facilitan la lectura o la concentración. Además, estos usuarios pueden notar que el diseño mínimo funciona mejor porque minimiza la distracción y la carga cognitiva.

Creo que todo el mundo puede identificarse con el estrés de la sobrecarga cognitiva, por lo que que si creamos algo que funciona bien para alguien con conocimientos cognitivos un impedimento, vamos a crear algo que será experiencia para todos.

Entonces, ¿cómo resumirías lo que piensas sobre la accesibilidad?

Cuando se analiza la amplia gama de capacidades y discapacidades que tienen las personas puedes ver que diseñar y crear productos solo para personas que tienen una visión, audición, destreza y cognición perfectas parecen increíblemente acotadas. Es casi contraproducente, porque estamos creando un clima más estresante utilizable para todos y, para algunos usuarios, crear una experiencia que los excluye por completo.

En esta entrevista, Victor identificó una variedad de discapacidades y las colocó en cuatro categorías amplias: visual, motriz, auditiva y cognitiva. Él también señaló que cada tipo de discapacidad puede ser situacional, temporal o permanente.

Veamos algunos ejemplos reales sobre discapacidades de acceso dónde se encuentran dentro de esas categorías y tipos. Ten en cuenta que algunas discapacidades pueden pertenecer a más de una categoría o tipo.

Lesión por esfuerzo repetitivo: p.ej., síndrome del túnel carpiano, codo de tenista, gatillo dedo

Próximos pasos

Ya abarcamos bastante terreno. Has leído

• qué es la accesibilidad y por qué es importante para todos
• las WCAG y la lista de verificación de accesibilidad de la WebAIM,
• diferentes tipos de discapacidades que debes tener en cuenta

En el resto de la guía, nos sumergiremos en los aspectos prácticos de la creación de sitios web accesibles. Organizaremos este esfuerzo en torno a tres temas principales áreas:

• Enfoque: veremos cómo crear cosas que se puedan operar con un teclado en lugar de un mouse. Este es importante para los usuarios con discapacidades motrices, por supuesto, pero también garantiza que tu IU esté en buenas condiciones para todos los usuarios.

• Semántica: Veremos nos aseguramos de expresar nuestra interfaz de usuario de forma sólida, una variedad de tecnologías de asistencia.

• Estilos: Consideraremos elementos visuales diseñarás y veremos algunas técnicas para hacer que los elementos visuales del sea lo más flexible y fácil de usar posible.

Cada una de esas asignaturas podría ocupar un curso entero, así que no cubriremos todos los aspectos de crear sitios web accesibles. Sin embargo, te brindaremos suficiente información para comenzar y te mostraré algunos buenos lugares donde puedes aprender más sobre para cada tema.