2526UPSA1.3.1-O-000
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-O
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.amazon.es/
2.1.2. Código HTML:
<select aria-current="true"
aria-haspopup="menu"
value="Todos los departamentos"
node="3">
<menu>
<option selected="" node="722">Todos los departamentos</option>
<option node="725">Alexa Skills</option>
<option node="728">Alimentación y bebidas</option>
<option node="731">Amazon Global Store</option>
<option node="734">Amazon Haul</option>
<option node="737">Amazon Segunda mano</option>
<option node="740">Aplicaciones y juegos</option>
<option node="743">Audible audiolibros y podcasts exclusivos</option>
<option node="746">Bebé</option>
<option node="749">Belleza</option>
<option node="752">Bricolaje y herramientas</option>
<option node="755">Cheques regalo</option>
<option node="758">Coche y Moto - Piezas y accesorios</option>
<option node="761">Deportes y aire libre</option>
<option node="764">Dispositivos de Amazon</option>
<option node="767">Electrónica</option>
<option node="770">Equipaje y accesorios de viaje</option>
<option node="773">Grandes electrodomésticos</option>
<option node="776">Handmade</option>
<option node="779">Hogar y cocina</option>
<option node="782">Iluminación</option>
<option node="785">Industria y ciencia</option>
<option node="788">Informática</option>
<option node="791">Instrumentos musicales</option>
<option node="794">Jardín</option>
<option node="797">Juguetes y juegos</option>
<option node="800">Libros</option>
<option node="803">Luxury Stores</option>
<option node="806">Menos de 10€</option>
<option node="809">Moda</option>
<option node="812">Ropa, zapatos y joyería para mujer</option>
<option node="815">Ropa, zapatos y joyería para hombre</option>
<option node="818">Ropa, zapatos y joyería para chicas</option>
<option node="821">Ropa, zapatos y joyería para chicos</option>
<option node="824">Ropa, zapatos y joyería de bebé</option>
<option node="827">Música Digital</option>
<option node="830">Música: CDs y vinilos</option>
<option node="833">Oficina y papelería</option>
<option node="836">Películas y TV</option>
<option node="839">Prime Video</option>
<option node="842">Productos para mascotas</option>
<option node="845">Salud y cuidado personal</option>
<option node="848">Software</option>
<option node="851">Suscríbete y Ahorra</option>
<option node="854">Tienda Kindle</option>
<option node="857">Videojuegos</option>
</menu>
</select>
Explicación del problema detectado:
Amazon España utiliza un selector <select> con 46 opciones de departamentos en una lista completamente plana, sin usar la etiqueta <optgroup>. Aunque hay relaciones lógicas obvias (cinco opciones sobre "Ropa": mujer, hombre, chicas, chicos, bebé), el código no refleja esta estructura semántica. Un lector de pantalla anuncia cada opción de manera lineal sin indicar que algunas pertenecen a grupos temáticos comunes, incumpliendo el criterio 1.3.1-O.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Los usuarios ciegos que usan lectores de pantalla enfrentan una barrera significativa al tener que navegar linealmente a través de 46 opciones sin contexto. Encontrar "Ropa para hombre" requiere pasar por todas las categorías sin saber cuándo comienza o termina un bloque temático, multiplicando el tiempo de búsqueda. Los usuarios con baja visión pierden orientación al hacer scroll sin separadores visuales claros entre grupos. Las personas con discapacidad cognitiva encuentran una lista de 46 elementos sin estructura jerárquica cognitivamente abrumadora, dificultando significativamente la toma de decisiones.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup
2.2.2 Código HTML:
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
Explicación de la solución aplicada:
El ejemplo de MDN Web Docs demuestra la implementación ideal del criterio WCAG 1.3.1 mediante el uso de la etiqueta <optgroup label="Theropods">. Esta etiqueta agrupa semánticamente las opciones relacionadas, permitiendo que los lectores de pantalla anuncien el nombre del grupo antes de cada opción (ej. "Theropods: Tyrannosaurus"), lo cual proporciona contexto esencial para usuarios ciegos y estructura visual clara para personas con dificultades cognitivas, evitando la desorientación de las listas planas.
Sin embargo, en la práctica es casi imposible encontrar esta implementación en webs comerciales modernas (como Amazon), ya que el elemento <select> nativo tiene limitaciones severas de diseño CSS. Las empresas priorizan la estética de marca y reemplazan estos controles nativos por componentes JavaScript personalizados (dropdowns visuales) que, lamentablemente, suelen omitir la semántica de agrupación, dejando a <optgroup> relegado casi exclusivamente a documentación técnica y formularios gubernamentales antiguos
