{"id":5105,"date":"2021-09-28T10:06:00","date_gmt":"2021-09-28T08:06:00","guid":{"rendered":"https:\/\/www.insuit.net\/?p=5105"},"modified":"2023-11-17T11:47:09","modified_gmt":"2023-11-17T10:47:09","slug":"cinco-elementos-mas-dificiles-hacer-accesibles-web","status":"publish","type":"post","link":"https:\/\/www.insuit.net\/es\/cinco-elementos-mas-dificiles-hacer-accesibles-web\/","title":{"rendered":"Los 5 elementos m\u00e1s dif\u00edciles de hacer accesibles en una web"},"content":{"rendered":"\n

Hoy queremos centrarnos en cinco elementos que suelen dar muchos problemas a los desarrolladores a la hora de hacer accesible una p\u00e1gina web<\/strong>.<\/p>\n\n\n\n

Bien sabemos que la accesibilidad web implica eliminar el m\u00e1ximo posible de barreras<\/a> que pueden existir en una p\u00e1gina web. En otros art\u00edculos, ya hemos hablado de c\u00f3mo hacer accesible un sitio web<\/a> y de cu\u00e1les son las pautas, normativas y est\u00e1ndares que se deben cumplir<\/a> para ello.<\/p>\n\n\n\n

Pero, \u00bfqu\u00e9 sucede con esas funcionalidades que suelen ser complejas<\/strong> y que por lo general suelen dar problemas cuando intentas dotarlas de accesibilidad<\/strong>?<\/p>\n\n\n\n

\u00a1En inSuit lo tenemos en cuenta! Por ello, hemos recopilado un grupo de funcionalidades<\/strong> muy complejas de hacer accesible con la finalidad de especificar qu\u00e9 hacer en estos casos.<\/strong><\/p>\n\n\n\n

Las 5 funcionalidades m\u00e1s complejas a la hora de hacer accesible tu web<\/h2>\n\n\n\n

Nos referimos al CAPTCHA, los formularios, los sliders (o carruseles), las tablas y los documentos PDFs<\/strong>. Elementos que a menudo nos encontramos en la web y que pocas veces cuentan con accesibilidad, o que en los mejores casos, la tienen mal adaptada.<\/p>\n\n\n\n

A continuaci\u00f3n, encontrar\u00e1s una lista de elementos y pautas<\/strong> con la que podr\u00e1s aplicar acciones que se traduzcan en mayor la accesibilidad web posible.<\/p>\n\n\n\n

CAPTCHAS<\/h3>\n\n\n\n

Lo primero que debes tener en cuenta, es que un CAPTCHA<\/strong> es una prueba, a nivel inform\u00e1tico, que busca responder si el usuario es humano o no.<\/strong> Con la finalidad de dar acceso a la interacci\u00f3n<\/strong> dentro de las p\u00e1ginas o aplicaciones web.<\/p>\n\n\n\n

Por ejemplo:<\/strong> darse de alta, ingresos a plataformas, compras online, comentarios, etc.<\/p>\n\n\n\n

\"Manos<\/figure>\n\n\n\n

La principal barrera que existe con estos elementos es que la misma naturaleza de la tarea interactiva excluye a muchas personas con discapacidades.<\/strong><\/p>\n\n\n\n

Lo que resulta en una denegaci\u00f3n de servicio a estos usuarios<\/strong>, haciendo que no puedan interactuar con la funcionalidad.<\/p>\n\n\n\n

Muchos CAPTCHA populares ya no son efectivos o seguros,<\/strong> por eso nuestra recomendaci\u00f3n es que puedas seguir la gu\u00eda W3C<\/a>, en la cual se proponen distintas acciones que encuentran soluciones desde las m\u00e1quinas<\/strong> y no implican a los usuarios.<\/p>\n\n\n\n

Formularios<\/h3>\n\n\n\n

Si necesitamos que nuestros usuarios se pongan en contacto con nosotros<\/strong> o requerimos de sus datos para posteriores acciones, es importante que el proceso de recopilaci\u00f3n de la informaci\u00f3n sea completamente accesible.<\/strong><\/p>\n\n\n\n

Para ello, lo m\u00e1s recomendable es que este elemento sea de f\u00e1cil acceso a trav\u00e9s del teclado. Entonces, \u00bfqu\u00e9 pr\u00e1cticas se deben poner en marcha para hacerlos accesibles?<\/strong> Dejamos una peque\u00f1a lista de sugerencias:<\/p>\n\n\n\n

    \n
  1. Aseg\u00farate de que las etiquetas <label><\/em> est\u00e9n situadas correctamente.<\/li>\n\n\n\n
  2. Los controles del formulario deben estar etiquetados de manera correcta indicando su funci\u00f3n. Por ejemplo, para el bot\u00f3n que env\u00eda el formulario podr\u00edamos utilizar la etiqueta label: <label for=”Enviar”><\/em>, o asignar un nombre accesible con la etiqueta aria-label: <button aria-label=”Enviar”><\/em>.<\/span><\/li>\n\n\n\n
  3. Ser consecuente al informar de manera sem\u00e1ntica la estructura que tienen los campos del formulario. Es importante definir de manera clara, sencilla y concreta la estructura y los campos de los formularios con la finalidad de que estos puedan ser realmente usables y accesibles.<\/li>\n\n\n\n
  4. Ser previsible. Tenemos que tener en cuenta que los controles siempre informan al sistema cuando se realiza alguna acci\u00f3n con ellos, pero no lanzan la acci\u00f3n de aviso al pulsar (clicar) en ellos, sino al soltar despu\u00e9s de clicar (lo que se denomina evento ascendente).<\/mark><\/li>\n\n\n\n
  5. Los campos obligatorios del formulario deben estar identificados correctamente.<\/li>\n\n\n\n
  6. Utilizar un control de errores en el formulario que identifique el campo err\u00f3neo, y en donde se pueda, que sugiera la forma de entrada correcta.<\/mark><\/li>\n<\/ol>\n\n\n\n

    Y tambi\u00e9n, puedes complementar con informaci\u00f3n t\u00e9cnica haciendo clic en este enlace<\/a>.<\/p>\n\n\n\n

    Sliders o carruseles<\/h3>\n\n\n\n

    Estos elementos resultan ser bastante engorrosos,<\/strong> ya que hay que pararlos para que puedan contar con los controles que permitan poder manejarlos.<\/p>\n\n\n\n

    Se debe tomar siempre en cuenta que los elementos internos tambi\u00e9n deben ser accesibles.<\/strong> Oblig\u00e1ndonos a no pasar por alto aspectos en el dise\u00f1o, que en otros componentes son m\u00e1s f\u00e1ciles de manejar, <\/strong>pero en este caso es complejo debido a que su naturaleza es de movimiento continuo.<\/p>\n\n\n\n

    \u00bfC\u00f3mo podemos hacer accesible un carrusel?<\/strong> Compartimos una lista b\u00e1sica de c\u00f3mo garantizar la accesibilidad web en los sliders o carruseles:<\/p>\n\n\n\n

      \n
    1. El carrusel debe estar contextualizado.<\/li>\n\n\n\n
    2. El usuario debe tener la opci\u00f3n de poder saltarlo.<\/li>\n\n\n\n
    3. El tiempo de duraci\u00f3n de cada escena debe ser de m\u00ednimo tres segundos. Esto con la finalidad de garantizar el acceso a la informaci\u00f3n.<\/li>\n\n\n\n
    4. Los usuarios deben tener el control para poder parar y seguir con la finalidad de digerir la informaci\u00f3n de cada escena.<\/li>\n\n\n\n
    5. Se debe contar en todo momento con una opci\u00f3n de ir a la escena anterior o escena siguiente, de manera \u00f3ptima.<\/li>\n\n\n\n
    6. El carrusel debe indicarle al usuario en qu\u00e9 n\u00famero de escena o diapositiva est\u00e1.<\/li>\n<\/ol>\n\n\n\n

      Con \u00e9stas y otras pautas t\u00e9cnicas podr\u00e1s garantizar carruseles accesibles dentro de tu p\u00e1gina web.<\/strong> Para mayor informaci\u00f3n t\u00e9cnica haz clic aqu\u00ed<\/a>.<\/p>\n\n\n\n

      Tablas<\/h3>\n\n\n\n

      Es muy importante entender que las tablas deben ser utilizadas para tratar informaci\u00f3n que sea realmente tubular<\/strong> (es decir, tabla de datos).<\/p>\n\n\n\n

      Llegado a este punto, es necesario marcar correctamente, con la informaci\u00f3n adecuada, las celdas y encabezados<\/strong> para que as\u00ed los usuarios puedan acceder desde las distintas ayudas t\u00e9cnicas.<\/p>\n\n\n\n

      Dejamos una lista que sirva como punto de control para hacer accesible cualquier tabla<\/strong> que se desee incluir en una web:<\/p>\n\n\n\n

        \n
      1. Se deben indicar los encabezados de filas y columnas.<\/li>\n\n\n\n
      2. Se debe utilizar un buen marcado para asociar celdas de datos y celdas de encabezado. Esto para que aquellas tablas que tienen dos o m\u00e1s niveles l\u00f3gicos de encabezados, de filas y de columnas.<\/li>\n\n\n\n
      3. No se deben utilizar tablas para los dise\u00f1os de las p\u00e1ginas web.<\/li>\n\n\n\n
      4. Se deben proporcionar res\u00famenes para las tablas, que pueden ser indicados con etiquetas <caption><\/em>.<\/li>\n\n\n\n
      5. Se deben proporcionar abreviaturas para las etiquetas de los encabezados.<\/li>\n<\/ol>\n\n\n\n

        Si deseas m\u00e1s informaci\u00f3n t\u00e9cnica al respecto puedes leer la pauta<\/strong> Web Accessibility Tutorials. Guidance on how to create websites that meet WCAG<\/a>.<\/p>\n\n\n\n

        Documentos en PDF (Portable Document Format)<\/h3>\n\n\n\n

        Debido a sus caracter\u00edsticas, el Portable Document Format (PDF) es hoy en d\u00eda el formato digital por preferencia<\/strong> para compartir informaci\u00f3n y documentaci\u00f3n.<\/p>\n\n\n\n

        \"Ordenador<\/figure>\n\n\n\n

        Su evoluci\u00f3n se nota a trav\u00e9s de sus distintas versiones,<\/strong> las cuales han incluido con el pasar del tiempo, etiquetas que son de vital importancia para la accesibilidad.<\/p>\n\n\n\n

        Ahora bien, \u00bfqu\u00e9 pr\u00e1cticas debo cumplir para hacer accesible un PDF?<\/strong><\/p>\n\n\n\n