Aprende sobre accesibilidad

¿Qué herramientas se usan comúnmente para ayudar a las personas con discapacidades a usar la Web?

Selecciona todas las respuestas que consideres correctas.

Dispositivos de salida braille

Lectores de pantalla

Bases de conexión

Configuración del sistema operativo

¿Cuál es una forma eficaz de generar cambios en la Web?

Selecciona todas las respuestas que consideres correctas.

Presentar reclamos en redes sociales

Presentar una demanda

Comunicarte directamente con los desarrolladores de una empresa

¿Cuál es el nivel más alto de los estándares de las WCAG?

Nivel AAA

A Level

VERSIÓN

¿Cuáles son ejemplos de operable?

Selecciona todas las respuestas que consideres correctas.

Todos los videos tienen controles.

Los usuarios tienen tiempo suficiente para completar un formulario.

Todos los elementos activos son compatibles con el teclado y la pantalla táctil.

Se usa un lenguaje sencillo.

¿Cuál de las siguientes es la mejor práctica para crear un botón accesible?

<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>

<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>

<button id="saveChanges" type="button">Go to shop</button>

Tu sitio es un libro de texto en línea multilingüe, en el que se muestran varios idiomas en una misma página. ¿Cuál es la mejor manera de indicarle a la tecnología de accesibilidad el idioma del texto?

Establece un lang principal para el <html> y agrega idiomas adicionales en los elementos que contienen contenido en un idioma diferente.

No te preocupes, la TA puede leer automáticamente cada idioma.

Incluye todos los idiomas en el elemento <html>. Por ejemplo, <html lang="en,lt,pl,pt">

¿Qué ejemplo de estilo CSS `:focus` es el más accesible sobre un fondo blanco?

outline: 0.5rem solid yellow;

background-color:black;

outline: none; text-decoration:none; background:none;

text-decoration: dotted underline 2px blue;

¿Cuál es el objetivo de un vínculo de acceso directo?

Ayuda a los usuarios del teclado a omitir grupos de vínculos redundantes o inútiles.

Ayuda a los usuarios del teclado a omitir el contenido que no les interesa.

¿Cuál es la mejor manera de cambiar el estilo de un elemento con JavaScript?

Usa JavaScript para activar o desactivar la clase de un elemento y agrega el estilo a tu hoja de estilo CSS.

Usa JavaScript para aplicar un estilo dinámico directamente dentro de un elemento HTML.

¿Todas las acciones de JavaScript admiten usuarios de teclado?

Sí, todas las acciones admiten automáticamente a los usuarios de teclado.

Sí, pero es posible que debas realizar un trabajo adicional.

No, solo puedes admitir usuarios de teclado con HTML semántico.

¿Cómo puedes hacer que las imágenes complejas sean accesibles?

Selecciona todas las respuestas que consideres correctas.

Incluye una explicación más adelante en el artículo.

Agrega texto alternativo de formato largo con una descripción completa.

Agrega el atributo aria-describedby a la imagen.

Usa un vínculo para explicaciones más largas.

El color por sí solo no es un identificador suficiente para la documentación. ¿Qué más ayudará a los lectores a identificar los elementos de la IU?

Patrón

Texto

Ícono

Todas las respuestas son correctas.

¿Qué podemos crear que refleje la configuración del sistema operativo para el movimiento?

@prefers-reduced-motion

Activadores de JavaScript

Para que el texto sea legible, siempre debo usar un alto contraste entre el texto y el fondo.

Falso

Verdadero

¿Qué fuentes son las mejores para la accesibilidad?

Tipografías accesibles

Fuentes del sistema, como Arial y Verdana

No importa.

¿Cuál de las siguientes opciones es la entrada de formulario más accesible?

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

Email address: <input type="email" required>

<label>Email address: <input type="email" required></label>

<label>Email address: <input type="email" required autocomplete="email"></label>

¿Los componentes accesibles siempre siguen siendo accesibles para los usuarios?

No, primero debes probar tus componentes.

Sí, puedes usar estos componentes sin trabajo adicional.

¿Qué tipo de pruebas debes realizar para asegurarte de que tu sitio sea accesible?

Selecciona todas las respuestas que consideres correctas.

Pruebas automáticas

Pruebas manuales

Prueba de usuario

Pruebas de tecnología de accesibilidad

Pruebas de evaluación.

¿Qué errores se detectan en las pruebas automatizadas?

Selecciona todas las respuestas que consideres correctas.

Lenguaje inclusivo

Falta texto alternativo

Problemas de contraste de color

Etiquetas descriptivas de formularios

Errores de ARIA

¿Qué elementos deben cumplir con los estándares de contraste de color de las WCAG?

Íconos

Encabezados

Texto del cuerpo

Todas las opciones anteriores

¿Cuál es el mejor lector de pantalla para probar la accesibilidad?

No hay

JAWS

VoiceOver

Orca

¿Cuál es el propósito de las pruebas con tecnología de accesibilidad?

Probar si hay fallas en tu sitio web o aplicación

Para experimentar lo mismo que las personas que usan tecnología de accesibilidad

¿Qué herramientas se usan comúnmente para ayudar a las personas con discapacidades a usar la Web?

¿Cuál es una forma eficaz de generar cambios en la Web?

¿Cuál es el nivel más alto de los estándares de las WCAG?

¿Cuáles son ejemplos de operable?

¿Cuál de las siguientes es la mejor práctica para crear un botón accesible?

Tu sitio es un libro de texto en línea multilingüe, en el que se muestran varios idiomas en una misma página. ¿Cuál es la mejor manera de indicarle a la tecnología de accesibilidad el idioma del texto?

¿Qué ejemplo de estilo CSS :focus es el más accesible sobre un fondo blanco?

¿Cuál es el objetivo de un vínculo de acceso directo?

¿Cuál es la mejor manera de cambiar el estilo de un elemento con JavaScript?

¿Todas las acciones de JavaScript admiten usuarios de teclado?

¿Cómo puedes hacer que las imágenes complejas sean accesibles?

El color por sí solo no es un identificador suficiente para la documentación. ¿Qué más ayudará a los lectores a identificar los elementos de la IU?

¿Qué podemos crear que refleje la configuración del sistema operativo para el movimiento?

Para que el texto sea legible, siempre debo usar un alto contraste entre el texto y el fondo.

¿Qué fuentes son las mejores para la accesibilidad?

¿Cuál de las siguientes opciones es la entrada de formulario más accesible?

¿Los componentes accesibles siempre siguen siendo accesibles para los usuarios?

¿Qué tipo de pruebas debes realizar para asegurarte de que tu sitio sea accesible?

¿Qué errores se detectan en las pruebas automatizadas?

¿Qué elementos deben cumplir con los estándares de contraste de color de las WCAG?

¿Cuál es el mejor lector de pantalla para probar la accesibilidad?

¿Cuál es el propósito de las pruebas con tecnología de accesibilidad?

¿Qué ejemplo de estilo CSS `:focus` es el más accesible sobre un fondo blanco?