Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.5-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.5-A. Evitar imágenes para representar texto''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.5
  Análisis interno:
|id_wcag_subcriterio=1.4.5-A
  Este criterio impacta principalmente a: Personas con baja visión y discapacidad cognitiva 
|wcag_titulo_criterio=1.4.5-A. Evitar imágenes para representar texto
  Problema grave: Si se usan imágenes para texto, los usuarios con baja visión no podrán ampliarlo ni personalizarlo, y personas con discapacidad cognitiva pueden no reconocer correctamente la información, generando barreras graves.
|wcag_nivel=AA
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.5-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=Texto
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subgrupo=Imágenes_de_texto
      <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>
|wcag_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Texto</span></li>
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><span class="label">Subcategoría:</span><span class="value">Imágenes de texto</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
    </ul>
  <span class="gravedad gravedad-grave">Barrera grave</span>
  </section>
</li>
  <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</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-moderada">Barrera moderada</span>
      <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>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Discapacidad baja visión]]
</html>
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
Se utiliza el texto para transmitir la información en lugar de imágenes de texto si se puede lograr la presentación visual deseada con las tecnologías utilizadas.
 
|wcag_descripcion_resumida=
Siempre que sea posible, el contenido textual debe presentarse como texto real, no como imágenes de texto. 
El texto real puede ampliarse, personalizarse, ser leído por tecnologías de apoyo y mantener nitidez con zoom, lo que no ocurre con imágenes de texto.
 
|wcag_objetivo=
Garantizar que el contenido textual sea accesible, escalable y legible para personas con baja visión y que pueda ser leído por herramientas de asistencia.
 
|wcag_importancia=
El texto dentro de imágenes pierde nitidez al ampliar, no se puede personalizar y puede no ser accesible para lectores de pantalla. 
El uso de texto real permite adaptación visual, mejora la legibilidad y potencia la accesibilidad.
 
|wcag_referencias=
<ul>
<li>C22: Usar CSS para controlar la presentación visual del texto</li>
<li>G140: Separar información y presentación para múltiples vistas accesibles</li>
<li>C30: Permitir alternar entre texto e imágenes si se usan imágenes de texto</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar CSS para decorar y dar estilo al texto en lugar de usar imágenes.</li>
<li>Evitar imágenes de texto salvo en casos excepcionales como logotipos o marcas.</li>
<li>Proveer texto alternativo completo si se incluye una imagen de texto necesaria.</li>
<li>Definir imágenes decorativas mediante CSS.</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar imágenes que contienen texto.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar si podrían sustituirse por texto real con estilos CSS.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que las excepciones (p. ej., logotipos) cumplen alternativas o requisitos mínimos.</li>
</ol>
 
|wcag_resultado_evaluacion=
El texto se representa mediante texto real y estilos, no mediante imágenes, excepto en casos justificados como logotipos.
 
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<h2 class="titulo">Bienvenido</h2>
<style>
.titulo { font-family: 'Poppins', sans-serif; font-weight: 700; }
</style>
</pre>
<p>El texto se estiliza con CSS, no se inserta como imagen.</p>
</div>
 
Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<img src="bienvenido.png" alt="Bienvenido">
</pre>
<p>Texto representado como imagen sin necesidad.</p>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección manual HTML/CSS</li>
<li>Modo lector o zoom del navegador</li>
</ul>
}}

Revisión del 19:03 4 nov 2025

1.4.5-A. Evitar imágenes para representar texto

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)

  • Se utiliza el texto para transmitir la información en lugar de imágenes de texto si se puede lograr la presentación visual deseada con las tecnologías utilizadas.

Comprensión del criterio

Descripción resumida

Siempre que sea posible, el contenido textual debe presentarse como texto real, no como imágenes de texto. El texto real puede ampliarse, personalizarse, ser leído por tecnologías de apoyo y mantener nitidez con zoom, lo que no ocurre con imágenes de texto.

Objetivo

Garantizar que el contenido textual sea accesible, escalable y legible para personas con baja visión y que pueda ser leído por herramientas de asistencia.

Importancia de cumplir el criterio

El texto dentro de imágenes pierde nitidez al ampliar, no se puede personalizar y puede no ser accesible para lectores de pantalla. El uso de texto real permite adaptación visual, mejora la legibilidad y potencia la accesibilidad.

Referencias WCAG

  • C22: Usar CSS para controlar la presentación visual del texto
  • G140: Separar información y presentación para múltiples vistas accesibles
  • C30: Permitir alternar entre texto e imágenes si se usan imágenes de texto

Recursos de apoyo

  • Usar CSS para decorar y dar estilo al texto en lugar de usar imágenes.
  • Evitar imágenes de texto salvo en casos excepcionales como logotipos o marcas.
  • Proveer texto alternativo completo si se incluye una imagen de texto necesaria.
  • Definir imágenes decorativas mediante CSS.

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar imágenes que contienen texto.
  2. Paso 2. Verificar si podrían sustituirse por texto real con estilos CSS.
  3. Paso 3. Confirmar que las excepciones (p. ej., logotipos) cumplen alternativas o requisitos mínimos.

Resultado esperado

El texto se representa mediante texto real y estilos, no mediante imágenes, excepto en casos justificados como logotipos.

Ejemplo

Ejemplo accesible: 
<h2 class="titulo">Bienvenido</h2>
<style>
.titulo { font-family: 'Poppins', sans-serif; font-weight: 700; }
</style>

El texto se estiliza con CSS, no se inserta como imagen.

Ejemplo no accesible: 

<img src="bienvenido.png" alt="Bienvenido">

Texto representado como imagen sin necesidad.

Otras herramientas de evaluación

  • Inspección manual HTML/CSS
  • Modo lector o zoom del navegador










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.5-A. Evitar imágenes para representar texto

Loading comments...




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