Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-P»

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:
__TOC__
{{CriterioWCAG
=== '''1.3.1-P. Color e información''' ===
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-P
|wcag_titulo_criterio=1.3.1-P. Color e información
|wcag_nivel=A
|wcag_version=2.2
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Estructura
|wcag_subgrupo=Color y significado


<!-- 
|wcag_discapacidades=
  Análisis interno:
<li class="discapacidad-item">
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  Problema grave: Si la información se transmite solo mediante color, usuarios con baja visión o daltonismo no pueden interpretarla, provocando barreras de comprensión. 
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
-->
  <span class="gravedad gravedad-grave">Barrera grave</span>
<html>
</li>
<!-- criterio 1.3.1-P -->
<article class="wcag-card">
   <section class="wcag-info">
    <ul>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <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.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Color y significado</span></li>
    </ul>
  </section>


  <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
      <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="gravedad gravedad-grave">Barrera grave</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>
</li>
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span></li>
 
    </ul>
<li class="discapacidad-item">
  </section>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
</article>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
</html>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
Cuando el color se emplea para transmitir información también se debe transmitir dicha información mediante el marcado semántico o estructural, o al menos en forma de texto.
 
|wcag_descripcion_resumida=
Si el color transmite información (por ejemplo, rojo para error o verde para éxito), esa información debe estar disponible también en texto u otro método que pueda interpretar el software.
 
|wcag_objetivo=
Asegurar que la información basada en color sea accesible para todas las personas, especialmente para quienes no pueden percibir o distinguir colores.
 
|wcag_importancia=
El color no puede ser el único medio para indicar un estado, diferencia o mensaje. Sin alternativas en texto o elementos visuales adicionales, las personas con baja visión, daltonismo o ceguera no reciben la información.
 
|wcag_referencias=
<ul>
<li>G138: Marcar semánticamente cuando se usan claves de color</li>
<li>G14: La información transmitida por color debe estar también en texto</li>
<li>G182: Ofrecer pistas visuales adicionales al color</li>
</ul>
 
|wcag_recursos=
<ul>
<li>No usar color como único indicador</li>
<li>Complementar el color con texto, iconos o atributos ARIA</li>
<li>Fallo si un error se marca solo con color rojo</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li>Identificar elementos en los que el color transmita significado</li>
<li>Verificar que también existe texto u otro indicador programático</li>
<li>Inspeccionar código para confirmar marcado semántico correcto</li>
</ol>
 
|wcag_resultado_evaluacion=
El color no se usa como único método para transmitir información; existe alternativa textual o semántica.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<p><span aria-hidden="true">⚠️</span> <strong>Error:</strong> Introduce un email válido.</p>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<p style="color:red;">Campo incorrecto</p>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección de código del navegador</li>
<li>Lectores de pantalla para comprobar mensajes alternativos</li>
</ul>
 
}}

Revisión del 18:37 4 nov 2025

1.3.1-P. Color e 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)

  • Cuando el color se emplea para transmitir información también se debe transmitir dicha información mediante el marcado semántico o estructural, o al menos en forma de texto.

Comprensión del criterio

Descripción resumida

Si el color transmite información (por ejemplo, rojo para error o verde para éxito), esa información debe estar disponible también en texto u otro método que pueda interpretar el software.

Objetivo

Asegurar que la información basada en color sea accesible para todas las personas, especialmente para quienes no pueden percibir o distinguir colores.

Importancia de cumplir el criterio

El color no puede ser el único medio para indicar un estado, diferencia o mensaje. Sin alternativas en texto o elementos visuales adicionales, las personas con baja visión, daltonismo o ceguera no reciben la información.

Referencias WCAG

  • G138: Marcar semánticamente cuando se usan claves de color
  • G14: La información transmitida por color debe estar también en texto
  • G182: Ofrecer pistas visuales adicionales al color

Recursos de apoyo

  • No usar color como único indicador
  • Complementar el color con texto, iconos o atributos ARIA
  • Fallo si un error se marca solo con color rojo

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Identificar elementos en los que el color transmita significado
  2. Verificar que también existe texto u otro indicador programático
  3. Inspeccionar código para confirmar marcado semántico correcto

Resultado esperado

El color no se usa como único método para transmitir información; existe alternativa textual o semántica.

Ejemplo ilustrativo

Ejemplo correcto: 
<p><span aria-hidden="true">⚠️</span> <strong>Error:</strong> Introduce un email válido.</p>

Ejemplo incorrecto: 

<p style="color:red;">Campo incorrecto</p>


Otras herramientas de evaluación

  • Inspección de código del navegador
  • Lectores de pantalla para comprobar mensajes alternativos










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UFV1.3.1-P-0019 enero 2026 21:26:12
2526UPSA1.3.1-P-00018 diciembre 2025 12:46:56


Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-P. Color e información

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-P&oldid=3330»