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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.12-A. Ajustes de espaciado del texto
|wcag_titulo_criterio=1.4.12-A. Ajustes de espaciado del texto
|wcag_nivel=AA
|wcag_nivel=AA
|wcag_version=2.2
|wcag_version=2.1
|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=Espaciado
|wcag_subgrupo=Espaciado
Línea 19: Línea 19:
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Cognitiva]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
Línea 27: Línea 27:
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Si el lenguaje de marcado utilizado admite las propiedades de estilo, el texto se puede formatear de la siguiente manera sin perder contenido ni funcionalidad y sin necesidad de tocar otros estilos:
Debe permitirse un ajuste de las siguientes características del texto sin que se pierda contenido o funcionalidad:
* Ajustar el alto de la línea hasta al menos 1.5 veces el tamaño de la fuente
* Espaciar los párrafos hasta al menos el doble del tamaño de la fuente
* Ajustar el espacio entre letras hasta al menos 0.12 veces el tamaño de la fuente
* Ajustar el espaciado entre palabras hasta al menos 0.16 veces el tamaño de la fuente.


* Espacio entre líneas: ≥ 1.5 × tamaño de fuente
|wcag_descripcion_resumida=
* Espacio entre párrafos: ≥ 2 × tamaño de fuente
El contenido debe permitir que las personas aumenten interlineado, espaciado entre palabras, letras y párrafos sin que el texto se superponga, se corte o pierda funcionalidad.  
* Espacio entre letras: ≥ 0.12 × tamaño de fuente
* Espacio entre palabras: ≥ 0.16 × tamaño de fuente


|wcag_descripcion_resumida=
El diseño no debe impedir estos ajustes.
El contenido debe permitir que las personas aumenten interlineado, espaciado entre palabras, letras y párrafos sin que el texto se superponga, se corte o pierda funcionalidad. El diseño no debe impedir estos ajustes.


|wcag_objetivo=
|wcag_objetivo=
Línea 47: Línea 49:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>C36: Permitir anulación del espaciado de texto</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C36 C36: Allowing for text spacing override]</span></li>
<li>C21: Usar line-height accesible</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C35 C35: Allowing for text spacing without wrapping]</span></li>
<li>C28: Contenedores en unidades relativas (em)</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C8 C8: Using CSS letter-spacing to control spacing within a word]</span></li>
<li>F104: Fallo por texto cortado al aumentar espaciado</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C21 C21: Specifying line spacing in CSS]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C28 C28: Specifying the size of text containers using em units]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F104 F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Evitar valores fijos que impidan reflujo del texto</li>
<li>Evitar valores fijos que impidan reflujo del texto</li>
Línea 61: Línea 66:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Semiautomatica


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Uso de [https://www.html5accessibility.com/tests/tsbookmarklet.html Bookmarklet “Text spacing”]
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Aplicar el bookmarklet “Text spacing” de Steve Faulkner.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Revisar que no haya solapamiento, recortes o pérdida de funcionalidad.</li>
En la barra de marcadores del navegador, pulsar sobre el marcador <strong>“Text spacing”</strong>. 
<li><span class="paso-badge">Paso 3.</span> Verificar controles, botones, formularios y menús.</li>
El aspecto gráfico de la web deberá cambiar para aplicar ajustes de espaciado del texto que cumplen los criterios correspondientes.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Comprobar que con la nueva visualización no existen:
<ul>
<li>a. Textos cortados.</li>
<li>b. Superposiciones de textos.</li>
</ul>
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 74: Línea 90:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
<div class="accessibility-card">
<pre class="wcag-codigo-css">
El texto puede espaciarse sin romper el diseño.
<pre class="wcag-codigo-html">
body {
body {
   line-height: 1.5;
   line-height: 1.5;
Línea 83: Línea 99:
}
}
</pre>
</pre>
<p>El texto puede espaciarse sin romper el diseño.</p>
</div>
</div>


Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-css">
p { line-height: 1 !important; }
</pre>
<p>El uso de <code>!important</code> bloquea ajustes necesarios.</p>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Bookmarklet “Text spacing” (Steve Faulkner)</li>
<li>'''Prueba de espaciado''': aplicar los valores de referencia (line-height 1.5, espacio entre párrafos 2×, letter-spacing 0.12em, word-spacing 0.16em) mediante herramientas del navegador y comprobar que todo sigue siendo legible y usable.</li>
<li>DevTools del navegador</li>
<li>'''Inspección del navegador''': revisar CSS para evitar reglas que impidan el ajuste de espaciado (p. ej. <code>!important</code>, alturas fijas o contenedores que recorten texto).</li>
<li>'''Revisión visual''': verificar que al aumentar el espaciado no se produce solapamiento, recorte de texto, pérdida de elementos o necesidad de scroll horizontal excesivo.</li>
<li>'''Prueba asistiva''': (NVDA, JAWS, VoiceOver) confirmar que el contenido sigue siendo accesible al modificar el espaciado y que el foco no se pierde.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:38 6 nov 2025

1.4.12-A. Ajustes de espaciado del 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)

  • Debe permitirse un ajuste de las siguientes características del texto sin que se pierda contenido o funcionalidad:
    • Ajustar el alto de la línea hasta al menos 1.5 veces el tamaño de la fuente
    • Espaciar los párrafos hasta al menos el doble del tamaño de la fuente
    • Ajustar el espacio entre letras hasta al menos 0.12 veces el tamaño de la fuente
    • Ajustar el espaciado entre palabras hasta al menos 0.16 veces el tamaño de la fuente.

Comprensión del criterio

Descripción resumida

El contenido debe permitir que las personas aumenten interlineado, espaciado entre palabras, letras y párrafos sin que el texto se superponga, se corte o pierda funcionalidad. El diseño no debe impedir estos ajustes.

Objetivo

Facilitar la lectura y comprensión a personas con baja visión y con dificultades de procesamiento (p. ej., dislexia) permitiendo ajustar el espaciado sin romper el diseño.

Importancia de cumplir el criterio

Si el espaciado no puede modificarse o, al ajustarlo, el contenido se solapa o desaparece, la legibilidad y el uso del sitio se ven gravemente afectados.

Referencias WCAG

Recursos de apoyo

Consejos
  • Evitar valores fijos que impidan reflujo del texto
  • Usar line-height, letter-spacing, word-spacing con valores relativos
  • Definir contenedores con em para permitir crecimiento
  • Probar con herramientas automáticas

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomatica

Procedimiento de evaluación

Uso de Bookmarklet “Text spacing”
  1. Paso 1. En la barra de marcadores del navegador, pulsar sobre el marcador “Text spacing”. El aspecto gráfico de la web deberá cambiar para aplicar ajustes de espaciado del texto que cumplen los criterios correspondientes.
  2. Paso 2. Comprobar que con la nueva visualización no existen:
    • a. Textos cortados.
    • b. Superposiciones de textos.

Resultado esperado

El contenido mantiene legibilidad y funcionalidad al aplicar los valores mínimos de espaciado definidos.

Ejemplo

El texto puede espaciarse sin romper el diseño. 

body {
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

Otras herramientas de evaluación

  • Prueba de espaciado: aplicar los valores de referencia (line-height 1.5, espacio entre párrafos 2×, letter-spacing 0.12em, word-spacing 0.16em) mediante herramientas del navegador y comprobar que todo sigue siendo legible y usable.
  • Inspección del navegador: revisar CSS para evitar reglas que impidan el ajuste de espaciado (p. ej. !important, alturas fijas o contenedores que recorten texto).
  • Revisión visual: verificar que al aumentar el espaciado no se produce solapamiento, recorte de texto, pérdida de elementos o necesidad de scroll horizontal excesivo.
  • Prueba asistiva: (NVDA, JAWS, VoiceOver) confirmar que el contenido sigue siendo accesible al modificar el espaciado y que el foco no se pierde.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.12-A. Ajustes de espaciado del texto

Loading comments...




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