PDF de programación - Accesibilidad de las aplicaciones web

Accesibilidad

de las aplicaciones web

Sergio Luján Mora
[email protected]
@sergiolujanmora
sergiolujanmora.es



El año pasado se cumplió el 25 aniversario
del nacimiento de algo muy importante…

World Wide Web

WWW
Web

¿Dónde está el CERN?

Tim

Berners-Lee

HTML
URL
HTTP

Impreciso pero emocionante…

¿Ha sido emocionante?

Cloud computing



La nube

¿Cómo nos ha cambiado la vida la Web?

He dejado de…

Ir al banco



Comprar el periódico



Reservar en agencias de viaje

Ir al banco



Comprar el periódico



Comprar en tiendas

¿La Web puede mejorar
la vida de las personas

con discapacidad?

Absolutamente…

Pero…


…¿cómo puede una persona ciega
utilizar un ordenador?

…¿cómo puede una persona ciega
navegar por la Web?

Ir al banco

Comprar el periódico

Comprar en tiendas

La Web ha cambiado nuestras vidas…


mejorar

y puede cambiar las vidas de las personas con
discapacidad mucho más

A veces hay problemas…

¿No se puede hacer

mejor?

¿No se puede hacer un
diseño inclusivo,
un diseño universal,
un diseño para todos?

diseño inclusivo
diseño universal
diseño para todos

Barreras



Rampas

Barreras digitales



Rampas digitales

Accesibilidad web

¿Cómo se logra que un
sitio web sea accesible?

Tim

Berners-Lee

HTML
URL
HTTP

Octubre 1994

El poder de la Web está en
su universalidad. El acceso
por cualquier persona,
independientemente de la
discapacidad que presente
es un aspecto esencial.

Principios

4

Directrices

12

Criterios de cumplimiento

60

Técnicas suficientes

Técnicas de asesoramiento

Principio 1: Perceptible: la información y los componentes de la interfaz de usuario deben ser
mostrados a los usuarios en formas que ellos puedan entender.

Directriz 1.1: Texto alternativo: Proporciona texto alternativo para el contenido que no sea
textual, así podrá ser transformado en otros formatos que la gente necesite, como
caracteres grandes, lenguaje braille, lenguaje oral, símbolos o lenguaje más simple.
Directriz 1.2: Contenido multimedia dependiente del tiempo: Proporcione alternativas
sincronizadas para contenidos multimedia sincronizados dependientes del tiempo.
Directriz 1.3: Adaptable: Crear contenido que pueda ser presentado de diferentes formas
sin perder ni información ni estructura.
Directriz 1.4: Distinguible: Facilitar a los usuarios ver y escuchar el contenido incluyendo la
distinción entre lo más y menos importante.

Principio 2: Operable: Los componentes de la interfaz de usuario y la navegación debe ser
manejable.

Directriz 2.1: Teclado accesible: Poder controlar todas las funciones desde el teclado.
Directriz 2.2 Tiempo suficiente: Proporciona tiempo suficiente a los usuarios para leer y
utilizar el contenido.
Directriz 2.3: Ataques epilépticos: No diseñar contenido que pueda causar ataques
epilépticos.
Directriz 2.4: Navegación: Proporciona formas para ayudar a los usuarios a navegar, a
buscar contenido y a determinar donde están estos.

Principio 3: Comprensible. La información y las operaciones de usuarios deben ser
comprensibles

Directriz 3.1: Legible. Hacer contenido de texto legible y comprensible.
Directriz 3.2 Previsible: Hacer la apariencia y la forma de utilizar las páginas web
previsibles.
Directriz 3.3 Asistencia a la entrada de datos: los usuarios de ayuda evitarán y corregirán
errores.

Principio 4: Robustez: el contenido deber ser suficientemente robusto para que pueda ser bien
interpretado por una gran variedad de agentes de usuario, incluyendo tecnologías de
asistencia.

Directriz 4.1 Compatible: Maximiza la compatibilidad con los agentes de usuario actuales y
futuros, incluyendo tecnologías de asistencia.

Ejemplo

Fuente: Internet users (per 100 people) / The World Bank

¿Cómo se puede hacer este gráfico más accesible?

Fuente: Internet users (per 100 people) / The World Bank

Problemas de percepción de contraste
Aunque las pautas no lo dicen explícitamente, el gráfico
transmite información y puede ser que el texto o las propias
barras no tengan contraste suficiente:
- Para el texto, lo normal es un contraste 4,5:1 mínimo.
- Para las barras se podría aceptar un contraste 3:1 mínimo
porque su grosor es bastante mayor que el de un texto.

100

90

80

70

60

50

40

30

20

10

0

2011

2012

Eritrea

Ecuador

España

Islandia

Daltonismo y problemas percepción de colores
Hay que asegurarse de que sin color la leyenda de las barras
tiene sentido y se puede saber cuál es cada dato. Por ejemplo:
- Terminar cada barra con un remate diferente (plano, circular,
triangular).
- Bordes de distinto tipo.
- Contenido con rayados diferentes
- Un icono o letra al principio de cada barra.

100

90

80

70

60

50

40

30

20

10

0

2011

2012

Eritrea

Ecuador

España

Islandia

Discapacidad cognitiva / intelectual
Conviene indicar los valores de cada barra al final de las
mismas, de forma que no haya que calcular el valor de
cada barra con una regla.

En realidad, ayuda a todo el mundo.

100

90

80

70

60

50

40

30

20

10

0

95

96

72

67,6

35,1

31,4

2011

2012

0,7

0,8

Eritrea

Ecuador

España

Islandia

Baja visión, vista cansada
Tipo de letra grande, de alto contraste.

100

90

80

70

60

50

40

30

20

10

0

95

96

72

67,6

35,1

31,4

2011

2012

0,7

0,8

Eritrea

Ecuador

España

Islandia

¿Cómo se puede hacer este gráfico más accesible?

¿Qué más se puede hacer?

Encabezado de columna

País

2011

2012

0,7

Eritrea

Ecuador 31,4

España

67,6

Islandia

95

0,8

35,1

72

96

Encabezado

de fila

<img src="internet.png"
alt="Índice de penetración de Internet por países



(gráfico de barras, datos disponibles en la
siguiente tabla)" />

filas: países; columnas: % de la población que dispone
de acceso a Internet">

<table class="oculto"
summary="Datos de penetración de Internet;


<caption>Índice de penetración de Internet por
países</caption>
<thead>
<tr>
<th scope="col">País</th>
<th scope="col">2011</th>
<th scope="col">2012</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">Eritrea</th>
<td>0,7</td>
<td>0,8</td>
</tr>
<tr>
<th scope="row">Ecuador</th>
<td>31,4</td>
<td>35,1</td>
</tr>
...
</tbody>
</table>

.oculto {
position: absolute;
left: -9999em;
width: 1px;
height: 1px;
overflow: hidden;
}

http://accesibilidadweb.dlsi.ua.es/

http://accesibilidadenlaweb.blogspot.com/

https://twitter.com/sergiolujanmora

¡Muchas gracias!

Sergio Luján Mora



[email protected]
@sergiolujanmora
sergiolujanmora.es