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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Etiqueta: Revertido
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
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.1
|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 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-leve">Barrera leve</span>
</li>
</li>


|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]]


|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.
No deben existir zonas con las que no se pueda operar o que no se muestren en cualquiera de las configuraciones de orientación del dispositivo.


|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/Techniques/general/G214 G214: Using a control to allow access to content in different orientations which is otherwise restricted]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F97 F97: Failure due to locking the orientation to landscape or portrait view]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F100 F100: Failure due to showing a message asking users to reorient the device]</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>  
<li><span class="paso-badge">Paso 2.</span> Activar extensión Web Developer > Images > Outline images without alt attributes.</li>
Usando la herramienta de inspección de código del navegador:
<li><span class="paso-badge">Paso 3.</span> Activar Images > Display alt attributes y verificar contenido del alt.</li>
<ul>
<li><span class="paso-badge">Paso 4.</span> Usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.</li>
<li>a. En Chrome, pulsar el botón <strong>“Toggle device toolbar”</strong> en la parte superior izquierda.</li>
<li>b. En Firefox, pulsar el botón <strong>“Vista de diseño adaptable”</strong> en la parte superior derecha.</li>
</ul>
</li>
 
<li><span class="paso-badge">Paso 2.</span>  
En la ventana donde se visualiza la página, utilizar los controles superiores para modificar la resolución y simular distintos dispositivos. 
Si se pulsa el icono de cambio de orientación, se alterna entre vista horizontal y vertical.
<br><small>Nota: Otra forma de modificar la resolución es pulsando y arrastrando sobre las franjas grises que aparecen en la parte derecha y en la parte inferior.</small>
</li>
 
<li><span class="paso-badge">Paso 3.</span>  
Una vez realizados los pasos anteriores, debe comprobarse que se pueden visualizar todas las funcionalidades tanto en horizontal como en vertical.
</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>
<ul>
<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);});})();">
<li>'''Inspección del navegador''': comprobar en el código la ausencia de restricciones explícitas de orientación (por ejemplo, <code>orientation: portrait-only</code> o bloqueos vía JavaScript).</li>
Ver ALT de imágenes
<li>'''Simulación de orientación''': usar herramientas del navegador o dispositivo móvil para rotar la pantalla y verificar que todo el contenido y controles siguen siendo visibles y operables en vertical y horizontal.</li>
</a>
<li>'''Lectores de pantalla en móvil''': (VoiceOver, TalkBack) probar la navegación tras cambiar la orientación para asegurar que no se pierde foco ni accesibilidad a controles.</li>
 
<li>'''Prueba sin CSS/zoom''': validar que el contenido sigue siendo accesible sin problemas de desbordamiento o elementos inaccesibles al cambiar orientación y/o hacer zoom.</li>
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
</ul>


}}
}}

Revisión actual - 09:34 5 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)

  • No deben existir zonas con las que no se pueda operar o que no se muestren en cualquiera de las configuraciones de orientación del dispositivo.

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. Usando la herramienta de inspección de código del navegador:
    • a. En Chrome, pulsar el botón “Toggle device toolbar” en la parte superior izquierda.
    • b. En Firefox, pulsar el botón “Vista de diseño adaptable” en la parte superior derecha.
  2. Paso 2. En la ventana donde se visualiza la página, utilizar los controles superiores para modificar la resolución y simular distintos dispositivos. Si se pulsa el icono de cambio de orientación, se alterna entre vista horizontal y vertical.
    Nota: Otra forma de modificar la resolución es pulsando y arrastrando sobre las franjas grises que aparecen en la parte derecha y en la parte inferior.
  3. Paso 3. Una vez realizados los pasos anteriores, debe comprobarse que se pueden visualizar todas las funcionalidades tanto en horizontal como en vertical.

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

  • Inspección del navegador: comprobar en el código la ausencia de restricciones explícitas de orientación (por ejemplo, orientation: portrait-only o bloqueos vía JavaScript).
  • Simulación de orientación: usar herramientas del navegador o dispositivo móvil para rotar la pantalla y verificar que todo el contenido y controles siguen siendo visibles y operables en vertical y horizontal.
  • Lectores de pantalla en móvil: (VoiceOver, TalkBack) probar la navegación tras cambiar la orientación para asegurar que no se pierde foco ni accesibilidad a controles.
  • Prueba sin CSS/zoom: validar que el contenido sigue siendo accesible sin problemas de desbordamiento o elementos inaccesibles al cambiar orientación y/o hacer zoom.










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