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 muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
=== '''EN DESARROLLO''' ===
{{CriterioWCAG
|id_wcag_criterio=1.4.5
|id_wcag_subcriterio=1.4.5-A
|wcag_titulo_criterio=1.4.5-A. Evitar imágenes para representar texto
|wcag_nivel=AA
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Texto
|wcag_subgrupo=Imágenes_de_texto
 
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
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=
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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C22 C22: Using CSS to control visual presentation of text]</span></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><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>
 
|wcag_recursos=
<strong> Consejos </strong>
<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=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar las imágenes cuyo contenido es susceptible de ser transmitido mediante texto y estilos.
</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que el contenido de la imagen está disponible con texto y estilos.
</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=
 
<div class="accessibility-card">
El texto se estiliza con CSS, no se inserta como imagen. <br/>
HTML:
<pre class="wcag-codigo-html">
<h2 class="titulo">Bienvenido</h2>
<p>El texto se estiliza con CSS, no se inserta como imagen.</p>
</pre>
 
CSS:
<pre class="wcag-codigo-html">
.titulo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>
 
}}

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»