Características de pruebas de accesibilidad
En este artículo se enumeran los aspectos típicos de accesibilidad para probar las páginas web y las características correspondientes de Microsoft DevTools.
Texto alternativo para imágenes
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Comprobación de que las imágenes tienen texto alternativo | Sección accesibilidad de la herramienta >de problemas del informe | Compruebe que las imágenes tienen texto alternativo en Prueba automática de problemas de accesibilidad en una página web |
| Comprobación de que las imágenes tienen texto alternativo | Problemas de la herramienta >Lighthouse sobre el texto alternativo | Prueba de accesibilidad mediante Lighthouse |
Compatibilidad con teclado
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Comprobación de la compatibilidad con el teclado | Sección Inspeccionarla accesibilidad de la herramienta > de superposición | Use la herramienta Inspeccionar para detectar problemas de accesibilidad si mantiene el puntero sobre la página web y analiza las páginas HTML mediante la herramienta Inspeccionar. |
| Comprobación de la compatibilidad con el teclado | Teclas Tab, Mayús+Tab y Enter | Compruebe si hay compatibilidad con el teclado mediante las teclas Tab y Enter. |
| Comprobación de la compatibilidad con el teclado: compruebe que el foco está indicado | Herramienta Inspeccionar, pestaña Estilos y Herramienta Orígenes | Analizar la falta de indicación del foco del teclado |
| Comprobar la compatibilidad con el teclado: compruebe que los botones de formulario se pueden usar con el teclado | Herramienta Inspeccionar, árbol DOM en la herramienta Elementos y pestaña Agentes de escucha de eventos | Analizar la falta de compatibilidad con el teclado en un formulario |
| Comprobación de la compatibilidad con el teclado: comprobar el orden de la tecla Tab | PestañaAccesibilidad de la> herramienta > Elementos Visor de orden de origen | Prueba de la compatibilidad con el teclado mediante el Visor de pedidos de origen |
| Comprobación de la compatibilidad con el teclado | Problemas de la herramienta >Lighthouse sobre la compatibilidad con el teclado | Prueba de accesibilidad mediante Lighthouse |
Contraste de texto
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Compruebe que el texto tiene suficiente contraste (automáticamente, para toda la página) | Sección accesibilidad de la herramienta >de problemas del informe | Compruebe que los colores del texto tienen suficiente contraste en Prueba automática de problemas de accesibilidad en una página web |
| Comprobar que el texto tiene suficiente contraste | Selector de colores de la pestaña Estilos de la herramienta >> Elementos | Prueba del contraste de color de texto mediante el selector de colores |
| Comprobar que el texto tiene suficiente contraste | Sección Inspeccionarla accesibilidad de la herramienta > de la fila de contraste superpuesta > | Use la herramienta Inspeccionar para detectar problemas de accesibilidad si mantiene el puntero sobre la página web y analiza las páginas HTML mediante la herramienta Inspeccionar. |
| Compruebe que el texto tiene suficiente contraste: en el estado del mouse | Pestaña Estilos de la herramienta >Elementos>Alternar estado del elemento (muestra las casillas De forzar el estado del elemento ) | Comprobación de la accesibilidad de todos los estados de los elementos |
| Compruebe que el texto tiene suficiente contraste: con el tema oscuro (modo oscuro) y el tema claro | Herramienta de> representación Emular la característica de medios CSS prefers-color-scheme | Comprobar si hay problemas de contraste con el tema oscuro y el tema claro |
| Compruebe que el texto tiene suficiente contraste (automáticamente, para toda la página) | > Herramienta Lighthouse Problemas sobre el contraste de texto | Prueba de accesibilidad mediante Lighthouse |
Compatibilidad con lectores de pantalla
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Comprobar la compatibilidad del lector de pantalla: compruebe que los campos de entrada tienen etiquetas | Sección accesibilidad de la herramienta >de problemas del informe | Compruebe que los campos de entrada tienen etiquetas en Prueba automática de problemas de accesibilidad en una página web. |
| Comprobación de la compatibilidad con el lector de pantalla | Sección Inspeccionarla accesibilidad de la herramienta > de superposición> nombre y rol | Use la herramienta Inspeccionar para detectar problemas de accesibilidad si mantiene el puntero sobre la página web y analiza las páginas HTML mediante la herramienta Inspeccionar. |
| Comprobación de la compatibilidad con el lector de pantalla | PestañaAccesibilidad de la> herramienta > Elements (Árbol de accesibilidad) | Compruebe que el árbol de accesibilidad es compatible con el teclado y el lector de pantalla y pruebe la accesibilidad mediante la pestaña Accesibilidad. |
| Comprobación de la compatibilidad con el lector de pantalla | Problemas de la herramienta >Lighthouse sobre la compatibilidad con el lector de pantalla | Prueba de accesibilidad mediante Lighthouse |
Deficiencias de la visión
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Comprobar que la página web es utilizable por personas con ceguera de color | Herramienta de> representación Emular la lista desplegable de deficiencias visuales | Comprobar que las personas con ceguera de color pueden usar una página |
| Comprobar que la página web es utilizable con visión borrosa | Herramienta de> representación Emular la lista desplegable de deficiencias visuales | Comprobación de que una página es utilizable con visión borrosa |
| Compruebe que la página web se puede usar con la animación de la interfaz de usuario desactivada (movimiento reducido) | Herramienta de> representación Emular la característica de medios CSS prefiere el movimiento reducido | Compruebe que una página se puede usar con la animación de la interfaz de usuario desactivada |
| Comprobar que la página web es utilizable por personas con deficiencias visuales | Problemas de la herramienta >Lighthouse sobre las deficiencias de la visión | Prueba de accesibilidad mediante Lighthouse |
Utilizable cuando es estrecho
| Aspecto de accesibilidad que se debe comprobar | Característica de DevTools | Artículo |
|---|---|---|
| Compruebe que el diseño de la página web es utilizable cuando es estrecho. | Herramienta de emulación de dispositivos | Compruebe que el diseño de la página web se puede usar cuando sea estrecho y emular dispositivos móviles (emulación de dispositivo) |