Creación de sitios web accesibles

La web está llena de sitios web dinámicos y complejos, aplicaciones e interfaces de usuario creadas con una combinación de HTML, CSS y JavaScript. Sin embargo, cuando se diseñan y se construyen sin accesibilidad en mente, estos sitios web complejos son difíciles de usar por las 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. Esto permite 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 HTML5Accessibility para obtener información sobre las nuevas características html5 que microsoft Edge admite de forma compatible.

Cómo funciona la accesibilidad

Las tecnologías de asistencia agregan funcionalidades que los equipos no suelen tener. Por ejemplo, un usuario con discapacidad visual puede 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 las aplicaciones en plataformas de Microsoft y en la web, la tecnología de asistencia interactúa con Automatizaciónde la interfaz de usuario de Microsoft, un modelo de objetos específico de la aplicación como el Modelo de objetos de documento (DOM) en Microsoft Edge o una combinación de estos.

Para los desarrolladores web, determinados elementos HTML se asignan a objetos de 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. Durante el desarrollo del sitio web, normalmente solo debe preocuparse por asegurarse de que la API se escribe correctamente en (o que se especifica el elemento adecuado) para que la aplicación sea accesible. Consulta ARIA y automatización de la interfaz de usuario en Microsoft Edge para obtener más información. Para obtener información sobre las aplicaciones accesibles de la Plataforma universal de Windows (UWP), ve al tema 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, y 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 enriquecciones accesibles (ARIA) ayudan a solucionar este problema.

Para obtener más información sobre la accesibilidad web, consulte introduction to Web Accessibility by the Web Accessibility Initiative (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 puedan ser accesibles para todas las personas. 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 para proporcionar tecnologías de asistencia e información sobre las API de role accesibilidad sobre el elemento. Por ejemplo, el elemento siguiente se asigna para indicar <li> que es un elemento de un role="menuitem" menú.

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

Los estados y 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 . Cambiar una propiedad afecta al significado del objeto. En el ejemplo siguiente, la propiedad se establece en un elemento de menú para indicar aria-haspopup="true" que tiene un elemento <li> emergente.

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

Los estados no cambian la naturaleza del objeto, sino que representan información asociada con el objeto o la interacción del usuario con el objeto, like aria-hidden o aria-checked . Por ejemplo, el estado aria-checked="false" del ejemplo siguiente indica que la casilla no está activada.

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

Vaya a El modelo de roles de W3C para ver una lista completa de roles, propiedades y estados.

Para obtener más información sobre ARIA, vaya a ARIA en la sección Recursos.

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 una buena experiencia para los usuarios con discapacidades. Dado que muchas tecnologías de asistencia usan el teclado, probar la accesibilidad del teclado de su sitio web es un buen lugar para empezar. Las pruebas de compatibilidad de teclado validan que los usuarios tienen acceso a todos los controles interactivos sin necesidad de un mouse. Microsoft Accessibility Insights para 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ás seguro de que tu sitio web funciona bien con un teclado, pruébalo con otras tecnologías de asistencia, como lectores de pantalla. Se destapan problemas en lo siguiente.

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

Diferentes exploradores pueden asignar elementos a las API de accesibilidad de la plataforma de forma diferente que Microsoft Edge. Al crear la interfaz, es importante tener en cuenta cada diferencia.

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

Aprender a probar

Las tecnologías de asistencia son herramientas sofisticadas. No supongas que puedes comenzar inmediatamente las pruebas 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 de lector de pantalla principiante puede asumir que se ha producido un error de lector de pantalla mientras el problema está relacionado con el uso incorrecto del lector de pantalla.

Para obtener más información sobre cómo aprender a probar con tecnologías de asistencia, vaya a Pruebas con lectores de pantalla en WebAIM.

Probar localmente

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, FreedomscientificSoftwareJawsy ZoomText están disponibles para su descarga. 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 quieres probar con una tecnología de asistencia solo disponible para Windows, como Windows Narrator o NVDA, crea una máquina virtual de Windows. Las máquinas virtuales con Microsoft Edge (EdgeHTML) e IE están disponibles para VirtualBox y VMWare en la página de descarga Máquinas virtuales.

Android Studio incluye un emulador que permite probar tecnologías de asistencia en el Conjunto de accesibilidad de Android. Sigue las instrucciones para configurar un dispositivo virtual e iniciarel emulador y, a continuación, instala Android Accessibility Suite desde la Tienda GooglePlay.

Nota

El simulador de iOS no incluye actualmente VoiceOver.

Herramientas de prueba 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 prueba de tecnología de asistencia basadas en la nube son lo siguiente mejor.

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

Recursos

Conceptos básicos de accesibilidad

El proyecto A11Y

The A11Y Project is a community-driven effort to make web accessibility easier. Consulte el sitio del proyecto A11Y para obtener información sobre los principios básicos de accesibilidad, su patrón accesible y su biblioteca de widgets,y sus recursos en software de accesibilidad, blogs, libros y herramientas.

Iniciativa de accesibilidad web (WAI)

The W3C Web Accessibility Initiative (WAI) is an effort to help improve the accessibility of the web. Su sitio proporciona una variedad de recursos para Introducción a la accesibilidad web,diseño para la inclusión,tutoriales y presentaciones,etc.

Blogs de accesibilidad

Grupo Paciello

El Grupo Paciello proporciona soluciones de consultoría y tecnología a organizaciones de todo el mundo para garantizar que sus clientes lleguen a todas las audiencias de forma eficaz y eficaz, al tiempo que se reúnen con los estándares gubernamentales e internacionales. Su blog trata temas como procedimientos recomendados de accesibilidad web, herramientas de accesibilidad y tendencias de accesibilidad.

Simplemente accesible

Simply Accessible es un equipo de especialistas en accesibilidad que ofrece cursos de accesibilidad, consultoría y mucho más para cambiar la percepción de accesibilidad en la web. En la sección Artículos se deba a los procedimientos recomendados para la accesibilidad web, el diseño accesible y mucho más.

Grupo de SSB BART (SSB)

SSB BART Group es una firma de accesibilidad digital que ayuda a sus clientes a desarrollar e implementar productos y servicios accesibles. Su blog aborda temas como procedimientos recomendados de ARIA, tendencias de accesibilidad, seminarios web y mucho más.

Ejemplos accesibles

ally.js: tutoriales

Biblioteca de JavaScript para ayudar a las aplicaciones web modernas con problemas de accesibilidad al facilitar la accesibilidad.

Heydonworks: ejemplos de ARIA

Ejemplos prácticos de ARIA para mejorar la accesibilidad de la aplicación

Ejemplos de OpenAjax

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

Patrones

The A11Y Project offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more.

Herramientas de & 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.

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 objetos accesibles desde lenguajes de contenido web y los exponen en las API de accesibilidad.

Recursos de evaluación de accesibilidad

Recursos de evaluación de accesibilidad es un recurso de varias páginas del W3C que describe diferentes enfoques para evaluar sitios web para la 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 lectores de pantalla.

Crear sitios web accesibles es mucho más fácil

Esta entrada de blog .NET Web Development and Tools describe el Visual Studio extensión Web Accessibility Checker.

Asignaciones de API de accesibilidad principales 1.1

Este documento de asignación W3C explica cómo la semántica de los lenguajes de contenido web se expone a las API de accesibilidad.

Comprobaciones fáciles: una primera revisión de la accesibilidad web

Una serie de comprobaciones rápidas de la WAI que le ayudan a garantizar la accesibilidad de una página web.

Cómo conocer WCAG 2.0

Una referencia rápida a los requisitos y técnicas de las Directrices de accesibilidad de contenido web (WCAG) 2.0 (criterios de éxito).

Asignaciones de LA API de accesibilidad HTML 1.0

En este documento de asignaciones W3C se explica cómo se asignan elementos y atributos HTML5.1 a las API de accesibilidad de la plataforma.

Sugerencias rápidas

Una lista de sugerencias de desarrollo web rápido para la accesibilidad de The A11Y Project.

Examen del sitio

La herramienta Examen del sitio en el Centro de desarrollo de Microsoft Edge comprueba si hay bibliotecas des actualizadas, problemas de diseño y problemas de accesibilidad.

Técnicas para WCAG 2.0

Técnicas de W3C que proporcionan instrucciones para desarrolladores web sobre cómo cumplir los criterios de éxito de las Directrices de accesibilidad de contenido web (WCAG) 2.0.

Sugerencias sobre el desarrollo de la accesibilidad web

Sugerencias de W3C sobre el desarrollo de contenido web más accesible para personas con discapacidades.

Procedimientos de creación de WAI-ARIA 1.1

Un documento del W3C que proporciona a los lectores información sobre cómo usar WAI-ARIA 1.1 y recomienda métodos para que los widgets, la navegación y los comportamientos puedan ser accesibles mediante roles, estados y propiedades de WAI-ARIA.

Directrices y técnicas de WAI

Una serie de directrices y estándares de accesibilidad web desarrollados por el 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.

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

Una serie de vídeos situacionales breves de W3C sobre el impacto de la accesibilidad y las ventajas para todos.