2526UPSA2.5.8-A-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_2/2.5_Modalidades_de_los_input/2.5.8-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://arngren.net/
2.1.2. Código HTML:
<a href="http://www.arngren.net/oversetter.html">
<img src="FLAG-NORSK.icon_NO_22x14.gif" width="22" height="14" border="0" alt=""></a>
Explicación del problema detectado:
Se ha definido el elemento interactivo directamente como menor a 24x24 píxeles, y así también encontramos a la gran mayoría de elementos interactivos: no han sido definidos así por defecto por el agente de usuario, el desarrollador los ha modificado implícitamente, y no encontramos limitaciones por características esenciales del contenido que justifique el tamaño y separación de los objetos. Además, no hay un espacio razonable entre los elementos interactivos.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Los mayores afectados son personas con discapacidades motoras que pueden sufrir temblores, Parkinson, artritis o parálisis cerebral que no tienen un control milimétrico del puntero o del dedo y necesitan elementos interactivos grandes y separados, personas mayores que han perdido su destreza motora y visual, o personas con baja visión, que ven como los objetos pequeños y poco separados son prácticamente inalcanzables.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://stripe.com/es
2.2.2 Código HTML:
<button class="
SiteHeaderNavItem__link
SiteHeaderNavItem__link--hasCaret
" aria-haspopup="true" aria-expanded="true" data-js-target- list="SiteHeader.dropdownTriggers" data-testid="header-products-nav-item">
<style>
.SiteHeaderNavItem__link--hasCaret {
display: flex;
align-items: center;
-moz-column-gap: 3px;
column-gap: 3px;
}
.SiteHeaderNavItem__link, .SiteHeaderNavItem__link.Link {
--linkColor: var(--navColor);
--linkHoverColor: var(--navHoverColor);
--linkHoverOpacity: var(--navHoverOpacity);
display: block;
padding: 10px 20px;
font: var(--fontWeightBold) 15px / 1.6 var(--fontFamily);
letter-spacing: .2px;
color: var(--navColor);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
outline: none;
}
</style>
Explicación de la solución aplicada:
Todos los elementos interactivos encontrados en la cabecera de la página son accesibles ya que son mayores a las dimensiones mínimas 24x24 px (104x42.4 px en este caso) y están apropiadamente separados (3px de column-gap)
