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 32 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
{{CriterioWCAG
{{CriterioWCAG
|id_criterio=1.3.4-A
|id_wcag_criterio=1.3.4
|codigo_criterio=1.3.4-A
|id_wcag_subcriterio=1.3.4-A
|nivel=AA
|wcag_titulo_criterio=1.3.4-A. Contenido adaptable a la orientación
|version=WCAG 2.2
|wcag_nivel=AA
|principio=1. Perceptible
|wcag_version=2.1
|principio_enlace=https://www.w3.org/WAI/WCAG22/quickref/#perceivable
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
|wcag_grupo=Diseño adaptable
|wcag_subgrupo=Orientación de pantalla
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>


|pauta=1.3 Adaptable
<li class="discapacidad-item">
|pauta_enlace=https://www.w3.org/WAI/WCAG22/quickref/#content-structure-separation
  [[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="gravedad gravedad-moderada">Barrera moderada</span>
</li>


|categoria=Adaptabilidad del contenido
|wcag_lista_discapacidades=
|subcategoria=Orientación de pantalla y diseño responsivo
[[Categoría:Discapacidad motriz]]
|discapacidades=Visual total, Baja visión, Motriz, Cognitiva
[[Categoría:Discapacidad baja visión]]
|discapacidades_categorias=Visual, Motriz, Cognitiva
|descripcion_comprension=El criterio <b>1.3.4 Orientación</b> garantiza que el contenido y las funcionalidades sean accesibles sin importar si el dispositivo se usa en modo vertical (retrato) u horizontal (paisaje).
El contenido no debe bloquear o restringir la orientación, salvo cuando una posición específica sea esencial para el propósito o uso del contenido.
Por ejemplo, una cámara fotográfica requiere orientación horizontal para simular el uso de una cámara real, lo cual es una excepción válida.
|descripcion_resumida=El contenido debe ser visible y operable tanto en orientación vertical como horizontal, salvo si una orientación específica es esencial.
|objetivo=Permitir que todas las personas, independientemente de sus limitaciones físicas o preferencias, puedan acceder, leer y usar el contenido en la orientación de pantalla que les resulte más cómoda o funcional.
|importancia=Algunas personas con movilidad reducida o dispositivos fijos no pueden girar la pantalla. Si una web o aplicación bloquea una orientación, se les impide acceder al contenido completo. La adaptabilidad a ambas orientaciones mejora la experiencia de uso para todas las personas, especialmente en móviles y tabletas.
|referencias=
• <a href="https://www.w3.org/WAI/WCAG22/Understanding/orientation.html" target="_blank">W3C: Understanding Success Criterion 1.3.4 Orientation</a>
• <a href="https://www.w3.org/WAI/WCAG22/Techniques/general/G213.html" target="_blank">Técnica G213: Asegurar que el contenido sea operable en ambas orientaciones</a>
• <a href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F97.html" target="_blank">F97: Fallo por bloquear la orientación de la pantalla</a>
• Revilla, O. y Carreras, O. (2024). <i>Accesibilidad Web. WCAG 2.2 de forma sencilla.</i> Itákora Press.
|recursos=
• <a href="https://developer.mozilla.org/es/docs/Web/CSS/@media/orientation" target="_blank">MDN Web Docs: Media Queries Orientation</a>
• <a href="https://webaim.org/articles/mobile/" target="_blank">WebAIM: Mobile Accessibility</a>
• <a href="https://accessibility.digital.gov/" target="_blank">US Digital Service: Mobile Accessibility Guidelines</a>
|tipo_comprobacion=Manual y técnica
|procedimiento=


Acceder al sitio o aplicación desde un dispositivo móvil o emulador.
|wcag_texto_criterioOAW =
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.


Cambiar entre orientación vertical y horizontal.
|wcag_descripcion_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.


Verificar que no se bloquea ninguna orientación mediante mensajes o scripts.


Comprobar que el contenido sigue visible y operable (sin recortes, superposiciones o desplazamientos ocultos).
|wcag_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.
 
|wcag_importancia=
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=
 
<ul>
<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>
 
|wcag_recursos=
<ul>
<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/design-develop/mobile/ Pautas W3C sobre accesibilidad en dispositivos móviles]</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Usando la herramienta de inspección de código del navegador:
<ul>
<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>
 
|wcag_resultado_evaluacion=
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=
Se muestra un diseño flexible que se adapta automáticamente a cualquier orientación de pantalla.
[[Archivo:1.3.4-A-Girar-dispositivo.jpg|alt=Captura que muestra el contenido en orientación vertical]]
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>
<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>
<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>
</ul>


Revisar el CSS y JavaScript para asegurar que no se fuerce una orientación fija (orientation: portrait o screen.lockOrientation()).
|resultado=El contenido cumple si puede visualizarse y operarse correctamente en ambas orientaciones, o si una orientación fija está justificada por razones esenciales del diseño o funcionalidad.
|ejemplo=<b>Ejemplo correcto:</b> Un formulario web que se muestra correctamente tanto en modo vertical como horizontal.
<b>Ejemplo incorrecto:</b> Una aplicación educativa que bloquea la rotación mostrando el mensaje “Disponible solo en modo retrato”.
<b>Excepción válida:</b> Un teclado virtual o una aplicación de dibujo que necesita una orientación concreta para funcionar correctamente.
|otras_herramientas=
• Herramientas de desarrollo de navegadores (modo dispositivo en Chrome o Firefox).
• Simuladores de accesibilidad móvil (TalkBack, VoiceOver).
• Validadores CSS y pruebas de diseño responsivo (BrowserStack, ResponsivelyApp).
}}
}}
<div class="impacto-discapacidades"> <h3>♿ Impacto por discapacidad</h3> <p><img src="Sinvision.png" alt="Discapacidad visual total" /> <b>Discapacidad visual total:</b> Barrera moderada. El bloqueo de orientación puede interferir con lectores de pantalla móviles si el sistema cambia el flujo de lectura o los elementos interactivos no se adaptan correctamente.</p> <p><img src="Bajavision.png" alt="Baja visión" /> <b>Baja visión:</b> Barrera grave. Las personas con baja visión necesitan ajustar el zoom y la orientación para mejorar la legibilidad. Un bloqueo de orientación puede impedir el acceso al contenido o provocar desplazamientos horizontales excesivos.</p> <p><img src="Motriz.png" alt="Discapacidad motriz" /> <b>Discapacidad motriz:</b> Barrera grave. Quienes no pueden girar físicamente el dispositivo (por estar fijado en una posición o usar soportes) no podrían acceder al contenido si la aplicación exige una orientación determinada.</p> <p><img src="Cognitiva.png" alt="Discapacidad cognitiva" /> <b>Discapacidad cognitiva:</b> Barrera leve. Los cambios de orientación no controlados o el bloqueo pueden causar desorientación o frustración, aunque el impacto suele ser menor si el diseño mantiene coherencia visual.</p> <p><img src="Auditiva.png" alt="Discapacidad auditiva" /> <b>Discapacidad auditiva:</b> Barrera leve o nula. Este criterio no afecta directamente al acceso auditivo, salvo en casos donde la orientación o el bloqueo impidan ver los subtítulos o controles multimedia.</p> </div> <!-- Análisis: El incumplimiento del criterio 1.3.4-A afecta principalmente a las personas con discapacidad motriz y baja visión. Las personas con movilidad reducida pueden depender de un soporte fijo que impida rotar el dispositivo, mientras que las personas con baja visión ajustan la orientación para mejorar la lectura. Por ello, la gravedad es clasificada como “grave” para estos grupos, “moderada” para personas ciegas (por posibles incompatibilidades con lectores de pantalla) y “leve” para las demás discapacidades. -->

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»