Accesibilidad: Discapacidad en la web (Parte 1)

(1)

A

C

E

S

IB

IL

ID

A

D

Introducción al desarrollo web

http://idesweb.es/

Accesibilidad: Discapacidad en la web

(Parte 1)

Ester Serna Berná

Responsable técnico área desarrollo web.

Taller Digital de la Universidad de Alicante (España)

(2)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Contacto

• [email protected]

• @estersernaberna

• Mi perfil en Linkedin (Ester Serna)

• http://www.eltallerdigital.com/

(Sitio web certificado Norma UNE 139803 Requisitos de accesibilidad para contenidos web).

(3)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

¿Discapacidad en accesibilidad web?

• Discapacidades relacionadas con la

salud

,

tanto crónicas como transitorias.

• Discapacidades relacionadas con el

envejecimiento

.

• Limitaciones derivadas de una

situación

(4)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Tipos de discapacidad

• Discapacidades

visuales

.

• Discapacidades

auditivas

.

• Discapacidades

motrices

.

• Discapacidades

neurológicas o cognitivas

.

• Discapacidades

derivadas del envejecimiento

.

(5)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Discapacidades visuales

• Ceguera

• Baja visión

(6)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

• Imágenes sin un texto alternativo que describa su contenido.

• Imágenes complejas como gráficos de barras o estadísticas, sin una descripción detallada.

(7)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Texto alternativo:

Número de empleados públicos por Número de empleados públicos por Número de empleados públicos por Número de empleados públicos por comunidades.

comunidades. comunidades. comunidades.

Descripción larga:

Número de empleados por comunidades Número de empleados por comunidades Número de empleados por comunidades Número de empleados por comunidades Galicia:

Población: 2.796.089

Empleados públicos: 153.580

Habitantes por cada empleado público: 18,21

Asturias:

Población:…

Empleados públicos:…

Habitantes por cada empleado público:…

(8)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

martes, 29 de enero de 2013

BARRERAS

que impiden el acceso a las personas ciegas:

• Elementos multimedia (vídeos, animaciones, …) sin descripción textual o sonora.

(9)

A

C

E

S

IB

IL

ID

A

D

(10)

A

C

E

S

IB

IL

ID

A

D

(11)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Caption: Visitantes de rrrr.com por países Summary: Visitantes que hemos tenido en rrrr.com clasificados por países y meses. De cada país se indica que número de usuarios hablan español y cuales no. España , Si, Enero = 10, España , No, Enero = 0, México , Si, Enero = 15, México , No, Enero = 5, EEUU, Si, Enero = 5, EEUU, No, Enero = 25 España , Si, Febrero = 11,

España , No, Febrero = 0, México , Si, Febrero = 20, México , No, Febrero = 2, EEUU, Si, Febrero = 3, EEUU, No, Febrero = 30

(12)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

BARRERAS

que impiden el acceso a las personas ciegas:

• Elementos multimedia (vídeos, animaciones, …) sin descripción textual o sonora.

• Tablas cuyo contenido resulta incomprensible cuando se lee de forma secuencial.

• Falta de independencia de dispositivo, la web ha de ser igualmente funcional cuando no se utilice el ratón.

• Formatos no accesibles de documentos que pueden ser problemáticos para un lector de pantalla (Ej. Documentos PDF).

(13)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

• Lectores de pantalla: son aplicaciones que leen el texto de la pantalla y lo transmiten mediante un sintetizador de voz (vía auditiva) o bien lo envían a una línea braille para que el usuario lo pueda leer con los dedos

(14)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

• Lectores de pantalla

• Navegadores de voz: son navegadores que leen el contenido de las páginas web con un sintetizador de voz incorporado.

(15)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

• Lectores de pantalla • Navegadores de voz

• Teclado como dispositivo de entrada: Mediante el teclado utilizan el tabulador para recorrer los enlaces y controles de formulario o las teclas de

acceso rápido para ir a una zona determinada del contenido directamente, en vez de secuencialmente.

PRODUCTOS DE APOYO que usan las personas ciegas

:

(16)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Discapacidades visuales

• Ceguera

• Baja visión:

Falta de Falta de Falta de Falta de agudeza visual, distrofia agudeza visual, distrofia agudeza visual, distrofia agudeza visual, distrofia macular o visión borrosa macular o visión borrosamacular o visión borrosa macular o visión borrosa....

(17)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

BARRERAS que impiden el acceso a las personas con baja visión

:

• Tamaño de letra (font-size) con medidas absolutas que no permiten redefinirlo.

(18)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

• Unidades de longitud

• Unidades absolutas

in (pulgadas), cm (centímetros), mm

(milímetros), pt (puntos), pc (picas), px (pixeles)

• Unidades relativas

em, ex

• Unidades de porcentaje

%

Em Calculator: Para pasar de px a em

Font-size

(19)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

:

• Tamaño de letra con medidas absolutas que no permiten redefinirlo.

• Diseño de páginas que, al modificar el tamaño de fuente, estropea la maquetación y hace difícil la navegación.

(20)

A

C

E

S

IB

IL

ID

A

D

(21)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

:

• Tamaño de letra con medidas absolutas que no permiten redefinirlo.

• Diseño de páginas que, al modificar el tamaño de fuente, estropea la maquetación y hace difícil la navegación.

• Poco contraste en las imágenes o texto.

• Texto añadido mediante imágenes que dificulta su lectura al aumentar el tamaño.

(22)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

PRODUCTOS DE APOYO Y ESTRATEGIAS que usan las personas con baja visión para acceder a la web:

• Pantallas grandes. • Ampliadores de pantalla. • Combinaciones específicas de colores de texto y fondo. • Tipos de letra más legibles.

(23)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Discapacidades visuales

• Ceguera

• Baja visión

• Daltonismo:

no distinguir entre el rojo y verde o entre amarillo y azul.

(24)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

BARRERAS que impiden el acceso a personas con daltonismo

:

• Uso del color para resaltar texto sin usar otro elemento de formato adicional (como cursiva, negrita o subrayado).

Este es un párrafo de

ejemplo

y quiero

destacar la palabra

ejemplo

.

(25)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

(26)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

(27)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

BARRERAS que impiden el acceso a personas con daltonismo

:

• Uso del color para resaltar texto sin usar otro elemento de formato adicional (como cursiva, negrita o subrayado).

• Poco contraste en las imágenes con texto o entre el texto y el color de fondo de la página.

• Navegadores que no soportan el uso de hojas de estilo

(28)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

ESTRATEGIAS que usan las personas con daltonismo para acceder a la web:

• Las personas con daltonismo pueden emplear sus

propias hojas de estilo para modificar los colores de las fuentes y del fondo de las páginas, en vez de usar los definidos por el diseñador.

No debemos usar estilos en línea:

<strong style=“color:#ff0000;”>ejemplo</strong>

Debemos de incluirlos en una hoja de estilos:

(29)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

[email protected]

@idesweb

(30)

A

C

E

S

IB

IL

ID

A

D

http://idesweb.es/

Créditos de las imágenes y fotografías

http://superarlacrisis.net/comunidad/superarlacrisis/recurso/Poblacion-por-comunidades-y-empleados-publicos/b7b30858-699e-4693-a0d5-28dd0609b445 http://www.innovacionweb.com/tablas_accesibles.php http://nellytec.blogspot.com.es/2011/02/acceso-clakison-jaws-programa-conocido.html http://lectorbraille.wordpress.com/2011/10/11/lineas-braille/ http://www.motorpasion.com/gadgets/mio-lanza-un-navegador-gps-con-la-voz-de-kitt http://www.innovasocial.com/tag/accesibilidad/ http://www.umh.es/ http://www.ua.es/ http://imaginacionlola.blogspot.com.es/2010_02_01_archive.html http://moronluca.blogspot.com.es/2012/07/tecnologia-2012.html http://www.ergo2work.es/products/es/ratones-especiales.html