Creando webs accesibles
Pablo Arias

Desarrollo, mantenimiento y asistencia web

Certificado Profesional Joomla

Organizador del Grupo de Usuarios de Joomla de Vigo

www.PabloArias.eu | @PabloAriasRamos

Ponencia "Software Libre en una Web Abierta"

Decía...

SEO y accesibilidad

Dos disciplinas con muchos puntos de encuentro.

Google es el usuario ciego y sordo más rico del mundo, y el que más navega por tu web.

¿Qué significa "accesibilidad web"?

La accesibilidad web significa que las personas con discapacidad pueden percibir, entender, navegar e interactuar con la Web.

WAI-W3C

Antes de empezar con las WCAG, antes de estudiar los resultados de las herramientas de evaluación, primero comprende los problemas.

S. L. Henry

El poder de la web reside en su universalidad. El acceso para todo el mundo, a pesar de la discapacidad, es un aspecto esencial.

Tim Berners-Lee (Director e inventor de la Red Mundial Web, en Wikipedia)

Problemas frecuentes

• No poder usar solo el teclado para navegar.
• Enlaces ambiguos, casi infinitos
  o repetidos con diferente nomenclatura.
• Imágenes sin texto alternativo o mal establecido.
• Formularios complejos y Captcha
• Encabezados mal utilizados.
• Y muchos más...

La accesibilidad web se puede dividir en tres categorías principales: del contenido, de la navegación y de la interacción.

J. Thatcher.

Diseño y CSS

El CSS para el diseño
no contenidos

Contenidos y HTML

Contenidos en HTML, evitando el diseño.

Responsive

• Diseño adaptable al tamaño del dispositivo.
• Preferible una única web, sin versión móvil.
• Separar contenido de presentación o diseño.
• En general: respetar estándares web.
• Nota: Criterio 1.3.4 WCAG 2.1: Orientación.

Imágenes

• Procurar no insertar texto.
• Las imágenes introducidas con CSS son decorativas.
• Describir con el atributo alt la imagen.
  Mapa de decisión para textos alternativos, por Olga Carreras
  Asistente para textos alternativos, por Olga Carreras

Enlaces

• Incluir la información relevante en el texto.
• No usar "Pincha aquí", "Más información", "Leer más"...
• Usar siempre el mismo título para el mismo destino.
• Usa hreflang para indicar un cambio de idioma.
• No solo un color diferente, subrayar.
• Diferenciar enlaces visitados de no visitados.
• aria-label

Encabezados

• Describen la estructura del documento, su significado.
• Mantener orden correcto.
• No usarlos para decorar u otras finalidades.

Tablas

• Usar solo para datos tabulares.
• Identificar encabezados con th.
• Para tablas complejas usar scope.
• caption: título de la tabla, visible, no obligatorio.
• O atributo aria-describedby.

Formularios

• Etiquetas (label) para los campos.
• Asegurarse de que se puede navegar con el teclado.
• Usar el atributo autocomplete.
• Informar correctamente de campos obligatorios.
• Fieldsets para organizar (mejor con leyenda).
• Validación también en cliente y efectiva
  (no usar solo color rojo ante un error).
• Requerir confirmación para tareas importantes irreversibles.
• Sistema para deshacer, si se puede.

Documentos, vídeos y otros formatos

Todos los elementos del sitio deben ser accesibles

Títulos de página

Describir temática o propósito con claridad

Ayudan a cambiar de pestaña, por ejemplo

Enlaces "Saltar a"

• Para ir al contenido relevante y saltarse el repetitivo.
• Deben ir al principio de la página.
• No deben ser más de 2 o 3.

Navegación

• Lista de enlaces. Etiqueta nav en HTML5.
• Indicar situación actual al usuario. Usar migas de pan.
• Usar mapa web.
• Mantener coherencia en todo el sitio.
• Indicar submenús.
• "Megamenús" usables con teclado también.

Colores

• No usar colores como único método de distinción.
• Contraste mínimo en texto normal: 4.5 (7 para AAA).
• Contraste mínimo en texto grande: 3 (4,5 para AAA).
• Utilizar herramientas de medición de contraste.
• Tratar de ofrecer distintas combinaciones de colores.

Textos

• Definir tamaño de forma relativa (%, em, rem),
  no absoluta (px o pt).
• Evitar fuentes con caracteres muy similares.
• Evitar "efecto río" con texto justificado.
• Evitar largos textos en cursiva.
• Interlineado mínimo de 1.5

Google es un usuario ciego. Un usuario billonario ciego con millones de amigos que siguen cada una de sus palabras.

Karsten M. Self

Algunas herramientas

• Wave: wave.webaim.org
• Tawdis: tawdis.net
• W3 Validator: validator.w3.org
• W3 Validador unificado: validator.w3.org/unicorn
• Herramienta desarrolladores navegador
• Web Developer (plugin)
• WCAG 2.0 - Contrast checker (plugin)

Accesibilidad obligatoria para...

• Webs y apps de Administraciones públicas
  (o que reciban financiación pública)
• Empresas:
  • Más de 100 empleados o
  • facturación mayor a 6 millones de euros.

Pautas, Normativa y leyes

• Web Accesibility Initiative - WAI
  Grupo de trabajo permanente de la W3C
  Hacen las WCAG
• Real Decreto 1112/2018 - 20 septiembre 2018
• Primera legislación española de accesibilidad web: año 2002

Referencias

• WAI (Web Accessibility Initiative) de W3C
• Portal Accesibilidad Web, Universidad de Alicante
• Web de Olga Carreras (ver blog también)
• Web de Sergio Luján
• WAI Tutorials
• Web Accessibility In Mind
• Sección Accesibilidad en Portal Administración Electrónica
• Curso "Aprende Accesibilidad Web paso a paso"
• Libro "Accesibilidad Web. WCAG 2.1 de forma sencilla"

Esto es todo, de momento

¿Dudas, preguntas?

www.PabloArias.eu | @PabloAriasRamos

¡Gracias!