PDF de programación - haciendo drupal un poco mas accesible

Haciendo Drupal

un poco más

accesible

@kikoalonsob

Acerca de mi

• Desarrollador Drupal Freelance (Back-end)
• Axel Springer España

• Autobild
• Computer Hoy
• Hobby Consolas
• @kikoalonsob
• kikoalonsob
• www.kikoalonsob.com



Indice

1. Accesibili…WTF?
2. ¿Quién lo dice?
3. ¿Qué dice?
4. ¿Cómo se mide?
5. ¿Y…qué tal Drupal?
6. ¿Qué puedo hacer yo?
7. Para acabar…
8. Enlaces de interés
9. Preguntas



1. Accesibili…WTF?

La accesibilidad web tiene como objetivo que

un sitio sea utilizado por el mayor número de
personas posible.

• Independientemente de…

– Dispositivos empleados
– Minusvalías
– Conocimientos



2. ¿Quién lo dice?

• World Wide Web Consortium

– Desarrolla estándares y recomendaciones

relacionados con la Web.

– Estos sirven como referencia para construir una
web accesible, operable y eficiente, en la que se
puedan desarrollar aplicaciones cada vez más
robustas.



3. ¿Qué dice?

– WCAG: Web Content Accessibility Guidelines

• Cosas que (no) deberías hacer para que un sitio sea
accesible.

– ATAG: Authoring Tools Accessibility Guidelines
• Cómo debe ser un CMS para que tanto éste como el
contenido creado, sea accesible.

– UAAG: User Agent Accessibility Guidelines
• Cómo deben comportarse lectores de pantalla,
navegadores, etc.

– WAI-ARIA: Accessible Rich Internet Applications

• Cómo hacer accesible el contenido dinámico, controles
complejos, etc.



3. ¿Qué dice? II



4. ¿Cómo se mide?

• WCAG establece 4 principios básicos:

– Perceptible: La información se puede recibir

(vista, oído, etc).

– Operable: Compatible con el teclado, ratón,

pantallas táctiles, etc.

– Comprensible: Apariencia e información se

comprenden con facilidad.

– Robusto: Funciona independientemente del

navegador, lector de pantalla, etc.



4. ¿Cómo se mide? II

• A su vez, cada principio se divide en una serie

de pautas, por ejemplo, el principio 1
(perceptible):
– 1.1: Texto alternativo en contenido no textual.
– 1.2: Alternativas para contenidos multimedia

dependientes del tiempo.

– 1.3: Contenido que pueda ser presentado de

diferentes formas.

– 1.4: Contenido que se ve y/o escucha fácilmente.



4. ¿Cómo se mide? III

• Criterios de conformidad: Para cada pauta, se

establecen unos niveles de aceptación.
– A
– AA
– AAA

• Nivel de conformidad X: Se satisfacen todos

los criterios de nivel X.



4. ¿Cómo se mide? IV

• Entonces, para cumplir las WACG…

Satisfacer un nivel de

conformidad…

en todas las páginas…

y en todos los procesos completos.



4. ¿Cómo se mide? V

• Podemos proporcionar versiones alternativas

conformes
– Mismo nivel de conformidad del sitio
– Misma información y funcionalidad
– ¿Cómo se accede?

• Desde la página no conforme, mediante un mecanismo
accesible
• Desde la página conforme



5. ¿Y… qué tal Drupal?

“As an inclusive community, we are committed to
making sure that Drupal is an accessible tool for
building websites that can also be accessed by
people with disabilities”.

• Drupal 7:

– El core es tan accesible como es posible (WCAG,

ATAG)

• Drupal 8: Se está trabajando en ello

– Será más accesible que D7
– Incluso el contenido creado con CKEditor



5. ¿Y… qué tal Drupal? II
• Módulos y temas contrib: #D7AX hashtag



6. ¿Qué puedo hacer yo?
• Conocer las principios y pautas marcados por

la W3C

• Tener en cuenta la accesibilidad desde el

inicio del proyecto

• A partir de ahí…



6.1. Escoger un buen tema
• #D7AX son un buen punto de partida

– Además es la forma más rápida de construir un

sitio accesible

– No confiar demasiado en páginas de temas de

pago



6.2. Formato y colores
• Usar CSS sólo para el formato

– Información no dependiente de los colores

• Suficiente contraste
• Permitir al usuario cambiar tamaño del texto
• Estructura correcta de encabezados

– No saltarse niveles



6.2. Formato y colores II
• Un BUEN ejemplo



6.2. Formato y colores III
• Un MAL ejemplo



6.3. Texto alternativo
• Proporcionar texto alternativo para todo

contenido no textual
– Atributo ALT
– Permitir al usuario introducirlo en el contenido.



6.3. Texto alternativo II
• Evitar ALT = “”

– Las imágenes decorativas…mejor en CSS

• No usar imágenes con texto

– Salvo casos especiales como logos.
– En todo caso, ALT = texto de la imagen



6.4. Formularios

• Usar siempre <label for=“id-elemento”>

– Jamás display: none
– Si queremos ocultarlo, clase “element-invisible”
• Deben de poder rellenarse y enviarse con el

teclado
– Evitar el autosubmit

• Notificar siempre de forma clara los errores y

los campos en que se han producido.



6.4. Formularios II

• Evitar los captchas (Aunque la W3C los admite
como solución en última instancia). En su lugar:
– Servicios externos:
• Mollom, Akismet
•
•

Tienen versión freemium
Integración mediante módulos contribuidos (Mollom,
Antispam, etc)

– Honeypot

Campo “oculto” al usuario. Si recibimos datos…MALO

•
• Mínimo tiempo establecido
•

También tiene módulo contribuido



6.5. Enlaces y navegación
• Todo enlace debe tener sentido si se lee solo.

– No usar: Leer más, click aquí, etc
– En su lugar: Leer más acerca de la noticia “El paro

sube en Octubre”

– Podemos esconder parte del enlace con CSS
– O podemos usar el atributo title



6.5. Enlaces y navegación II
• Proporcionar enlace para “Saltar al contenido”

•

– Tabindex = 1
Informar si el enlace abre en ventana nueva,
colorbox, etc.
– Atributo title



6.6. Tablas

• Si se trata de una tabla “grandecita”

– Atributo summary : Información sobre la

estructura de los datos

– <caption>: Encabezado que ayuda a entender la

tabla y que el usuario decida si accede.
• Usar correctamente los encabezados

– Es muy difícil entender una tabla de forma lineal



6.7. Media

• No reproducirlo automáticamente

– Puede interferir con lectores de pantalla

• Ofrecer alternativas

– Subtítulos
– Transcripciones



6.8. No HTML, CSS, etc
• Se trata de PDF’s, Word’s, presentaciones,

etc… descargables desde nuestro sitio.
– PDF? Etiquetado
– Orden lógico de lectura



6.9. Contenido textual
• Usar expresiones correctas del lenguaje
• Evitar abreviaturas
• Usar el idioma que corresponde
• Usar fuentes fáciles de leer
• Agrupar contenido mediante listas



6.10. JavaScript

• Se debe poder usar el sitio con JavaScript

deshabilitado

• No puede depender del dispositivo

– Por ejemplo, de un ratón



7. Para acabar…

• Hasta ahora todo era WCAG
• ¿No puedo hacer nada para ATAG?

…

CONTRIBUIR !!!



8. Enlaces de interés

• Estado de la accesibilidad en Drupal

– https://www.drupal.org/about/accessibility

• Herramientas y buenas prácticas

– https://www.drupal.org/node/394094

• Listado de módulos y temas accesibles

– https://groups.drupal.org/node/66383
• Grupo de accesibilidad en Drupal.org
– https://groups.drupal.org/accessibility



9. Preguntas

¿¿ ??



GRACIAS