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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.3.1-O. En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí dichas opciones se deben agrupar mediante el elemento optgroup''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-O
|wcag_titulo_criterio=1.3.1-O. Agrupar opciones
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Formulario
|wcag_subgrupo=Agrupación de opciones


'''B) EJEMPLO NO ACCESIBLE:'''
|wcag_discapacidades=
<li class="discapacidad-item">
  [[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="gravedad gravedad-leve">Barrera leve</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|wcag_texto_criterioOAW=
En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí, dichas opciones se deben agrupar mediante el elemento <code><nowiki> <optgroup> </nowiki></code>.
 
|wcag_descripcion_resumida=
Si dentro de un menú desplegable hay opciones que pertenecen a categorías comunes, estas deben agruparse programáticamente usando <code><nowiki> <optgroup> </nowiki></code>, 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 <code><nowiki> <optgroup> </nowiki></code> 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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H85 H85: Using OPTGROUP to group OPTION elements inside a SELECT]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>Usar <code><nowiki> <optgroup> </nowiki></code>  para organizar opciones en listas desplegables complejas</li>
<li>Asegurar títulos claros y concisos para cada <code><nowiki> <optgroup> </nowiki></code> </li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar los formularios existentes en la página que tienen elementos <code>&lt;select&gt;</code> con diferentes opciones relacionadas entre sí.
</li>
<li><span class="paso-badge">Paso 2.</span>
Usando la herramienta de inspección de código del navegador, verificar que las opciones se agrupan mediante <code>&lt;optgroup&gt;</code>.
</li>
</ol>
 
|wcag_resultado_evaluacion=
Las opciones relacionadas dentro de un elemento <code><nowiki> <select> </nowiki></code> están agrupadas programáticamente usando <code><nowiki> <optgroup> </nowiki></code>
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se muestra un código con <code><nowiki> <select> </nowiki></code> que permite incluir la selección y <code><nowiki> <optgroup> </nowiki></code> que muestra la lista de opciones del mismo tipo
<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>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección del navegador''': comprobar el código fuente en formularios complejos, si hay <code><nowiki> <select> </nowiki></code> y <code><nowiki> <optgroup> </nowiki></code> </li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si al acceder a un formulario complejo, se indican las opciones agrupadas.</li>
</ul>
 
}}

Revisión actual - 08:47 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

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

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

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»