menu

Cómo hacer accesible un sitio

Recomendaciones

 

Introducción



Te ayudamos a iniciar tu aporte en la construcción de una Provincia sin barreras tecnológicas. Y para ello, vamos a compartir ejemplos y metodologías que te permitan crear sitios accesibles

Además, vas a encontrar casos de estudio concretos, donde se analizan y comparan a un nivel técnico las distintas tecnologías utilizadas en el diseño web, en el ámbito de la accesibilidad.


Planificación de la accesibilidad web



Al comenzar a desarrollar un sitio web es necesario tener en cuenta que el mismo va a ser accedido por gran variedad de usuarios, dispositivos y herramientas de software.

Por tal motivo, necesitamos garantizar y planificar desde la etapa de diseño, un sistema estructurado y acorde a los estándares actuales (teniendo por ejemplo en claro las pautas establecidas por la W3C), dándole vital importancia a la visión del usuario sobre el sitio.

El costo de hacer accesible un sistema ya desarrollado es muy superior al de realizar uno que está por ser diseñado.

Por todo esto, es muy importante que planifiques el desarrolo y diseño del sitio, y que contemples la accesibilidad web desde las etapas iniciales.


Estándares



Muchos de los consejos que te mostramos a continuación tienen efectos positivos para el sitio en cuanto a posicionamiento en buscadores.

Se aconseja evitar el uso de recursos que no sean estándar, pero en el caso de utilizarlo se tiene que estar seguros de conocer la manera en la que se va a “degradar" el sitio cuando sea accedido por:

- Un dispositivo de accesibilidad.

- Un usuario con necesidades especiales.

- Un usuario con un sistema (Plataforma/Resolución/Agente/Conexión) distinto a la media.


Reglas de accesibilidad actuales


La lista es un resumen a modo orientativo de las reglas de accesibilidad actuales.


En la cabecera

Usando el DOCTYPE correcto

El Doctype es lo que le dice al agente (navegador) cómo tiene que interpretar el documento que viene a continuación. Si esta declaración está corrupta o no está presente, el navegador renderiza el documento html en el modo Quicks, el cual cada agente lo interpreta de forma distinta provocando resultados indeseados en el sitio.

El doctype tiene que ser lo primero que recibe el navegador. Tiene que estar al principio del documento html. Incluso si hubiera un espacio en blanco o un salto de línea antes del doctype, sería suficiente para que el navegador entrara en modo Quicks.

Un ejemplo de un Doctype apropiado es el siguiente:


  !DOCTYPE html PUBLIC "−//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd" 
        

Se pueden identificar claramente en la declaración los siguientes componentes: La frase que identifica al tipo de documento, su versión y tipo de implementación. Otras posibles frases son:


  "-//W3C//DTD XHTML 1.0 Strict//EN" "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        

La Url en donde se encuentra la especificación del tipo de documento.

Para el caso particular de HTML 5 el doctype queda reducido a:


  !DOCTYPEhtml
        

Definición del lenguaje.

La definición del lenguaje en el tag es muy importante para los lectores de pantalla, incluso navegadores modernos lo usan para traducir, o proponer una traducción del sitio.

Los distintos lenguajes se identifican mediante dos letras, “en" para inglés, “fr" para francés, “es" para español y así.

Ejemplos de declaraciones según el tipo de documento:


  HTML 4 y HTML 5: htmllang="en"

  XHTML 1.0: htmlxmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"

  XHTML 1.1: htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

        

Un título con sentido

El título de una página es uno de los factores clave para la accesibilidad. Por ejemplo, es lo que se va a usar para identificar a una página en particular, cuando un lector de pantalla le dicte o se le muestre en braille el contenido del sitio a un usuario no vidente.

Tiene que ser específico para esa sección de la página y puede contener el nombre del sitio opcionalmente. Se deben evitar las construcciones ASCII limitándose a “:" ó “-" para separar el nombre de la sección del nombre del sitio.


Ayudas extras para la navegación

La ayuda de navegación son una serie de vínculos que el HTML declara para que el navegador lo interprete y lo muestre al usuario. Es muy útil para las personas que usan un lector de pantalla o un navegador basado en texto. También hacen uso de estos vínculos algunos navegadores modernos como Opera y Firefox.

Estos vínculos son muy beneficiosos para el CEO del sitio.

Existen una serie de vínculos estándar, aunque no son los únicos:

• home
• prev
• Next

Se declaran de la siguiente manera:


  link rel="home" href="http://www.misitio.com" title="Home"/> 

        

El atributo title tiene que ser descriptivo ya que va a contener el texto que se le lea al usuario de un lector de pantalla.


En el contenido

Primero el contenido, luego la navegación.

Luego del tag lo primero que debería aparecer es el contenido, luego de este la navegación. Los navegadores basados en texto, como así los lectores de pantalla, interpretan el sitio de manera secuencial, como si se leyera el html directamente. Entonces imagínense tener que escuchar todos los links de navegación, que pueden ser cientos, en cada página que visitemos antes de poder escuchar el contenido.

Con CSS se puede optar por esta disposición de información muy fácilmente mediante la técnica de flotado de cajas, entre otras.


Saltar directamente al contenido.

Si la regla anterior no se pudiera cumplir, porque por ejemplo se esta usando un CMS muy restrictivo, se puede optar por poner un vinculo interno al inicio, antes de la navegación que lleve al usuario directamente al contenido. Éste vinculo, por ejemplo puede estar oculto mediante CSS para que sólo sea visible en los navegadores que no interpretan CSS, o sea los que muestras la información de forma secuencia, como los basados en texto y los lectores de pantalla.


Descripciones en los vínculos.

Los vínculos necesitan tener una descripción en el atributo title. Es muy importante para un usuario con conexión lenta saber si ese vinculo lleva a un documento que le interesa y no perder el tiempo con algo que no le sirve.

El texto dentro del tag a también es muy importante. No hay nada peor que encontrarse con un “click aquí" y tener que leer todo el contexto para saber de qué se trata. También es muy importante para el CEO.


Atajos de teclado.

Los atajos del teclado ahorran mucho tiempo, y para muchos usuarios son la única manera de interactuar con un sitio.

Mediante el uso del atributo html accesskey se puede especificar una letra o número para que al presionarse junto a la tecla Meta (la cual varía según la plataforma, Alt en windows, Ctrl en Mac) se active y, si es un link, se redirija al destino o si es un campo de un formulario obtenga el foco.

Es muy importante que estos atajos estén explicados en alguna sección del sitio, y si es posible en todas, de lo contrario es igual que si no estuvieran.


Resúmenes en las tablas.

Las tablas pueden contener mucha cantidad de datos. Es muy tedioso para un usuario detrás de un lector de pantalla tener que escuchar primero el contenido antes de poder darse cuenta qué información o para qué le sirve esa tabla.

Esto se soluciona utilizando el atributo summary dentro de la tabla. Éste tag es lo primero que lee un lector de pantalla de la tabla y así el usuario puede decidir si continúa escuchando todo o cambia de foco.


Tablas con cabeceras reales.

La estructura de una tabla tiene que estar definida correctamente para facilitar el acceso a las mismas. Idealmente una tabla tiene 3 componentes principales: la cabecera donde están las celdas que dan titulo a las columnas; el cuerpo que contiene la información tabular; y por último el pie que puede contener cabeceras para que cuando el contenido es demasiado largo el lector tenga referencia de qué significa cada columna.

Especificar las celdas cabeceras en la tabla ayuda a que los lectores de pantalla puedan expresar de manera lineal algo bidimensional como lo es una tabla.

También se recomienda el uso de los atributos de scope para indicar al navegador que incidencia tiene cada cabecera dentro de la tabla.


Listas semánticas.

Hay 3 tags HTML que representan listas. Estos tienen que usarse dependiendo de el tipo de lista que se quiere representar. Elegir el tipo correcto ayuda a una mejor interpretación por parte de los lectores de pantallas:

ol (Listas Ordenadas): Estas listas, en su forma normal, utilizan números naturales consecutivos y por ende únicos para adornar cada ítem (li) de la lista.

ul (Listas no ordenadas): Listas de propósito general donde se utiliza un pqueño icono para poder destacar cada ítem (li) de la lista.

dl (Listas de definiciones): Este tipo de listas representa una serie de términos a definir junto con su significado, como si de un diccionario se tratase.


Texto alternativo.

Es muy importante que toda la información del documento esté legible en texto por eso las imágenes, las cuales un lector de pantalla no puede interpretar, tienen que tener un texto alternativo, el cual se especifica utilizando el atributo alt. Este texto se muestra al usuario en caso de que por algún motivo, corte de conectividad o preferencia del usuario, no se pueda mostrar la imagen en cuestión.

Este texto tiene que ser descriptivo de lo que la imagen representa, no sirve de mucho poner “Imagen" o “Foto 1", ya que carece de valor una descripción de ese tipo.


Formularios, la manera correcta.

El único punto de interacción de un usuario con un sitio es usando formularios. Es muy importante que sean accesibles. Aquí algunos temas a tener en cuenta:

Usar label: label es un elemento que vincula un texto con un campo de un formulario. La relación se hace usando el atributo id del campo en cuestión. Los lectores de pantallas dependen mucho de este tipo de tagpara poder dictar un formulario.

Definir un tabindex: esta propiedad de los campos de un formulario define el orden en que el usuario puede ir haciendo foco entre los distintos campos usando la tecla tab.

Definir un accesskey: El atributo accesskey permite especificar una tecla especifica para saltar al campo en cuestión. El usuario, dependiendo de la plataforma, cuenta con una tecla “meta" la cual por ejemplo puede ser la combinación de ctrl + alt que combinado con la tecla del accesskey activa el atajo. Este atributo también sirve para ser usado con otros elementos html como los elementos a.


Errores frecuentes.



Existen errores recurrentes que cometen los desarrolladores al confeccionar un sitio:

• Maquetación mediante uso de tablas. En su lugar debería diagramarse el sitio utilizando divs flotantes u otros elementos accesibles.
• No utilizar textos alternativos para contenidos interactivos. Deberían especificarse los atributos alt y longdesc para los elementos que los requieran.
• Usar imágenes en ocasiones en las que podría usarse html+css
• Usar animaciones flash cuando se podría usar html+css+javascript
• Utilizar unidades fijas (px, cm, pulgadas) en lugar de porcentuales
• No permitir al usuario personalizar la interfaz del sitio
• Usar javascript para la navegación en el sitio en lugar de enlaces o formularios.


Tips de accesibilidad



• “Volver al texto”. Evitar el uso de imágenes o animaciones en su lugar, siempre que sea posible.
• Maquetar con xhtml + estilos css. Explore los elementos disponibles y úselos adecuadamente. Separe información y de su presentación.
• Elegir la opción más accesible ante 2 alternativas, (javascript en lugar de flash, html+css en lugar de javascript).
• Si se utiliza un gestor de contenido para los datos, asegurarse que también genere información accesible. (Ej si se carga una imagen asociarle un texto alternativo).
• Permitir personalizar la interfaz (contraste, tamaño de fuente,etc)
• Ser simplista. Las cosas más sencillas en general terminan siendo las más accesibles