Recursos sobre la 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. 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 HTML5Accessibility para obtener información sobre las nuevas características html5 que son compatibles de forma Microsoft Edge.

Cómo funciona la accesibilidad

Las tecnologías de asistencia agregan funcionalidades que los equipos no suelen tener. Por ejemplo, un usuario con visión baja 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 cualquier combinación de:

• Automatización de la interfaz de usuario deMicrosoft .
• Un modelo de objetos específico de la aplicación, como el modelo de objetos de documento (DOM) en Microsoft Edge.

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 de su 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 ARIA e interfaz de usuario en Microsoft Edge para obtener más información. Las aplicaciones de Windows universal accesibles (UWP) se explican en Accesibilidad en Windows Centro de desarrollo.

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 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 role para proporcionar información sobre las API de accesibilidad y tecnologías de asistencia sobre el elemento. Por ejemplo, el elemento siguiente se asigna para indicar que es <li> 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 que son 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, como aria-hidden o aria-checked. Por ejemplo, el estado del ejemplo siguiente representa que la casilla aria-checked="false" está desactivada, en lugar de 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 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 Ideas 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. Esta prueba puede detectar 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 Microsoft Edge asignarlos. 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 probar.

Learning cómo 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. Learning probar con un lector de pantalla tiene una curva de aprendizaje especialmente empinada. Un usuario principiante de lectores de pantalla puede 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.

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 Windows narrador y Windows lupa. 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 Narrador o NVDA, crea una Windows virtual. 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.

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 (un producto comercial) le permite probar manualmente con tecnologías de asistencia a través de cualquier explorador web moderno. Selecciona 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 puedas interactuar.

Vea también emuladores y simuladores basados en la nube.

Recursos para conceptos básicos de accesibilidad

Se trata de proyectos e iniciativas para la accesibilidad.

El proyecto A11Y

El A11Y Project es un esfuerzo basado en la comunidad para facilitar la accesibilidad web. Consulte El sitio de Project 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

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 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.

Acceso de nivel

Level Access es una firma de accesibilidad digital que da soporte 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

Estas son bibliotecas y ejemplos de accesibilidad.

ally.js: tutoriales

Biblioteca de JavaScript para ayudar a las aplicaciones web modernas con problemas de accesibilidad al facilitar la accesibilidad. Para obtener más información, vaya aally.js - Tutoriales.

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

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

Herramientas y técnicas de accesibilidad

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

Accesibilidad: crear 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 iconosde 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 objetos accesibles desde lenguajes de contenido web y los exponen en las API de accesibilidad. Para obtener más información, vaya a Accessible Name and Description: Computation and Mappings 1.1.

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. 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 lectores de pantalla. Para obtener más información, vaya a Assistive technology compatibility tests.

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. Para obtener más información, vaya a Creación de sitios web accesibles que son mucho más fáciles.

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. Para obtener más información, vaya a Core Accessibility API Mappings 1.1.

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. Para obtener más información, vaya a Comprobaciones fáciles: una primera revisión de la accesibilidad 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). Para obtener más información, vaya a How to Meet WCAG 2.0.

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. Para obtener más información, vaya a Asignaciones de LA API de accesibilidad HTML 1.0.

Quick Sugerencias

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

Examen del sitio

La herramienta Examen del sitio en Microsoft Edge Dev del centro de búsqueda busca bibliotecas des actualizadas, 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 instrucciones para 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 desarrollo de accesibilidad web

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

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. Para obtener más información, vaya a WAI-ARIA Authoring Practices 1.1.

Directrices y técnicas de WAI

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

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. Para obtener más información, vaya a Perspectivas de accesibilidad web: Explorar el impacto y las ventajas para todos.