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

De WCAG Wiki
Se ha deshecho la revisión 2299 de Admin (disc.)
Etiqueta: Deshacer
Sin resumen de edición
Línea 1: Línea 1:
=== '''1.3.4-A. Contenido adaptable a la orientación''' ===
{{CriterioWCAG
<!-- 
|id_criterio=1.3.4-A
  Análisis interno:
|codigo_criterio=1.3.4-A. Contenido adaptable a la orientación
  Este criterio impacta principalmente a: Personas con discapacidad motriz y visual total 
|nivel=AA
  Problema grave: Si el contenido no se adapta a la orientación de pantalla, usuarios que usan dispositivos móviles o lectores de pantalla pueden no acceder a partes del contenido.
|version=2.2
-->
|principio=1. Perceptible
<html>
|principio_enlace=Principio_1
<!-- criterio 1.3.4-A -->
|pauta=1.3 Adaptable
<article class="wcag-card">
|pauta_enlace=Principio_1/1.3_Adaptable
  <section class="wcag-info">
|categoria=Diseño adaptable
    <ul>
|subcategoria=Orientación de pantalla
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|discapacidades=
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
<li class="discapacidad-item">
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span>
      <li><span class="label">Categoría:</span><span class="value">Presentación</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><span class="label">Subcategoría:</span><span class="value">Orientación</span></li>
</li>
    </ul>
  </section>


   <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Visualparcial.png|20px|class=icon-discapacidad|alt=Discapacidad visual parcial]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual parcial|Visual parcial]]</span> –
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera moderada</span></li>
</li>
    </ul>
 
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
</html>
  <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}}}

{{{wcag_principio}}}La propiedad «Wcag principio» (como tipo de página) con el valor de entrada «{{{wcag_principio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. {{{wcag_pauta}}}La propiedad «Wcag pauta» (como tipo de página) con el valor de entrada «{{{wcag_pauta}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.

  • 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}}}



La propiedad «Id wcag criterio» (como tipo de página) con el valor de entrada «{{{id_wcag_criterio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. La propiedad «Id wcag subcriterio» (como tipo de página) con el valor de entrada «{{{id_wcag_subcriterio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. La propiedad «Wcag titulo criterio» (como tipo de página) con el valor de entrada «{{{wcag_titulo_criterio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. La propiedad «Wcag principio» (como tipo de página) con el valor de entrada «{{{wcag_principio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. La propiedad «Wcag pauta» (como tipo de página) con el valor de entrada «{{{wcag_pauta}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación. 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. 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. 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. 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. La propiedad «Wcag tipo evaluacion» (como tipo de página) con el valor de entrada «{{{wcag_tipo_evaluacion}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.

La propiedad «TieneCriterioWCAG» (como tipo de página) con el valor de entrada «Principio_{{{wcag_principio}}}/{{{wcag_pauta}}}/{{{id_wcag_criterio}}}» contiene caracteres inválidos o está incompleto, por lo que puede causar resultados inesperados durante una consulta o proceso de anotación.

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