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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias del mismo usuario)
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.0
|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:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  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 visual total|Visual total]]</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:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</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>
<li class="discapacidad-item">
    </ul>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Discapacidad baja visión]]
  </section>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
</article>
  <span class="gravedad gravedad-grave">Barrera grave</span>
</html>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad baja visión]]
 
|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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G138 G138: Using semantic markup whenever color cues are used]</span></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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G182 G182: Providing multiple visual cues to identify active user interface components]</span></li>
</ul>
 
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>No usar color como único indicador</li>
<li>Complementar el color con texto, iconos o atributos ARIA</li>
<li>No marcar un error de un campo en un formulario (por ejemplo) solo con un borde de color rojo</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Usando la herramienta de inspección de código del navegador, verificar que siempre que el color se emplee para transmitir información, se utilizan elementos de marcado semántico.
</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=
<div class="accessibility-card">
Se muestra un error con icono, texto y ARIA (no depende solo del color).
<pre class="wcag-codigo-html">
<p role="alert">
  <span aria-hidden="true">⚠️</span>
  <strong>Error:</strong> Introduce un email válido.
</p>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección del navegador''': revisar el código para comprobar que el color no es el único mecanismo para transmitir información. Verificar que existe texto o marcado semántico adicional (por ejemplo: iconos con texto, etiquetas, mensajes "Correcto"/"Error", etc.).</li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) comprobar que los usuarios que no perciben el color reciben la misma información, es decir, que el contenido relevante se anuncia en texto o mediante roles/atributos accesibles.</li>
<li>'''Herramientas de contraste''': (Contrast Checker, DevTools Accessibility, Colour Contrast Analyser) validar que los colores utilizados tienen suficiente contraste cuando se presentan junto a texto u otros indicadores visuales.</li>
</ul>
 
}}

Revisión actual - 08:57 5 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

Recursos de apoyo

Consejos
  • No usar color como único indicador
  • Complementar el color con texto, iconos o atributos ARIA
  • No marcar un error de un campo en un formulario (por ejemplo) solo con un borde de color rojo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Usando la herramienta de inspección de código del navegador, verificar que siempre que el color se emplee para transmitir información, se utilizan elementos de marcado semántico.

Resultado esperado

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

Ejemplo ilustrativo

Se muestra un error con icono, texto y ARIA (no depende solo del color). 

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


Otras herramientas de evaluación

  • Inspección del navegador: revisar el código para comprobar que el color no es el único mecanismo para transmitir información. Verificar que existe texto o marcado semántico adicional (por ejemplo: iconos con texto, etiquetas, mensajes "Correcto"/"Error", etc.).
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) comprobar que los usuarios que no perciben el color reciben la misma información, es decir, que el contenido relevante se anuncia en texto o mediante roles/atributos accesibles.
  • Herramientas de contraste: (Contrast Checker, DevTools Accessibility, Colour Contrast Analyser) validar que los colores utilizados tienen suficiente contraste cuando se presentan junto a texto u otros indicadores visuales.










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