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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.1-A. No usar solo el color para transmitir información
|wcag_titulo_criterio=1.4.1-A. No usar solo el color para transmitir información
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 29: Línea 29:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
El color no se utiliza como el único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.
No se debe emplear el color (del texto, de fondo o de otros elementos) como único medio para transmitir información


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 40: Línea 40:
|wcag_importancia=
|wcag_importancia=
El color puede ser imperceptible para personas con baja visión o daltonismo.   
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.
 
Depender solo del color genera barreras.  
 
Es necesario complementarlo con otras señales como iconos, texto o cambios de forma.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G14: Asegurar que la información transmitida por el color también está en el texto</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G14 G14: Ensuring that information conveyed by color is also available in text]</span></li>
<li>G182: Añadir pistas visuales adicionales al usar color para transmitir significado</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G182 G182: Providing multiple visual cues to identify a control or other user interface component]</span></li>
<li>G138: Usar marcado semántico cuando existan claves de color</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G138 G138: Using semantic markup whenever color cues are used]</span></li>
<li>F81: Error por identificar solo mediante color los campos obligatorios/erróneos</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F81 F81: Failure due to identifying required or error fields using color alone]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Comprobar que la información transmitida por color también se presenta en texto o icono.</li>
<li>Comprobar que la información transmitida por color también se presenta en texto o icono.</li>
Línea 58: Línea 63:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar elementos donde el color transmite información.</li>
<li><span class="paso-badge">Paso 1.</span>  
<li><span class="paso-badge">Paso 2.</span> Verificar que existe texto o señal adicional además del color.</li>
Localizar todos los elementos de la página que utilizan el color para transmitir una información.
<li><span class="paso-badge">Paso 3.</span> En imágenes, confirmar que la información basada en color tiene alternativa visible o textual.</li>
</li>
<li><span class="paso-badge">Paso 2.</span>  
Verificar que esta información está disponible también en texto.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 71: Línea 80:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
Se incluye un asterisco para indicar que el campo es obligatorio
<div class="accessibility-card">
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
Línea 80: Línea 90:
</div>
</div>


Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<label style="color:red">Nombre</label>
<input>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspector de código del navegador</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>Simuladores de daltonismo (p. ej., Chrome DevTools / Stark)</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>'''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.</li>
<li>'''Prueba sin estilos''': desactivar CSS para confirmar que la información esencial sigue presente mediante texto o estructura.</li>
</ul>
</ul>
}}
}}

Revisión del 09:48 5 nov 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

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

  • 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

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=3435»