accesibilidad en la web - ua€¦ · accesibilidad en la web 2. limitaciones en el acceso a los...

Accesibilidad en la Web

Accesibilidad en la WebMAQUETACIÓN DE TEXTOS ACCESIBLES

1

Ester Serna Berná

Área desarrollo Web

[email protected]


Índice de contenidos

1. Introducción a la Accesibilidad en la Web.

2. Limitaciones en el acceso a los contenidos.

3. ¿Qué es Accesibilidad Web?.

4. Directrices de accesibilidad.

5. Legislación española.

6. Beneficios.

2


1. Introducción a la Accesibilidad Web

“El poder de la Web está en su universalidad. Un

acceso a la Web para todos independientemente de su discapacidad es un aspecto esencial.”

Tim Berners-Lee

3

Accesibilidad en la Web1. Introducción a la Accesibilidad Web

¿Acceso a la Web para TODOS?

Acceso a los contenidos:

• Necesitamos un ordenador, tableta o teléfono móvil inteligente.

• Necesitamos conexión a Internet.

• Necesitamos un navegador.

• ….

¿?Accesibilidad de los contenidos:

• Perceptible

• Operable

• Comprensible

• Robusto

4


Accesibilidad de los contenidos

Perceptible

• El contenido debe ser percibido mediante distintos sentidos.

Operable

• Los elementos de interacción presentes en el contenido deben ser manejables.

Comprensible

• El contenido y los controlesdeben resultar comprensibles.

Robusto

• El contenido ha de funcionar tanto con tecnologías actuales como futuras (incluyendo diferentes dispositivos de acceso).

5


6

Las personas somos diferentes

¿Por qué?

1. Introducción a la Accesibilidad Web


Y además…Accedemos a la Web de forma diferente

7


2. Limitaciones en el acceso a los contenidos

Limitaciones personalesPersonas con discapacidad visual:Ceguera, sordoceguera

PRODUCTOS DE APOYO

Son dispositivos hardware o software, diseñados para ayudar a las personas con discapacidad a realizar las tareas comunes de la actividad diaria.

8

Lector de pantallaSoftware que interpreta el texto que aparece en pantalla y lo dirige a un dispositivo de salida como:

Información táctilInformación sonora

Accesibilidad en la Web2. Limitaciones en el acceso a los contenidos

9

¿Qué método utilizan para encontrar información en una Web larga?

Encuesta realizada por WebAIM:Realizada a los usuarios de lector de pantalla sobre el método que usan para encontrar la información en una página web.

• El 65.6% de los encuestados prefiere navegar a través de los encabezados de la página.

• El 15,2% prefiere utilizar el comando buscar.

• El 9.8 % navega a través de los enlaces de la página.

• El 6,7% lee la página.


http://webaim.org/projects/screenreadersurvey5/#finding


10

¿Qué método utilizan para encontrar información en una Web larga?


• Estrategias de interacción:• Utilizar los encabezados, listas, tablas, etc.. para saltar entre

elementos.• Navegar con el tabulador para recorrer los enlaces o utilizar las

opciones de los lectores de pantalla para extraer la lista de enlaces.

• Uso de las teclas de acceso rápido.


Limitaciones personales Personas con discapacidad visual:Baja visión

PRODUCTOS DE APOYO Pantallas grandes + ampliadores de pantalla

+

11

Lectores de pantalla


Limitaciones personales Personas con discapacidad visual:Baja visión

ESTRATEGIAS

12

Estilos alto contraste

NEGRO SOBRE BLANCO

• Configuración del ampliador de pantalla con combinaciones específicas de colores de texto y fondo con tamaños de letra más legibles.

• Uso de sus propias hojas de estilo u hojas de estilos ya predefinidas.

BLANCO SOBRE NEGRO

Ejemplo bien

Ejemplo mal

https://web.ua.es/es/actualidad-universitaria/2016/octubre16/24-31/la-universidad-de-alicante-investira-a-maria-blasco-doctora-honoris-causa.html

http://cio.umh.es/2015/09/03/conferencia-del-prof-dr-d-leandro-pardo.html


Limitaciones personalesPersonas con discapacidad visual:Daltonismo

Visión normalDeuteranopiaMenor sensibilidad al color verde.

ProtanopiaMenor sensibilidad al color rojo.

TritanopiaMenor sensibilidad

al color azul

13


Limitaciones personalesPersonas con discapacidad visual:Daltonismo

Visión normalDeuteranopiaMenor sensibilidad al color verde.

ProtanopiaMenor sensibilidad al color rojo.

TritanopiaMenor sensibilidad

al color azul

14


Limitaciones personales

Personas con discapacidad visual Barreras de acceso a la Web

• Imágenes o elementos multimedia sin alternativa textual.• Información basada únicamente en el color. • Combinaciones de colores con poco contraste.

15


Elementos gráficos o multimedia sin alternativa textual

Lee el contenido.

16



Lee el contenido.

17



Discapacidad visual:ceguera, sordocegera

¿Cómo perciben el contenido?

Preinscripción y Matrícula. Teléfono: + 34 965 90 99 00. Horario: De Lunes a Viernes de 9:00 a 19:45.

Lector de pantalla

18





19


Información basada únicamente en el color

20



21

Colour ContrastAnalyser



22





23


Combinaciones de colores con poco contraste

24


Combinaciones de colores con poco contraste

• iZoom• Opción contraste

blanco sobre negro

25




• Otras barreras son:• Tamaños de texto muy reducidos.• Formatos no accesibles de documentos que pueden ser

problemáticos para un lector de pantalla (Ej. Documentos PDF).• Ausencia de encabezados, listas, párrafos, etc. que les permite

ojear el documento.

26


Limitaciones personalesPersonas con discapacidad auditiva:Sordera total o parcial

• Sordera o cofosis: Pérdida total de la audición que imposibilita la percepción del lenguaje por vía auditiva, teniendo que acceder a esa información a través de la vista. El idioma principal de algunas personas con sordera es la lengua de signos y es posible que no hablen o lean con fluidez otro idioma.

• Hipoacusia: La hipoacusia es aquella disminución de la capacidad auditiva que aún permite recibir el lenguaje oral por vía auditiva. También se puede denominar sordera ligera o moderada.

27



Personas con discapacidad auditiva Barreras de acceso a la Web

• Ausencia de transcripciones textuales y subtítulos en los audios/vídeos (Ejemplo vídeo accesible).

• Textos largos y complejos.• Ausencia de imágenes que complementen la información textual.

28

http://tecnogeekperu.blogspot.com.es/2011/10/video-vea-el-mejor-discurso-de-steve.html



Personas con discapacidad física o motriz Extremidades superiores

PRODUCTOS DE APOYO

Puntero de cabeza o licornio Teclados adaptados Varillas bucales o de pie

29



Personas con discapacidad física Barreras de acceso a la Web

• Páginas que sólo se pueden interactuar con el ratón.• Iconos, botones, enlaces y otros elementos de interacción muy

pequeños.• Tiempos de respuesta limitados para realizar una tarea.

30



Personas con discapacidad neurológica o cognitiva

• Relacionadas con el aprendizaje: dislexia, discalculia...• Trastornos de déficit de atención.• Dificultad para comprender conceptos complejos.• Falta de memoria.• Trastornos emocionales que dificultan la concentración.• Epilepsia.

31



Discapacidad neurológica o cognitiva Barreras de acceso a la Web

• Lenguaje complejo.• Textos largos y mal estructurados.• Elementos en movimiento sin posibilidad de detenerlos.• Ausencia de imágenes que complementen la información textual.• Diseños complicados e inconsistentes entre distintas páginas de un

mismo sitio web.• Ausencia de un mapa del sitio web.

32



No siempre implican una discapacidad:

• Incapacidad transitoria.• Derivadas de la edad• Inexperiencia tecnológica• Idioma, cultura, nivel educativo o localización geográfica diferente.

33


Limitaciones tecnológicas / entorno

• Navegadores antiguos, navegadores de texto, ….• Conexiones lentas.• Pantallas pequeñas.• Ambientales: Mala iluminación, ambientes ruidosos, etc..

34


35


36


37


Diversas capacidades

En España, hay un total de 2.564.893 personas con discapacidad.

Fuente: Base estatal de datos 2013

El 10% de la población masculina sufre algún tipo de daltonismo.

El 74,4% de los hogares dispone de conexión a Internet, casi cinco puntos más que en 2013.

Población menosexperta

El 77,1% de la población usa el

móvil para acceder a internet.

Fuente: INE (Instituto Nacional de

Estadística) 2014.

Dispositivos móviles

Hogares con conexiones lentas

El 27% de los hogares no

posee banda ancha.

38


Diversas capacidades en la Universidad de Alicante

Estudiantes: 2801. Visual: 35

2. Auditivo: 20

3. Física: 70

4. Mental: 45

5. Salud: 57

PAS/PDI: 44

Más información:Memoria 2013-2014 del Centro de Apoyo al Estudiante

39

http://m.memoria.ua.es/es/vr-estudiantes/centro-de-apoyo-al-estudiante.html


3. ¿Qué es accesibilidad web?

Hablar de Accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

Accesibilidad web = Eliminar barreras

40

Accesibilidad en la Web3. ¿Qué es accesibilidad web?

Eliminar barreras nos beneficia a todos

41



Personas inexpertas Ambientes poco luminosos

Pantallas pequeñas Usuarios no dominan el idioma

42


43


3. ¿Qué es accesibilidad web?

La accesibilidad es fundamental para un 10 % de la población, para un 40 % es necesario y para el 100 % es confortable.


¿ Estar o Ser Accesible?

Estar accesible

ESTAR EN INTERNET

Metadatos

Titular páginas

Describir el contenido de la

página

Palabras clave

……

Publicar en Internet

44


¿ Estar o Ser Accesible?

Ser Accesible

Utilizar tecnologías estándar del W3C

Aplicar Directrices de Accesibilidad del W3C

Verificar la accesibilidad

45


4. Directrices de accesibilidad: WCAG

Web Accesibility Initiative (WAI): Iniciativa en Accesibilidad Web

1997Conocida como WAI, cuyo objetivo

es facilitar el acceso de las

personas con discapacidad,

desarrollando pautas de

accesibilidad, mejorando las

herramientas para la evaluación de

accesibilidad Web, etc.

46

http://ares.cnice.mec.es/informes/17/contenido/45.htm



Las directrices creadas por el WAI, son las “Pautas de Accesibilidad al Contenido Web (WCAG)”:

• En mayo de 1999, WCAG 1.0.

• En diciembre de 2008, WCAG 2.0 (ISO/IEC 40500:2012).

47

http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=58625

Accesibilidad en la Web4. Directrices de accesibilidad: WCAG

Las WCAG 2.0 están organizadas en 4 principios:

Perceptible

Los contenidos deben ser presentados a los usuarios de modo que ellos puedan percibirlos:• Incluyendo alternativas textuales a los

elementos gráficos o sonoros.• Proporcionando un contraste suficiente.• Estructurando nuestros contenidos.• ….

Operable

• La Web ha de ser igualmente funcional usando el ratón o cualquier otro dispositivo.

• No usar tiempos de acción determinados.• ….

Comprensible

La información y el manejo de la interfaz de usuario deben ser comprensibles:• Navegación coherente.• Títulos de páginas informativos.• Uso de un lenguaje apropiado.• Definir el idioma.• ….

Robusto

Nuestros contenidos han de ser accesibles tanto por aplicaciones antiguas como de última generación.

48

http://www.sidar.org/traducciones/wcag20/es/

Accesibilidad en la Web4. Directrices de accesibilidad: WCAG

Las WCAG 2.0 están organizadas en 4 principios:

Perceptible (4 pautas)

Pauta 1.1

Pauta 1.2

….

1.1.1 Criterio de conformidad (A)

1.2.X Criterio de conformidad (A, AA o AAA)….

2.X.X Criterio de conformidad (A, AA o AAA)

….

Operable (4 pautas)Pauta 2.1 2.1.X Criterio de conformidad (A, AA o AAA)

….

Comprensible (3 pautas)Pauta 3.X…. 3.X.X Criterio de conformidad (A, AA o AAA)

Robusto (1 pauta)Pauta 4.X….

4.X.X Criterio de conformidad (A, AA o AAA)

12 pautas 60 criterios comprobables49

http://www.sidar.org/traducciones/wcag20/es/



• Nivel A : sino se cumplen los criterios de conformidad pertenecientes a este nivel, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.

• Nivel AA: sino se cumplen los criterios de conformidad pertenecientes a este nivel, sería muy difícil acceder a la información para ciertos grupos de usuarios.

• Nivel AAA: sino se cumplen los criterios de conformidad pertenecientes a este nivel, algunos usuarios experimentarían ciertas dificultades para acceder a la información.

50


4. Directrices de accesibilidad: WCAG 2.0Existen tres niveles de conformidad que indican el grado de cumplimiento de los criterios de conformidad por un determinado sitio Web.

1. Nivel de conformidad A

Se satisfacen todos los criterios de conformidad del nivel A.

2. Nivel de conformidad AA

Se satisfacen todos los criterios de conformidad del nivel nivel A y AA.

3. Nivel de conformidad AAA

Se satisfacen todos los criterios de conformidad del nivel A, AA y AAA.

Mínimo exigido por ley


5. Legislación española

¿Qué deben cumplir para ser accesibles según la legislación española?

Para cumplir con la ley todas estos sitios web deberán satisfacer como mínimo el nivel medio "de los criterios de accesibilidad al contenido generalmente reconocidos" (cumplimiento de los niveles 1 y 2 de la Norma UNE 139803:2012).

52

Norma UNE 139803:2012, basada en las Pautas de Accesibilidad al Contenido Web (WCAG 2.0, 2008).

Norma UNE 139803:2004, basada en las Pautas de Accesibilidad al Contenido Web (WCAG 1.0, 1999).

Base para la Certificación AENOR-Marca N de Accesibilidad TIC

http://www.aenor.es/aenor/normas/normas/fichanorma.asp?tipo=N&codigo=N0049614#.VVsDHWvtmko



¿Cuándo?

1. A partir del 31 de diciembre de 2008, en España, todas las páginas web de las administraciones y entidades públicas deben ser accesibles para las personas con discapacidad (Real Decreto 1494/2007; Ley 56/2007).

2. A partir del 31 de diciembre de 2012, en España, también deben ser accesibles las redes sociales y las empresas catalogadas de especial relevancia económica.(Ley 26/2011). Para que una empresa sea catalogada como relevante económicamente debe tener al menos 100 empleados, o el valor de la empresa debe superar los seis millones de euros.

53

http://www.boe.es/boe/dias/2007/11/21/pdfs/A47567-47572.pdf

https://www.boe.es/buscar/doc.php?id=BOE-A-2007-22440

https://www.boe.es/diario_boe/txt.php?id=BOE-A-2011-13241



¿Qué páginas deberían ser accesibles por ley?

1. Las páginas de todas las Administraciones y entidades públicas, como Ayuntamientos, Universidades y Gobiernos.

2. Las páginas de los bancos.

3. Las de empresas relevantes económicamente y que trabajen en el sector del transporte, viajes, comercio electrónico o suministros de agua, luz o gas.

4. Las grandes tiendas online.

5. Las grandes redes sociales (Twitter, Facebook), Google…

54


5. Legislación españolaInforme diciembre 2015. Niveles de accesibilidad sitios web

Fuente: Informes de Infoaccesibilidad. DiscapanetEscala puntuación: De 0 a 5 estrellas.

55

http://www.discapnet.es/Castellano/areastematicas/Accesibilidad/Observatorio_infoaccesibilidad/informesInfoaccesibilidad/Paginas/default.aspx



¿Existen infracciones en Accesibilidad Web?

• La Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades.“Las infracciones serán sancionadas con multas que irán desde un mínimo de 301 euros hasta un máximo de 1.000.000 de euros.”

56

Apéndice I: Sobre denuncias y sanciones a portales web en Españaolgacarreras.blogspot.com.es

http://www.boe.es/buscar/doc.php?id=BOE-A-2007-22293

http://olgacarreras.blogspot.com.es/2005/01/referencia-sobre-legislacin-espaola.html#apendice1



¿Y en el resto del mundo?

• Estados Unidos: primer país en desarrollar una legislación sobre accesibilidad, en 1998.

• Unión europea: proyecto eEurope - Una Sociedad de la Información para Todos“, en 1999.

• Iberoamérica: Argentina, Brasil, Chile, Colombia, Perú, Puerto Rico y Venzuela.

Accesibilidad web por Sergio Luján Mora:Legislación nacional e internacional

57

http://accesibilidadweb.dlsi.ua.es/?menu=legislacion


6. Ventajas

¿Qué beneficios obtenemos todos?

Incrementa la audiencia de nuestro sitio web: La audiencia potencial se incrementa porque las pautas de accesibilidad se adaptan a los estándares de otros dispositivos de acceso (móviles, PDA, televisión digital, etc.).

Ayuda a mejorar el posicionamiento natura web (SEO):La necesidad de proporcionar equivalentes textuales, así como la estructuración de los contenidos tiene como resultado el enriquecimiento de la información de la Web de forma que los contenidos pueden ser indexados más efectivamente por los buscadores.

Aumenta la usabilidad:Los sitios web accesibles son en general más "usables" para todo el mundo.

Ahorra costes, contenidos perdurables en el tiempo:Al tener que separar la presentación de los contenidos, y estar nuestros contenidos maquetados en base a un estándar web, el coste de rediseño será menor ya que son perdurables en el tiempo.

Aumentar el reconocimiento social:Se garantiza un derecho y se cumple con la ley.

58


Herramientas de evaluación

59

Lector de pantalla NVDAhttp://www.nvaccess.org/download/

Teclas de acceso rápido:

• Cursores arriba y abajo para seguir con la lectura secuencial.

• CONTROL+INICIO, nos posicionamos al inicio de la página.

• Tecla H, para movernos entre encabezados.

• MAYÚSCULA (SHIFT) + H encabezado anterior.

• Apretar del 1 al 6 para moverse por los diferentes niveles de encabezado.

• MAYÚSCULA (SHIFT) + (1 al 6) encabezado anterior de nivel N (1-6).

• Tecla L, para movernos entre listas.

• Tecla K, para movernos entre enlaces.

• MAYÚSCULA (SHIFT) + K enlace anterior.

• Tecla U, siguiente enlace no visitado.

• Tecla V, siguiente enlace visitado.

• BLOQ. MAYUS+F7, muestra la lista de enlaces y encabezados.

• Cuando queramos entrar en un enlace que nos anuncia el lector de pantalla, primero hemos de posicionarnos con el foco con la tecla

TABULADOR y después accedemos con la tecla INTRO.

• Principio párrafo: MAYÚSCULA (SHIFT) +N

• Salir: BLOQ. MAYUS + Q / Ejecutar: Ctrl + Alt + N

Ayuda, botón derecho sobre el icono de la aplicación

en ejecución -> Guía de usuario.

Manejo de NVDA, las techas de acceso

rápido para la navegación web a través

del PC se encuentran bajo el epígrafe

modo navegación.

http://www.compartolid.es/nvda/

Más teclas en

http://www.nvaccess.org/download/

http://www.compartolid.es/nvda/


ENLACES Conocer más sobre accesibilidad web

1. W3C: Introducción a la Accesibilidad Web

2. W3C: Web Accessibility Initiative (WAI)

3. W3C: How People with Disabilities Use the Web

4. SIDAR: Pautas de Accesibilidad al contenido de la Web 2.0 (WCAG 2.0)

5. WebAIM: The Web Content Accessibility Guidelines

6. Accesibilidad Web: Sergio Luján

7. Usable y Accesible: Olga Carreras

8. BOE: Ley 53/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información.

9. BOE: Real Decreto 1494/2007 (documento pdf).

10. BOE: Ley 26/2011, de 1 de agosto, de adaptación normativa a la Convención Internacional sobre los Derechos de las Personas con Discapacidad.

11. AENOR: Norma UNE 139803:2012 60

http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

http://www.w3.org/WAI/intro/people-use-web/Overview.html

http://www.w3.org/WAI/intro/people-use-web/Overview.html

http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

http://webaim.org/standards/wcag/

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

http://olgacarreras.blogspot.com.es/2012/04/metodologia-de-evaluacion-de.html

https://www.boe.es/buscar/doc.php?id=BOE-A-2007-22440

http://www.boe.es/boe/dias/2007/11/21/pdfs/A47567-47572.pdf

https://www.boe.es/diario_boe/txt.php?id=BOE-A-2011-13241

http://www.aenor.es/aenor/normas/normas/fichanorma.asp?tipo=N&codigo=N0049614


ENLACES APLICACIONES

Jaws for Windows – Lector de pantallahttp://www.freedomscientific.com/Products/Blindness/JAWS

NVDA – Lector de pantallahttp://www.nvaccess.org/

Claws – Emulador de pantallahttps://addons.mozilla.org/es/firefox/addon/claws/

Colour Contrast Analyzer – Analizador de contrastehttp://www.paciellogroup.com/resources/contrastanalyser/

T.A.W - Test de Accesibilidad Webhttp://www.tawdis.net/

61

http://www.freedomscientific.com/Products/Blindness/JAWS

http://www.nvaccess.org/

https://addons.mozilla.org/es/firefox/addon/claws/

http://www.paciellogroup.com/resources/contrastanalyser/

http://www.tawdis.net/


Gracias por vuestra atención

“La discapacidad no debería de ser un obstáculo para el éxito.”

Stephen W. Hawking

62

accesibilidad en la web - ua€¦ · accesibilidad en la web 2. limitaciones en el acceso a los...

Documents