Accesibilidad web: generalidades

Recursos

Guía de técnicas web y fallos comunes para aplicar la accesibilidad (W3C)

La misma guía, en su versión desarrollada (un buen meño, pero interesante)

Hacer accesible tu sitio

La Accesibilidad en la web es la capacidad que poseen usuarios con distintos requisitos funcionales para utilizar los sitios web de manera fácil y eficaz. Esto incluye el acceso desde teclado, la ampliación de la pantalla, la lectura de la pantalla y reconocimiento de voz. Si piensas que esto no es importante, recuerda que tus dos más importantes visitantes son ciegos, sordos e incapaces de usar el ratón: los spiders de googlebot y sorber, Google y Yahoo!, sólo pueden leer el texto de tu página. Ellos no pueden ver tus impactantes efectos mouseover, interpretar los matices de tus imágenes, o disfrutar de tus elegantes efectos de sonido.

A continuación se resumen las normas para hacer accesible tu sitio. Después de la tabla de contenido muestro métodos para asegurar que tu contenido sea visible para los usuarios, pero para considerar compatible y correcto el contenido, debe ser presentado de una forma accesible. La siguiente lista debe obtener el 90% del trabajo a realizar. El resto de los links sugiere direcciones específicas para garantizar una accesibilidad completa.

Unas breves reglas:

El contenido que está bien escrito será más fácil de acceder para todo el mundo, incluyendo a las personas con dificultades cognitivas y de aprendizaje. El contenido debe ser corto, sencillo y bien organizado. Los párrafos deben ser breves, con una idea por párrafo. Asegúrate de que no haya errores ortográficos o gramaticales.
El idioma del contenido debe ser definido a través del atributo «lang». Además de definir el idioma para el documento, todos los cambios en el idioma principal de la página deben indicarse. Se deben proporcionar definiciones y explicaciones de los términos técnicos, abreviaturas y acrónimos.
Cada página debe tener un único título, que se refiera a su contenido. Usa cabeceras y subcabeeras con sentido (headings y subheadings). Los títulos y subtítulos de la página deben ser definidas utilizando una estructura correcta de <h1> a <h6>. El contenido debe aparecer en párrafos o list items. las lista deben ser marcadas correctamente. las sublistas deben ser anidadas correctamente. El contenido debe aparecer en párrafos o los elementos de lista: evita texto anónimo (sin tags).
Los usuarios deben ser capaces de alcanzar y activar todos los enlaces, formularios y tener funcionalidad total sin el uso de un ratón. Además, el texto de los enlaces y los atriburos «alt» de las imágenes con link deben tener sentido cuando se lean fuera de contexto.
Comience el contenido accesible desde la primera codificación de tu página, usando XHTML en primer lugar, sin la presentación (CSS) o la interactividad (JavaScript). Luego agregua la presentación (CSS) y comportamiento (JavaScript) con capas de hojas de estilo y scripts externos. Piensa «Estándares Web»: si tu sitio está codificado semánticamente, es probable que sea accesible.
No se dirija las tecnologías de asistencia usand display: none, ya que ocultará el contenido de todos los usuarios que con CSS habilitado, incluyendo lectores de pantalla. En lugar de hacer esto, colocar el contenido oculto fuera de la página. Haz esto sabiamente, ya que los elementos de los formularios y los enlaces colocados fuera de la página todavía puede recibir «atención» usando el teclado.

Tecnología de Asistencia

Los lectores de pantalla son una forma de tecnología de asistencia. Un lector de pantalla es un software que se encuentra en la parte superior de otras aplicaciones, y que lee en voz alta lo que otros softwares muestran en la pantalla. Mientras que los desarrolladores web a menudo piensan en los lectores de pantalla en el desarrollo de sitios web accesibles, debemos recordar que los lectores de pantalla no son las únicas tecnologías de asistencia que se pueden utilizar con tu web: los usuarios pueden hacer zoom de tu sitio, utilizar el navegador para aumentar el tamaño de la fuente, visitar el sitio web con dispositivos Braille actualizables o imprimir las páginas con impresoras Braille, navegar por la web con un teclado o aplicar su propia hoja de estilo a tu sitio.

Sección 508 directrices y otros consejos para
hacer su sitio web accesible

Las WCAG (Web Content Accessibility Guidelines 1.0) son unas recomendaciones fueron escritas en 1999, por lo que son un poco anticuadas. Lo que muestro a continuación se basa en sus recomendaciones y lo he tratado de actualizar para reflejar los modernos estándares web y web 2.0. Las directrices WCAG 2 se encuentran aún en proyecto, pero están a punto de concluir.la idea es encontrar esta página más útil y más fácil de comprender que las directrices oficiales (son bastante aburridas).

A continuación se presentan las directrices a considerar en el desarrollo de sitios web. Mientras que el W3C las llama «directrices», deben considerarse «normas». A raíz de estas directrices no sólo ayudarás a hacer tu sitio web más accesible a las personas con discapacidades de diversa índole, si no que además tu sitio mejorará su capacidad de ser indexado, probablemente tu sitio web funcionará en los medios de comunicación alternativos tales como teléfonos móviles, y se te considerará una buena persona. Además este sitio cumplirá con las normativas en todos los países que requieren de sitios que sean accesibles.

Texto equivalente para imágenes y animaciones:

Debemos proporcionar siempre un texto equivalente para todo elemento no textual (por ejemplo, a través de «alt», «longdesc» o en el elemento de contenido).

Atributo alt: texto alternativo para las imágenes

El texto del atributo «alt» proporciona un título o frase descriptiva a la imagen que acompaña. El atributo «alt» debe describir el contenido de la imagen. Describir la imagen no significa comienzar con «Esta es una imagen de…». El usuario ya sabe que es una imagen. Si no sabes lo que texto usar para el alt, imagina la lectura del documento a través del teléfono: ¿cómo describir la imagen a la persona en el otro extremo del teléfono? Los atributos Alt son esenciales para los usuarios de softwares lectores de pantalla que tienen problemas de visión, es útil para los usuarios de navegadores gráficos que tiene deshabilitado el uso o carga de imágenes (como muchos usuarios de teléfono móvil), y te ayudan si la imagen no se carga.También es útil para los usuarios de herramientas de sólo texto como Lynx, y algunos navegadores de teléfonos móviles. Aunque algunos formatos de imágenes, como PNGs, permiten la inclusión de meta-datos que describen el contenido, ningún navegador o lector soporta esta función, por lo que aunque puedes incluir los datos para un uso futuro, no se puede confiar en que actualmente sirvan para algo. Si no te he convencido de la importancia todavía del uso de Alt, también podemos decir que ayuda con la SEO, ya que los motores de búsqueda no tienen ninguna manera de «leer» las imágenes.

Hay 2 circunstancias en las que el atributo alt puede estar nulo o vacío (alt = «»): imágenes y layout images que se incluyen dentro del mismo anchor tag como enlace textual. Si eres un desarrollador de sitios web que respeta los estándar, nunca dejarás los atributos alt vacíos. ¿Por qué? Porque los desarrolladores correctos usan background images, no imágenes como layout. De igual forma, los desarrolladores correctos emplean background images (y sprites) en lugar de enlaces con imágenes.

Atributo longdesc: descripción larga para las imágenes
y cualquier medio de comunicación

El atributo «longdesc» puede ser esencial cuando una imagen transmite una información tan importante como un gráfico de sectores o un descubrimiento científico. El longdesc es un enlace a una página que contiene sólo el texto extendido, ¡sólo texto!: la descripción de la imagen. Si el contenido de la imagen se describe en el texto contenido en la página, el longdesc no es necesario.

Multimedia:

Se deben sincronizar con la presentación multimedia alternativas equivalentes. Cuando incluimos componentes multimedia en la página web, como una película flash, un gif animado, un clip de vídeo, etc, el texto alternativo que describe el contenido de los medios debe cambiar al igual que cambia la presentación. Cualquier cambio dinámico que ocurra en el contenido multimedia (ya sea en un <frame> <img> <object> o <script>) también debe actualizar el elemento «alt».

La aplicación de este requisito de la accesibilidad a la web incluye subtítulos y transcripciones de cualquier audio hablado en los medios de comunicación (piensa en «audición»), y descripciones de texto de los cambios visuales (piensa en «discapacitados visuales»). No es necesario incluir subtítulos para los sonidos que no proporcionan información alguna, como la música de fondo. Pero se deben incluir subtítulos para todos los sonidos que dan sentido al audio, incluyendo todas las palabras habladas y sonidos de fondo, como romper una ventana, e incluso palabras de una canción, si el sonido o las letras de las canciones son necesarias para transmitir el significado de los componentes multimedia.

Color:

No transmitir la información sólo con el color

La página Web debe estar diseñada de tal manera que toda la información transmitida con el color también está disponible sin color. Por ejemplo, mi tabla que indica el nivel de soporte de CSS del navegador utiliza el color para mostrar diversos niveles de soporte. Sin el color de este cuadro sería totalmente inútil si no fuera por los símbolos que incluyo (checkmarks, deltas y cruces) que proporcionan información redundante.

Los cambios visuales de color no deberían ser la única forma de transmitir información, ya que si para mostrar información en una tabla sólo utilizase color, esta página no sólo sería un reto para los usuarios ciegos al color, sino también para los usuarios que acceden a ella página a través de teléfonos móviles, Lynx, con la CSS desactivada, y con Safari. Todos ellos serían totalmente incapaces de utilizar esta tabla.

Usa suficiente contraste en el diseño de la web como para que tu sitio sea legible para los usuarios con ceguera al color.

En el desarrollo de sus páginas web, usa texto y colores de fondo para ofrecer el máximo contraste. En el diseño de páginas debe presentarse un claro contraste entre los colores de fondo y primer plano. Mucha gente piensa que la ceguera de color significa que estos enfermos ven el mundo como en una televisión en blanco y negro. Este tipo de ceguera al color existe, pero es extremadamente rara. La ceguera al color parcial, sin embargo, no es rara. El treinta por ciento de los hombres sufren algún tipo de deficiencia en apreciación del color. El contraste es también muy importante para las personas que, aún pudiendo ver, tienen reducida la visión. ¿tu texto es verde y tus links son de un color similar, sin text decoration? Echa un vistazo a tu sitio web usando una simulación de ceguera al color (http://colorfilter.wickline.org/).

En el desarrollo de la web, no incluyas código HTML de color en la propia página.

<h2 style="color:#F00">Índice de artículos</h2>

Todos los colores deben ser controlados a través de hojas de estilo externas. Esto permite que el usuario pueda aplicar sus propias hojas de estilo y paletas de colores.

Hojas de Estilo:

Los documentos deben ser codificados semánticamente, incluyendo la codificación de texto en un orden que tenga sentido si se lee sin una hoja de estilo. El headers se debe utilizar para los encabezados, las listas para las listas, los párrafos para los apartados. Esto ayuda no sólo para accesibilidad humana, si no también permite que las páginas puedan ser accesibles a los motores de búsqueda.

Separa tu presentación, o «estilo», de tu contenido. Todas tus hojas de estilo deben ser externas. No incluyas estilos in line. No uses !important. (gran tentación, para los amantes de los hacks de determinadas versiones de exploradores).

Todo el texto debe configurarse con un tamaño relativo a al tamaño de letra de la configuración del navegador. Usa ems en lugar de píxels en al declarar el font-size. Si se declara el tamaño de la letra usando píxels, IE6 no va a cambiar el tamaño de la fuente cuando el usuario decida cambiarlo a través de su navegador. IE6 no respeta los tamaños de fuente relativos. Ésta es la razón por la que se recomienda usar ems en lugar de píxeles. Los porcentajes también son útiles, pero son complicados de establecer correctamente, sobre todo cuando hablamos de navegaciones cruzadas entre páginas. (WCAG 3.4: Use notación relativa en lugar de unidades absolutas en el lenguaje de marcado de los valores de atributos de hojas de estilo así como en los valores de las propiedades. Prioridad 2)

Idioma:

Lenguaje Natural

Indica el idioma de tu contenido, bien con una etiqueta (como se muestra abajo) o bien a través de encabezamientos HTTP.
<HTML lang="fr"> ....resto de un documento HTML escrito en francés... </HTML>

Si la página está en Inglés, francés, español o el urdu, debe hacérselo saber al navegador. Los programas lectores de pantalla usan esta información. Google también utiliza esta información. Si a continuación, utiliza un idioma diferente a lo largo de la página, indicar se debe que el lenguaje ha cambiado para esa determinada sección de la página. (WCAG 4.1 – Identificar claramente los cambios en el lenguaje natural de un documento de texto y en cualquier texto equivalente (por ejemplo, captions). [Prioridad 1]) En el texto impreso, la lengua extranjera entrecomillada por lo general aparece en cursiva. Del mismo modo, debes usar el atributo lang para indicar el idioma.

<p> tuvo otro <span lang="fr"> deja vu </span> la última noche.</p>

Usando el atributo lang se le informa a los programas lectores de pantalla para el uso alternativo de pronunciación, se informa a los traductores Braille para que no contraigan letras, y también se informa al traductor Babel Fish de cómo interpretar determinados fragmentos del contenido.

Nivel del Idioma

Utiliza para el contenido de la web el lenguaje más claro y sencillo. Si estás escribiendo un sitio para niños, usa primeros, segundos o terceros niveles de lenguaje. Si estás escribiendo para el público en general, utiliza el lenguaje más simple posible, siempre que no sea pedante. En general, el octavo grado de lenguaje es el adecuado. Si estás escribiendo un artículo para una revista científica, técnica o un artículo, usa apropiadamente la terminología sin ser innecesariamente complejo.

Trata de recordar lo que aprendiste en el colegio en cuanto a la estructuración de la información: describir de lo que vamos a hablar en las headings, y el estado o los supuestos de nuestro objetivo en el principio del párrafo o sección. Limitemos los párrafos a una idea principal.

Abreviaturas y siglas

Debemos especificar lo que significa cada abreviatura o acrónimo en el documento. Aunque la WCAG recomienda que se debería ampliar el significado del término sólo cuando aparezca la primera instancia de la abreviatura o acrónimo, puede ocurrir que el usuario llegue a tu página a través de un hipervínculo anclado (anchored hyperlink), y por tanto, no conocerá la definición de dicho término. No es necesario ampliar todas las abreviaturas o siglas: ampliar las que podrían ser útiles para el usuario, y no ampliar las que se utilizan en el lenguaje cotidiano. Por ejemplo, todos conocemos el significado de TV o DVD. Si vas a utilizar el término THC debemos ampliarlo, porque es probable que sean pocos los que recuerdan que significa Tetrahidrocannabinol. Lo definiremos la primera vez que se use, y luego emplearemos <acronym title=»Tetrahydrocannabinol»>THC</acronym> para todos las demás apariciones dentro de la página. Si vas a utilizar un acrónimo que se utiliza comúnmente, por ejemplo HTML, ampliar la primera vez que se usa: si un usuario no sabe lo que significa, puede buscar la primera aparición (y por tanto su definición).

Esto también es aplicable a las frases recortadas que se emplean para los encabezados de filas o columnas de tablas. Si el texto de encabezado ya está abreviado, proporciona una expansión con ABBR. Si el texto es largo, puedes poner una abreviatura. Ejemplo.

  ...
  <TH>Nombre</TH>
  <TH>Nº DNI
  ...

Listas

Los elementos de listado HTML DL, UL y OL deberían ser usados únicamente para crear listas, no para formatear o para efectos tales como sangría. Consulta la información sobre CSS y tablas para disposición de página en el documento sobre Técnicas CSS[WCAG10-CSS-TECHNIQUES].

Las listas ordenadas ayudan a navegar a los usuarios no videntes. Los usuarios invidentes pueden «sentirse perdidos» en las listas, especialmente en las anidadas y en aquellas que no especifican el nivel de anidamiento para cada ítem de la lista. Hasta que las aplicaciones de usuario proporcionen un medio para identificar claramente el contexto dentro de una lista (por ejemplo, soportando el pseudo-elemento «:before» en CSS2), los desarrolladores de contenido deberían incluir pistas contextuales en sus listas.

Para listas numeradas, los números compuestos son más informativos que los simples. Así, una lista numerada «1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1, …» proporciona más información que la misma lista sin números compuestos, la cual se formatearía así:

1.
  1.
  2.
    1.
  3.
2.
  1.

y sería narrada como «1, 1, 2, 1, 3, 2, 1», sin aportar información sobre la profundidad dentro de la lista.

La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como «1», «1.1», , «1.1.1», etc.

<STYLE type="text/css">
   UL, OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

Mapas de imagen del lado del servidor:

Probablemente no es problema de la mayoría de los desarrolladores, y las imágenes del lado del servidor se han convertido ya en algo en casi obsoleto. La mayoría de los sitios han dejado de lado los mapas de imagen del lado del servidor. La excepción la constituyen hechos como hacer clic en el sistema de información geográfica de los mapas. Por lo tanto, si insistimos en usar un mapa de imagen del lado del servidor, deben proporcionarse vínculos de texto redundantes para cada región activa.

Mapas de imagen del lado del cliente:

Se debe incluir el atributo Alt para cada zona del mapa. Incluir también el atributo alt en la imagen. Los mapas de imagen del lado del cliente, a diferencia de los mapas de imagen del lado del servidor, por lo general son accesibles con un poco de código, por lo que la recomendación es incluir mapas de imagen del lado del cliente en lugar de mapas de imágenes del lado del servidor. Los navegadores modernos soportan los mapas de imagen del lado del cliente, con la adición de atributos «alt» en los puntos activos de la imagen. Los lectores de pantalla pueden proporcionar más pistas. Sin embargo, si el usuario tiene el «cargar imágenes» deshabilitado, la única forma viable es proporcionar enlaces (links) alternativos. Por lo tanto, incluir un atributo «alt» en todos y cada uno de los puntos activos del mapa.

Tablas de datos

Las tablas deben ser utilizadas sólo para datos tabulares. No utilice tablas para el diseño (muy extendido hace cierto tiempo).

En las tablas de datos deben ser identificadas las cabeceras de fila y columna.

El uso de los encabezados de columna y fila – <th> en lugar de <td> – se convierte en crucial a la hora de una tablaque tenga más de dos columnas o dos filas. Sin las cabeceras, la tecnología de asistencia como los softwares lectores de pantalla sólo pueden recitar el contenido de la tabla, sin hacer referencia a lo que a columna o fila se refiere.

Este ejemplo muestra cómo asociar celdas de datos (creadas con TD) con sus correspondientes encabezamientos a través del atributo «headers«. El atributo «headers» especifica una lista de celdas de encabezamiento (etiquetas de fila y columna) asociadas con la celda de datos actual. Esto requiere que cada encabezamiento de celda tenga un atributo «id» que lo identifique.

   <TABLE border="1" 
          summary="Esta tabla esquematiza el número de 
                  tazas de café consumidas por cada senador, 
                  el tipo de café (descafeinado o normal) 
                  y si se ha tomado con azúcar.">
     <CAPTION>Tazas de café consumidas por cada senador</CAPTION>
     <TR>   
         <TH id="header1">Nombre</TH>

         <TH id="header2">Tazas</TH>     
         <TH id="header3" abbr="Tipo">Tipo de café</TH>   
         <TH id="header4">¿Azúcar?</TH>

     <TR>  
         <TD headers="header1">T. Sexton</TD>  
         <TD headers="header2">10</TD>
         <TD headers="header3">Expreso</TD>

         <TD headers="header4">No</TD>  
     <TR>  
         <TD headers="header1">J. Dinnen</TD> 
         <TD headers="header2">5</TD>

         <TD headers="header3">Descaf</TD>
        <TD headers="header4">Si</TD>
  </TABLE>

Un sintetizador de voz podría leer esta tabla como sigue:

  Título:  Tazas de café consumidas por cada senador
  Resumen: Esta tabla esquematiza el número de tazas de café 
           consumidas por cada senador, el tipo de café 
           (descafeinado o normal) y si se ha tomado con azúcar.
  Nombre:  T. Sexton, Tazas: 10, Tipo: Expreso, Azúcar: No
  Nombre:  J. Dinnen, Tazas: 5, Tipo: Descaf, Azúcar: Si

El siguiente ejemplo asocia las mismas celdas de encabezamiento (TH) y datos (TD) como antes, pero esta vez utiliza el atributo «scope» en lugar de «headers«. «Scope» debe tener uno de los siguientes valores: «row», «col», «rowgroup» o «colgroup». «Scope» especifica la batería de celdas de datos que han de asociarse con la celda de encabezamiento correspondiente. Este método es particularmente útil para tablas simples. Debería tenerse en cuenta que la versión hablada de esta tabla podría ser idéntica a la del ejemplo anterior. La elección entre los atributos «headers» y «scope» depende de la complejidad de la tabla. No afecta al resultado en la medida en que en la etiqueta haya quedado clara la relación entre el encabezamiento y las celdas de datos.

   <TABLE border="1" 
          summary="Esta tabla esquematiza ...">  
      <CAPTION>Tazas de café consumidas por cada senador</CAPTION>

      <TR>  
           <TH scope="col">Nombre</TH>
           <TH scope="col">Tazas</TH>
           <TH scope="col" abbr="Tipo">Tipo de Café</TH>  
           <TH scope="col">¿Azúcar?</TH>

     <TR>  
           <TD>T. Sexton</TD>  <TD>10</TD>
           <TD>Expreso</TD>   <TD>No</TD>

     <TR>  
           <TD>J. Dinnen</TD>  <TD>5</TD>
           <TD>Descaf</TD>       <TD>si</TD>

  </TABLE>

El siguiente ejemplo muestra cómo crear categorías en una tabla usando el atributo «axis» (eje).

   <TABLE border="1">
     <CAPTION>Liquidación de gastos de viaje</CAPTION>
     <TR>  
          <TH></TH>  
          <TH id="header2" axis="gastos">Comidas
          <TH id="header3" axis="gastos">Hotel
          <TH id="header4" axis="gastos">Transportes
          <TD>subtotales</TD>    
     <TR>  
          <TH id="header6" axis="lugar">San Jose
          <TH> <TH> <TH> <TD> 
     <TR>  
         <TD id="header7" axis="fecha">25-ago-97
         <TD headers="header6 header7 header2">37,74
         <TD headers="header6 header7 header3">112,00
         <TD headers="header6 header7 header4">45,00
         <TD>

     <TR>  
         <TD id="header8" axis="fecha">26-ago-97
         <TD headers="header6 header8 header2">27,28
         <TD headers="header6 header8 header3">112,00
         <TD headers="header6 header8 header4">45,00 
         <TD>

     <TR>  
         <TD>subtotales 
         <TD>65,02
         <TD>224,00
         <TD>90,00
         <TD>379,02
     <TR>   
         <TH id="header10" axis="lugar">Seattle
         <TH> <TH> <TH> <TD>

     <TR>  
         <TD id="header11" axis="fecha">27-ago-97
         <TD headers="header10 header11 header2">96,25
         <TD headers="header10 header11 header3">109,00
         <TD headers="header10 header11 header4">36,00
         <TD>

     <TR>  
         <TD id="header12" axis="date">28-ago-97
         <TD headers="header10 header12 header2">35,00
         <TD headers="header10 header12 header3">109,00
         <TD headers="header10 header12 header4">36,00 
         <TD>

     <TR>  
         <TD>subtotales
         <TD>131,25
         <TD>218,00
         <TD>72,00
         <TD>421,25
     <TR>   
         <TH>Totales
         <TD>196,27
         <TD>442,00
         <TD>162,00
         <TD>800,27
   </TABLE>

Columas o filas con mútiples niveles lógicos

Las etiquetas <thead> y <tbody> deben utilizarse para distinguir entre los datos de cabecera de la tabla y los datos del cuerpo de la tabla. Se debe utilizar el marcado para asociar celdas de datos con celdas de cabecera en aquellas tablas que tienen dos o más niveles lógicos de encabezados de columna o fila. Información adicional, como «resumen» (summary) y «alcance» (scope)se puede aplicar a tablas de datos para que su contenido y la intención tomen significado para aquellos usuarios que usen algún tipo de software de asistencia. El atributo «resumen» debe resumir los datos que contiene la tabla. El «ámbito de aplicación» o «alcance» puede ser muy útil para los encabezados de columna. Para tablas de datos simples, el atributo «scope» debe ser utilizado para diferenciar entre las cabeceras de fila y encabezados de columna. Para tablas complejas de datos, cada celda de la tabla de datos debe ser explícitamente asociada con su cabecera de la tabla (table header) correspondiente. Para ello, agregue un atributo «id» a la etiqueta <th> y referencie este id usando el atributo «headers» dentro de cada etiqueta <td>.

Frames

No utilizar frames, especialmente conjuntos complejos de frames. Pero, si se van a utilizar frames, se deben titular los frames con texto que facilite la identificación y la navegación. Si utiliza frames (por favor no!) incluir un atributo «title» que identifique con precisión su función o finalidad. Con los atributos «title», «name» y «longdesc», los frames pueden ser más navegables para el software lector de pantalla, pero aún así no se deben utilizar. El uso de los iframes es correcto. Utilice el atributo de «title» para iframes.

Frecuencia de parpadeo

A menos que queramos aparecer en el top ranking en http://www.websitesthatsuck.com, no debemos usar cosas que parpadeen. Sin embargo, si ése es realmente nuestro objetivo, debemos evitar diseñar páginas que parpadeen con una frecuencia mayor a 2 Hz e inferior a 55 Hz. El parpadeo y movimiento continuo (a partir de applets o scripts o refrescos) puede causar convulsiones en personas con epilepsia fotosensible. Trata de no utilizar elementos en secuencias de tiempo. Si los utilizas, elije el momento y frecuencia cuidadosamente.

Sólo texto equivalente

Proporcionar una página de sólo texto, con información o funcionalidad equivalente para hacer páginas web accesibles cuando cumplir la accesibilidad no puede realizarse en cualquier otra forma. El contenido de esta página de sólo texto debe actualizarse cada vez que cambia la página principal. Sólo usar este recurso a páginas alternativas cuando no hay otras maneras de hacer sus páginas accesibles. Una página obsoleta o no actulizada es tan frustrante como una que es inaccesible, ya que, en ambos casos, la información presentada en la página original no está disponible. Antes de recurrir a una página alternativa, reconsidere el diseño de la página original.

Hacer accesibles los lenguajes de scripting

Cuando las páginas utilizan lenguajes de scripting para mostrar el contenido, o para crear elementos de la interfaz, la información proporcionada por script debe ser identificada con texto funcional que pueda ser leído por softwares de asistencia al usuario (lectores de pantalla, por ejemplo). El método más fácil de proporcionar esta alternativa accesible a escribir código HTML que incluya la etiqueta <noscript>. Otras opciones incluyen el garantizar que el contenido dinámico y las actualizaciones se pueden hacer o son accesibles. Algunos sostienen que el <noscript> no debe ser utilizado, y yo sin duda comprendo sus motivos, ya que el <script> debe hacer un <noscript> externo. Sin embargo, hay ciertos casos en los que tiene sentido, por lo que no voy a decir «no la use.»

Si se está usando javascript y tenemos un «return false» como respuesta al gestor del evento OnClick, el vínculo del href se debe reorientar a una página donde se realice el efecto deseado. No utilice <a href=»#» ….> o <a href=»javascript:…..> en lugar de usar <a href=»validURL….> Si tiene una X como un enlace para ocultar un div en una página, al hacer clic en el vínculo X con javascript desactivado debemos redirigir al usuario a una página con ese div oculto.

Según el el W3C, usted debería utilizar los eventos de usuario de ratón y de teclados por parejas: utilizar «onmousedown» con «onkeydown», «onmouseup» con «onkeyup» y «onclick» con «OnKeyPress», pero ya que la mayoría de los sitios no son accesibles, muchos usuarios que no pueden utilizar ratones crean una tecla para actuar como un mouseclick, y el uso de OnKeyPress puede anular sus ajustes. Por lo tanto, es importante asegurarse de que cualquier suceso o acción que se suceda a través de javascript está también disponible para las personas sin javascript.

AJAX accesible

Los softwares lectores de pantalla no tienen conocimiento de cuándo una aplicación AJAX o DHTML realiza cambios dinámicos en el contenido de la página. AJAX se considera accesible si no cambia el contenido de la página a cualquier otro contenido que lo mejore o, si lo hace (realmente cambia el contenido), que el usuario sea informado de un cambio por un medio distinto de un visual. Cuando el contenido cambia dinámicamente, los nuevos contenidos deben reclamar la atención para informar al usuario de que el contenido es nuevo. Sin embargo, sólo elementos de un formulario y los vínculos pueden reclamar atención (receive focus).

Hay dos sugerencias para hacer más accesible AJAX

La primera sugerencia es hacer que el lector de pantalla sepa que hay nuevo contenido mediante un valor tabindex de -1 aplicado a los nuevos elementos que no pueden recibir atención (focus). Aunque -1 no es un valor válido para tabIndex, es capaz de recibir el focus con JavaScript, pero no se colocará en el orden de los tab, que lo hace a «encontrable» al lectores de pantalla, siempre sin causar problemas para la gente que navega usando el teclado. Para hacer el contenido dinámico disponible, dar focus al contenido añadido mediante el tabIndex usando javascript.

La segunda opción es utilizar la función de atributo (role attribute). No sólo con AJAX, si no también en todas las aplicaciones Web 2.0, cualquier cosa puede ser un botón o una interfaz de control (como un control deslizante o contenedor). El problema para la accesibilidad es que no hay forma para un lector de pantalla de saber acerca de la funcionalidad de estos elementos. La función de atributo XHTML (XHTML role attribute) permite la adición de información semántica al elemento contenedor.

Applets, objetos, plug-ins

Cuando una página web requiera que un applet, plug-in u otra aplicación esté presente en el sistema cliente para interpretar el contenido de la página, la página debe proporcionar un enlace al plug-in o applet. Los objetos y datos que requieran plug-in pueden estar presentes en el código HTML de una forma anidado de tal manera que, si el navegador del usuario no puede mostrar el tipo de dato en cuestión, intentará mostrar un tipo de datos equivalente en especificación del objeto. Éste es un código HTML más complicado de crear y requiere que varios tipos de datos están alojados en el servidor, pero es un método más completo de inclusión, que no requiere ni navegadores ni tecnologías avanzados.

Formularios

Cuando los formularios electrónicos están diseñados para ser completados o line, el formulario debe permitir que las personas que utilizan software de asistencia puedan acceder a la información, a los campos, y la funcionalidad necesaria para la realización y envío del formulario, incluyendo todas las direcciones y señales. Si va a enviar el formulario de forma dinámica basándonose en una acción del usuario diferente a un clic en «enviar», asegúrese de que el formulario sigue siendo enviable con javascript deshabilitado.

Por lo tanto, cada campo de formulario debe tener una etiqueta que esté asociada a él usando los atributos «for» y «id». Where a textual label does not fit into the visual design of the page, the field should still have the label hidden through CSS. Cuando una etiqueta de texto no encaja en el diseño visual de la página, el campo debe tener la etiqueta oculta a través de CSS. Remember that you should not use display: none , as that will hide it from screen readers as well. Recuerde que usted no debe usar display: none none, ya que se esconden de los lectores de pantalla también.

Seguimiento del contenido

Se debe proporcionar un método para evitar al visitante realizar tareas de navegación repetitivas. Hay una serie de métodos para facilitar la navegación, sobre todo orientados a personas que usan algún tipo de tecnología para ayudar en la navegación. Debemos ser coherente en el diseño de cada página, puediendo aportar un enlace que salte a secciones concretas, eludiendo páginas similares intermedias. Sería algo parecido al «back to top» usado en páginas de alto contenido. Al utilizar múltiples enlaces juntos, debemos separarlos convenientemente, a fin de que un software lector pueda analizarlos convenientemente. Por ejemplo, utilice los elementos de una lista o separe los vínculos de texto con un pipe (|). Los enlaces deben estar referenciados con texto que les haga tener sentido en caso de que el usuario haga un link-jumping. Además, considere la posibilidad de añadir un mapa de la web, ya que es útil para casi todos.

Enlaces

Los enlaces deben ser contextuales y reales

Enlaces contextuales

Los enlaces deben de decir algo. Podemos imaginar navegar a través de una serie de imágenes que digan «Más», «Más», «Más» con un lector de pantalla? Aunque su equipo de marketing y los diseñadores puedan insistir en que dichos vínculos tienen sentido, todavía podemos hacer vínculos con XHTML y CSS.

El contenido XHTML tendrá este aspecto:

<a href="link.html"> MÁS<span> sobre links contextuales</span> </a>

y el CSS tendría este aspecto:

a span.accessibility {position: absolute; left: -2000px;}

De esta manera, visualmente parece que sólo aparece la palabra «Más», pero para el lector de pantalla el propósito del enlace es visible. No utilice visibility: hidden; display; none; para esconder texto en la pantalla porque también se esconde al lector de pantalla.

Enlaces reales con destinos reales

Todos los <a href=» … deberían enlazar a una URL real o un ANCHOR real.
Si usted tiene un vínculo con un evento que recupera el contenido a través de AJAX, el href del vínculo debe redirigir al usuario a una página que contenga el material obtenido a través de AJAX. Si no tiene un destino para el enlace, no use un enlace. Se pueden añadir eventos a cualquier objeto en el DOM, y no sólo enlaces. La mejor forma de entender este concepto es desactivar javascript y asegurarse de que que todos tus enlaces son verdaderamente enlaces. If you are including an element simply to create a dynamic effect, consider employing a span with an event handler attached instead of a meaningless javascript:void() . Si usted incluye un elemento simplemente para crear un efecto dinámico, considere la posibilidad de emplear un span con un event handler en lugar usar un sin sentido javascript:void()

Texto para imágenes utilizadas como vínculos

Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de «alt», «longdesc» o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), «applets» y objetos programados, «ascii art», marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1]

Cuando se use una imagen como contenido de un vínculo, especifique un texto equivalente para la imagen.

  <A href="rutas.html">
     <IMG src="topo.html" alt="Rutas actuales en Gimnasio de escalada Boulders"></A>

O, si proporciona un texto para el vínculo, use un espacio como el valor del atributo «alt» del elemento IMG. Tenga en cuenta que este texto aparecerá en la página junto a la imagen.

  <A href="rutas.html">
     <IMG src="topo.html" alt=" ">Rutas actuales en Gimnasio de escalada Boulders</A>

Agrupar y saltar vínculos

Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo [Prioridad 3].
Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos, incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos [Prioridad 3]

Cuando los vínculos se agrupan en conjuntos lógicos (por ejemplo, en una barra de navegación que aparezca en todas las páginas de un sitio), deberían estar etiquetados como una unidad. Las barras de navegación son normalmente lo primero que uno encuentra en una página. Para los usuarios con sintetizador de voz, ello implica tener que escuchar una serie de vínculos en todas las páginas antes de llegar a los contenidos interesantes de una página. Hay varias maneras para permitir a los usuarios saltar un grupo de vínculos (tal y como hacen los usuarios videntes cuando ven el mismo comienzo en cada página):

Incluya un vínculo que permita al usuario saltar sobre el conjunto de vínculos de navegación.
Proporcione una hoja de estilo que permita a los usuarios ocultar el conjunto de vínculos de navegación.
Use el elemento MAP de HTML 4.01 para agrupar los vínculos, e identifique el grupo con el atributo «title«.

En el futuro, las aplicaciones de usuario podrán permitir a los usuarios saltar sobre elementos como barras de navegación.

En este ejemplo, el elemento MAP agrupa un conjunto de vínculos. El atributo «title» lo identifica como barra de navegación, y un vínculo al principio del grupo sirve de vínculo a un marcador después del grupo. Observe que los vínculos se separan con caracteres imprimibles, que no forman parte de un vínculo (rodeados de espacios).

   <BODY>     
     <MAP title="Barra de navegación">    
       <P>
       [<A href="#como">Salta barra de navegación</A>]
       [<A href="home.html">Página principal</A>]
       [<A href="search.html">Buscar</A>]
       [<A href="new.html">Novedades y destacados</A>]
       [<A href="mapasitio.html">Mapa del sitio</A>]
       </P>

     </MAP>     
     <H1><A name="como">Cómo utilizar nuestro sitio</A></H1
     >
   <!-- contenido de la página -->     
   </BODY>

Acceso desde teclado

9.4 Crea un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3]
9.5 Proporciona atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3]

El acceso a los elementos activos de una página es importante para muchos usuarios que no pueden manejar un dispositivo de apuntamiento. Las aplicaciones de usuario pueden incorporar características que permitan a los usuarios asignar acciones de teclado a ciertas acciones. HTML 4.01 permite a los desarrolladores de contenidos especificar atajos de teclado en sus documentos mediante el atributo «accesskey«.

En este ejemplo, si el usuario activa la tecla «C», se seguirá el vínculo.

   <A accesskey="C" href="doc.html" hreflang="en"

      title="Página de la empresa XYZ">
         Página de la empresa XYZ</A>

El tiempo de respuesta

Cuando sea necesario un tiempo de respuesta, el usuario debe ser avisado y debemos dar el tiempo suficiente para indicar que se necesita más tiempo.

Validación

El sitio debería ser validado. Usted puede validar su página web aquí: http://validator.w3.org/

El atributo «role»

En las aplicaciones Web 2.0, cuando un elemento HTML, como por ejemplo un elemento de un formulario se convierte en un botón o una interfaz de control, no hay forma para el lector de pantalla automático de comprender la conversión y la funcionalidad del elemento convertido. El atributo XHTML role permite la adición de información semántica para elementos convertidos.

Ver las directrices w3 (http://www.w3.org/TR/xhtml-role/) y ARIA roles (http://www.w3.org/TR/aria-role/#roles) para obtener más información.

Ver http://www.tawdis.net/