Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.4-A»
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
Etiqueta: Deshacer |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
== | {{CriterioWCAG | ||
|id_criterio=1.3.4-A | |||
|codigo_criterio=1.3.4-A. Contenido adaptable a la orientación | |||
|nivel=AA | |||
|version=2.2 | |||
|principio=1. Perceptible | |||
|principio_enlace=Principio_1 | |||
|pauta=1.3 Adaptable | |||
|pauta_enlace=Principio_1/1.3_Adaptable | |||
|categoria=Diseño adaptable | |||
|subcategoria=Orientación de pantalla | |||
|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> | |||
< | <li class="discapacidad-item"> | ||
[[Archivo:Visualparcial.png|20px|class=icon-discapacidad|alt=Discapacidad visual parcial]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad visual parcial|Visual parcial]]</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> | |||
|discapacidades_categorias= | |||
[[Categoría:Discapacidad motriz]] | |||
[[Categoría:Discapacidad visual parcial]] | |||
[[Categoría:Discapacidad cognitiva]] | |||
|descripcion_comprension= | |||
El contenido no debe obligar al usuario a visualizarlo o manejarlo en una orientación concreta (vertical u horizontal), salvo cuando dicha orientación sea indispensable para la funcionalidad o la comprensión del contenido. | |||
|descripcion_resumida= | |||
El sitio o aplicación debe adaptarse correctamente a cualquier orientación del dispositivo (retrato o paisaje), sin pérdida de información ni bloqueo de funciones, excepto cuando una orientación específica sea esencial. | |||
|objetivo= | |||
Garantizar que las personas con movilidad reducida, que utilizan dispositivos fijos o anclados, puedan acceder y manejar el contenido sin necesidad de girar físicamente el dispositivo. También mejora la experiencia de todos los usuarios al permitir flexibilidad y consistencia en la presentación. | |||
|importancia= | |||
Si la interfaz está bloqueada en una única orientación, puede generar zonas inaccesibles o invisibles, afectar la comprensión y hacer imposible la interacción en determinados contextos. Cumplir este criterio evita barreras graves para usuarios que no pueden rotar su dispositivo y mejora la accesibilidad general en móviles y tabletas. | |||
|referencias= | |||
<ul> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/orientation.html Understanding Success Criterion 1.3.4: Orientation (W3C)]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G214.html Technique G214 – Providing a control to switch orientation]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F97.html Failure F97 – Locking orientation]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F100.html Failure F100 – Displaying a message to rotate device]</span></li> | |||
</ul> | |||
|recursos= | |||
<ul> | |||
<li>[https://developer.mozilla.org/es/docs/Web/CSS/@media/orientation Guía de Mozilla sobre consultas de orientación CSS]</li> | |||
<li>[https://www.w3.org/WAI/design-develop/mobile/ Pautas W3C para accesibilidad en dispositivos móviles]</li> | |||
</ul> | |||
|tipo_comprobacion=Manual | |||
|procedimiento= | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> Abrir la página en un navegador con herramientas de desarrollo (Chrome, Firefox o Edge).</li> | |||
<li><span class="paso-badge">Paso 2.</span> Activar la vista de simulación de dispositivos móviles.</li> | |||
<li><span class="paso-badge">Paso 3.</span> Cambiar la orientación entre vertical y horizontal.</li> | |||
<li><span class="paso-badge">Paso 4.</span> Verificar que todo el contenido se adapta correctamente y que las funcionalidades siguen siendo operables en ambas orientaciones.</li> | |||
<li><span class="paso-badge">Paso 5.</span> Comprobar que no se muestran mensajes que obliguen a rotar el dispositivo y que no exista código CSS o JavaScript que bloquee la orientación.</li> | |||
</ol> | |||
|resultado= | |||
El contenido se muestra correctamente y es totalmente operable tanto en orientación vertical como horizontal, sin pérdida de información ni funcionalidades. | |||
|ejemplo= | |||
<div class="accessibility-card"> | |||
<p><strong>Ejemplo incorrecto:</strong> bloquear la orientación con código CSS.</p> | |||
<pre class="wcag-codigo-html"><code>@media (orientation: portrait) { | |||
body::before { | |||
content: "Gira tu dispositivo para continuar"; | |||
display: block; | |||
} | |||
}</code></pre> | |||
<p><strong>Ejemplo correcto:</strong> diseño flexible que se adapta a cualquier orientación mediante rejillas y unidades relativas.</p> | |||
<pre class="wcag-codigo-html"><code>.container { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
grid-template-areas: | |||
"header header" | |||
"main sidebar" | |||
"footer footer"; | |||
}</code></pre> | |||
</div> | |||
|otras_herramientas= | |||
<div class="wcag-info-criterio"> | |||
<ul> | |||
<li>[https://accessibilityinsights.io/ '''Accessibility Insights'''] – permite revisar la adaptabilidad y simular rotación.</li> | |||
<li>[https://developer.chrome.com/docs/devtools/device-mode/ '''Chrome DevTools – Device Mode'''] – herramienta de simulación de dispositivos y orientación.</li> | |||
<li>[https://wave.webaim.org/ '''WAVE'''] – útil para validar otras barreras relacionadas con estructura o presentación.</li> | |||
</ul> | |||
</div> | |||
}} | |||
Revisión del 12:15 29 oct 2025
{{{wcag_titulo_criterio}}}
- Nivel: {{{wcag_nivel}}}La propiedad «Wcag nivel» (como tipo de página) con el valor de entrada «{{{wcag_nivel}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.
- Versión: {{{wcag_version}}}La propiedad «Wcag version» (como tipo de página) con el valor de entrada «{{{wcag_version}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.
- Principio: [[{{{wcag_principio_url}}}|{{{wcag_principio}}}]]
- Pauta: [[{{{wcag_pauta_url}}}|{{{wcag_pauta}}}]]
- Grupo: {{{wcag_grupo}}}La propiedad «Wcag grupo» (como tipo de página) con el valor de entrada «{{{wcag_grupo}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.
- Subgrupo: {{{wcag_subgrupo}}}La propiedad «Wcag subgrupo» (como tipo de página) con el valor de entrada «{{{wcag_subgrupo}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotació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)
- {{{wcag_texto_criterioOAW}}}
{{{wcag_lista_discapacidades}}}
Comprensión del criterio
Descripción resumida
{{{wcag_descripcion_resumida}}}
Objetivo
{{{wcag_objetivo}}}
Importancia de cumplir el criterio
{{{wcag_importancia}}}
Referencias WCAG
{{{wcag_referencias}}}
Recursos de apoyo
{{{wcag_recursos}}}
Evaluación del criterio
Tipo de evaluación
Evaluación [[:Categoría:{{{wcag_tipo_evaluacion}}}|{{{wcag_tipo_evaluacion}}}]]
Procedimiento de evaluación
{{{wcag_pasos_evaluacion}}}
Resultado esperado
{{{wcag_resultado_evaluacion}}}
Ejemplo
{{{wcag_ejemplo_evaluacion}}}
Otras herramientas de evaluación
{{{wcag_otras_herramientas_evaluacion}}}
Ejemplos accesibles y no accesibles creados por alumnos
Algún uso de "" en tu consulta no se cerró con los correspondientes "".
Comentarios
A continuación se muestran comentarios sobre el criterio {{{wcag_titulo_criterio}}}
Loading comments...
[[Category:{{{wcag_principio}}}]] [[Category:{{{wcag_pauta}}}]] [[Category:{{{id_wcag_criterio}}}]]
