Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.4-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Etiqueta: Revertido
Se ha deshecho la revisión 3053 de Admin (disc.)
Etiqueta: Deshacer
Línea 1: Línea 1:
{{CriterioWCAG
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_criterio=1.3.4
|id_wcag_subcriterio=1.1.1-A
|id_wcag_subcriterio=1.3.4-A
|wcag_titulo_criterio=1.1.1-A. Alternativa textual breve obligatoria
|wcag_titulo_criterio=1.3.4-A. Contenido adaptable a la orientación
|wcag_nivel=A
|wcag_nivel=AA
|wcag_version=2.0
|wcag_version=2.2
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
|wcag_pauta=1.1_Textos_alternativos
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
|wcag_grupo=Contenido
|wcag_grupo=Diseño adaptable
|wcag_subgrupo=No-texto
|wcag_subgrupo=Orientación de pantalla
 
|wcag_discapacidades=
|wcag_discapacidades=
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –  
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Discapacidad Baja Visión]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad Baja Visión|Baja visión]]</span> –  
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
</li>
Línea 32: Línea 31:


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Visual total]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Cognitiva]]
[[Categoría:Discapacidad cognitiva]]


|wcag_texto_criterioOAW =
|wcag_texto_criterioOAW =
Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual. Esto permite que los usuarios que no pueden ver los elementos visuales accedan igualmente a su significado.
El contenido no debe obligar al usuario a visualizarlo o manejarlo en una única orientación (vertical u horizontal), salvo cuando esta orientación sea indispensable para comprender o utilizar correctamente el contenido.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven. 
El sitio o aplicación debe adaptarse correctamente a cualquier orientación del dispositivo (vertical o horizontal) sin pérdida de información ni bloqueo de funciones, salvo cuando una orientación específica sea esencial para la funcionalidad.
- Imágenes informativas: texto alternativo descriptivo con `alt`. 
 
- Imágenes decorativas: `alt=""` o presentadas con CSS.
- Botones e iconos funcionales: nombre accesible claro. 
- Diagramas/mapas: descripción larga disponible junto al contenido. 


|wcag_objetivo=
|wcag_objetivo=
Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.
Garantizar que las personas con movilidad reducida o que usan dispositivos fijos puedan acceder y manejar el contenido sin necesidad de rotar el dispositivo. Este criterio mejora la accesibilidad y la experiencia de uso en todo tipo de pantallas.


|wcag_importancia=
|wcag_importancia=
Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.
Bloquear la orientación puede generar zonas invisibles o inaccesibles, pérdida de información y dificultad de interacción. Cumplir este criterio evita barreras graves para personas con movilidad limitada y mejora la adaptabilidad general del diseño web.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1: Non-text Content (W3C)]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/orientation.html Understanding Success Criterion 1.3.4: Orientation (W3C)]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>[https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php Mapa de decisión para textos alternativos adecuados]</li>
<li>[https://developer.mozilla.org/es/docs/Web/CSS/@media/orientation Guía de Mozilla sobre consultas CSS de orientación]</li>
<li>[https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión W3C para imágenes]</li>
<li>[https://www.w3.org/WAI/design-develop/mobile/ Pautas W3C sobre accesibilidad en dispositivos móviles]</li>
</ul>
</ul>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
        title="Video de ejemplo sobre alternativa textual"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
Línea 75: Línea 63:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Abrir la página web.</li>
<li><span class="paso-badge">Paso 1.</span> Abrir la página y acceder a las herramientas de desarrollo del navegador.</li>
<li><span class="paso-badge">Paso 2.</span> Activar extensión Web Developer > Images > Outline images without alt attributes.</li>
<li><span class="paso-badge">Paso 2.</span> Activar la simulación de dispositivo (por ejemplo, “Toggle device toolbar” en Chrome o “Vista de diseño adaptable” en Firefox).</li>
<li><span class="paso-badge">Paso 3.</span> Activar Images > Display alt attributes y verificar contenido del alt.</li>
<li><span class="paso-badge">Paso 3.</span> Cambiar entre orientación vertical y horizontal.</li>
<li><span class="paso-badge">Paso 4.</span> Usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.</li>
<li><span class="paso-badge">Paso 4.</span> Verificar que el contenido se visualiza correctamente y que las funciones siguen siendo operables en ambas orientaciones.</li>
<li><span class="paso-badge">Paso 5.</span> Asegurar que no existen mensajes que obliguen al usuario a girar el dispositivo ni código que bloquee la orientación.</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.
El contenido se muestra correctamente y es completamente operable tanto en orientación vertical como horizontal, sin pérdida de información ni funcionalidad.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible y no accesible comparado mediante código HTML.
Se muestra un diseño flexible que se adapta automáticamente a cualquier orientación de pantalla.
<pre class="wcag-codigo-html">
[[Archivo:1.3.4-A-Girar-dispositivo.jpg|alt=Captura que muestra el contenido en orientación vertical]]
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">
</pre>
 
<pre class="wcag-codigo-html">
<img src="imagen.jpg">
</pre>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<strong>Bookmarklet para ver texto alternativo:</strong>
Usa directamente un móvil o tablet para visualizar las dos orientaciones en el dispositivo.
<a href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();">
Ver ALT de imágenes
</a>
 
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
 
}}
}}

Revisión del 10:58 4 nov 2025

1.3.4-A. Contenido adaptable a la orientació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)

  • El contenido no debe obligar al usuario a visualizarlo o manejarlo en una única orientación (vertical u horizontal), salvo cuando esta orientación sea indispensable para comprender o utilizar correctamente el contenido.

Comprensión del criterio

Descripción resumida

El sitio o aplicación debe adaptarse correctamente a cualquier orientación del dispositivo (vertical o horizontal) sin pérdida de información ni bloqueo de funciones, salvo cuando una orientación específica sea esencial para la funcionalidad.

Objetivo

Garantizar que las personas con movilidad reducida o que usan dispositivos fijos puedan acceder y manejar el contenido sin necesidad de rotar el dispositivo. Este criterio mejora la accesibilidad y la experiencia de uso en todo tipo de pantallas.

Importancia de cumplir el criterio

Bloquear la orientación puede generar zonas invisibles o inaccesibles, pérdida de información y dificultad de interacción. Cumplir este criterio evita barreras graves para personas con movilidad limitada y mejora la adaptabilidad general del diseño web.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Abrir la página y acceder a las herramientas de desarrollo del navegador.
  2. Paso 2. Activar la simulación de dispositivo (por ejemplo, “Toggle device toolbar” en Chrome o “Vista de diseño adaptable” en Firefox).
  3. Paso 3. Cambiar entre orientación vertical y horizontal.
  4. Paso 4. Verificar que el contenido se visualiza correctamente y que las funciones siguen siendo operables en ambas orientaciones.
  5. Paso 5. Asegurar que no existen mensajes que obliguen al usuario a girar el dispositivo ni código que bloquee la orientación.

Resultado esperado

El contenido se muestra correctamente y es completamente operable tanto en orientación vertical como horizontal, sin pérdida de información ni funcionalidad.

Ejemplo

Se muestra un diseño flexible que se adapta automáticamente a cualquier orientación de pantalla. Captura que muestra el contenido en orientación vertical

Otras herramientas de evaluación

Usa directamente un móvil o tablet para visualizar las dos orientaciones en el dispositivo.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.4-A. Contenido adaptable a la orientación

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.4-A&oldid=3054»