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 1: Línea 1:
== '''1.4.1-A. No usar solo el color para transmitir información ''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.1
  Análisis interno:
|id_wcag_subcriterio=1.4.1-A
  Este criterio impacta principalmente a: Personas con discapacidad visual total y baja visión 
|wcag_titulo_criterio=1.4.1-A. No usar solo el color para transmitir información
  Problema grave: Si la información se transmite solo por color, los usuarios con baja visión o daltonismo no podrán distinguirla, provocando barreras de comprensión. 
|wcag_nivel=A
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.1-A -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
  <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
    <ul>
|wcag_grupo=Presentación
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Uso_del_color
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
      <li><span class="label">Categoría:</span><span class="value">Presentación</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Uso del color</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
    </ul>
</li>
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 
|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.
 
|wcag_descripcion_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.
 
|wcag_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.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li>G14: Asegurar que la información transmitida por el color también está en el texto</li>
<li>G182: Añadir pistas visuales adicionales al usar color para transmitir significado</li>
<li>G138: Usar marcado semántico cuando existan claves de color</li>
<li>F81: Error por identificar solo mediante color los campos obligatorios/erróneos</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Comprobar que la información transmitida por color también se presenta en texto o icono.</li>
<li>Añadir etiqueta, texto o símbolo para campos obligatorios o con error.</li>
<li>Usar forma, borde, iconografía o cambios en la fuente además del color.</li>
<li>Considerar cómo funcionaría la página sin color (monocromo).</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<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 2.</span> Verificar que existe texto o señal adicional además del color.</li>
<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>
</ol>
 
|wcag_resultado_evaluacion=
La información no depende exclusivamente del color y puede comprenderse mediante texto u otras señales visuales.
 
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<label>Nombre (obligatorio)</label>
<input aria-required="true">
<span class="error">* Campo obligatorio</span>
</pre>
</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=
<ul>
<li>Inspector de código del navegador</li>
<li>Simuladores de daltonismo (p. ej., Chrome DevTools / Stark)</li>
</ul>
}}

Revisión del 18:54 4 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)

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

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

  • G14: Asegurar que la información transmitida por el color también está en el texto
  • G182: Añadir pistas visuales adicionales al usar color para transmitir significado
  • G138: Usar marcado semántico cuando existan claves de color
  • F81: Error por identificar solo mediante color los campos obligatorios/erróneos

Recursos de apoyo

  • 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 Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar elementos donde el color transmite información.
  2. Paso 2. Verificar que existe texto o señal adicional además del color.
  3. Paso 3. En imágenes, confirmar que la información basada en color tiene alternativa visible o textual.

Resultado esperado

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

Ejemplo

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

Ejemplo no accesible: 

<label style="color:red">Nombre</label>
<input>

Otras herramientas de evaluación

  • Inspector de código del navegador
  • Simuladores de daltonismo (p. ej., Chrome DevTools / Stark)










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