Principio 1/1.3 Adaptable/1.3.1-O

De WCAG Wiki
< Principio 1‎ | 1.3 Adaptable
Revisión del 08:47 5 nov 2025 de Admin (discusión | contribs.)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)

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

Recursos de apoyo

Consejos
  • 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 Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los formularios existentes en la página que tienen elementos <select> con diferentes opciones relacionadas entre sí.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, verificar que las opciones se agrupan mediante <optgroup>.

Resultado esperado

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

Ejemplo ilustrativo

Se muestra un código con <select> que permite incluir la selección y <optgroup> que muestra la lista de opciones del mismo tipo 

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


Otras herramientas de evaluación

  • Inspección del navegador: comprobar el código fuente en formularios complejos, si hay <select> y <optgroup>
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al acceder a un formulario complejo, se indican las opciones agrupadas.










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

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=3415»