Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.1-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
Línea 92: Línea 92:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
<a class="bookmarklet-button"
href="javascript:void%20function()%7Bdocument.querySelectorAll(%22%23wai-styles,%23wai-info-box%22).forEach(a=%3E%7Ba.remove()%7D),document.querySelector(%22body%22).insertAdjacentHTML(%22afterbegin%22,%22%3Cstyle%20id='wai-styles'%3E%23wai-info-box%7Bz-index:1000;color:black;font-family:Noto%20Sans,Trebuchet%20MS,Helvetica%20Neue,Arial,sans-serif;border:solid%201px%20%23ddd;background-color:%23fff;box-shadow:0%204px%208px%200%20rgba(0,0,0,0.2),0%206px%2020px%200%20rgba(0,0,0,0.19);%7D%23wai-info-box%20header%7Bfont-weight:700;background-color:%23f2f2f2;color:%23005a6a;padding:8px%2016px;%7D%23wai-info-box%20header%20a%7Bfloat:right;text-decoration:none%7D%23wai-info-box%20div%7Bpadding:8px%2016px;%7D.wai-more-info%7Bposition:sticky;width:25%25;margin-left:70%25;bottom:5em;%7Dbody%7Bfilter:grayscale(1)%7D%3C/style%3E%22),document.querySelector(%22body%22).insertAdjacentHTML(%22beforeend%22,%22%3Caside%20id=%27wai-info-box%27%20class=%27wai-more-info%27%3E%3Cheader%3EFind%20out%20more%3Ca%20href=javascript:document.querySelectorAll(%27%23wai-styles,%23wai-info-box%27).forEach(function(el)%7Bel.remove()%7D);%20aria-label=dismiss%3EX%3C/a%3E%3C/header%3E%3Cdiv%3E%3Ca%20href=%27https://w3.org/wai/test-evaluate/easy-checks/color-contrast/%27%3EChecking%20Color%20Contrast%3C/a%3E%3C/div%3E%3C/aside%3E%22)%7D();">
Ver en blanco y negro
</a>
</div>
</html>
</li>
<li>'''Inspección del navegador''': comprobar que el color no es el único mecanismo para indicar estado, acción o error (por ejemplo, añadir texto, iconos o marcado semántico adicional).</li>
<li>'''Inspección del navegador''': comprobar que el color no es el único mecanismo para indicar estado, acción o error (por ejemplo, añadir texto, iconos o marcado semántico adicional).</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) verificar que la información relevante se anuncia en texto y no depende solo del color.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) verificar que la información relevante se anuncia en texto y no depende solo del color.</li>

Revisión actual - 08:13 2 dic 2025

1.4.1-A. No usar solo el color para transmitir información

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • No se debe emplear el color (del texto, de fondo o de otros elementos) como único medio para transmitir información

Comprensión del criterio

Descripción resumida

No se debe usar el color como único canal para comunicar significado. Si el color transmite información (por ejemplo, campos obligatorios en rojo), también debe existir texto, icono, etiqueta o atributo accesible que permita comprenderlo sin depender de la percepción del color.

Objetivo

Garantizar que la información transmitida mediante diferencias de color esté disponible para quienes no perciben correctamente los colores o utilizan configuraciones de visualización alternativas.

Importancia de cumplir el criterio

El color puede ser imperceptible para personas con baja visión o daltonismo.

Depender solo del color genera barreras.

Es necesario complementarlo con otras señales como iconos, texto o cambios de forma.

Referencias WCAG

Recursos de apoyo

Consejos
  • Comprobar que la información transmitida por color también se presenta en texto o icono.
  • Añadir etiqueta, texto o símbolo para campos obligatorios o con error.
  • Usar forma, borde, iconografía o cambios en la fuente además del color.
  • Considerar cómo funcionaría la página sin color (monocromo).

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar todos los elementos de la página que utilizan el color para transmitir una información.
  2. Paso 2. Verificar que esta información está disponible también en texto.

Resultado esperado

La información no depende exclusivamente del color y puede comprenderse mediante texto u otras señales visuales.

Ejemplo ilustrativo

Se incluye un asterisco para indicar que el campo es obligatorio 

<label>Nombre (obligatorio)</label>
<input aria-required="true">
<span class="error">* Campo obligatorio</span>


Otras herramientas de evaluación

  • Bookmarklet diagnóstico ALT:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
    Ver en blanco y negro
  • Inspección del navegador: comprobar que el color no es el único mecanismo para indicar estado, acción o error (por ejemplo, añadir texto, iconos o marcado semántico adicional).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) verificar que la información relevante se anuncia en texto y no depende solo del color.
  • Filtros de visión: activar herramientas de simulación de daltonismo o visión reducida (Chrome DevTools, Edge, Firefox) para comprobar que la información sigue siendo comprensible.
  • Prueba sin estilos: desactivar CSS para confirmar que la información esencial sigue presente mediante texto o estructura.










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.1-A. No usar solo el color para transmitir información

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-A&oldid=3798»