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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.5-A. Evitar imágenes para representar texto
|wcag_titulo_criterio=1.4.5-A. Evitar imágenes para representar texto
|wcag_nivel=AA
|wcag_nivel=AA
|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
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Texto
|wcag_grupo=Texto
|wcag_subgrupo=Imágenes_de_texto
|wcag_subgrupo=Imágenes_de_texto
Línea 29: Línea 29:


|wcag_texto_criterioOAW=
|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.
Si se puede conseguir la presentación visual deseada usando sólo texto y estilos, no se deben emplean imágenes para representar dicho texto


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Siempre que sea posible, el contenido textual debe presentarse como texto real, no como imágenes de texto.   
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.
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.


Línea 39: Línea 40:


|wcag_importancia=
|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 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.
El uso de texto real permite adaptación visual, mejora la legibilidad y potencia la accesibilidad.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>C22: Usar CSS para controlar la presentación visual del texto</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C22 C22: Using CSS to control visual presentation of text]</span></li>
<li>G140: Separar información y presentación para múltiples vistas accesibles</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G140 G140: Separating information and structure from presentation to enable different presentations]</span></li>
<li>C30: Permitir alternar entre texto e imágenes si se usan imágenes de texto</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C30 C30: Using CSS to replace text with images of text and providing user interface controls to switch]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar CSS para decorar y dar estilo al texto en lugar de usar imágenes.</li>
<li>Usar CSS para decorar y dar estilo al texto en lugar de usar imágenes.</li>
Línea 57: Línea 60:
</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 imágenes que contienen texto.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar si podrían sustituirse por texto real con estilos CSS.</li>
Localizar las imágenes cuyo contenido es susceptible de ser transmitido mediante texto y estilos.
<li><span class="paso-badge">Paso 3.</span> Confirmar que las excepciones (p. ej., logotipos) cumplen alternativas o requisitos mínimos.</li>
</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que el contenido de la imagen está disponible con texto y estilos.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 70: Línea 77:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
 
<div class="accessibility-card">
<div class="accessibility-card">
El texto se estiliza con CSS, no se inserta como imagen. <br/>
HTML:
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<h2 class="titulo">Bienvenido</h2>
<h2 class="titulo">Bienvenido</h2>
<style>
<p>El texto se estiliza con CSS, no se inserta como imagen.</p>
.titulo { font-family: 'Poppins', sans-serif; font-weight: 700; }
</style>
</pre>
</pre>
<p>El texto se estiliza con CSS, no se inserta como imagen.</p>
</div>


Ejemplo no accesible:
CSS:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<img src="bienvenido.png" alt="Bienvenido">
.titulo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
</pre>
</pre>
<p>Texto representado como imagen sin necesidad.</p>
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección manual HTML/CSS</li>
<li>'''Inspección del navegador''': revisar el código para identificar si el contenido que parece texto es realmente una imagen (p. ej., <code>&lt;img&gt;</code>, <code>background-image</code>) en lugar de texto HTML.</li>
<li>Modo lector o zoom del navegador</li>
<li>'''Revisión visual''': comprobar si el “texto” pierde nitidez al hacer zoom; las imágenes de texto suelen pixelarse mientras el texto real no.</li>
<li>'''Prueba de aumento''': aumentar el tamaño del texto y verificar si el supuesto texto escala correctamente (las imágenes de texto normalmente no lo hacen).</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) comprobar si el texto es anunciado; si es imagen, dependerá de <code>alt</code> y puede no ser accesible.</li>
<li>'''Herramientas de inspección de contraste''': comprobar que el supuesto texto cumple contraste; si es imagen, la verificación puede fallar o ser menos fiable.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:38 6 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)

  • Si se puede conseguir la presentación visual deseada usando sólo texto y estilos, no se deben emplean imágenes para representar dicho texto

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

Recursos de apoyo

Consejos
  • 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 Manual

Procedimiento de evaluación

  1. Paso 1. Localizar las imágenes cuyo contenido es susceptible de ser transmitido mediante texto y estilos.
  2. Paso 2. Verificar que el contenido de la imagen está disponible con texto y estilos.

Resultado esperado

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

Ejemplo

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

<h2 class="titulo">Bienvenido</h2>
<p>El texto se estiliza con CSS, no se inserta como imagen.</p>

CSS: 

.titulo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

Otras herramientas de evaluación

  • Inspección del navegador: revisar el código para identificar si el contenido que parece texto es realmente una imagen (p. ej., <img>, background-image) en lugar de texto HTML.
  • Revisión visual: comprobar si el “texto” pierde nitidez al hacer zoom; las imágenes de texto suelen pixelarse mientras el texto real no.
  • Prueba de aumento: aumentar el tamaño del texto y verificar si el supuesto texto escala correctamente (las imágenes de texto normalmente no lo hacen).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar si el texto es anunciado; si es imagen, dependerá de alt y puede no ser accesible.
  • Herramientas de inspección de contraste: comprobar que el supuesto texto cumple contraste; si es imagen, la verificación puede fallar o ser menos fiable.










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