Ayuntamiento de La Guardia de Jaén

Contexto

Estamos comprometidos con la Accesibilidad en la Red, en nuestro caso, con los Documentos 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.

Así, abogamos por unos sitios y documentos que cumplan 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.
Intentando concienciar a los desarrolladores de sitios web, haciendo llegar a todo el mundo estos conceptos, dando información, y como no, dando ejemplo con un marcado estándar y, sobretodo, accesible.

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

Definición y descripción de Niveles

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 no basada y al margen del color.
• Información en marcadores y vínculos, idiomas, destino, control del usuario sobre la ventana del navegador.
  Ej: Nunca se usará el atributo de enlace: target="_blank"
• Contenidos audiovisuales con información alternativa acerca de su contenido y significado.
• Tablas, identificación de elementos de fila, columna y agrupación para trabajo no visual.
• 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).

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

Acceso a las secciones principales del sitio presionando la combinación de teclas:
Alt + el número o letra (Windows) indicado en la siguiente tabla:

Se muestra por defecto la TECLA habitual en la mayoría de sistemas operativos y navegadores:
Windows y Linux: Alt
Firefox 1.x e Internet Explorer: Alt + Tecla
Firefox 2.x: ⇑ Shift (Mayúsculas) + Alt + Tecla
MAC: Cmd (Comando) + Tecla

Teclas de Acceso / AccesKeys

Sección	Combinación de Teclas
	Firefox (Win & Linux) <3beta	Windows	Macintosh
Style courtesy of Veerle from CSS Tables. Thanks a lot
Teclas de Acceso/Acceskeys (accesibilidad)	⇑ + Alt + K	Alt + K	Cmd + K
Saltar Navegación/Ir al Contenido (saltar al contenido principal)	⇑ + Alt + S	Alt + S	Cmd + S
Menú (menú principal)	⇑ + Alt + M	Alt + M	Cmd + M
Inicio (home, inicio del sitio)	⇑ + Alt + I	Alt + I	Cmd + I
Mapa Web (archivo, mapa web)	⇑ + Alt + F	Alt + F	Cmd + F
Buscar (ir al formulario de búsqueda)	⇑ + Alt + B	Alt + B	Cmd + B
Arriba (subir al inicio de la página)	⇑ + Alt + U	Alt + U	Cmd + U
Abajo (bajar al fondo de la página)	⇑ + Alt + D	Alt + D	Cmd + D

Vínculos y otras notas

Para los enlaces, siempre que nos ha sido posible, se usa el estándar color azul y, aunque puede estar subrayado o no, siempre incluirán el atributo de enlace a un marcador rel="bookmark" y de tipo texto type="text/html". 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 una etiqueta “clickable” siempre cambiará a la típica forma “hand o pointer” (mano).

Además, mediante técnicas CSS avanzadas (CSS 2.1 y 3) y JavaScript, identificamos algunos tipos de enlaces para informar tanto visualmente como textualmente al usuario y que no se lleve sorpresas. Algunos de ellos son los enlaces directos ficheros descargables (pdf, zip…), enlaces internos, externos y pop-ups, sitios seguros (https:), wikipedia, google y sobre todo enlaces a sitios en otros idiomas mediante el atributo xml:lang, en el título y un icono visual.

Ejemplos:

• Los enlaces internos no acompañan icono alguno, sólo el enlace y se enfatizan. Ej:
  Enlace Interno
• Los enlaces externos siempre irán acompañados del icono correspondiente si es algún tipo de enlace especial como Wikipedia, Google Maps, etc o del icono estándar ( ) en la mayoría de los casos. Ej:
  Enlace Externo
• Además, los enlaces o vínculos que se abran en un “popup” o ventana o pestaña nueva se acompañan del icono correspondiente ( ), sino se especifica en los atributos del vínculo la imagen que lo acompañará SIEMPRE lo hará por estos. Ej:
  Ayuntamiento de La Guardia - Plaza San Pedro s/n
• Ejemplo de enlace a un sitio en inglés
• Ejemplo de enlace a Wikipedia en español
• Ejemplo de enlace a Google Maps
• Ejemplo de enlace seguro
• Ejemplo de PDF ficticio
• Ejemplo de ZIP ficticio