Compartir a través de

Recursos sobre la creación de sitios web accesibles

  • Artículo

La web está llena de sitios web, aplicaciones e interfaces de usuario dinámicos y complejos creados mediante una combinación de HTML, CSS y JavaScript. Sin embargo, cuando se diseñan y construyen sin tener en cuenta la accesibilidad, estos sitios web complejos son difíciles de usar por parte de personas que dependen de tecnologías de asistencia para navegar por la web.

La creación de sitios web accesibles para personas con discapacidades requiere información semántica sobre la interfaz de usuario. Los sitios web accesibles permiten que las tecnologías de asistencia, como los lectores de pantalla, transmitan la información necesaria para ayudar a las personas con una variedad de capacidades a usar el sitio web.

Visite HTML5Accesibilidad para obtener información sobre qué nuevas características HTML5 son compatibles con Microsoft Edge.

Funcionamiento de la accesibilidad

Las tecnologías de asistencia agregan funcionalidades que los equipos no suelen tener. Por ejemplo, un usuario con visión baja podría usar su teclado en combinación con tecnología de asistencia, como un lector de pantalla, en lugar de usar directamente el explorador con el mouse y la pantalla.

Para aplicaciones en plataformas de Microsoft y en la web, la tecnología de asistencia interactúa con cualquier combinación de:

Para los desarrolladores web, determinados elementos HTML se asignan a objetos Automatización de la interfaz de usuario, por lo que al seleccionar esos elementos HTML, el desarrollador puede usar las propiedades de accesibilidad y los eventos integrados en esos elementos. Al desarrollar el sitio web, normalmente solo necesita asegurarse de que la API está escrita correctamente en o que se especifica el elemento adecuado para que la aplicación sea accesible.

Consulte Automatización de interfaz de usuario y ARIA en Microsoft Edge para obtener más información. Las aplicaciones de Plataforma universal de Windows accesibles (UWP) se explican en Accesibilidad en el Centro de desarrollo de Windows.

Muchos problemas comunes de accesibilidad con contenido dinámico se pueden solucionar mediante una buena práctica de codificación. La documentación de WCAG 2.0 incluye muchas técnicas y procedimientos recomendados para ayudarle a crear aplicaciones web dinámicas más accesibles. Sin embargo, incluso cuando se codifica correctamente, el contenido dinámico no es necesariamente accesible. Las aplicaciones de Internet enriquecidas accesibles (ARIA) ayudan a solucionar este problema.

Para obtener más información sobre la accesibilidad web, consulte la Introducción a la accesibilidad web por la Iniciativa de accesibilidad web (WAI).

ARIA

La especificación aplicaciones de Internet enriquecidas accesibles (ARIA) de la iniciativa de accesibilidad web de W3C define como una sintaxis para hacer que el contenido web dinámico y las interfaces de usuario personalizadas sean accesibles para todos los usuarios. ARIA amplía HTML mediante atributos adicionales (roles, propiedades y estados) diseñados para transmitir semántica personalizada. Estos atributos los usan los exploradores para pasar el estado y el rol de los controles a la API de accesibilidad.

Roles, propiedades y estados

Los roles de ARIA se establecen en elementos que usan el atributo role para proporcionar a las tecnologías de asistencia y a las API de accesibilidad información sobre el elemento. Por ejemplo, el elemento siguiente <li> se asigna role="menuitem" para indicar que es un elemento de un menú.

<li role="menuitem">Home</li>

Los estados y las propiedades de ARIA son atributos con prefijo aria que proporcionan información específica sobre un objeto para ayudar a formar la definición de la naturaleza de los roles. Las propiedades son atributos esenciales para la naturaleza de un objeto, como aria-readonly y aria-haspopup. El cambio de una propiedad afecta al significado del objeto .

En el ejemplo siguiente, la propiedad aria-haspopup="true" se establece en un <li> elemento de menú para indicar que tiene un elemento emergente:

<li role="menuitem" aria-haspopup="true">Open</li>

Los estados no cambian la naturaleza del objeto, sino que representan la información asociada al objeto o la interacción del usuario con el objeto, como aria oculta o aria comprobada. Por ejemplo, el estado aria-checked="false" del ejemplo siguiente representa que la casilla está desactivada, en lugar de estar seleccionada:

<div role="checkbox" aria-checked="false">Accept</div>

Para ver una lista completa de roles, propiedades y estados, vaya a El modelo de roles en W3C.

Pruebas de compatibilidad de tecnología de asistencia

Comprobar que el sitio web que está creando funciona con tecnologías de asistencia reales es la mejor manera de garantizar que proporciona una buena experiencia a los usuarios con discapacidades. Dado que muchas tecnologías de asistencia hacen uso del teclado, probar la accesibilidad del teclado de su sitio web es un buen lugar para empezar.

Las pruebas de compatibilidad con teclado validan que los usuarios tengan acceso a todos los controles interactivos sin necesidad de usar un mouse. Microsoft Accessibility Insights for Web es una extensión de explorador para Microsoft Edge y Chrome que le guía y revela varios problemas comunes.

Una vez que esté seguro de que su sitio web funciona bien con un teclado, pruébelo con otras tecnologías de asistencia, como los lectores de pantalla. Esta prueba puede detectar problemas en lo siguiente:

  • Html, ARIA y CSS.
  • El nivel de soporte de una tecnología de asistencia para una característica o técnica.

Es posible que distintos exploradores asignen elementos a las API de accesibilidad de la plataforma de forma diferente a las que asigna Microsoft Edge. Al compilar la interfaz, es importante tener en cuenta cada diferencia.

WebAIM realiza encuestas con lectores de pantalla y usuarios de baja visión que le ayudan a decidir qué tecnologías y exploradores de asistencia probar.

Aprender a probar

Las tecnologías de asistencia son herramientas sofisticadas. No suponga que puede empezar a realizar pruebas inmediatamente con una tecnología de asistencia sin aprender primero cómo funciona. Aprender a probar con un lector de pantalla tiene una curva de aprendizaje especialmente empinada. Un usuario principiante de lectores de pantalla podría pensar que un lector de pantalla tiene un error, mientras que el problema podría ser realmente un error al usar el lector de pantalla.

Las pruebas con lectores de pantalla en WebAIM proporcionan más información sobre cómo aprender a probar con tecnologías de asistencia.

Prueba local

La mayoría de los dispositivos incluyen tecnología de asistencia integrada en el sistema operativo. Microsoft Windows incluye el lector de pantalla del Narrador de Windows y la Lupa de Windows. Las tecnologías de asistencia de terceros como NVDA, FreedomscientificSoftwareJaws y ZoomText están disponibles para descargar. Apple macOS incluye el lector de pantalla VoiceOver . Además, iOS, Android y Linux admiten una variedad de tecnologías de asistencia.

Pruebas en máquinas virtuales y emuladores

En macOS, si quiere probar con una tecnología de asistencia solo disponible para Windows, como Narrador de Windows o NVDA, cree una máquina virtual Windows.

Android Studio incluye un emulador que le permite probar las tecnologías de asistencia en Android Accessibility Suite. Siga las instrucciones para configurar un dispositivo virtual e iniciar el emulador y, a continuación, instale Android Accessibility Suite desde googleplay store.

Nota

El simulador de iOS no incluye actualmente VoiceOver.

Herramientas de pruebas basadas en la nube

Si una tecnología de asistencia no está disponible en el sistema operativo o no es posible instalar una en una máquina virtual o emulador, las herramientas de pruebas de tecnología de asistencia basadas en la nube son lo mejor siguiente.

  • Assistiv Labs (un producto comercial) le permite probar manualmente con tecnologías de asistencia a través de cualquier navegador web moderno. Seleccione una tecnología de asistencia y un explorador y le conecta con una máquina virtual, emulador o dispositivo real con el que pueda interactuar.

Consulte también Emuladores y simuladores basados en la nube.

Recursos para los conceptos básicos de accesibilidad

Se trata de proyectos e iniciativas para la accesibilidad.

El proyecto A11Y

El proyecto A11Y es un esfuerzo impulsado por la comunidad para facilitar la accesibilidad web. Consulte el sitio del proyecto A11Y para obtener información sobre los principios básicos de accesibilidad, su patrón accesible y la biblioteca de widgets, y sus recursos en software de accesibilidad, blogs, libros y herramientas.

Iniciativa de accesibilidad web (WAI)

La Iniciativa de accesibilidad web (WAI) de W3C es un esfuerzo para ayudar a mejorar la accesibilidad de la web. Su sitio proporciona una variedad de recursos para Introducción con accesibilidad web, diseño para la inclusión, tutoriales y presentaciones, etc.

Blogs de accesibilidad

Estos son blogs sobre accesibilidad.

TPGi, LLC

TPGi, LLC proporciona soluciones de consultoría y tecnología a organizaciones de todo el mundo para garantizar que sus clientes lleguen a todos los públicos de forma eficaz y eficiente, a la vez que cumplen los estándares gubernamentales e internacionales. En su blog se tratan temas como procedimientos recomendados de accesibilidad web, herramientas de accesibilidad y tendencias de accesibilidad.

Acceso de nivel

Level Access es una empresa de accesibilidad digital que apoya a sus clientes en el desarrollo e implementación de productos y servicios accesibles. Su blog aborda temas como procedimientos recomendados de ARIA, tendencias de accesibilidad, seminarios web y mucho más.

Ejemplos accesibles

Se trata de bibliotecas y ejemplos de accesibilidad.

ally.js: tutoriales

Biblioteca de JavaScript para ayudar a las aplicaciones web modernas con problemas de accesibilidad haciendo que la accesibilidad sea más sencilla. Para obtener más información, vaya a ally.js- Tutoriales.

Ejemplos de OpenAjax

El sitio web de OpenAjax Alliance es un excelente recurso para comprobar las reglas de WAI-ARIA y proporciona una serie de ejemplos de implementaciones de WAI-ARIA.

Patrones

El proyecto A11Y ofrece una biblioteca de widgets y patrones accesibles, como menús, botones, información sobre herramientas, etc. Para obtener más información, vaya a Patrones.

Técnicas y herramientas de accesibilidad

Se trata de técnicas y herramientas para mejorar la accesibilidad.

Accesibilidad: Creación de iconos de extensión accesibles para Microsoft Edge

Obtenga instrucciones sobre cómo crear iconos de extensiones accesibles para Microsoft Edge. Para obtener más información, vaya a Accesibilidad: Crear iconos de extensión accesibles para Microsoft Edge.

Nombre y descripción accesibles: Cálculo y asignaciones 1.1

En este documento de asignación de W3C se explica cómo los exploradores determinan el nombre y las descripciones de los objetos accesibles de los lenguajes de contenido web y los exponen en las API de accesibilidad. Para obtener más información, vaya a Nombre accesible y Descripción: Cálculo y asignaciones 1.1.

Recursos de evaluación de accesibilidad

Recursos de evaluación de accesibilidad es un recurso de varias páginas de W3C que describe diferentes enfoques para evaluar los sitios web para la accesibilidad. Para obtener más información, vaya a Recursos de evaluación de accesibilidad.

Pruebas de compatibilidad de tecnología de asistencia

Resultados de pruebas que muestran cómo se comportan los distintos tipos de contenido y estándares en tecnologías de asistencia (AT), como los lectores de pantalla. Para obtener más información, vaya a Pruebas de compatibilidad de tecnología de asistencia.

Crear sitios web accesibles acaba de ser mucho más fácil

En esta entrada de blog de herramientas y desarrollo web de .NET se describe el comprobador de accesibilidad web de extensión de Visual Studio. Para obtener más información, vaya a Creación de sitios web accesibles.

Asignaciones de API de accesibilidad básicas 1.1

En este documento de asignación de W3C se explica cómo se expone la semántica de los lenguajes de contenido web a las API de accesibilidad. Para obtener más información, vaya a Core Accessibility API Mappings 1.1( Asignaciones de Core Accessibility API 1.1).

Comprobaciones sencillas: una primera revisión de la accesibilidad web

Una serie de comprobaciones rápidas de la WAI que le ayudan a evaluar la accesibilidad de una página web. Para obtener más información, vaya a Comprobaciones fáciles: una primera revisión de la accesibilidad web.

Cómo cumplir wcag 2.0

Una referencia rápida a las directrices de accesibilidad de contenido web (WCAG) 2.0 (criterios de éxito) y técnicas. Para obtener más información, vaya a Cómo cumplir WCAG 2.0.

Asignaciones de la API de accesibilidad HTML 1.0

En este documento de asignaciones de W3C se explica cómo los atributos y elementos HTML5.1 se asignan a las API de accesibilidad de la plataforma. Para obtener más información, vaya a Asignaciones de la API de accesibilidad HTML 1.0.

Sugerencias rápidas

Una lista de sugerencias de desarrollo web rápidas para la accesibilidad de The A11Y Project. Para obtener más información, vaya a Sugerencias rápidas.

Examen del sitio

La herramienta Detección de sitios de Microsoft Edge Dev Center comprueba si hay bibliotecas obsoletas, problemas de diseño y problemas de accesibilidad. Para obtener más información, vaya a Examen del sitio.

Técnicas para WCAG 2.0

Técnicas de W3C que proporcionan orientación a los desarrolladores web sobre cómo cumplir los criterios de éxito de las Directrices de accesibilidad de contenido web (WCAG) 2.0 . Para obtener más información, vaya a Técnicas para WCAG 2.0.

Sugerencias sobre el desarrollo de accesibilidad web

Sugerencias de W3C sobre el desarrollo de contenido web más accesible para las personas con discapacidades. Para obtener más información, vaya a Sugerencias para desarrollar la accesibilidad web.

Prácticas de creación de WAI-ARIA 1.1

Un documento de W3C que proporciona a los lectores conocimientos sobre cómo usar WAI-ARIA 1.1 y recomienda enfoques para que los widgets, la navegación y los comportamientos sean accesibles mediante roles, estados y propiedades wai-aRIA. Para obtener más información, vaya a WAI-ARIA Authoring Practices 1.1( Prácticas de creación de WAI-ARIA 1.1).

Directrices y técnicas de WAI

Una serie de directrices y estándares de accesibilidad web desarrollados por la WAI. Para obtener más información, vaya a Directrices y técnicas de WAI.

Lista de herramientas de evaluación de accesibilidad web

Una lista de herramientas de evaluación de accesibilidad web para ayudar a determinar si los sitios web cumplen las directrices de accesibilidad. Para obtener más información, vaya a Web Accessibility Evaluation Tools List (Lista de herramientas de evaluación de accesibilidad web).

Perspectivas de accesibilidad web: Explore el impacto y las ventajas para todos

Una serie de breves vídeos situacionales del W3C sobre el impacto de la accesibilidad y las ventajas para todos. Para obtener más información, vaya a Perspectivas de accesibilidad web: Explorar el impacto y las ventajas para todos.