Accesibilidad (Sección) » 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 W3C-WAI.

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.
• 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 popup intrusivo. En todo caso, los pocos que se gestionan lo hacen mediante JavaScript y 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

Navegadores:

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

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 (#); ambos 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 el resto de los casos. Ej:
  Enlace Externo
• Además, los enlaces o vínculos que se abran en un «popup», ya sea ventana o pestaña nueva, o un popup no intrusivo (Ajax), 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:
  Popup ficticio.
• Otros ejemplos de enlaces identificados por iconos, tanto relativos al tipo de documento al que enlazan como al sitio, tipo de protocolo (http, http seguro)…:
  • Ejemplo de enlace a un sitio en inglés.
  • Ejemplo de enlace aWikipedia.
  • 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).