Mejorando la Accesibilidad Web: 10 pasos explicados

Jul 26 2011 Autor: J.P Aulet under Accesibilidad,Internet

Puede aprender a crear su Web más accesible con estos 10 sencillos pasos. Si necesita saber más sobre ’Accesibilidad’, sus beneficios, detalles, implementación puede consultar los siguientes enlaces:

Paso 1. El Documento:

Es importante seguir los estándares W3C y si no es posible, dar contenidos alternativos accesibles. Actualmente los dos lenguajes estándares para facilitar la accesibilidad a la creación de webs son HTML 4.01 y XHTML 1.0. Para seguir las directrices del W3C los documentos deben contener:

- DOCTYPE: La declaración del tipo de documento informa al navegador o dispositivo qué tipo de web se encontrará. Debe situarse al principio del documento HTML. Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- Prioridad y Adecuación: Se debe elegir el tipo de prioridad (1,2,3) y la adecuación de la página los estándares (A, AA, AAA) que posteriormente nos definirán el tipo de accesibilidad que tenemos que ofrecer en los siguientes puntos y hacerlos visibles en la Web en algún apartado.

- Lenguaje: Especificar el lenguaje que está escrito facilita la lectura a los usuarios ya software (sintetizadores de voz, lectores …). Primero hay que saber los dos caracteres que definen el lenguaje, por ejemplo ’en’ para Inglés (consulta todos los códigos). Después se deberá incluir el lenguaje de la siguiente manera:

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>


Paso 2. Imágenes:

El contenido de las imágenes es opaco a las personas ciegas y puede serlo para aquellas que tienen una visión disminuida. Estas personas pueden utilizar un lector de pantalla que transforma el contenido de la Web haciéndolo audible. Por este motivo, la mayoría de las imágenes deben ir acompañadas por una descripción y texto alternativo en caso de que no pueda ser mostrada (quedan exentas las imágenes de fondo de pantalla, por ejemplo). Recomendaciones:

- Alt: Texto alternativo por si no se carga la imagen. El texto debe ser corto (no superior a los 255 caracteres) y no se recomienda usar descripciones repetitivas ni incluir las palabras, imagen, figura, fotografía ’. Se puede omitir esta información en imágenes muy repetidas o imágenes de fondo (sólo decorativas que no transmiten información). Ejemplo:

<img src=”foo/bar.jpg” alt=”Gente mirando un coche” … />


- Long-desc: Descripción larga de la imagen para definirla más extensamente. Se puede incluir si se trata de una fotografía, una figura, un gráfico, un dibujo, etc.

<img src=”foo/bar.jpg” long-desc=”Una fotografía donde aparecen 5 personas ante un coche, concretamente un Seat Leon rojo frente al mar.” … />

Paso 3. Texto y Enlaces:

El texto (y por extensión los enlaces) es el formato más accesible, pero también hay que tener en cuenta algunos aspectos para mejorar su visibilidad y función:

- Etiquetas de texto genéricas: Utilizar elementos estructurales más que elementos de presentación, etiquetas aceptadas y cuanto más semánticas mejor, usando las etiquetas de cabecera <h1> …<h6>, abreviaturas, citas, código, enfatizó el texto, etc. de forma estructurada.

- Tamaño de letra y color adecuado: El tamaño de la letra debe ser lo suficientemente grande como para ser consultado fácilmente (mínimo 12px. O 1.2 me). Se recomienda la inserción de botones para aumentar / reducir la letra. Para la elección del color de la letra adecuado consultar el apartado 5.

- Declarar la codificación de los caracteres en todos los documentos: este hecho evita la aparición de errores en caracteres especiales si se usa la codificación UTF-8.

- Línea inferior bajo los enlaces: Se recomienda conservar la línea inferior que acompaña a los enlaces, ya que los hacen más visibles y la mayoría de usuarios esperan esta notación.

Paso 4. Navegación:

La primera recomendación es facilitar la navegación haciéndola lo más sencilla, estructurada y fácil de entender posible, es decir, hacerla usable. Actualmente se han generado algunos tipos predeterminados de navegación que muchos usuarios esperan encontrar en una página web, llamados  ‘landmarks’ (espacios de interés), y entre otros, los más importantes son:

- Espacios: Menú superior, menús laterales y pie de página. así como ‘breadcrums’, botones de ’regresa al contenido, salta el contenido o ve al principio’. Ejemplo:

<a href="#body" title="Saltar Contingut">Saltar Contenido</a>

- Compartir: Los enlaces a páginas imprimibles, enviar la página por correo electrónico o funciones similares (enviar a redes sociales).

- Feedback: En una página personal, posiblemente, un contacto o ‘mailto:’, la referencia social de la empresa, dirección física, términos legales, condiciones de uso…

- Navegación por Teclado: También se facilitará el acceso a las diferentes secciones de la web mediante el teclado. Para realizar esto se debe combinar las opciones ‘accesskey’ que permiten acceder a una sección mediante una tecla opción ‘tabindex’ que permiten saltar entre elementos sucesivos (por ejemplo un formulario, tabla o partes de la web) mediante la tecla  ‘tab’:

<a href="/home.jsp" title="Pagina Principal" accesskey="H">Inicio</a>

<a href="/about.jsp" title="Sobre" accesskey="A">Sobre</a>

*(existen teclas recomendadas por ‘accesskey’. Para consultarlas esté atento y visita la próxima guía completa)

Paso 5. Color:

Lo mejor que se puede hacer para asegurarse la fácil lectura en pantalla es presentarla en blanco y negro (máximo contraste) o la opción de pasar a esta configuración con un botón similar a la imagen 1. Si la presentación de la Web no permite hacerla con B / N, se tendrá en cuenta el contraste entre el fondo de pantalla y el contenido de la Web de la siguiente forma:

- Contraste de color suficiente: Contraste mínimo necesario entre el fondo y el color primario de las letras para que usuarios con discapacidad pueda percibir la diferencia. El W3C ofrece un algoritmo para calcular el contraste:

o Definiendo la luminosidad de cada color por medio de la fórmula: ((valor de canal rojo * 299) + (valor de canal verde * 587) + (valor de canal azul * 114)) / 1000, la diferencia de luminosidad entre estos debe ser menor de 125.

o La diferencia de color se obtiene aplicando la fórmula: (máximo (valor de canal rojo 1, valor de canal rojo 2) - mínimo (valor de canal rojo 1, valor de canal rojo 2)) + (máximo (valor de canal verde 1, valor de canal verde 2) - mínimo(valor de canal verde 1, valor de canal verde 2)) + (máximo (valor de canal azul 1, valor de canal azul 2) - mínimo (valor de canal azul 1, valor de canal azul 2)), donde el resultado debe ser superior a 500.

Sólo si se cumplen las dos condiciones el contraste es suficiente.

Paso 6. Tablas y ‘frames’:
El uso de tablas para mostrar información está muy extendido, algunas recomendaciones:

-Utiliza tablas si se quiere mostrar información estructurada y alineada.

-  Utilizar la información de cabecera para las tablas de datos (los elementos <thead>,<tbody> y <tfoot>). Utilice los elementos<caption> </caption> como resumen de la tabla siempre que sea posible así como con el atributo ‘summary’ del elemento tabla.

- Utilice los títulos de cada celda.

- No se recomienda el uso de frames. Si aún así se opta por usarlos, proporcionar <noframes> </noframes> de contenido para cada página que establecen los marcos.

Paso 7. Hoja de Estilos

Las hojas de estilos (stylesheets) se usan para separar el contenido de la presentación, asegurando el acceso a la correcta visualización en distintos entornos. Se pueden crear diferentes hojas de estilos dependiendo de qué dispositivo ejecuta la página:

  • aural (auditivo) – Destinado a sintetizadores de voz.
  • braille (braille) – Publicado por dispositivos de retroalimentación táctil Braille.
  • embossed (en relieve) -Destinados a impresoras Braille.
  • print (impresión) – Destinados a material impreso, paginado y los documentos visualizados en la pantalla en modo de vista previa.
  • screen (pantalla) – Destinado principalmente para pantallas de ordenador de color.
  • tty - Destinados a los medios de comunicación utilizando una cuadrícula de caracteres de paso fijo, como teletipos, terminales, o dispositivos portátiles con capacidades de visualización limitada.

Se recomienda utilizar tamaños de fuentes relativos, configurables por los usuarios y las opciones de texto de sus navegadores. También comprobar la correcta visualización del sitio web en diferentes versiones de los principales navegadores (Internet Explorer 5.5 ysuperiores, Mozilla, Opera y Netscape), plataformas, equipos y configuraciones.

Paso 8. Formularios y interacción:

Para facilitar la movilidad por el interior de formularios Web y ayudar a navegar más fácilmente, se puede:

- Agrupar opciones relacionadas con las etiquetas <fieldset> y <optgroup>.

-  Usar la cantidad de los cinco equivalentes posibles elementos de texto en formularios - alto, nombre, valor, ir a y el título – que es legal per a la versión HTML DOCTYPE.

- Teclas de acceso y tabindex para mejorar la navegación mediante el teclado.

Paso 9. Multimedia:

Proporcione un contenido que, presentado al usuario, cumpla esencialmente la misma función o el mismo propósito que el contenido visual o auditivo. Se recomienda facilitar subtítulos y audio-descripción para el vídeo online.

Paso 10. Certificación y test:

Escribir y publicar una política de accesibilidad. Estado de las páginas a las que se aplica - por ejemplo, nuevas páginas o sólo las páginas adaptado después de una fecha determinada.

Certificar la accesibilidad de sus páginas con un patrón conocido, como los niveles de Accesibilidad del Contenido Web prioridad Directrices. Tenga en cuenta cualquier desviación conocida o deliberada de las normas.

- Al llevar a cabo pruebas con usuarios, incluir a los usuarios con discapacidad, si es del todo posible.

- Compruebe su propia tecnología de adaptación para las pruebas de usuario.

Comments Off

9 Pasos para Mejorar la Accesibilidad Web

Jul 06 2011 Autor: J.P Aulet under Accesibilidad,Internet

La accesibilidad web consiste en la elaboración de páginas web en Internet que puedan ser accesibles para todos los usuarios independientemente de sus discapacidades (visuales, auditivas, cognitivas, motrices, técnicas o ambientales). Cuando Tim Berners-Lee creó los fundamentos de la Web, era su deseo de que se convirtiera en una comunidad donde todo el mundo tuviera acceso, tal y como reflejan estas palabras:

«El poder de la Web es su universalidad. El acceso para todos
sin importar su discapacidad, es un aspecto esencial. ”

Hay validar la accesibilidad con una suma de procedimientos automáticos y manuales.Los procedimientos automáticos son rápidos y baratos pero no detectan todos los aspectos de la accesibilidad. La revisión manual será de ayuda para garantizar la claridad del lenguaje y la facilidad de navegación.

Es recomendable usar métodos de validación desde las primeras etapas del desarrollo. Si se planifican o detectan pronto, los problemas de accesibilidad son más fáciles de corregir y evitar, pero si no ha sido así existen técnicas para comprobar y mejorar la accesibilidad web:

Use una herramienta automática de accesibilidad y una herramienta de validación de navegadores. Hay que tener presente que un programa no puede llegar a detectar algunos aspectos relativos a la accesibilidad, como por ejemplo la semántica de los enlaces, la idoneidad de un texto equivalente, etc.

A continuación se describen diversos métodos para mejorar el nivel de Accesibilidad:

  1. Valide la sintaxis (HTML, XML, etc.).
  2. Valide las hojas de estilo (por ejemplo CSS).
  3. Utilice un navegador sólo de texto o un emulador.
  4. Utilice varios navegadores gráficos
    1. con los altavoces y la visualización de gráficos activada
    2. con la visualización de los gráficos desactivada
    3. sin altavoces
    4. sin ratón
    5. con marcos, scripts, hojas de estilo y miniaplicaciones (applets) desactivados.
  5. Utilice varios navegadores, más antiguos y más recientes.
  6. Utilice un navegador con voz automática, un lector de pantalla o un software de ampliación, una pantalla pequeña, etc.
  7. Use herramientas de corrección ortográfica y gramatical. Si una página tiene un error ortográfico, al pasar por un sintetizador de la voz, este intentará adivinar de qué palabra se trata y tal vez el resultado será incomprensible para el oyente. La comprensión mejora si la gramática es correcta.
  8. Revise el documento para asegurarse de que es claro y sencillo.
  9. Por último, invite personas con discapacidades para revisar los documentos. Como usuarios, ya sean noveles o expertos, proporcionarán una retroalimentación valiosa sobre problemas de accesibilidad y de usabilidad y sobre su importancia.

Comments Off

Catálogo de guías para crear documentos digitales accesibles

Jun 06 2011 Autor: J.P Aulet under Accesibilidad,Internet

guia accesibilidadEn la web del Grupo de Investigación en Interacción Persona Ordenador e Integración de Datos tienen un muy buen catálogo de guías para crear documentos digitales accesibles o se puede consultar todo en un sólo documento. La información está disponible en catalán y castellano. Cómo dicen en su página:

- “La guía de contenido digital accesible está diseñada para dar información paso a paso sobre como estructurar, formatear y escribir un documento accesible realizado con Microsoft Word, OpenOffice Writer o Microsoft Power Point.Se describe como transformar estos documentos a formato PDF y mantener a la vez sus propiedades de accesibilidad.”

Vía: Griho UDL

Comments Off

Accesibilidad – Ficheros “obligados” en una web

May 06 2011 Autor: J.P Aulet under Accesibilidad,General

sitemapAl iniciar un proyecto web, debemos constuirlo siguiendo los estándards disponibles en el momento, para hacer más accesible y navegable el sitio. Uno de estos ‘estandards’ es la existencia de una série de archivos en la mayoria de sitios web, los ‘sitios de interés’ o ‘landmarks‘ en inglés. Estos, a modo de orientación, són las siguientes páginas:

  1. index.html: incluye esta página (puede ser una redirección) aún que no sea la página de inicio o principal del sitio. También puede resultar util la inclusión de index.htm y index.cgi por si algún usuario lo solicita.
  2. index.rss: página dónde encontraremos la información en forma de ‘feed’ o sindicación.
  3. 404.html: para redirigir al usuario si una página solicitada no existe o hay algún error, cosa más comun de lo que nos podriamos pensar. Seria recomendable incluir un buscador o un mapa web para dar posibles soluciones al usuario.
  4. sobre.html: muestra información sobre el própio sitio: uso, funcionalidad, equipo humano, motivo creación, tipo de sitio….
  5. contacto.html: información sobre quién gestiona la página, cómo comunicarnos por internet o fisicamente. Normalmente incluyen información de la empresa  (nombre, situación, dirección…) y un formulario de contacto.
  6. copyright.html/terminos de uso.html: información sobre la protección de tus contenidos, ya sea con copyright o  otras licencias como Creative Commons. Informa del uso apropiado del contenido y a quien pertenece.
  7. privacidad.html: si tu aplicación/página solicita información privada de los usuarios, es necesario mostrar cómo se va a tratar, si se puede vender a terceros, el uso que se dará a la información….
  8. robots.txt: para que los contenidos que deseas de tu web sean indexados automáticamente por los buscadores.
  9. sitemap: mapa del sitio, normalmente en formato de árbol dónde se ve a simple vista la estructura lógica de la web.
  10. [ seguridad.html - opcional ]: si tu web existen sistemas de seguridad extra o certificados digitales, se deben incluir en esta página que informa al usuario de estas medidas.
  11. [ accesibilidad.html - recomendado ]: si tu web dispone de un sistema de accesibilidad mejorada cómo puede ser navegación por teclado, una hoja de estilos propia o cualquier otra especificación, debe ir incluido en esta página.

De esta forma, siempre tendremos una estructura similar de nuestro sitio, que facilitará a la navegación y acceso de los usuarios.

Comments Off