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 muestra una edición intermedia del mismo usuario)
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=
En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí, dichas opciones se deben agrupar mediante el elemento &lt;optgroup&gt;.
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=
|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.
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=
|wcag_objetivo=
Línea 46: Línea 39:


|wcag_importancia=
|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.
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=
|wcag_referencias=
<ul>
<ul>
<li>H85: Using OPTGROUP to group OPTION elements inside a SELECT</li>
<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>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar &lt;optgroup&gt; para organizar opciones en listas desplegables complejas</li>
<li>Usar <code><nowiki> <optgroup> </nowiki></code>  para organizar opciones en listas desplegables complejas</li>
<li>Asegurar títulos claros y concisos para cada &lt;optgroup&gt;</li>
<li>Asegurar títulos claros y concisos para cada <code><nowiki> <optgroup> </nowiki></code> </li>
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Localizar selectores con múltiples opciones</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Identificar si existen grupos lógicos de opciones</li>
Localizar los formularios existentes en la página que tienen elementos <code>&lt;select&gt;</code> con diferentes opciones relacionadas entre sí.
<li>Verificar el uso correcto de &lt;optgroup&gt;</li>
</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>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Las opciones relacionadas dentro de un elemento &lt;select&gt; están agrupadas programáticamente usando &lt;optgroup&gt;.
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=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<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">
<pre class="wcag-codigo-html">
<select>
<select>
Línea 85: Línea 83:
</select>
</select>
</pre>
</pre>
 
</div>
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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección del navegador</li>
<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>Lectores de pantalla</li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si al acceder a un formulario complejo, se indican las opciones agrupadas.</li>
</ul>
</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»