Estamos comprometidos con la Accesibilidad en la web, comprometidos con la idea de una red libre a la que puedan tener acceso todos y cada uno de los usuarios de esta, ya sufran algún tipo de disfuncionalidad o no.

Nota: Esta sección fue una de las primeras del sitio web del Ayuntamiento de La Guardia de Jaén; se publicó en 2004 cuando aún la «Accesibilidad en la web» necesitaba un apoyo importante y un ejercicio de concienciación. Hoy en día —2012— en España, el cumplimiento de algunas directrices de accesibilidad son ya obligatorias por ley, en especial para organismos públicos.
Casi diez años después, este sitio web sigue cumpliendo esas directrices.

Así, abogamos por unos sitios y documentos que cumplan, sin objeciones, al cien por cien con las directrices del W3C », de la WAI » (Iniciativa para la Accesibilidad en la Web), y del resto de organismos implicados en tal fin.

En primera instancia, dando ejemplo con un marcado estándar y, sobretodo, accesible; y en segunda, intentando concienciar a los desarrolladores y diseñadores de sitios web, haciendo llegar a todo el mundo estos conceptos, dando información, y poniendo énfasis en la necesidad de hacerlo.

Este sitio cumple con el nivel Triple A de Accesibilidad según la W3C-WAI.

[...]Conformance Level “Triple-A”: all Priority 1, 2, and 3 checkpoints are satisfied;

[...]Nivel de Conformidad «Triple A»: se satisfacen todos los puntos de verificación de prioridad 1, 2 y 3;

Definición y descripción de niveles de conformidad

Nivel 1-[WAI] Problemas accesibilidad de tipo 1:

Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.
Satisfaciendo este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web.¹

Medidas:

• Control del color: Información y contenido no basado, y al margen, del color. Contraste suficientemente marcado para distinguir entre fondos y textos, etc.
• Clases, títulos entre otros atributos semánticos y explicaciones en texto normal, otorgan el significado al contenido al margen de indicadores visuales.
• Información en marcadores y vínculos: tipos de ficheros, sitios, idiomas… Control del usuario sobre la ventana del navegador. Nunca se abrirá ninguna ventana emergente o pop-up intrusivo. En todo caso, los pocos que se gestionan lo hacen mediante JavaScript y/o Ajax, teniendo un impacto leve en la navegación y otorgando un control total al usuario que puede usar los menús de su navegador sin problema. Ver apartado Ejemplos
• Contenidos audiovisuales con información alternativa acerca de su contenido y significado: Atributo alt e incluso longdesc en imágenes; contenido alternativo en objetos, en scripts.
• Tablas, identificación de elementos de fila, columna y agrupación para trabajo no visual: Agrupaciones a través de scope y headers; uso de atributos title, abbr y campos semánticos de tabla: cabecera, cuerpo y pie.
• Documentos gramática y semánticamente bien formados y estructurados, separando estructura de presentación visual.
• Documentos legibles y accesibles prescindiendo del uso de Hojas de Estilo (CSS). Además de la inclusión, a disponibilidad del usuario si su navegador lo permite, de estilos alternativos que puede seleccionar entre los que se encuentran: Para navegadores obsoletos; navegadores con poco soporte CSS, versión del W3C, de impresión y para dispositivos móviles.

Nivel 2-[WAI] Problemas accesibilidad de tipo 2:

Un desarrollador de contenidos de páginas Web debería satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento.
Satisfaciendo este punto de verificación eliminará importantes barreras de acceso a los documentos Web.²

Medidas:

• Listas correctamente referenciadas y marcadas.
• Tablas de datos usadas para su propósito en exclusiva, nunca para maquetación visual, tablas útiles y con toda la información y organización necesaria y alternativa.
• Alternativas a tecnologías propietarias y no estándares así como alternativas al uso del ratón y/o teclado.
  Ej: onkeypress="", tabindex
• Unidades relativas de medida para libertad del usuario.
• No se usa ningún tipo de animación inesperada o que no esté controlada por el usuario.

Nivel 3-[WAI] Problemas accesibilidad de tipo 3:

Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento.
Satisfaciendo este punto de verificación mejorará la accesibilidad de los documentos Web.³

Medidas:

• Navegación accesible con tabulador: Utilizando la tecla del tabulador accederá a los contenidos de la web.
• Acceso rápido y accesible a las secciones importantes del sitio.
• Activado el uso de Teclas de Acceso («HotKeys» o AccesKeys y Tabindex en formularios).
• Enlaces identificables de modo no visual en exclusiva Ver apartado. Aunque podemos incorporar también iconos que ayudan a la navegación e identificación.
• Abreviaturas, acrónimos… usadas tanto en tablas como en todo el sitio con sus respectivas descripciones y enlaces.

Teclas de Acceso/Accesskeys

Las teclas de acceso, en inglés accesskeys, son Atajos de teclado que permiten el acceso rápido a las secciones -o ubicaciones- principales del sitio presionando la combinación de teclas:
Alt (Linux/Windows) + el número o letra indicado en la tabla de Teclas de Acceso.

En este sitio web la tecla de acceso, salvo conflicto con otra, será la primera letra del título de la sección o de la ubicación. También es posible encontrar la letra inicial de la palabra en inglés, por ejemplo arriba top, abajo down, etc.

Sistemas Operativos:

Se muestra por defecto la TECLA habitual en la mayoría de sistemas operativos y navegadores:

• Windows y Linux: Alt + Tecla
• Mac: Ctrl o Cmd + Tecla

Importante: En muchos navegadores, como por ejemplo Google Chrome, se usa la tecla alternativa Mayúsculas (Shift) para atajos de teclado que entran en conflicto con otra combinación como las accesskeys. Quedando establecida la combinación en:
⇑ Shift (Mayúsculas) + Alt + Tecla

Navegadores:

• Mozilla Firefox 1.x, 3.x e Internet Explorer: Alt + Tecla
• Mozilla Firefox 2.x y Chrome: ⇑ Shift (Mayúsculas) + Alt + Tecla
• Opera: ⇑ Shift (Mayúsculas) + Esc + Tecla
• Safari / Firefox Mac: Ctrl o Cmd + Tecla

Índice de Teclas de Acceso o AccessKeys

Ejemplo

Así, por ejemplo, un usuario con sistema operativo Windows (o Linux) y el navegador Firefox, versión 3.0 o superior; para acceder a las siguientes secciones mediante las teclas de acceso debería pulsar la siguiente combinación de teclas:

Accesibilidad: Alt + A
Inicio: Alt + I

En cambio, en el caso de usar alguna versión 2.x de Firefox, debería pulsar:

Accesibilidad: ⇑ Shift + Alt + A
Inicio: ⇑ Shift + Alt + I

¿Cómo ejecutar una combinación de teclas?

Esto es, en el primer caso y para acceder a esta misma sección, Accesibilidad:
Pulsar y mantener pulsada la tecla Alt y a continuación pulsar la tecla de acceso pertinente, en este caso: A.

Vínculos y otras notas

Al margen de las identificaciones internas y de metadatos para lenguaje máquina, útiles por ejemplo para personas invidentes o con problemas de visión en cualquier caso; también usamos identificadores visuales en los vínculos.

Estilos visuales y metadatos

Para los enlaces, siempre que nos ha sido posible, se usa el estándar color azul (visual) y siempre incluirán el atributo de enlace relacional, como por ejemplo a un marcador rel="bookmark", además del tipo de recurso enlazado, por ejemplo type="text/html" (metadatos).

Podrá ser representado en diferentes tonos y decoraciones así como títulos descriptivos de su destino y contenido. Cuando el cursor se sitúa encima de un elemento clicable -en el que se puede hacer clic- siempre cambiará a la típica forma «hand o pointer» (mano).

Tipos de enlaces

Mediante técnicas CSS avanzadas (CSS 2.1 y 3) y JavaScript, identificamos algunos tipos de enlaces para informar al usuario del tipo de recurso enlazado y que no se lleve sorpresas.
Algunos de ellos son enlaces a tipos de ficheros como por ejemplo pdf, zip…; enlaces internos (boomarks), externos y popups o ventanas emergentes, intrusivas o no; tipos de sitios enlazados y protocolos: http, http seguro (https:), ftp; sitios: Wikipedia, Google Maps…; y sobre todo enlaces a sitios en otros idiomas mediante los atributos relacionados de la etiqueta, como por ejemplo: xml:lang, hreflang o lang, en el título además de un icono visual.

Detalle y ejemplos

Descripción detallada y ejemplos de identificadores visuales en los vínculos:

• Los enlaces internos no acompañan icono alguno, sólo el enlace. Además, a las anclas internas se les puede añadir en ocasiones el símbolo de la almohadilla (#). Ejemplos:
  Enlace Interno
  #Ancla interna
• Los enlaces externos podrán ir acompañados de un icono ( ) o de un pequeño texto informativo ( [ext] ). Algunos enlaces a sitios como Wikipedia, Google Maps, etc; pueden incluir su propio icono o texto descriptivo. Ejemplo:
  Enlace Externo.
• Además, los enlaces o vínculos que se abran en un «popup», ya sea ventana o pestaña nueva, o un pop-up Javascript, podrán acompañarse del icono ( ) o, como en el resto de casos, de un texto descriptivo [pop-up]. Ejemplo:
  Popup ficticio.
• A continuación se listan varios ejemplos de distintos tipos de enlaces, tanto enlaces a sitios especiales (Google Maps, Wikipedia, idiomas…) como a tipos de documentos (pdf, zip…), protocolos (http, https, mailto…), etc. A estos también se les incorporará en ocasiones un pequeño identificador en texto:
  • Ejemplo de enlace a un sitio en inglés.
  • Ejemplo de enlace a Wikipedia.
  • Ejemplo de enlace a Google Maps.
  • Ejemplo de enlace a un sitio con protocolo http seguro (Cuentas de correo gratuitas que ofrece la Junta de Andalucía).
  • Ejemplo de enlace a un archivo PDF (ficticio).
  • Ejemplo de enlace a un archivo ZIP (ficticio).

Enlaces de interés

Puedes encontrar versiones en español en el sitio de la oficina española del W3C:

• Traducciones en la oficina española del W3C (w3c.es);
• Traducción de las prioridades (discapnet.es)