6 consejos para mejorar la accesibilidad del sitio web

Idealmente, la accesibilidad se debe considerar como parte de cada proyecto web para aumentar la disponibilidad para la audiencia más amplia posible. En el mundo real, sin embargo, se puede pasar por alto fácilmente. En este artículo veremos formas sencillas en las que puede mejorar la accesibilidad de su sitio sin tener que realizar cambios drásticos o que requieran mucho tiempo..


Introducción

"Desafortunadamente, el poder y la adaptabilidad de la Web no siempre se utilizan plenamente"

La World Wide Web es un recurso increíble y ha abierto nuevas y emocionantes posibilidades. Muchas más personas ahora pueden acceder a información y entretenimiento que antes no estaba disponible para ellos a través de los medios tradicionales. La World Wide Web es especialmente importante para aquellos con discapacidades, ya que la gran cantidad de información digital almacenada puede manipularse para cumplir con los diferentes requisitos. Desafortunadamente, el poder y la adaptabilidad de la web no siempre se utilizan en su totalidad, y las personas con discapacidades pueden tener dificultades para navegar por los sitios web y tener una experiencia negativa con la web en general.

Existen numerosas razones por las que debería intentar mejorar la accesibilidad de su sitio, una de las cuales es que es la ley en muchos países. En el Reino Unido, por ejemplo, la accesibilidad a la web está sujeta a la Ley de Discriminación por Discapacidad y, si su sitio web no cumple, se pueden iniciar acciones legales en su contra. Sin embargo, aparte de los problemas legales, ¿por qué no querría abrir su sitio a la audiencia más amplia posible haciéndolo accesible para todos??

La Iniciativa de Accesibilidad Web (WAI) fue creada por el W3C para promover la accesibilidad en la Web. El WAI intenta educar a las personas sobre cómo las personas con discapacidades usan la web y ha creado pautas para que los diseñadores y desarrolladores web las sigan. Encontrará que muchas de las pautas son fáciles de seguir e implementar. A continuación, analizaremos algunos métodos fáciles que lo ayudarán a cumplir con estas pautas y mejorar la accesibilidad de su sitio..


Consejo 01: considera tus colores

Se estima que alrededor de diez millones de hombres sufren de algún tipo de ceguera al color en los EE. UU. Los tipos más comunes son Protanopia y Deuteranopia; y aquellos que los sufren tienen problemas para distinguir entre el rojo, el verde y los colores similares. Con una prevalencia tan alta de esta condición, realmente vale la pena considerarla al diseñar y codificar su sitio web..

En su mayor parte, no hay medidas radicales que deban tomarse cuando se diseña teniendo en cuenta la ceguera al color, como ocurre con la mayoría de las sugerencias contenidas en este artículo. Un sitio web bien diseñado generalmente no causará ningún problema importante para los usuarios ciegos al color. Sin embargo, vale la pena tener una consideración adicional al diseñar elementos interactivos o de llamada a la acción. Por ejemplo; un simple enlace de texto, con un estilo rojo y sin otra decoración puede ser imposible de ver si está dentro de un bloque de texto gris o negro. Nadie sugiere que deba atenerse al estilo de enlace predeterminado, pero es útil utilizar más de un tipo de decoración, como un subrayado o un color de fondo..

Se puede encontrar una herramienta útil para los diseñadores en colorfilter.wickline.org que proporciona varios filtros diferentes que imitan la forma en que los diferentes tipos de usuarios que no conocen el color perciben un sitio web. Simplemente ingrese la URL de un sitio web y seleccione el filtro que desea usar. Sin embargo, toma un poco de tiempo para cargar, así que tendrá que ser paciente.

También vale la pena tener en cuenta el nivel de contraste entre los elementos de primer plano y de fondo de su sitio web. Un alto nivel de contraste beneficiará a todos, no solo a las personas con discapacidad visual. Las Pautas de accesibilidad web sugieren una relación de contraste mínima de 4.5: 1 y una relación ideal de 7: 1 para texto de cuerpo de tamaño estándar. Obviamente, la opción más segura es siempre el texto negro sobre un fondo blanco o viceversa.

Puede verificar la relación de contraste de múltiples elementos en un sitio utilizando la extensión Firefox de Color Contrast Analyzer de Juicy Studio. Analizará cada elemento de la página y proporcionará un informe sobre si cumple o no con las pautas de WAI..


Consejo 02: Enlaces contextuales

Aquellos que usan lectores de pantalla a menudo tendrán la opción de navegar por una página web saltando a través de los enlaces para encontrar algo de interés. En el caso de los enlaces de texto, el usuario simplemente escucharía la palabra de forma aislada, independientemente del contenido que la rodea. Por lo tanto, es extremadamente inútil cuando todo lo que el usuario escucha es 'haga clic aquí' o 'más'; estos tipos de enlaces no proporcionan información sobre dónde dirigen al usuario ni a qué se refieren..

Una opción mucho mejor es proporcionar un enlace más descriptivo. Un enlace que lleva al usuario al artículo completo en un blog puede leer 'aprender más sobre S.E.O' o 'hacer clic aquí para ver el artículo completo en S.E.O'.


Consejo 03: contenido alternativo

Uno de los principios básicos de la Iniciativa de Accesibilidad a la Web es hacer que el contenido de la Web esté disponible para todos, independientemente de la discapacidad que puedan tener. Existen varias técnicas, como las que se analizan en este artículo, que ayudarán a lograr el objetivo de WAI. Sin embargo, siempre habrá algunos tipos de contenido que no podrán ser accesibles para algunos usuarios, como el audio para los sordos. En este escenario, siempre debe proporcionar contenido alternativo cuando sea posible.

Pauta de Accesibilidad al Contenido Web 1.1:

Proporcione alternativas de texto para cualquier contenido que no sea de texto, de modo que se pueda cambiar a otras formas que las personas necesiten, como letra grande, Braille, símbolos o un lenguaje más simple..

Por ejemplo, si tiene un video de una entrevista en su sitio, podría considerar incluir una transcripción de la conversación para que los usuarios la descarguen o lean en el sitio. Otro método es agregar subtítulos al video, un método que YouTube está experimentando con el uso de software de reconocimiento de voz..

Un enfoque aún más completo es proporcionar un enlace a una versión de solo texto de su sitio web. Este método también hará que su sitio sea mucho más accesible para aquellos con conexiones de Internet lentas, como las que todavía utilizan una conexión de acceso telefónico o la búsqueda de un dispositivo móvil..


Consejo 04: Índices de tabulación

El índice de tabulación básicamente establece el orden de los elementos que un usuario recorrerá cuando use la tecla 'Tab'. En la mayoría de los casos, si el diseño de una página sigue un orden lógico y establece una jerarquía sólida utilizando encabezados, subtítulos, etc., no debe preocuparse demasiado por esto. Sin embargo, es con el uso de formularios que esta función es realmente valiosa..

Las formas pueden incorporar muchos elementos pequeños, como casillas de verificación y botones de radio que pueden requerir movimientos precisos y clics del mouse. Es posible que alguien con una discapacidad motora no tenga el control necesario para realizar acciones tan precisas. Una vez que se haya establecido un índice de tabulación correcto, el usuario podrá recorrer e interactuar con cada elemento del formulario con solo presionar el teclado. Un índice de pestañas también beneficiará a aquellos que no tienen acceso a un mouse y dependen únicamente del usuario de un teclado para navegar por un sitio web.


Consejo 05: Uso correcto del atributo Alt

Todos sabemos sobre el texto alternativo. Es el texto que necesitamos agregar a las imágenes para que nuestro sitio pueda validar. Todos los usan, ¿verdad? En realidad, hay muchos sitios web que no lo hacen y los que a menudo los usan incorrectamente. De hecho, hay mucho debate sobre el uso correcto del atributo alt.

El atributo alt sirve a tres propósitos principales:

  • Las tecnologías de asistencia, como los lectores de pantalla, utilizan el texto alternativo y lo leen en voz alta para el usuario.
  • El texto alternativo se muestra en lugar de la imagen cuando las imágenes con conexión a Internet lenta o aquellas que usan un navegador de solo texto han desactivado la imagen..
  • Los motores de búsqueda también utilizan texto alternativo para almacenar información sobre la página, ya que no pueden leer el contenido de las imágenes..

"La verdad es que el texto alternativo para las imágenes depende del contexto en el que se coloca"

En esencia, el texto alternativo es el texto equivalente a una imagen u otra fuente de medios y se usa cuando no se puede acceder a la imagen por varias razones. Entonces, ¿qué información utilizamos exactamente para el atributo alt? Algunas personas colocan descripciones detalladas de la imagen, mientras que otras la cargan con palabras clave en un esfuerzo por ayudar a sus clasificaciones de búsqueda. La verdad es que el texto alternativo para las imágenes depende del contexto en el que se coloca..

Por ejemplo, es común que una imagen relevante acompañe una publicación de blog, como una máquina de escribir para un artículo sobre la escritura independiente. El artículo en sí no hace referencia a la imagen, por lo que es bastante superfluo. Algunas personas pueden asignar al atributo alt el valor de "máquina de escribir" o "imagen de una máquina de escribir" o quizás den el valor del título del artículo. Todos estos métodos son incorrectos sin embargo. Veamos porque.

Primero debemos imaginar que no podemos ver la imagen. Entonces, si el valor del atributo alt fuera 'máquina de escribir' veríamos el título de la publicación del blog, la palabra 'máquina de escribir' por sí sola y luego el texto principal del artículo, esto no tiene sentido cuando se ve como texto y sería aún más confuso si estuviera usando un lector de pantalla y escuchara al azar "máquina de escribir".

Como regla general, es mejor que no use frases como 'una imagen de' o 'una imagen de' cuando proporcione valores de atributo alt. El atributo alt solo beneficiará a aquellos que no pueden ver la imagen por varias razones, por lo que decirles a estos usuarios que hay una imagen allí no ofrece ningún valor real, aparte de aclarar algunas de las confusiones causadas por el método anterior..

Por último, dar al atributo alt el valor del título de la publicación del blog solo daría lugar a que el título se muestre dos veces como texto o se repita dos veces al usar lectores de pantalla. El texto alternativo no debe repetir ninguna información que ya se haya proporcionado como texto, simplemente es innecesario y potencialmente confuso.

La mejor opción en este escenario es simplemente proporcionar un valor de atributo alt en blanco. Un valor en blanco garantiza que no se comunique información potencialmente confusa o irrelevante y no hay ningún detrimento en la comprensión del artículo, ya que la imagen no es esencial para esto. Algunos pueden argumentar que, dado que la imagen es puramente estética, entonces no es contenido y, por lo tanto, no pertenece al HTML y debe mostrarse utilizando CSS, sin embargo, existen diferentes vistas al respecto..

Como puede ver, proporcionar valores de atributo alt correctos puede ser complicado y depende mucho de la situación. El mejor consejo es evaluar cada escenario individualmente, decidiendo si la imagen es necesaria para entender y usar su mejor criterio..


Consejo 06: Teclas de acceso

Al igual que los índices de pestañas, las teclas de acceso son una característica valiosa para aquellos usuarios que dependen de un teclado para navegar por un sitio web. Desafortunadamente, las teclas de acceso son uno de los elementos HTML menos utilizados, principalmente porque mucha gente no los conoce y quienes eligen no implementarlos a pesar de ser extremadamente simples..

Las teclas de acceso son básicamente métodos abreviados de teclado que ayudan a un usuario del teclado a navegar rápidamente a ciertas secciones de un sitio web. Las teclas de acceso se pueden usar manteniendo presionada una tecla de función (generalmente Alt en Windows o Ctrl en Mac) y presionando una tecla de número o letra específica que corresponde a una sección del sitio.

Como mencioné anteriormente, las Claves de acceso son increíblemente fáciles de implementar. Todo lo que implica es un simple fragmento de código HTML agregado a las etiquetas de anclaje de navegación de su sitio. -

Casa

Sencillo.

Un problema con las Claves de acceso es que no hay un conjunto universal de claves asignadas que los usuarios puedan esperar que se utilicen y combinen sin un estándar real de informar a los usuarios de las que realmente se han utilizado los resultados de que las Claves de acceso sean bastante ineficaces.

Sin embargo, el gobierno del Reino Unido tiene un conjunto de claves de acceso recomendadas para asignar, que son las siguientes:

  • S - Saltar navegación
  • 1 - Página de inicio
  • 2 - Noticias / Actualizaciones
  • 3 - Mapa del sitio
  • 4 - Buscar
  • 5 - Preguntas frecuentes (F.A.Q)
  • 6 - Ayuda
  • 7 - Procedimiento de Quejas
  • 8 - Términos y condiciones
  • 9 - Formulario de comentarios
  • 10 - Acceso a la información clave

Pensamientos finales

Como puede ver, muchos de los métodos anteriores son muy fáciles de implementar y solo requieren un conocimiento básico de HTML. Hacer que su sitio web sea más accesible no requiere mucho tiempo, requiere modificaciones masivas o es perjudicial para el atractivo de un sitio web.

Creo que es importante que tanto los diseñadores como los desarrolladores conozcan la accesibilidad y la consideren en las distintas etapas de la construcción de un sitio web. Cuanto antes en el proceso de diseño se preste atención y pensamiento a la accesibilidad, más fácil será incorporar estos métodos y lograr mejores resultados..

También es importante recordar que la mayoría de los métodos detallados anteriormente no solo ayudarán a las personas con discapacidades, sino que también beneficiarán a todos los usuarios de su sitio web. Algunos de los consejos pueden incluso mejorar su clasificación con los motores de búsqueda..

Hemos analizado solo algunos consejos que harán que su sitio web sea más accesible, pero si está realmente comprometido, es posible que desee ver cómo puede ajustarse a la lista completa de Pautas de accesibilidad del contenido web..