{"id":2179,"date":"2020-07-20T02:45:19","date_gmt":"2020-07-20T02:45:19","guid":{"rendered":"http:\/\/cl.abstracta.us\/blog\/?p=2179"},"modified":"2021-12-21T13:17:46","modified_gmt":"2021-12-21T13:17:46","slug":"accesibilidad-web-para-disenadores","status":"publish","type":"post","link":"https:\/\/es.abstracta.us\/blog\/accesibilidad-web-para-disenadores\/","title":{"rendered":"Accesibilidad web para dise\u00f1adores"},"content":{"rendered":"\n
\"Tips
Fuente: Pixabay<\/em><\/figcaption><\/figure><\/div>\n\n\n\n

El enfoque de la accesibilidad web por lo general sucede en el desarrollo web involucrando HTML, CSS o JavaScript. La accesibilidad deber\u00eda empezar mucho antes, como parte del proceso de dise\u00f1o visual. En este art\u00edculo se destacan varios principios importantes para un dise\u00f1o de interfaz de usuario accesible<\/strong> tomando en cuenta los criterios de conformidad de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1.<\/p>\n\n\n\n

Elaborar una estructura jer\u00e1rquica para los estilos del texto<\/h2>\n\n\n\n

Cuando existe una estructura l\u00f3gica visualmente es m\u00e1s f\u00e1cil de escanear el contenido de una secci\u00f3n, imag\u00ednense est\u00e1n viendo un sitio web de noticias, lo m\u00e1s importante ah\u00ed es la atenci\u00f3n del usuario hacia lo que est\u00e1 buscando y es por esto que la jerarqu\u00eda entre el antet\u00edtulo, t\u00edtulo o subt\u00edtulo juegan un rol primordial en el dise\u00f1o.<\/p>\n\n\n\n

\"Importancia<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 2.4.6: Headings and Labels<\/a><\/p>\n\n\n\n

Disponer de un buen contraste de color<\/h2>\n\n\n\n

Es muy importante que la paleta de colores tenga un nivel alto de contraste, de esta forma nos aseguramos que el dise\u00f1o de nuestra composici\u00f3n sea legible por un rango amplio de personas. Para comprobar el contraste puedes verificarlo en Contrast Checker<\/a>.<\/p>\n\n\n\n

Si usas Sketch, Figma o Adobe XD puedes usar este plugin<\/a>; de esta forma validas el contraste sin salir de tu plataforma.<\/p>\n\n\n\n

\"Un<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 1.4.3: Contrast (Minimum)<\/a>, Criterio de conformidad 1.4.6: Contrast (Enhanced)<\/a>, Criterio de conformidad 1.4.11: Non-text Contrast<\/a><\/p>\n\n\n\n

Enlaces reconocibles<\/h2>\n\n\n\n

No debemos dejar nada al azar en el dise\u00f1o, es por eso que un enlace debe tener una connotaci\u00f3n visual prominente para que resalte en su contexto y su prop\u00f3sito debe ser descriptivo para un dise\u00f1o de interfaz de usuario accesible.<\/p>\n\n\n\n

\"Enlaces
<\/figcaption><\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 2.4.4: Link Purpose (In Context)<\/a>
Criterio de conformidad 2.4.9: Link Purpose (Link Only)<\/a><\/p>\n\n\n\n

Dise\u00f1o del estado focus<\/h2>\n\n\n\n

Puede que no se tome como algo importante, pero lo es y antes de la etapa de desarrollo es vital contar con esto adem\u00e1s de los estados hover o active. Hoy por hoy es vital la navegaci\u00f3n por tab desde el teclado y no es algo que debe quedar fuera.<\/p>\n\n\n\n

\"Dise\u00f1o<\/figure>\n\n\n\n

Referencia: Criterio de conformidad 2.4.3: Focus Order<\/a>, Criterio de conformidad 2.4.7: Focus Visible<\/a>, Criterio de conformidad 2.4.11: Focus Visible (Enhanced)<\/a><\/p>\n\n\n\n

Enlace para ir al contenido principal<\/h2>\n\n\n\n

\u00bfQu\u00e9 significa esto? Cuando un usuario navega un sitio con la tecla tabulador, en muchas ocasiones tiene que pasar por distintos elementos para llegar al contenido principal, entonces es necesario pensar y dise\u00f1ar la ubicaci\u00f3n del enlace \u201cIr al contenido principal\u201d, que com\u00fanmente se encuentra en la secci\u00f3n superior y se muestra al presionar por primera vez la tecla tabulador.<\/p>\n\n\n\n

\"Visibilidad<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 2.4.1: Bypass Blocks<\/a><\/p>\n\n\n\n

No representar contenido solo con un color<\/h2>\n\n\n\n

Es muy probable que cuando estamos dise\u00f1ando ya sea para indicar estados, categor\u00edas o cualquier secci\u00f3n que debamos diferenciarla de otra pensemos; esta forma circular ser\u00e1 de color verde para indicar que est\u00e1 ok, amarillo cuando tenga alguna alerta y rojo cuando contenga un error.<\/p>\n\n\n\n

Ning\u00fan color debe representar algo por si solo, hay muchos casos de daltonismo y los colores rojos o verdes son f\u00e1cilmente confundibles. Una buena pr\u00e1ctica ser\u00eda declarar un texto por ejemplo un estado de error que contenga el contenido del texto de color rojo, contenido m\u00e1s color.<\/p>\n\n\n\n

\"Uso<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 1.4.1: Use of Color<\/a><\/p>\n\n\n\n

Contenido para distintas resoluciones<\/h2>\n\n\n\n

Crear sitios web o incluso web apps deben tener su vista en distintas resoluciones y no solamente por moda, sino que para soportar un zoom de hasta 400%, de esta forma las personas con poca visi\u00f3n pueden acceder al contenido m\u00e1s f\u00e1cil y tenemos un dise\u00f1o de interfaz de usuario accesible.<\/p>\n\n\n\n

\"Contenido<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 1.4.10: Reflow<\/a><\/p>\n\n\n\n

Dise\u00f1o de elementos de formulario<\/h2>\n\n\n\n

Los elementos de formularios como un input text o un textarea tienen muchas variantes y formas en las que se pueden aplicar, pero hay que convenir que todas deben ser accesibles, mostrar un label y el campo, que tengan una identificaci\u00f3n clara y notoria para que se puedan ingresar datos.<\/p>\n\n\n\n

\"Tips<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 1.3.5: Identify Input Purpose<\/a>, Criterio de conformidad 2.5.3: Label in Name<\/a><\/p>\n\n\n\n

Tama\u00f1o del objetivo<\/h2>\n\n\n\n

Cualquier elemento que desencadene una acci\u00f3n debe tener un tama\u00f1o m\u00ednimo y en este caso tiene que ser de 44x44px seg\u00fan la WCAG2.1. Esto resuelve el t\u00edpico problema cuando los botones son muy peque\u00f1os y cuando est\u00e1n cerca de otros presionan el incorrecto.<\/p>\n\n\n\n

\"El<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 2.5.5: Target Size<\/a><\/p>\n\n\n\n

Interacciones animadas<\/h2>\n\n\n\n

Hoy en d\u00eda es com\u00fan ver o navegar por apps m\u00f3viles o sitios webs que tienen animaciones incluso se usa como elemento diferenciador dentro de un mercado competitivo. En este caso el usuario deber\u00eda desactivar todas las animaciones que se muestran, salvo que sea esencial para la funcionalidad o la informaci\u00f3n transmitida, por la sencilla raz\u00f3n de que algunos pueden experimentar distracci\u00f3n o n\u00e1useas del contenido animado, de esta forma tenemos un dise\u00f1o de interfaz de usuario accesible.<\/p>\n\n\n\n

\"Las<\/figure><\/div>\n\n\n\n

Referencia: Criterio de conformidad 2.3.3 Animation from Interactions<\/a><\/p>\n\n\n\n

\u00bfPor qu\u00e9 priorizar la Accesibilidad Web?<\/h2>\n\n\n\n

Es necesario que la accesibilidad web <\/strong>est\u00e9 como un requerimiento base para la creaci\u00f3n de cualquier proyecto digital: es menos costoso dise\u00f1ar un producto accesible desde su inicio y se abarca un rango mayor de personas. Todas y todos tenemos el mismo derecho de acceder a la informaci\u00f3n de una manera justa.<\/p>\n\n\n\n

\n\n\n\n

\u00bfBusca ayuda para hacer que su sitio o aplicaci\u00f3n sea accesible? Utilizando las herramientas y criterios correctos, nuestro equipo est\u00e1 a su disposici\u00f3n para evaluar este aspecto cr\u00edtico de la calidad de software.<\/p>\n\n\n\n

Conozca aqu\u00ed<\/a> m\u00e1s sobre nuestro servicio de pruebas de accesibilidad<\/strong> o agende aqu\u00ed<\/a> una consultor\u00eda gratuita y personalizada de 30 minutos con nuestros expertos. Conozca c\u00f3mo nuestros equipo de ingenieros de calidad pueden colaborar con su compa\u00f1\u00eda para lanzar al mercado sitios web y aplicaciones realmente accesibles.<\/p>\n\n\n\n

\n\n\n\n

Otros contenidos relacionados<\/h3>\n\n\n\n

Recursos clave para asegurar la accesibilidad de un sitio web<\/a><\/p>\n\n\n\n

Shift Left a11y: Haz tu aplicaci\u00f3n accesible para m\u00e1s de mil millones de usuarios<\/a><\/p>\n\n\n\n