Este documento habla sobre la creación de sitios web accesibles. Explica que la accesibilidad web significa que las personas con discapacidad pueden percibir, entender, navegar e interactuar con la web. También describe varios tipos de discapacidades y problemas que enfrentan los usuarios, e indica que mejorar la accesibilidad beneficia a todos los usuarios. Además, cubre varios principios y estándares de accesibilidad como las WCAG, y ofrece consejos sobre cómo mejorar aspectos como imágenes, formularios, colores
2. Pablo
Arias
Desarrollo, mantenimiento y asistencia web
Certificado Profesional Joomla
Organizador del Grupo de Usuarios de Joomla de Vigo
|www.PabloArias.eu @PabloAriasRamos
7. "Es como permitir que otras personas conduzcan y enseñarles
cómo hacerlo."
"No solo te dejamos echar un vistazo, te invitamos a meterte
bajo el capó y jugar con el motor."
8. "No se refiere a algo creado y comprendido por solo unos
cuantos guardianes."
"No significa esconder información a los usuarios."
"No significa vigilancia secreta"
9. "La Web es más que una tecnología; es un recurso público.
Es una fuerza común para hacer el bien.
Es como la Octava Maravilla del mundo y nos pertenece a
todos."
Mark Surman, Director Ejecutivo de Mozilla
10. "Un gran poder conlleva una gran"Un gran poder conlleva una gran
responsabilidad"responsabilidad"
Crear webs también
11. Usabilidad y accesibilidadUsabilidad y accesibilidad
Crear una web útil para personas
Proporcionar la información necesaria
Para cualquier usuario
En cualquier dispositivo
Respetar los estándares
13. SEO y accesibilidadSEO 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.
14. ¿Qué significa "accesibilidad 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
15. Antes de empezar con las WCAG, antes de
estudiar los resultados de las herramientas
de evaluación, primero comprende los
problemas.
S. L. Henry
16. Tipos de discapacidadesTipos de discapacidades
Visuales
Auditivas
Motrices
Neurológicas o cognitivas
Derivadas del envejecimiento
Derivadas del entorno
25. 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)
26. Problemas frecuentesProblemas 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...
27. La accesibilidad web se puede dividir en tres
categorías principales: del contenido, de la
navegación y de la interacción.
J. Thatcher.
28. Diseño y CSSDiseño y CSS
El CSS para el diseño
no contenidos
Ejemplos:
Imagen de fondo: diseño, no informativa.
No introducir texto informativo con "content"
29. Contenidos y HTMLContenidos y HTML
Contenidos en HTML, evitando el diseño.
Ejemplos a evitar:
Usar encabezados (h1, h2) para hacer textos más grandes.
Usar Tablas para ubicar diferentes elementos.
30. ResponsiveResponsive
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.
31. ImágenesImá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
32. EnlacesEnlaces
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
34. TablasTablas
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.
35. FormulariosFormularios
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.
36. Documentos, vídeos y otros formatosDocumentos, vídeos y otros formatos
Todos los elementos del sitio deben ser accesibles
37. Títulos de páginaTítulos de página
Describir temática o propósito con claridad
Ayudan a cambiar de pestaña, por ejemplo
38. Enlaces "Saltar a"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.
39. NavegaciónNavegació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.
41. En HTML5 aparecieron múltiplesEn HTML5 aparecieron múltiples
header
nav
main
aside
etc
42. No siempre se anuncian estas etiquetas semánticas por lo que
se sigue usando el rol ARIA, mediante el atributo role=""
Previo a HTML5 había que establecer un DTD específico.
43. Roles, estados y propiedadesRoles, estados y propiedades
Útiles para hacer accesibles elementos como:
Pestañas
Barras de progreso
Acordeones
Ventanas modales
Etc.
Ayudan a hacer Javascript accesible
44. ColoresColores
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.
45. TextosTextos
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
46. Google es un usuario ciego. Un usuario
billonario ciego con millones de amigos que
siguen cada una de sus palabras.
Karsten M. Self
48. Accesibilidad obligatoria para...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.
49. Pautas, Normativa y leyesPautas, 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
50. Evaluación de la accesibilidadEvaluación de la accesibilidad
Website Accessibility Conformance Evaluation Methodology
WCAG-EM 1.0
51. PasosPasos
1. Definir alcance de evaluación
2. Explorar sitio para comprender uso
3. Seleccionar muestra
4. Auditar muestra
5. Generar informe
52. ReferenciasReferencias
Libro "Accesibilidad Web. WCAG 2.1 de forma sencilla"
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
Blog Mª Carmen de Alba
WAI Tutorials
Web Accessibility In Mind
Sección Accesibilidad en Portal Administración Electrónica
Curso "Aprende Accesibilidad Web paso a paso"
53. Esto es todo, de momentoEsto es todo, de momento
¿Dudas, preguntas?
|www.PabloArias.eu @PabloAriasRamos
¡Gracias!¡Gracias!
