Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. General
Webdesign

6 Consejos para Mejorar la Accesibilidad Web

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Idealmente, la accesibilidad debe considerarse como parte de cada proyecto web, cuyo objetivo es aumentar la disponibilidad a la mayor audiencia posible. En el mundo real sin embargo, puede pasarse fácilmente por alto. En este artículo veremos formas sencillas con las que puedes mejorar la accesibilidad de tu web sin tener que hacer cambios drásticos o que consuman demasiado tiempo.


Introducción

"Lamentablemente, el poder y la capacidad de adaptación de la Web no están totalmente aprovechados"

La World Wide Web es un recurso increíble y ha abierto nuevas y emocionantes posibilidades. Muchas más personas pueden ahora acceder a información y entretenimiento que antes no tenían a su disposición a través de las formas tradicionales de los medios de comunicación. La World Wide Web es especialmente importante para las personas con discapacidad ya que la gran cantidad de información almacenada digitalmente puede ser manipulada para satisfacer diferentes necesidades. Desgraciadamente, el poder y la gran capacidad de adaptación de la Web no se aprovecha siempre suficientemente y las personas con discapacidad pueden encontrar dificultades al navegar por sitios web y tener una experiencia negativa con la Web en general.

Existen numerosas razones por las qué deberías intentar mejorar la accesibilidad de tu sitio, una de ellas es que es obiglatorio por ley en muchos países. En el Reino Unido por ejemplo, la accesibilidad web está cubierta por la ley de Discriminación por Discapacidad y si tu web no la cumple, podría tener consecuencias legales contra ti. No obstante, dejando las cuestiones jurídicas a un lado, ¿por qué no quieres abrir tu web a la mayor audiencia posible, haciéndola accesible a todos?

La Web Accessibility Initiative (WAI) fue creada por el W3C para promover la accesibilidad en la Web. La WAI intenta educar a la gente sobre cómo utilizan la Web las personas con discapacidad y ha creado pautas a seguir para diseñadores y desarrolladores web. Descubrirás que muchas de las pautas son fáciles de seguir e implementar. A continuación analizaremos algunos sencillos métodos que te ayudarán a cumplir con estas pautas y mejorar la accesibilidad de su sitio.


Tip 01: Considera Tus Colores

Improving Web Accessibility

Se estima que alrededor de unos 10 millones de personas sufren de algún tipo de discapacidad en la percepción del color en Estados Unidos. Los tipos más comunes son la Protanopía y la Deuteranopía; y los que las sufren, tienen problemas para distinguir entre los tonos rojos, verdes y similares. Con un índice tan alto de esta dolencia, merece realmente la pena tenerlo en consideración cuando estés diseñando o programando tu web.

En su mayor parte, no existen medidas radicales que debas tomar al diseñar considerando una discapacidad en la percepción cromática, lo mismo ocurre con la mayoría de las sugerencias de este artículo. Un sitio web bien diseñado generalmente no causa mayores problemas para los usuarios ciegos al color. Sin embargo, vale la pena tener en consideración también, el diseño de los elementos interactivos o las llamadas a la acción (CTA's). Por ejemplo; un enlace de texto simple, de color rojo sin ninguna otra decoración podría ser imposible de percibir si está dentro de un bloque de texto en negro o gris. Nadie está sugiriendo que necesites usar un estilo predeterminado para el vínculo, pero es útil usar más de un tipo de decoración, por ejemplo un subrayado o un color de fondo.

Los diseñadores pueden encontrar útil la herramienta de colorfilter.wickline.org que ofrece varios y diferentes filtros que imitan como usuarios con diferentes tipos de daltonismo percibirían un sitio web. Simplemente introduce la URL de un sitio web y selecciona el filtro que deseas usar, se necesita un poco de tiempo para cargar, así que tendrás que tener un poco de paciencia.

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

Puede comprobar la relación de contraste entre varios elementos de una página con la extensión de Firefox Color Contrast Analyser de Juicy Studio. Analizará cada elemento de la página y proporcionará un informe sobre si se ajusta o no a las directrices de la WAI.


Punta 02: Vínculos con Contexto

Aquellos que usan a menudo lectores de pantalla tendrán 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 sencillamente escuchará la palabra de forma aisladamente, sin tener en cuenta el contenido que lo rodea. Por tanto no será muy útil que lo único que el usuario escuche sea un 'click aquí' o 'más', este tipo de enlaces no proporciona ninguna información sobre a dónde dirigen al usuario o a qué hacen referencia.

Es mucho mejor proporcionar un vínculo más descriptivo. Un enlace que lleve al usuario al artículo completo de un blog podría indicar 'más información sobre S.E.O' o 'haz clic aquí para ver el artículo completo sobre S.E.O'.


Consejo 03: Contenido Alternativo

Improving Web Accessibility

Uno de los principios fundamentales de la Iniciativa sobre Accesibilidad Web consiste en hacer accesibles los contenidos de una web a todo el mundo con independencia de cualquier tipo de discapacidad que puedan tener. Hay una serie de técnicas, tales como las tratadas en este artículo, que hacia la meta de la WAI. Siempre habrá algunos tipos de contenido sin embargo, que no se puede hacer accesible a algunos usuarios, como el audio a los que son sordos. En este escenario, siempre debe proporcionar contenidos alternativos siempre que sea posible.

Pautas de accesibilidad al contenido web 1.1:

Proporcionar alternativas de texto para cualquier contenido de texto no puede ser cambiado a otras personas de formas necesitan como letra grande, Braille, símbolos o lenguaje más simple.

Por ejemplo, si tienes un video de una entrevista en su sitio, usted podría considerar incluyendo una transcripción de la conversación de los usuarios descargar o leer en el sitio. Otro método es añadir subtítulos al video – un método que YouTube está experimentando con el uso de software de reconocimiento de voz.

Un enfoque más completo es proporcionar un enlace a una versión de sólo texto de su sitio Web. Este método hará que su sitio web mucho más accesible para aquellos con conexiones a internet lentas como las que aún usando una conexión dial-up o navegación de un dispositivo móvil.


Consejo 04: Pestaña de Índices

El índice de tabulación establece básicamente el orden de los elementos que un usuario recorrer cuando se utiliza la tecla 'Tab'. En la mayoría de los casos, si un diseño de página sigue un orden lógico y establece una jerarquía fuerte utilizando títulos, subtítulos, etc., entonces no necesitan preocuparse esto demasiado. Es con el uso de formularios, sin embargo, cuando esta función resulta muy valiosa.

Los formularios pueden incorporar muchos pequeños elementos, como por ejemplo botones de radio y casillas de verificación, que podrían requerir un movimiento preciso y clics del ratón. Alguien con una discapacidad motora podría no tener el suficiente control como para realizar acciones de tanta precisión. Con un Índice de tabulación correcto establecido, el usuario será capaz de recorrer e interactuar con cada elemento del formulario simplemente pulsando teclas del teclado. Un Índice de Tabulación también beneficiará a quienes no tengan acceso a un ratón y se basará exclusivamente en el usuario que use el teclado para navegar por un sitio web.


Consejo 05: Uso Correcto del Atributo Alt

Improving Web Accessibility

Todos sabemos que es el texto alt. Es aquel texto que tenemos que añadir a las imágenes para que nuestro sitio web sea validado. Todo el mundo los utiliza, ¿cierto? Realmente hay un montón de webs que no los usan y muchos que a menudo los utilizan incorrectamente. De hecho, hay un gran debate sobre el uso correcto del atributo alt.

El atributo alt sirve a tres propósitos principales:

  • Tecnologías asistenciales como los lectores de pantalla utilizan el texto alt y el cual leen en voz alta para ayudar al usuario.
  • El texto alt aparece en lugar de la imagen cuando las personas con conexiones a internet lentas deciden deshabilitar las imágenes o por aquellos que utilizan un navegador que sólo muestra texto.
  • Los motores de búsqueda también usan el texto alternativo para almacenar información sobre las páginas 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 encuentren"

Por tanto el texto alt es aquel que esencialmente equivale o representa una imagen u otra fuente de medios y que se utiliza cuando no se puede acceder a la propia imagen por varias razones. Así que ¿qué información utilizamos exactamente el atributo alt? Algunas personas ponen descripciones detalladas de la imagen mientras otros lo cargan con palabras clave con el objetivo de impulsar sus rankings de búsqueda. La verdad es que el texto alternativo para imágenes depende del contexto en el que se coloquen estas.

Por ejemplo, es habitual acompañar un artículo en un blog con una imagen relevante para el contenido del mismo, por ejemplo, una imagen con una máquina de escribir en un artículo sobre la escritura como profesión independiente. El artículo por sí mismo no hace referencia a la imagen, por tanto, es bastante superflua. Algunas personas podrían indicar para el atributo alt, el valor de 'escribir' o 'imagen de una máquina de escribir' o tal vez aplicarían el título del artículo. Sin embargo todos estos métodos son erróneos. Veamos por qué.

En primer lugar tenemos que imaginar que no podemos ver la imagen. Así que si el valor del atributo alt es 'escribir' veríamos el título de la entrada del blog, la palabra 'máquina de escribir' en sí misma y después el texto principal del artículo, esto no tiene sentido cuando vemos la página en modo sólo texto y sería aún más confuso si estuvieses usando un lector de pantalla y escuchases de repente 'escribir'.

Como regla general, es mejor que no uses frases como 'una imagen de' o 'una foto de' al proporcionar valores al atributo alt. El atributo alt sólo beneficiará a aquellos que no puedan ver la imagen por diversas razones y por lo tanto, indicar a estos usuarios que hay una imagen no les ofrece ningún valor real que no sean de aclaración de la confusión causada por el método anterior.

Por último, asignar al atributo alt el valor del título de la entrada del blog sólo tendría como resultado que el título se mostrase dos veces como texto o repetido dos veces al ser leído por los lectores de pantalla. El texto alternativo no debe repetir información que ya se presenta como texto, esto sería sencillamente innecesario y potencialmente confuso.

La mejor opción en este escenario es simplemente proporcionar un valor en blanco al atributo alt. Un valor en blanco nos asegura que no se dará o comunicará información potencialmente confusa o irrelevante y que no habrá ningún detrimento en la comprensión del artículo ya que la imagen no es relevante para esto. Algunos pueden argumentar que puesto que la imagen es puramente estética, entonces no es contenido y por lo tanto no pertenece en el HTML y debe mostrarse mediante CSS, hay diferentes opiniones sobre esto sin embargo.

Como puedes ver, proporcionar valores en el atributo alt puede resultar difícil o confuso y su corrección depende de la situación. El mejor consejo es que evalúes cada escenario de forma independiente, decidiendo si la imagen es necesaria o pertinente para ayudar a la comprensión y que utilices tu mejor juicio.


Consejo 06: Teclas de Acceso

Improving Web Accessibility

Al igual que los Índices de Tabulación, las teclas de comandos de acceso ofrecen una valiosa funcionalidad para aquellos usuarios que dependen del teclado para navegar por un sitio web. Desafortunadamente, las teclas de acceso son uno de los elementos menos utilizados de HTML, principalmente porque muchas personas no son conscientes de su existencia y aquellos que sí lo son, optan por no usarlas a pesar de ser algo extremadamente simple.

Las teclas de acceso son atajos de teclado que ayudan al usuario que hace uso del teclado a navegar hacia ciertas secciones de una web de forma rápida. Los atajos de teclado pueden utilizarse manteniendo pulsada una tecla de función (generalmente Alt en Windows) o Ctrl en Mac y pulsando después una letra concreta o una tecla numérica que se corresponde con una sección del sitio.

Como he mencionado anteriormente, las teclas de acceso son increíblemente fáciles de implementar. Todo lo que implica es agregar un simple fragmento de código HTML a las etiquetas de los enlaces de navegación de tu sitio –

Simple.

Un problema con las teclas de acceso es que no hay ningún conjunto de claves asignadas que los usuarios pueden esperar a ser utilizadas y combinadas con ningún estándar real de informar a los usuarios de los que realmente han utilizado resultados de claves de acceso siendo bastante ineficaz universales.

El gobierno del Reino Unido sin embargo tiene un conjunto de Teclas de Acceso recomendadas a asignar, son las siguientes:

  • S - Saltar navegación
  • 1 - Página de Inicio
  • 2 - Noticias/Actualizaciones
  • 3 - Mapa del Sitio
  • 4 - Búsqueda
  • 5 - Preguntas Frecuentes (F.A.Q)
  • 6 - Ayuda
  • 7 - Procedimiento para Reclamaciones
  • 8 - Términos y Condiciones
  • 9 - Formulario de Contacto
  • 10 - Información sobre las Teclas de Acceso

Reflexiones Finales

Como se puedes ver, muchos de los anteriores métodos son muy fáciles de implementar y sólo requieren un conocimiento básico de HTML. Hacer más accesible tu web no tiene porque requerir un tiempo excesivo, modificación masivas o ser perjudicial para el atractivo de un sitio web.

Creo que es importante que los diseñadores y desarrolladores estén bien informados sobre la accesibilidad y la consideren en las distintas etapas de la construcción de un sitio web. Cuanto antes se considere y plantee en los procesos del diseño la accesibilidad, más fácil será incorporar los métodos para alcanzarla y lograr mejores resultados.

También es importante recordar que la mayoría de los métodos detallados anteriormente no sólo ayudarán a las personas con una discapacidad, también beneficiará a todos los usuarios de tu sitio web. Incluso algunos de los consejos mencionados pueden mejorar tu posicionamiento en los motores de búsqueda.

Hemos visto sólo algunos consejos que harán que tu sitio de Internet sea más accesible, pero si estás realmente interesado en el tema, te gustará consultar cómo puedes ajustarte a la lista completa de requisitos de Web Content Accessibility Guidelines.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.