¿Cuáles son los pasos mínimos que debo seguir para garantizar que mi sitio web sea accesible?


35

Estoy tratando de seguir un estándar muy importante que debo admitir que he ignorado hasta hace poco. Quiero asegurarme de que mis páginas sean accesibles para una gran parte de las personas que tienen discapacidades. Me concentro principalmente en tutoriales que son intensivos en texto e imagen, pero no en video / flash ni ningún tipo de animaciones.

¿Qué es una lista de verificación que puedo seguir para asegurarme de que muchas personas con discapacidades puedan tener una buena experiencia al usar mi sitio web, y de qué discapacidades debería ser más consciente?

Sé que no puedo complacer a todos. He seguido las pautas del W3C , sin embargo, no estoy completamente seguro de qué normas se aplican a mí. No estoy creando aplicaciones web, estoy construyendo principalmente wiki como intercambios de información, blogs y foros ocasionales.


uxexchange.com?
Bobby Jack el

Respuestas:


18
  • Asegúrese de que cada imagen tenga texto alternativo.
  • Asegúrese de que su combinación de colores sea adecuada para las personas con daltonismo.
  • Ofrezca un diseño de alto contraste o texto grande para personas con discapacidad visual.
  • Asegúrese de que sus enlaces tengan sentido cuando se leen fuera de contexto (es decir, no solo escriba "haga clic aquí").
  • Asegúrese de que su sitio todavía ofrezca una funcionalidad básica completa si el usuario no tiene soporte para JavaScript.

El W3 ofrece algunos consejos básicos sobre accesibilidad a través de su sitio web . Joe Clark tiene una versión en línea de su libro "Creación de sitios web accesibles" disponible para ver de forma gratuita que contiene mucha información útil.


1
Hay varias advertencias para la regla de 'texto alternativo'. Desafortunadamente, he trabajado con personas que lo tratan como una regla estricta y rápida, es decir, CADA imagen DEBE tener un atributo alt. Luego agregan cosas como "el logotipo de nuestra empresa" a una imagen de logotipo y "una gran 't' azul" a una imagen vinculada a una cuenta de Twitter.
Bobby Jack el

Con la etiqueta alt, creo que CADA imagen debería tener una. Cuando trabaje con un lector de pantalla, debe decirle qué hacer. Si su imagen simplemente está ahí para el atractivo visual, y no tiene otro valor, use alt = "" para que el lector de pantalla sepa ignorarla. Si su imagen es un gráfico, o quizás un encabezado, asegúrese de incluir la información en la etiqueta alt para que el lector de pantalla, así como las personas que deshabilitan las imágenes, no se pierdan.
ph33nyx

8

Hacer que su marcado sea semántico es un paso masivo hacia la accesibilidad, si su sitio se puede navegar sin aplicar ningún CSS y el contenido tiene sentido, ¡todo lo demás es solo salsa visual!


1
Y mucho más divertido en un día CSS desnudo :)
Tim Post

2
Jaja, naturalmente! Sin embargo, en serio, muchas personas suponen que la accesibilidad tiene que ver con el diseño, es todo lo contrario, si puede hacer que su contenido funcione sin ningún diseño, una máquina (y, por lo tanto, un ser humano) siempre podrá acceder eso.
Toby

7

En primer lugar, "los discapacitados" no significa nada!

Así que eche un vistazo a algunos grupos de personas que necesita verificar si es su sitio web.

Una persona pobre que solo tiene un cuaderno con una pantalla pequeña

Solo necesita verificar que su sitio web se puede usar cuando la ventana del navegador es pequeña sin demasiado dolor.

Una persona daltónica

¿Alguien puede usar su sitio web sin ver el color de los íconos, etc.?

Una persona con sitio pobre.

Cuando cambia el tamaño de letra en el navegador, todo el texto se hace más grande en su sitio y el diseño sigue siendo correcto. ¿También se puede usar el sitio en un monitor pequeño?

¿Su sitio utiliza un diseño de alto contraste, si no es fácil para el usuario cambiar a un diseño de alto contraste?

Una persona que no puede usar el mouse

¿Puede una persona que nunca ha usado su sitio web acceder a todas las funciones / información simplemente usando el teclado? (¿La tecla de tabulación funciona de manera útil?)

Alguien con pocas habilidades de lectura.

¿Estás usando inglés simple tanto como sea posible?

Alguien que no es bueno para aprender cosas nuevas.

¿El diseño de su sitio se basa en otro sitio que sus usuarios ya saben cómo usar?

Una persona ciega

¡Este es el difícil y la mayor parte de lo que lees no es para el partido!
Corta todos nuestros otros problemas de acceso primero, ya que hay muchas más personas con poca visión o que no pueden usar el mouse que las personas vinculadas.

A continuación, comprenda sus objetivos , por ejemplo, si su sitio es un sitio de reserva de hotel, puede ser mejor proporcionar un número de teléfono de pago para hacer reservas y luego simplemente hacer que la información del hotel sea accesible.

A la mayoría de las personas ciegas les resulta muy difícil usar cualquier sitio web interactivo que no hayan usado antes, por muy bien que esté diseñado el sitio web.

Entonces, ¿debería proporcionar una opción de ninguna web? (¿Teléfono? ¿Una persona que los visita para ayudar a completar el formulario, etc.?)

En primer lugar, ¿se puede usar su sitio sin imágenes? (El texto alternativo es una forma de hacerlo)

Dado que el software de voz lee el sitio de arriba a abajo, ¿se puede entender su sitio de esa manera?

Es muy difícil hacer que un sitio con navegación compleja sea fácil de usar para una persona vinculada, también una persona vinculada no tiene forma de saber que parte de la página ha sido actualizada por JavaScript y necesita ser leída nuevamente.

Cambiar el color de los artículos para cambios de estado tampoco es una buena opción.

La única forma de aprender cómo hacer que un sitio web funcione bien para las personas vinculadas es ver cómo una persona vinculada utiliza un lector de pantalla en algunos sitios web. Ninguno de los estándares es lo suficientemente bueno, solo le dicen lo que no debe hacer, pero cumplirlos no es suficiente (a menos que solo se le proporcione texto estático como un sitio de noticias).


1
¡Me encanta la primera oración de esta respuesta! (y, por supuesto, las otras oraciones también)
Tim Post

5

Puede usar este sitio para obtener una descripción general rápida del cumplimiento: http://wave.webaim.org/

Realiza un trabajo similar al antiguo sistema "Bobby" que se cerró hace un par de años.



2

Encontré que el libro de Mark Pilgrim, de descarga gratuita, Dive into Accesibility, es un punto de referencia útil sobre este tema. Es de 2002 pero sigue siendo muy pertinente. Consejos como "usar degradación elegante" no envejecen.




1

La respuesta # 1 es simple: ¡escriba HTML / CSS válido, semánticamente correcto! Todas las sugerencias anteriores son buenas. Aquí hay una lista de verificación que escribí hace un par de años que muestra algunas cosas que debe verificar en todos los sitios: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Se supone que tiene la barra de herramientas de Web Developer en FF, pero eso es gratis y fácil de obtener.

Un par de cosas simples que creo que pueden marcar una verdadera diferencia:

Para los formularios, asegúrese de usar la etiqueta LABEL. Crea un área más grande en la que se puede hacer clic para elementos como botones de radio y también une elementos para lectores de pantalla.

Otra cosa que creo que se usa mal es las etiquetas h1, h2, h3 ... Si se usa correctamente, puede ayudar a alguien a navegar fácilmente por su página. Si simplemente los diseñamos y los usamos de todas formas, es muy engañoso para los lectores de pantalla y otros dispositivos de E / S sin mouse.

También es bueno permitir que alguien que navega por su página sin todas sus hermosas CSS e imágenes salte el código repetitivo al contenido. Esto se logra comúnmente usando un enlace SKIP que está oculto en el CSS. Por ejemplo, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>para permitir pasar más allá de una navegación larga.

Como dijo Tony, una de las mejores pruebas es quitar todas las campanas y silbatos de su página y ver si todavía tiene sentido.


Sobre el tema de las etiquetas ALT ... cada imagen debe tener una etiqueta ALT. Si la imagen tiene contenido, debe tener algo descriptivo en la etiqueta ALT, si es solo decoración, use comillas vacías alt=""para indicar que los lectores de pantalla como JAWS pueden pasarlas por alto.
ph33nyx
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.