Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-O»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
__TOC__
{{CriterioWCAG
== '''1.3.1-O. Agrupar opciones''' ==
|id_wcag_criterio=1.3.1
<!-- 
|id_wcag_subcriterio=1.3.1-O
  Análisis interno:
|wcag_titulo_criterio=1.3.1-O. Agrupar opciones
  Este criterio impacta principalmente a: Personas con discapacidad visual total y motriz 
|wcag_nivel=A
  Problema grave: Si las opciones relacionadas no se agrupan con <optgroup>, los usuarios de lectores de pantalla y quienes navegan con teclado pueden confundirse sobre la relación entre las opciones. 
|wcag_version=2.2
-->
|wcag_principio=1_Perceptible
<html>
|wcag_principio_url=Principio_1
<!-- criterio 1.3.1-O -->
|wcag_pauta=1.3_Adaptable
<article class="wcag-card">
|wcag_pauta_url=Principio_1/1.3_Adaptable
  <section class="wcag-info">
|wcag_grupo=Formulario
    <ul>
|wcag_subgrupo=Agrupación de opciones
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Formulario</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Agrupación de opciones</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <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="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</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>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span></li>
</li>
    </ul>
 
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</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>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí, dichas opciones se deben agrupar mediante el elemento &lt;optgroup&gt;.
 
|wcag_descripcion_resumida=
Si dentro de un menú desplegable hay opciones que pertenecen a categorías comunes, estas deben agruparse programáticamente usando &lt;optgroup&gt;, para que las tecnologías de apoyo puedan anunciar y estructurar correctamente el contenido.
 
|wcag_objetivo=
Asegurar que la relación entre grupos de opciones de un menú desplegable pueda ser comprendida por software y transmitida a usuarios, especialmente mediante lectores de pantalla.
 
|wcag_importancia=
Sin &lt;optgroup&gt;, los usuarios de lectores de pantalla no reciben información de contexto sobre la agrupación de opciones, lo que aumenta la dificultad de encontrar y seleccionar elementos relacionados dentro de un selector con muchas opciones.
 
|wcag_referencias=
<ul>
<li>H85: Using OPTGROUP to group OPTION elements inside a SELECT</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar &lt;optgroup&gt; para organizar opciones en listas desplegables complejas</li>
<li>Asegurar títulos claros y concisos para cada &lt;optgroup&gt;</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li>Localizar selectores con múltiples opciones</li>
<li>Identificar si existen grupos lógicos de opciones</li>
<li>Verificar el uso correcto de &lt;optgroup&gt;</li>
</ol>
 
|wcag_resultado_evaluacion=
Las opciones relacionadas dentro de un elemento &lt;select&gt; están agrupadas programáticamente usando &lt;optgroup&gt;.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<select>
<optgroup label="Europa">
  <option>España</option>
  <option>Francia</option>
</optgroup>
<optgroup label="Asia">
  <option>Japón</option>
  <option>India</option>
</optgroup>
</select>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<select>
<option>España</option>
<option>Francia</option>
<option>Japón</option>
<option>India</option>
</select>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección del navegador</li>
<li>Lectores de pantalla</li>
</ul>
 
}}

Revisión del 18:36 4 nov 2025

1.3.1-O. Agrupar opciones

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)

  • En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí, dichas opciones se deben agrupar mediante el elemento <optgroup>.

Comprensión del criterio

Descripción resumida

Si dentro de un menú desplegable hay opciones que pertenecen a categorías comunes, estas deben agruparse programáticamente usando <optgroup>, para que las tecnologías de apoyo puedan anunciar y estructurar correctamente el contenido.

Objetivo

Asegurar que la relación entre grupos de opciones de un menú desplegable pueda ser comprendida por software y transmitida a usuarios, especialmente mediante lectores de pantalla.

Importancia de cumplir el criterio

Sin <optgroup>, los usuarios de lectores de pantalla no reciben información de contexto sobre la agrupación de opciones, lo que aumenta la dificultad de encontrar y seleccionar elementos relacionados dentro de un selector con muchas opciones.

Referencias WCAG

  • H85: Using OPTGROUP to group OPTION elements inside a SELECT

Recursos de apoyo

  • Usar <optgroup> para organizar opciones en listas desplegables complejas
  • Asegurar títulos claros y concisos para cada <optgroup>

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Localizar selectores con múltiples opciones
  2. Identificar si existen grupos lógicos de opciones
  3. Verificar el uso correcto de <optgroup>

Resultado esperado

Las opciones relacionadas dentro de un elemento <select> están agrupadas programáticamente usando <optgroup>.

Ejemplo

Ejemplo correcto: 
<select>
 <optgroup label="Europa">
   <option>España</option>
   <option>Francia</option>
 </optgroup>
 <optgroup label="Asia">
   <option>Japón</option>
   <option>India</option>
 </optgroup>
</select>

Ejemplo incorrecto: 

<select>
 <option>España</option>
 <option>Francia</option>
 <option>Japón</option>
 <option>India</option>
</select>

Otras herramientas de evaluación

  • Inspección del navegador
  • Lectores de pantalla










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-O. Agrupar opciones

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-O&oldid=3329»