Podemos lla­mar a los botones y enlaces de nues­tras solu­ciones dig­i­tales como nue­stro ele­men­to obje­ti­vo. El obje­ti­vo puede ser nave­g­ar para con­sumir infor­ma­ción, gener­ar leads o accionar una com­pra. Nece­si­ta­mos que nue­stros usuar­ios puedan acced­er a ellos con facil­i­dad, ya sea en pan­tallas tác­tiles como con el pun­tero del ratón, por ello el tamaño debe ser el ade­cua­do para pon­er el obje­ti­vo al alcance del usuario.

Bien sea por prob­le­mas motri­ces o por el tamaño de los dedos de los usuar­ios hay que ten­er en siem­pre cuen­ta el área acti­va mín­i­ma a la hora de dis­eñar nues­tras pan­tallas. El Cri­te­rio ‘2.5.5 — Tamaño del obje­ti­vo’ de las WCAG 2.1 nos recomien­da que el tamaño o área pulsable de nue­stros botones debe ser de 44px. Aunque el cri­te­rio nos acon­se­je este tamaño debe­mos ten­er en cuen­ta que si es may­or facil­i­tará el acce­so de los obje­tivos y es acon­se­jable ten­er espe­cial cuida­do en los sigu­ientes casos:

• Cuan­do el resul­ta­do de la inter­ac­ción no se pue­da deshac­er con facil­i­dad.
• En el caso de el obje­ti­vo sea de difí­cil acce­so para el usuario, por ejem­p­lo en los bor­des de las pan­tallas.
• En los con­troles de las tar­eas secuen­ciales, por ejem­p­lo los con­troles ‘seg­men­ta­dos’ o pasos de un pro­ce­so.

Ima­gen área inter­ac­ti­va

Ejer­ci­cios respon­sive

Hay que ten­er espe­cial cuida­do cuan­do esta­mos hacien­do ejer­ci­cios de respon­sive, no es lo mis­mo con­tar con botones dis­tribui­dos hor­i­zon­tal­mente que cuan­do los repar­ti­mos de for­ma ver­ti­cal donde depen­demos del scroll, el acce­so se hace más difí­cil. En el caso de los hiper­vín­cu­los debe­mos ase­gu­rarnos que haya una línea de tex­to de sep­a­ración entre los links para que el dedo ten­ga sufi­ciente espa­cio para poder selec­cionar entre un link u otro.

Ima­gen bue­nas prác­ti­cas botones

Usuar­ios a los que ben­e­fi­ci­amos espe­cial­mente:

• Usuar­ios con prob­le­mas motri­ces.
• Usuar­ios con tem­blores.
• Entornos donde haya movimien­tos por ejem­p­lo trans­porte públi­co
• Los usuar­ios con dedos grandes, donde sólo oper­an con el dis­pos­i­ti­vo con solo una parte del dedo.
• Usuar­ios con baja visión podrán ver mejor el obje­ti­vo

Fuentes

https://www.w3.org/TR/WCAG21/ https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

https://material.io/design/usability/accessibility.html#color-and-contrast  

[ssba-but­tons]