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 (Linux/Windows) + el número o letra indicado en la tabla de Teclas de Acceso:

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

Sistemas Operativos:

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

Navegadores:

• Firefox 1.x e Internet Explorer: Alt + Tecla
• Firefox 2.x: ⇑ 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

Teclas de Acceso / AccesKeys

Sección o contenido	Tecla de Acceso	Sistemas Operativos (opcional)		Navegadores (especiales)
		Linux/Windows	Macintosh	Firefox <3 / Safari / IE	Opera 9
Style courtesy of Veerle from CSS Tables. Thanks a lot
Teclas de Acceso/Acceskeys, Accesibilidad	K y A	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Saltar Navegación/Ir al Contenido	S	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Menú (menú principal)	M	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Buscar (ir al formulario de búsqueda)	B	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Arriba (subir al inicio de la página)	T	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Abajo (bajar al fondo de la página)	D	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Inicio (home, inicio del sitio)	I y 1	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Ayuntamiento (sección ayuntamiento)	2	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Vive La Guardia (sección servicios)	3	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
La Guardia (sección sobre La Guardia)	4	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Directorio (sección direcciones)	5	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc
Mapa Web (archivo, mapa web)	W y 6	Alt +	Cmd +	⇑ + Alt	⇑ Shift + Esc

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, además las anclas internas se enfatizan. Ej:
  Enlace Interno
  Ancla interna.
• 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“, 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