Unlimited Wordpress themes, plugins, graphics & 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, deberíamos tener en cuenta la accesibilidad en todo proyecto web, para aumentar la disponibilidad a la mayor número de personas posible. En el mundo real sin embargo, puede pasarse fácilmente por alto. En este artículo veremos formas sencillas para 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á 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 que deberías intentar mejorar la accesibilidad de tu sitio, una de ellas es que es obligatorio por ley en muchos países. En el Reino Unido por ejemplo, la accesibilidad web está respaldada por la ley de Discriminación por Discapacidad y si tu web no la cumple, podrías tener problemas legales. No obstante, dejando las cuestiones jurídicas a un lado, ¿por qué no querrías abrir tu web al mayor número de personas posible haciéndola accesible para todo el mundo?

La Web Accessibility Initiative (WAI) fue creada por el W3C para promover la accesibilidad en la Web. La WAI intenta formar 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 tu web.


Consejo 1: Considera Tus Colores

Improving Web Accessibility

Se estima que alrededor de unos 10 millones de personas en Estados Unidos sufren de algún tipo de discapacidad en la percepción del color. Los tipos más comunes son la protanopia y la deuteranopsia; 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 general, no existen medidas radicales que debas tomar al diseñar considerando una discapacidad en la percepción cromática, y lo mismo ocurre con la mayoría de las sugerencias de este artículo. Un sitio web bien diseñado normalmente no causará problemas importantes a los usuarios ciegos al color. Sin embargo, vale la pena prestar una atención extra al diseño de los elementos interactivos o las llamadas a la acción (CTA's, botones, etc.). 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. No estamos sugiriendo que debas usar un estilo predeterminado para los vínculos, pero es útil usar en ellos más de un recurso decorativo, por ejemplo un subrayado o un color de fondo.

Los diseñadores pueden encontrar útil la herramienta de colorfilter.wickline.org, ofrece varios y diferentes filtros que imitan la forma en la que usuarios con diferentes tipos de daltonismo percibirán un sitio web. Simplemente introduce la URL de un sitio web y selecciona el filtro que deseas usar, tarda un poco en cargar los resultados, 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 todo el mundo, 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.

Puedes 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.


Consejo 2: 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 su interés. En el caso de los enlaces de texto, el usuario sencillamente escuchará las palabras presentes en el vínculo de forma aislada, 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 ayudan a cumplir los objetivos de WAI. Sin embargo, siempre existirán algunos tipos de contenido, que no puedas hacer accesibles a determinados usuarios, por ejemplo, el audio a los que son sordos. En este escenario, siempre que sea posible, deberías proporcionar contenidos alternativos.

Pautas de accesibilidad al contenido web 1.1:

Proporcionar alternativas de texto para cualquier contenido que no esté basado en texto de forma que las personas que lo necesiten puedan modificarlo, por ejemplo, aumentar el tamaño de las letras, Braille, símbolos o lenguaje más simple.

Por ejemplo, si tienes en tu página web un video de una entrevista, podrías incluir una transcripción de la conversación que los usuarios puedan descargar o leer directamente en tu web. Otra fórmula podría consistir en 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 tu sitio web compuesta únicamente por texto. Este método conseguirá que tu web sea mucho más accesible para aquellos con conexiones a internet lentas, por ejemplo, para los que aún usan una conexión vía módem o los que navegan desde un dispositivo móvil.


Consejo 4: Índices Tabulados

Un índice tabulado básicamente establece el orden de los elementos que un usuario recorre cuando usa la tecla 'Tab'. En la mayoría de los casos, si el diseño de la página sigue un orden lógico y establece una sólida jerarquía en el contenido utilizando títulos, subtítulos, etc., no es necesario preocuparse demasiado por esto. Sin embargo, es en el uso de formularios, donde esta funcionalidad resulta realmente muy valiosa.

Los formularios pueden incorporar muchos pequeños elementos, por ejemplo, botones de radio y casillas de verificación que podrían requerir movimientos y clics de ratón precisos. Alguien con una discapacidad motora podría no tener el suficiente control como para realizar este tipo de acciones o gestos. Si creamos un Índice de tabulación adecuado, el usuario será capaz de recorrer e interactuar con cada elemento del formulario tan solo pulsando las teclas de su teclado. Un Índice de Tabulación también beneficiará a quienes no tengan acceso a un ratón y que usan exclusivamente un teclado para navegar por un sitio web.


Consejo 5: Usar Correctamente el Atributo Alt

Improving Web Accessibility

Todos sabemos qué 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 lo utiliza, ¿cierto? No, lo cierto es que un montón de webs no los usan, y otros muchos que a los usan incorrectamente. De hecho, hay un gran debate sobre el uso correcto del atributo alt.

El atributo alt sirve principalmente a tres propósitos:

  • Tecnologías asistenciales como los lectores de pantalla utilizan el texto alt, lo usan para leer en voz alta y ayudar al usuario.
  • El texto alt sustituye a las imágenes cuando las personas con conexiones a internet lentas deciden deshabilitar las imágenes o cuando usamos un navegador que sólo muestra texto.
  • Los motores de búsqueda también usan el texto alternativo para extraer información sobre las páginas que indexan 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 otro tipo de medio y que se utiliza cuando no se puede acceder a la propia imagen por distintos motivos. Así que ¿qué información utilizamos exactamente el atributo alt? Algunas personas ponen descripciones detalladas de la imagen mientras otros los 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 estén ubicadas.

Por ejemplo, es habitual acompañar el artículo de un blog con una imagen relacionada con su contenido, por ejemplo, una imagen con una máquina de escribir en un artículo sobre la profesión de "copywriter". El artículo en sí no tiene relación con la imagen, por tanto, es bastante superflua. Algunas personas podrían indicar en el atributo alt, 'máquina de escribir' o 'imagen de una máquina de escribir' o tal vez usarí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 'máquina de escribir', entenderíamos que es el título de la entrada del blog, primero la palabra 'máquina de escribir' en sí y después el texto principal del artículo, esto no tiene sentido si visualizamos la página en formato de texto plano y sería aún más confuso si estuvieses usando un lector de pantalla y escuchases de repente 'máquina de escribir'.

Como regla general, es mejor que no uses frases como 'una imagen de' o 'una foto de' al proporcionar valores en el 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 aporta ningún valor real, a excepción de aclarar 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 daría como resultado la duplicación del título, se mostraría dos veces como texto o se repetiría al ser leído por los lectores de pantalla. El texto alternativo no debe repetir información que ya se presenta como texto, esto es 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 aporta nada en este sentido. Algunos pueden argumentar que puesto que la imagen tiene un valor puramente estético, no forma parte del contenido, es decir, no pertenece a la estructura HTML y por tanto debería mostrarse mediante CSS, sin embargo, hay diferentes opiniones al respecto.

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 del contenido que la acompaña usando tu mejor criterio.


Consejo 6: Teclas de Acceso

Improving Web Accessibility

Al igual que los Índices de Tabulación, las teclas de comandos de acceso (o atajos de teclado) 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 emplea el teclado para navegar hacia ciertas secciones de una web. 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 otra tecla que se corresponde con una sección del sitio web.

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 teclas o combinación de teclas establecido que los usuarios deban usar, ni tampoco ningún estándar real para informar a los usuarios sobre las que se han utilizado, lo que resulta en una gran ineficacia de los atajos de teclado.

Sin embargo, el gobierno del Reino Unido 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 (blog).
  • 3 - Mapa del Sitio.
  • 4 - Búsqueda.
  • 5 - Preguntas Frecuentes (FAQ).
  • 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 hemos visto, muchos de los métodos citados son muy fáciles de implementar y sólo requieren un conocimiento básico de HTML. Hacer más accesible tu web no tiene porqué 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 tengan en cuenta durante las distintas etapas de la construcción de un sitio web. Cuanto antes se integre y se plantee la accesibilidad en los procesos de diseño, más fácil será incorporar los métodos para alcanzarla y obtener mejores resultados.

También es importante recordar que la mayoría de los métodos que hemos detallado 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 web sea más accesible, pero si estás realmente interesado en el tema, consulta cómo puedes cumplir el listado completo 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.