Accesibilidad

Diseño de Interfaces Web

DAW

Tema 6

Sergio de Mingo (IES G.M. Jovellanos)

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 1 / 37

1 Introducción

2 Directivas POUR

3 Principales desafíos

4 Soluciones

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 2 / 37

 Introducción

Objetivos

La accesibilidad web no se centra sólo en las personas con discapacidad

Tiene como objetivo lograr que las páginas web sean utilizables por el
máximo número de personas:

Independientemente de sus conocimientos o capacidades personales e

Independientemente de las características técnicas del equipo utilizado

para acceder a la Web.

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 3 / 37

 Introducción

Dificultades y oportunidades

Hay sitios web que sólo se pueden usar con el ratón.

Muchos vídeos no están subtitulados para sordos.

Hay interfaces en donde no hay substituto a la interacción con

imágenes.

La mayoría de los estudios estiman que un 20 % de la población

tiene algún tipo de discapacidad

Integrarlas en un espacio web mejorará tanto su vida como tu

capacidad de aumentar tu público y/o mercado

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 4 / 37

 Introducción

Pautas y controles de calidad

Las WCAG (Web Content Accessibility Guidelines) o Pautas de

Accesibilidad al Contenido en la Web son las principales normas de
accesibilidad web

Han sido publicadas por el W3C

Tras un primera versión se han publicado recientemente la WCAG 2.0:

Pautas están centradas en principios más que en técnicas, para que

sigan siendo relevantes incluso cuando la tecnología cambie

Establecen 4 principios o directrices llamadas POUR (Perceivable,

Operable, Understandable and Robust)

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 5 / 37

 Directivas POUR

Perceptible

Implica que el contenido debe estar disponible para los sentidos (visión
y audición principalmente

Esto debe hacerse bien a través del navegador o por medio de ayudas
técnicas

Ejemplos: lectores de pantalla, ampliadores, etc.

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 6 / 37

 Directivas POUR

Perceptible

Directriz 1.1: Texto alternativo para contenido no textual

Directriz 1.2: Contenido multimedia dependiente del tiempo

Directriz 1.3: Adaptable para diferentes formas o formatos sin

perdida de información

Directriz 1.4: Distinguible entre diferentes categorías de información

(lo más importante y lo menos)

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 7 / 37

 Directivas POUR

Operable

Los usuarios pueden interactuar con todos los controles y elementos

interactivos de la página

Esta operabilidad debe hacerse usando el ratón, un teclado o un

dispositivo de ayuda específico

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 8 / 37

 Directivas POUR

Operable

Directriz 2.1: Poder controlar todas las funciones desde el teclado

Directriz 2.2: Proporciona tiempo suficiente a los usuarios para leer y

utilizar el contenido

Directriz 2.3: No diseñar contenido que pueda causar ataques

epilépticos.

Directriz 2.4: Proporciona formas para ayudar a los usuarios a

navegar

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 9 / 37

 Directivas POUR

Comprensible

El contenido es claro y se limita la confusión y la ambigüedad

Directriz 3.1: Hacer contenido de texto legible y comprensible

Directriz 3.2: Hacer la apariencia y la forma de utilizar las páginas

web previsibles

Directriz 3.3: Ofrecer ayuda a los usuarios para evitar y corregir

errores

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 10 / 37

 Directivas POUR

Robusto

Una amplia gama de dispositivos y tecnologías puede acceder al

contenido

Esta muy ligado al RWD o diseño ’Responsive’

Directriz 4.1: Maximiza la compatibilidad con los agentes de usuario

actuales y futuros, incluyendo tecnologías de asistencia.

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 11 / 37

 Directivas POUR

Beneficios

Mejora el posicionamiento en Buscadores

Se incrementa el número de potenciales visitantes

Aumenta la usabilidad de la página

Se cumplen los estándares web

Reduce el tiempo de carga de las páginas web

Demuestra responsabilidad social

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 12 / 37

 Principales desafíos

Ceguera

Proveer de descripciones de texto en el atributo alt, si fuesen

necesarias explicaciones más largas (tanto en la misma página como
con un enlace externo)

Algunos usuarios a veces escuchan la web. Crea enlaces de salto para

los menús de navegación

No escribas scripts que necesiten el uso del ratón. Provee de de

alternativas por teclado (por ejemplo, utiliza onFocus en vez de
onMouseover).

Puede ser difícil para los usuarios saber donde están cuando escuchan
el contenido de una tabla

Los gráficos y las tablas de datos complejas que son interpretados

visualmente son inservibles. Crea resúmenes y descripciones

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 13 / 37

 Principales desafíos

Problemas visuales

A menudo los usuarios utilizan ampliadores de pantalla. El diseño

responsive puede ser de ayuda

El texto en gráficos no se amplía sin un software especial, y se ve

pixelado cuando se amplía

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 14 / 37

 Principales desafíos

Sordera

El audio es inútil

Debemos usar transcripciones para el audio y subtítulos para los vídeos

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 15 / 37

 Principales desafíos

Discapacidades motoras

Los usuarios puede que no sean capaces de utilizar el ratón

Los usuarios que utilizan tecnologías de soplado y aspirado, o similares

pueden fatigarse. Crea enlaces rápidos

Los usuarios utilizan software activado por voz. Los sistemas de

reconocimiento se comportan como un teclado normalmente, no como
un ratón

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 16 / 37

 Principales desafíos

Discapacidades cognitivas

Los usuarios pueden confundirse con diseños confusos o sistemas de

navegación inconsistentes. Simplifica y mantén estructuras
homongeneas

Los usuarios pueden tener dificultades de concentración o comprensión

con párrafos largos

Un solo método puede no ser suficiente. En algunos procesos puede

ser necesario añadir texto a la iconografía

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 17 / 37

 Soluciones

Imágenes. Atributo alt

El texto alternativo proporciona una alternativa textual a los

contenidos que no son texto en las páginas web

Es especialmente útil para las personas que son ciegas y dependen de

un lector de pantalla para acceder al contenido de un sitio web

Cuando la imagen es meramente decorativa o parte del formato no se

incluye. Solo confunde. Ejemplo: un logotipo corporativo

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 18 / 37

 Soluciones

Imágenes. Atributo alt

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 19 / 37

 Soluciones

Imágenes. Mal uso de alt

Mal uso de alt cuando describe imagen en vez de su función

<a href="anterior.html">
<img src="./img/flecha-izq.gif" alt="Flecha roja izquierda">
</a>
<a href="indice.html">Indice</a>
<a href="siguiente.html">
<img src="./img/flecha-der.gif" alt="Flecha roja derecha">
</a>

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 20 / 37

 Soluciones

Imágenes. Mal uso de alt

Mal uso de alt cuando se usa en imágenes decorativas

<a href="unete.html">
<img src="./img/logo.png" alt="Unete" />Unete
</a>

Mal uso de alt cuando no aporta nada útil

<p>
Telefono de contacto:
<img src="./img/telefono.gif" alt="Telefono de contacto" />
</p>

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 21 / 37

 Soluciones

Imágenes. Mal uso de alt

Podemos utilizar un lector de pantalla para ver como se mostraría

nuestra web a un usuario que lo utilice

Existen también formas de emular este comportamiento a través de

software

Un ejemplo es Fangs, un plugin que puede ser instalado en Firefox

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 22 / 37

 Soluciones

Imágenes. Mal uso de alt

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 23 / 37

 Soluciones

Imágenes. Buen uso de alt

Añadimos la funcionalidad a las imágenes de las flechas

Eliminamos la descripción de la imagen del logo

Cambiamos la imagen del teléfono por el número de forma textual

Incluso eliminamos las imágenes decorativas del HTML. Usamos CSS

para incrustarlas

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 24 / 37

 Soluciones

Imágenes. Buen uso de alt

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 25 / 37

 Soluciones

Elementos multimedia

Los elementos multimedia pueden ocasionar problemas de

accesibilidad a todo el mundo en general

Problema de compatibilidad con el navegador

Es recomendable proporcionar transcripciones y subtítulos

YouTube es pionera en este sentido (botón CC)

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 26 / 37

 Soluciones

Enlaces

Algunos navegadores y algunos programas de ayuda permiten mostrar

la lista de enlaces de una página web

Para que el enlace tenga sentido en esa lista de enlaces, el texto del
enlace tiene que tener sentido fuera de su contexto

Intenta evitar los enlaces tipo "Pincha aquí"

Introduce cierta descripción ocultada parcialmente con CSS

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 27 / 37

 Soluciones

Enlaces

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 28 / 37

 Soluciones

Enlaces

<p>Estábamos desayunando cuando de repente sucedió.

<a href="noticia-hija-mayor.html">Más información
<span>sobre la noticia titulada
"A mi hija mayor se le ha caído su primer
diente"</span>.
</a>
</p>

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 29 / 37

 Soluciones

Enlaces. Otros consejos

Evita un uso excesivo de los enlaces. No lo enlaces todo

No es necesario enlazar un mismo término siempre. Únicamente la

primera vez que aparece

Intenta enlazar a fuentes en el mismo idioma

Conserva un comportamiento (y visualización) estándar para todos tus

enlaces

Evita el uso de URLs ofuscadas

Compruébalos periódicamete (usa scripts si es necesario)

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 30 / 37

 Soluciones

Organización de la página

Las páginas web tienen que estar correctamente estructuradas

Esta es uno de los parámetros que (según cuentan) más valoran los
algoritmos de los principales buscadores, sobre todo Google

Elementos fundamentales:

Título

Encabezados

Párrafos

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 31 / 37

 Soluciones

Organización. Encabezados

La mayoría de los lectores de pantalla y algunos navegadores permiten

al usuario desplazarse dentro de una página web "saltando"de un
encabezado a otro encabezado

Utiliza un único encabezado <h1>para el título principal de la página

web

Utiliza diferentes encabezados <h2> para cada apartado principal de

la página.

Emplea el resto para añadir más detalle

Ve pasando siempre a encabezados de orden inferior sin saltarte

ninguno

Para evitar mostrar un encabezado usa CSS

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 32 / 37

 Soluciones

Organización. Maquetación

En la web actual, se premia en uso de etiquetas semánticas

No uses un DIV o un SPAN para definir un encabezado. Un DIV o un

SPAN no aportan significado

No uses jamás tablas para maquetar. No son responsive

Empieza a utilizar etiquetas HTML5 con contenido semántico: Header,

Nav, Article, Section, Footer y más

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 33 / 37

 Soluciones

Organización. Ejemplo HTML5

<header>
<h1>Nombre de la empreza</h1>
<p>Slogan comercial</p>
</header>
<section id="news-list">
<h2>Noticias</h2>
<article>
<h3>Noticia 1</h3>
<p>Desarrollo de la noticia 1</p>
</article>
<article>
<h3>Noticia 2</h3>
<p>Desarrollo de la noticia 2</p>
</article>
</section>

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 34 / 37

 Soluciones

Maquetación. Separación en capas

Utiliza capas separadas para construir tu web:

Capa de contenido: XHTML/HTML5

Capa de presentación: CSS

Capa de comportamiento: Javascript

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 35 / 37

 Soluciones

Maquetación. Separación en capas

Evita el acoplamiento de las capas

No definas comportamiento dentro de la estructura: No asignes

eventos en el HTML)

No definas visualización dentro del comportamiento: No definas

reglas CSS en el código Javascript

No definas estructura dentro del comportamiento: No crees

contenido informativo en el Javascript

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 36 / 37

 (cc) Sergio de Mingo
Some rights reserved. This work is licensed under a Creative Commons
Attribution-Share Alike 3.0 Spain License, available at
http://creativecommons.org/licenses/by-sa/3.0/

http://apuntes-fp.blogspot.com

sergio.demingogil@educa.madrid.org

Diseño de Interfaces Web (DAW) Accesibilidad Tema 6 37 / 37