Accesibilidad
A medida que los sitios web siguen siendo cada vez más importantes para las empresas, garantizar que el contenido en los sitios web sea accesible para todos los visitantes se ha vuelto más vital que nunca. En los Estados Unidos, esto a menudo se denomina cumplimiento de la sección 508, que se refiere a la sección de la Ley de Rehabilitación Reautorizada de 1998 que requiere que las agencias federales hagan que la tecnología electrónica y de la información sea accesible para las personas con discapacidades. Si bien el cumplimiento de la sección 508 es una buena base de referencia, cada vez más las Directrices de Accesibilidad para el Contenido Web (WCAG) se están utilizando como el estándar para crear contenido accesible en la web.
El aspecto legal no debería ser tu motivador para proporcionar una buena experiencia a tus usuarios. Uno de cada cuatro estadounidenses tiene una discapacidad según los CDC. Elegir no proporcionar una buena experiencia para el 25% de los visitantes es como una tienda física que niega la entrada a cada cuarto visitante. Esos clientes no solo estarán descontentos, sino que probablemente no volverán ni recomendarán tus servicios.
Una frase común entre los desarrolladores es que "la accesibilidad no es una característica". La idea es no tratar la accesibilidad como una cosa adicional para agregar, o algo con lo que lidiar al final de un proyecto.
La accesibilidad requiere pensamiento, empatía y comprensión. Cuando se aborda al principio de un proyecto, puedes diseñar y desarrollar soluciones en lugar de tener que volver a diseñar algo más tarde.
A menudo, la resolución de la accesibilidad se resuelve para tus otras prioridades como desarrollador, la experiencia de usuario, el rendimiento y el SEO son algunas de las principales preocupaciones que están directamente relacionadas con la accesibilidad. Mejorar una a menudo mejora la otra.
La empatía es una gran parte de la accesibilidad que es fácil de pasar por alto. Como desarrolladores queremos automatizar todo, si algo es difícil o lleva mucho tiempo, queremos que las herramientas lo hagan por nosotros o nos digan la forma correcta de hacerlo. Desafortunadamente, estas herramientas solo pueden tocar la superficie, porque no son seres humanos, no pueden realmente experimentar la página de la manera en que un humano puede. Es técnicamente posible crear una página web que pase la mayoría de las pruebas de accesibilidad automatizadas con gran éxito, pero que sea completamente inutilizable para todos los humanos, videntes, ciegos, sordos, daltónicos, con funciones motoras limitadas o ilimitadas. Técnicamente, puedes cumplir con los requisitos, pero proporcionas una experiencia frustrante e inútil que aliena completamente a las personas. La conclusión es la siguiente: no te fíes de las herramientas, prueba tu trabajo, empatiza con tus usuarios, recopila comentarios.
Aunque no es una guía definitiva, aquí hay algunos pasos que puedes tomar para que tu contenido sea accesible, así como recursos para profundizar.
Todas las imágenes, iconos, videos y botones que transmiten significado o son interactivos deben tener una alternativa de texto. Esto no solo es bueno para los visitantes que están consumiendo tu contenido a través de un lector de pantalla, sino que también es genial para los motores de búsqueda. El texto alternativo debe describir el contenido de la imagen. Es probable que la mayoría de las imágenes de tu sitio se puedan editar en el editor de páginas, por lo que es fácil configurar texto alternativo en el editor de páginas. Sin embargo, dentro de los módulos y plantillas personalizados, debes asegurarte de que se respete el texto alternativo especificado en los editores de páginas.
Esto significa asegurarse de que si tienes un elemento <img> que el texto alternativo que el usuario proporciona se utiliza realmente.
Si por alguna razón no estás haciendo una imagen editable en el editor de páginas, debes codificar el texto alternativo.
Hay una excepción a esta regla de texto alternativo. Si tu imagen no proporciona ningún contexto adicional y es puramente de presentación, es mejor tener un valor de texto alternativo "nulo" que ir sin un atributo alt por completo.
La carga diferida de imágenes es una técnica común de mejora del rendimiento para la construcción de sitios web. El método utilizado para la carga realmente diferida importa para la accesibilidad.
Las soluciones de JavaScript para esto generalmente se basan en el atributo src de las imágenes para ser algo falso (como un pequeño archivo .gif) en lugar de la verdadera fuente de la imagen, que se mantiene en un atributo data-src hasta que el usuario desplaza la imagen cerca de la vista. Esto significa que inicialmente la imagen es inaccesible para un usuario de lector de pantalla que está navegando por la página, especialmente uno que usa un rotor para ver todo el contenido de la página sin siquiera desplazarse. Además, si JavaScript no se carga en una página, estas soluciones de carga diferida fallarán y, por lo tanto, dejarán a los usuarios de tecnología de asistencia sin las imágenes adecuadas en la página.
El uso de la carga diferida de imágenes nativas evita este problema, manteniendo el marcado de la imagen igual, independientemente de si se carga JavaScript.
HubSpot admite la carga diferida basada en el navegador en módulos personalizados. Se recomienda su uso.
Los enlaces, botones y elementos del formulario deben tener un texto real que indique qué hace o adónde va. De lo contrario, los lectores de pantalla leerán que el usuario tiene un enlace o botón seleccionado, pero no tendrán idea de lo que hace.
Si utilizas un icono, proporciona el texto del lector de pantalla. Por ejemplo, algunas plantillas estándar de HubSpot utilizan un código corto de icono:
No uses 'display: none' para ocultar etiquetas de formulario y otro texto descriptivo. Esto evita que el texto se lea en voz alta para aquellos con dificultades para ver, además de perjudicar a los usuarios que pueden ver pero tienen problemas para ver el texto debido a la falta de contraste en el texto del marcador de posición. Sin mencionar, quién no ha comenzado a completar un formulario o que ha tenido un formulario que se rellena automáticamente para ellos, pero no tenía idea de si se introdujo correctamente porque las etiquetas de los campos del formulario eran invisibles.
Si es absolutamente necesario tener texto oculto o el texto oculto podría proporcionar un contexto adicional que un usuario vidente no necesitaría. Utiliza CSS que hace que el texto sea invisible sin esconderlo de los lectores de pantalla o agrega la clase '.screen-reader-text'.
Cuando un visitante está navegando usando un lector de pantalla, o simplemente usando su teclado, es muy útil si hay una manera de saltar sobre las partes de la página que se repiten, como un encabezado. Podemos hacerlo agregando un enlace que apunte al contenido principal de la página.
En el encabezado, agrega HTML con el siguiente contenido:
Luego, en cada plantilla asegúrate de que hay un elemento con un atributo ID de contenido. En nuestro ejemplo, usamos el título del artículo como el texto al cual saltar. Esto permite a los motores de búsqueda comprender a qué se vincula. Es una forma más semántica de saltar al contenido.
El marcado semántico es HTML que transmite significado. Algunos ejemplos de elementos que son semánticos son <header>, <main>, <footer>, <nav>, <time>, <code>, <aside> y <article>.
Algunos ejemplos de elementos que no son semánticos son <div> y <span>. Los elementos no semánticos todavía tienen su lugar, pero deben usarse principalmente para la presentación y no para transmitir significado.
Los elementos semánticos pueden ser entendidos por los motores de búsqueda y las tecnologías de asistencia, afectando positivamente el SEO y mejorando tu experiencia de usuario.
No uses elementos como elementos <div> interactivos, como botones, pestañas o enlaces, a menos que estés seguro de que has proporcionado una buena experiencia a través de los atributos de aria.
Utiliza los enlaces (<a />) y <button /> apropiadamente.
Usa enlaces para enlazar a secciones de una página y navegar a otras páginas.
Usa botones para interacciones que no resulten en salir de la página o navegar a un ID.
Cuando trabajas con tablas, si una tabla tiene un título descriptivo, inclúyela en un elemento <caption> justo después del elemento <table>.
Utiliza elementos <th> con el atributo de ámbito adecuado en las tablas para los encabezados de columna y fila y <thead>, <tbody> y <tfoot> para denotar secciones.
Utiliza el atributo de alcance en los atributos <th> para indicar si el encabezado es para la fila o la columna.
¿Necesitas un acordeón? No te olvides de los elementos <summary> y <details> y que te dan la mayor parte de esta funcionalidad de forma gratuita, y es accesible. Asegúrate de agregar un polyfill o un respaldo si necesitas admitir navegadores antiguos.
Algunos usuarios utilizan su teclado para navegar por páginas web y formularios de preferencia. Algunos visitantes deben usar el teclado o algún tipo de dispositivo de asistencia que emula un teclado para navegar por los sitios web.
- Asegúrate de que ':focus' esté diseñado para que cuando un usuario esté navegando a través del teclado pueda ver lo que está enfocado. Solo deshabilita la propiedad de esquema CSS si proporcionas un indicador visual alternativo aceptable. Usa :focus-within si puede ayudar a dirigir la atención de los usuarios de manera útil.
- Al ocultar o mostrar partes de la página con ':hover' o a través de Javascript, asegúrate de que los usuarios también puedan navegar por esos controles a través de Javascript o que haya una ruta alternativa a la información.
- Asegúrate de que la navegación principal de tu sitio sea compatible con la navegación por teclado. Un problema que comúnmente se pasa por alto es que los menús desplegables y los controles flotantes no son accesibles. Esto evita que los usuarios lleguen a partes de sitios web que pueden ser fundamentales.
- Proporciona y actualiza atributos de estado
hidden,aria-expanded,aria-current,aria-selected, y otros según sea necesario para garantizar que los lectores de pantalla comuniquen correctamente el estado de los elementos.
Al crear plantillas o archivos codificados, debes usar los elementos semánticos correctos (<header>, <main>, <footer>, <nav>, <dialog>, etc.) para comunicar a los navegadores web y lectores de pantalla qué tipo de contenido hay dentro de tus elementos.
En los elementos semánticos fuera de la posibilidad no son apropiados para tu escenario debes agregar atributos role.
Agregar puntos de referencia hace que sea más fácil para los usuarios que usan lectores de pantalla saltar entre las secciones principales de una página web. HubSpot incluye atributos 'role' para el menú, menú simple y módulos de búsqueda de Google.
- Asegúrate de que cuando un usuario amplía su navegador al 200%, el contenido permanezca visible y legible.
- No se recomienda hacer fuentes mucho más pequeñas que 16px, ya que puede ser difícil de leer para los visitantes.
- Evita el uso del color como única forma de comunicar la información. Un porcentaje sorprendente de la población mundial es daltónico.
- Asegúrate de que haya suficiente contraste entre el color del texto y el fondo para que los usuarios con visión limitada puedan leer el contenido.
- Evita las animaciones que parpadean rápidamente (más de tres veces por segundo), ya que podrían desencadenar convulsiones en algunos visitantes.
- Considera admitir preferers-reduced-motion si tienes animaciones en tu sitio.
- Hoy en día, la creación de un sitio web adaptable se considera una necesidad. Asegúrate de que todos los elementos interactivos funcionen como se espera en el móvil. Los elementos interactivos deben ser fáciles de tocar y debe haber mucho espacio entre las regiones de toque.
Una cosa fácil de olvidar es que la accesibilidad también debe considerarse en tu contenido de texto.
- Evita el lenguaje direccional "ver barra lateral a la izquierda". Si el usuario está en el móvil, es probable que esto no tenga sentido para él, ya que el contenido generalmente se acumula en el dispositivo móvil.
- Usa encabezados como
<h1><h2>etc. y anídalos de manera consecutiva. No omitas un encabezado para obtener un efecto visual. - Al agregar un enlace, nunca hagas que el texto del enlace sea «Haz clic aquí», no transmite ningún significado a los lectores de pantalla, no tiene ningún sentido en las pantallas táctiles u otros tipos de dispositivos. En cambio, tu texto debe indicar qué hay en ese enlace. Esto también es mejor para el SEO, porque los motores de búsqueda entienden a qué se vincula.
- Asegúrate de que si usas cualquier estilo especial en el texto para transmitir significado, estás usando la etiqueta semántica apropiada,
<mark><strong><em><sup>etc., de lo contrario tu significado puede perderse para algunos visitantes. - Si te diriges a visitantes de todo el mundo, evita los chistes que son específicos de la región. Si tienes tu sitio traducido, evita los juegos de palabras. Por mucho que amemos una buena broma de papá, a menudo no se traducen bien.
- Utiliza herramientas para mejorar tu gramática y ortografía. Esto ayuda a la comprensión y da como resultado mejores traducciones.
- Escribe tu contenido de una manera que se adapte a la audiencia de tu sitio. No le explicarías astrofísica a un estudiante de 5to grado, al igual que lo harías con un físico consumado. Dicho esto, evita las palabras elegantes solo por el hecho de usarlas, simple es mejor.
La mayor parte del trabajo para mejorar la accesibilidad no es específico de HubSpot. Dicho esto, queremos prepararte para el éxito en HubSpot y hay algunas cosas que puedes hacer como desarrollador o creador de contenido para proporcionar una mejor experiencia a los usuarios.
Ya sea que estés instalando un módulo o plantilla del mercado, desarrollándolos o haciéndolos construir para ti, una de las mejores cosas que puedes hacer es asegurarte de que sigan las mejores prácticas. Los módulos personalizados pueden tener el mayor impacto en la accesibilidad de tu sitio porque a menudo se usan muchas veces, a veces incluso en la misma página. Del mismo modo, una sola plantilla se puede utilizar cientos o miles de veces en un solo sitio. Si tu sitio no es accesible, es probable que estés reduciendo tus ganancias. Al igual que con la publicidad, naturalmente tiene sentido pagar un poco más para asegurarte de que tu sitio web llegue a una audiencia más amplia. Uno de los beneficios de los módulos es que a menudo puedes mejorar el código más tarde a medida que evolucionan las pautas y las mejores prácticas, mejorando la accesibilidad para cada página en la que vive el módulo a la vez.
En el mercado de HubSpot, busca módulos y plantillas que hablen sobre accesibilidad y cumplan con los requisitos de WCAG en sus descripciones. Si estás trabajando con un desarrollador, dile desde el principio que la accesibilidad es importante para ti. No todos los desarrolladores construyen con a11y en mente desde el principio. Decírselo al final de un proyecto probablemente te costará más que decirle desde el principio porque en lugar de priorizarlo desde el principio, ahora necesita solucionar problemas de accesibilidad de forma retroactiva.
Si eres desarrollador, crea módulos y plantillas que faciliten el cumplimiento de las directrices de a11y para los creadores de contenido. Usa encabezados apropiados, HTML semántico, haz que los elementos interactivos proporcionen roles y contexto adecuados. Los creadores de contenido que conocen los problemas de accesibilidad generalmente están encantados de pagar un poco más por los módulos y plantillas que son inclusivos, dicho esto, debes demostrar que tus módulos tienen en cuenta la accesibilidad. Incluye enlaces en plantillas, haz que los grupos globales y los parciales globales utilizados en tus plantillas sean amigables, estos se utilizan en todo un sitio web y pueden tener el mayor impacto en la usabilidad de un sitio.
Si creas para el mercado de HubSpot, debes saber que tu contenido podría usarse en miles, incluso millones de páginas en la web. Tú tomas una decisión que afecta a las personas al publicar tu contenido y compartir tu trabajo, independientemente de que tu trabajo sea inclusivo o no.
Hay docenas de herramientas que hacen afirmaciones como "Solo agrega nuestro script a tu sitio web y tu sitio será accesible".
Algunas de estas herramientas intentarán dar sentido a partes de la página y cambiar el html y los atributos para intentar solucionar algunos problemas. Dicho esto, están adivinando, y pueden estar equivocadas o podrían romper la funcionalidad en tu sitio o empeorar las cosas para los usuarios.
Es posible que estas herramientas no siempre funcionen como se esperaba, a veces suministrando su propio sistema de lectura de pantalla. Si tienes una interfaz de usuario complicada, tu sitio web puede llegar a ser más difícil de operar a través de la herramienta inyectada.
Debido a estos problemas, las herramientas como esta no son un sustituto para construir tu sitio con la accesibilidad en mente. Invierte tiempo y dinero para proporcionar la mejor experiencia para todos tus usuarios. Confiar en soluciones integrales podría costarte lo mismo o más que simplemente construir las cosas de la manera correcta. Al probar y construir con la accesibilidad en mente, también obtendrás el beneficio de la empatía y la comprensión de tus clientes.
Para ser claros, esto no se refiere a las herramientas de prueba, específicamente esto se refiere a las herramientas que afirman resolver problemas de accesibilidad para ti. Las herramientas de prueba en sí son geniales y deberías usarlas, además de las pruebas manuales.
Más información sobre scripts/superposiciones de accesibilidad.
Existen algunos recursos realmente excelentes para crear sitios web accesibles. Recomendamos encarecidamente que les eches un vistazo.
- The A11Y Project
- Documentos de accesibilidad de MDN
- Iniciativa de Accesibilidad Web
- WebAIM
- Lista de verificación WCAG 2 simplificada
- Lista de verificación de la sección 508
- Recomendaciones detalladas de WCAG 2.2
- AXE por Deque
- WAVE - una herramienta para probar la accesibilidad de una página web
- La guía definitiva para la accesibilidad web
Gracias por tus comentarios, son muy importantes para nosotros.