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

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.1-O. Agrupar opciones
|wcag_titulo_criterio=1.3.1-O. Agrupar opciones
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 16: Línea 16:
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
<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-moderada">Barrera moderada</span>
</li>
</li>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
Línea 33: Línea 27:
|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad cognitiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=

Revisión del 05:55 5 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

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