2526UPSA1.3.1-M-001
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-M
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.dominospizza.es/crea-tu-pizza
2.1.2. Código HTML:
<div>
<span class="custom-select">
<select id="selectTamanioDet" class="tamanioMasa" name="Cantidad" onchange="Masas(); ShowHideToppingsByBaseAndTamanio(false, true);" style="disabled">
<option value="2" selected=""selected"" data-desc="Para 2 personas">Mediana</option>
<option value="3" data-desc="Para 4 personas">Familiar</option>
</select>
</span>
<small class="small-info">Para 2 personas</small>
</div>
Explicación del problema detectado:
Ausencia total de cualquier etiqueta <label> por cada control <select> existente. Atributos como "data-desc" no están soportados por los lectores de pantalla, lo que impide que anuncien el propósito del campo. Tampoco se usan atributos "for" ni ARIA, lo que limita aún más la accesibilidad.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Usuarios con discapacidades cognitivas asociadas a la visión (ceguera, baja visión) que utilizan lectores de pantalla y serían incapaces de rellenar el formulario ya que el lector es incapaz de anunciar nada, usuarios con problemas de memoria, que sin la definición de etiquetas claras, pueden olvidar el dato que están introduciendo, o usuarios que usan herramientas de dictado por voz, en donde las relaciones con los elementos del formulario no son reconocidas.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.renfe.com/es/es
2.2.2 Código HTML:
<div class="rf-input-autocomplete-alternative__wrapper-tag">
<label for="origin" class="rf-input-autocomplete-alternative__label">
<i class="rf-button__ico icon-slider-custom" aria-hidden="true"></i>
Origen
</label>
<div class="rf-input-autocomplete-alternative__wrapper">
<div class="awesomplete">
<input
id="origin"
type="text"
class="rf-input-autocomplete-alternative__input"
placeholder="Selecciona tu origen"
autocomplete="off"
role="combobox"
aria-expanded="false"
aria-owns="awesomplete_list_1"
aria-haspopup="listbox"
aria-describedby="origin_accesibility origin_error"
aria-invalid="false">
<ul hidden="" role="listbox" id="awesomplete_list_1"></ul>
</div>
<button
type="button"
id="origin_clearInput"
class="rf-input-autocomplete-alternative__close rf-ico icon-NO"
aria-label="Eliminar origen"
tabindex="-1">
</button>
<div id="origin_error" class="rf-input-autocomplete-alternative__error" aria-live="polite">
<span class="rf-input-autocomplete-alternative__txt-error">
Seleccione una estación de origen válida
</span>
</div>
<span id="origin_accesibility" class="hide-accessible" role="status" aria-live="assertive" aria-atomic="true">
Introduzca 1 o más caracteres para mostrar resultados
</span>
</div>
</div>
Explicación de la solución aplicada:
Se hace uso de etiquetas <label> con atributos "for" que describen de forma apropiada el propósito del formulario. Además, se usan también atributos ARIA, lo que refuerza la accesibilidad aún más.
