Diez directrices para mejorar la usabilidad y la accesibilidad de tu sitio

por Trip Rems traducido por David Ormeño

A pesar de sus diferencias, la usabilidad y la accesibilidad a veces van de la mano. El World Wide Web Consortium define la accesibilidad como una "experiencia de usuario equivalente para las personas con discapacidad, incluidas las personas con deficiencias relacionadas con la edad", mientras que la usabilidad se define como el "diseño de productos para ser eficaces, eficientes y satisfactorios" para los usuarios finales.

Mejoras de accesibilidad comunes tales como proporcionar un mapa del sitio o el uso de mecanismos claros y consistentes de navegación puede mejorar la experiencia de navegación de los usuarios (incluidos los que hacen uso de la tecnología de asistencia). Para asegurarse de que tu sitio es accesible para la mayoría de los usuarios, hemos compilado una lista de mejoras de accesibilidad comunes que también mejorarán dramáticamente la usabilidad.

1. Incluye un mapa del sitio

Un mapa del sitio es una gran manera de aumentar la usabilidad y la accesibilidad de tu sitio web. Esto se debe a que un mapa del sitio ofrece una visión completa de la estructura lógica del sitio e incluye todas las secciones principales y enlaces en formato serializado.

Un mapa del sitio es también una gran manera para hacer frente a los requisitos de accesibilidad sugeridos por el World Wide Web Consortium (Pautas de Accesibilidad WCAG 2.0, criterios de éxito 2.4.5).

En WordPress, hay numerosos plugins para generar una página de mapa del sitio incluyendo entradas y páginas como Simple Sitemap y WP WordPress Sitemap.

Los usuarios de Drupal pueden generar automáticamente un mapa del sitio de los elementos de menú o categorías utilizando el Site Map module.

2. Utilice Sistemas de Navegación consistentes y claros

El uso de sistemas de navegación consistentes es un de las principales Directrices de Accesibilidad al Contenido de la W3C. Es también una gran manera de mejorar la usabilidad de tu sitio web, ya que permite a sus usuarios entender rápidamente la estructura de menús de tu web. Usar una navegación consistente significa colocar los menús y submenús en los lugares donde los usuarios esperan encontrarlos en tu sitio web, y permite a los usuarios de tecnología de asistencia navegar rápidamente por la web. Menús de navegación coherentes también deben incluir un mecanismo para saltar grandes bloques de enlaces.

3. Valida tus páginas y hojas de estilo

Usar marcado válido es esencial para la creación de páginas que se puedan interpretar y transmitir a los navegadores fácilmente. El markup adecuado también garantiza que las páginas y hojas de estilo puedan ser usados por los dispositivos de tecnología de asistencia, tales como lectores de pantalla y pantallas Braille. Para asegurarse de que sus páginas y hojas de estilo usen HTML y CSS válido, puede validarlos mediante los validadores HTML y CSS de la W3Cs.

4. Revisa tu página web mediante herramientas de evaluación de accesibilidad automatizada

Las herramientas de evaluación de accesibilidad automatizada son una gran manera de comenzar una revisión exhaustiva de la accesibilidad y pueden ayudarle a identificar problemas críticos de accesibilidad con tu sitio web. Estas herramientas pueden ayudar a identificar problemas de accesibilidad comunes como atributos alt desaparecidos, elementos de bajo contraste, HTML / CSS, markup no válido y más. Varias de estas herramientas automatizadas incluyen también advertencias de markup y controles manuales para realizar más pruebas. Echa un vistazo a otra lista de herramientas de evaluación de accesibilidad aquí.

5. Usa markup HTML para proporcionar información semántica

Una de las características más potentes de HTML es la capacidad de estructurar el contenido. El contenido estructurado permite a los navegadores (y usuarios) entender el contexto de la información en un documento HTML. Debidamente estructurado, las páginas hacen uso de listas ordenadas y desordenadas, encabezados (h1, h2 ... h6), párrafos, secciones, artículos y más. La inclusión de información semántica y estructura en tus páginas es esencial para garantizar que los navegadores y dispositivos de tecnología de asistencia pueden analizar e interpretar el contenido de tu web. Echa un vistazo a algunos artículos sobre el markup semántico y HTML.

6. Incluir texto alternativo para todas las imágenes y gráficos que transmiten información.

Incluir texto alternativo (Alt), es una de las técnicas recomendadas para la mejora del uso de imágenes en una página web. También permite a los lectores de pantalla y otras tecnologías de asistencia proporcionar información sobre las imágenes incrustadas en páginas HTML. El texto alternativo debe ser suficientemente descriptivo y conciso para dar a los usuarios una impresión exacta del significado contextual de una imagen. Las descripciones alternativos son de no más de 5-7 palabras, pueden proporcionarse como descripciones extensa, ya sea mediante el atributo "longdesc", o un link a una nueva página con una descripción completa. Para las imágenes que son puramente decorativas (como los limites, separadores, etc.) puede indicar a los dispositivos de tecnología auxiliar a ignorar la imagen estableciendo el atributo alt a NULL.

7. Pruebe tus páginas con un teclado

Los usuarios de tecnología de asistencia utilizan típicamente un teclado para navegar por las páginas. Puede probar la accesibilidad del teclado utilizando el teclado y las teclas "tab" y "shift + tab" para navegar a través de todos los enlaces en tu sitio. Use la tecla "enter" para activar los controles y enlaces garantizando al mismo tiempo que todas las funciones de página son accesibles utilizando sólo un teclado.
Estos son algunos consejos para el diseño de páginas para la accesibilidad del teclado:

• Evite el uso de "display: none" o "display: 0″ en sus hojas de estilo. Para las hojas de estilo que utilicen estas propiedades, asegúrese de incluir otro indicador del foco del teclado
• Compruebe que el orden de tabulación de los controles de página y enlaces sigue el orden de lectura natural del documento.
• Incluya enlaces o botones para implementar la accesibilidad de los elementos interactivos
• Proporcione un medio para que los usuarios puedan saltar sobre grandes bloques de enlaces.

Para obtener más información, consulte el artículo WebAim de accesibilidad del teclado.

8. Proporcione subtítulos para vídeos incorporados

Los subtítulos son una herramienta esencial para la accesibilidad. Proporcionan contenido equivalente en tiempo real para los usuarios que no tengan acceso a audio. Para cumplir con las normas básicas de accesibilidad, los subtítulos se sincronizan correctamente con los contenido del vídeo, proporcionan información equivalente a la pista de audio, y puedan acceder a todos los dispositivos.

Los subtítulos vienen en dos variedades: los subtítulos abiertos y cerrados. Los subtítulos cerrados se pueden activar y desactivar y se incluyen como una pista separada en un archivo de vídeo. Los subtítulos abiertos se incrustan directamente en los archivos de vídeo y no se pueden desactivar por el usuario. Ambos formatos son igualmente accesibles, pero puede haber algunos casos donde se prefieren los subtítulos abiertos, ya que proporcionan una mayor flexibilidad para el formato de subtítulos.

Herramientas populares de subtítulos incluyen: MAGpie, Subtitle Workshop, y ccPlayer. Tenga en cuenta que las herramientas de transcripción no son 100% precisas y los subtítulos creados con estos programas se deben comprobar para asegurar su exactitud.

Para obtener más información sobre los formatos de subtítulos, echa un vistazo al artículo de WebAim sobre subtítulos, transcripciones y descripciones de audio.

9. Proporcione transcripciones para Time-Based Media

Las transcripciones de texto ofrecen una alternativa accesible a los medios de comunicación basados en tiempo. Para garantizar la accesibilidad del audio embebido y video en tu sitio, es una buena práctica para incluir subtítulos sincronizados y una transcripción del texto completo.

Para el contenido de vídeo, las transcripciones de texto deben incluir información contextual adicional en cada caso. Esto puede incluir una descripción de las actividades que se presentan, así como información acerca de los oradores o presentadores.

10. Pon a prueba tus páginas en un dispositivo móvil

Un número creciente de usuarios están accediendo a la web a través de dispositivos móviles. Para garantizar la mejor experiencia para sus visitantes, es una buena idea poner a prueba tus páginas con uno o más dispositivos móviles (incluidos los teléfonos y tablets). Además de las pruebas manuales, hay varias herramientas automatizadas para evaluar la usabilidad de tu sitio en dispositivos móviles. Google Analytics incluye la velocidad de la página y el análisis de la experiencia del usuario para dispositivos móviles (en Comportamiento\Behavior). También puede utilizar el W3Cs MobileOK Checker para identificar errores de sintaxis y otros errores que podrían afectar el rendimiento del sitio en dispositivos móviles.

Conclusión

La accesibilidad y la usabilidad son las bases para la creación de una gran experiencia de usuario. Al hacer un sitio web que sea accesible y utilizable, tu tienes una mejor oportunidad para mejorar otras facetas para una presencia web exitosa - incluyendo pero no limitando la participación del usuario, la optimización de conversiones y un aumento de visitantes a repetición.

La inspiración para este artículo: World Wide Web Consortium's Web Accessibility and Usability Working Together.