Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Accesibilidad Web 2.0

No description
by

Sergio Gallego

on 17 December 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Accesibilidad Web 2.0


Accesibilidad Web
Conceptos Generales
Errores y Soluciones
Accesibilidad y Discapacidades
INTRODUCCIÓN: ¿QUÉ ES?
PONTE EN SU LUGAR
Principios de la Accesibilidad
Principio 1: Perceptible
Principio 2: Operable
Principio 3: Comprensible
Principio 4: Robusto
La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.
Los componentes de la interfaz de usuario y la navegación deben ser operables.
La información y el manejo de la interfaz de usuario deben ser comprensibles.
El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas.
Principio 1: Perceptible
Ahora vamos paso más allá, imagina que para esas tareas corrientes no solo tienes dificultades, si no limitaciones importantes.
A todas las dificultades que de por si puede presentar realizar una tarea cotidiana sin los medios adecuados, se debe añadir la Sobrecarga Cognitiva. Se trata de una saturación de la capacidad de control, necesaria para que una persona pueda estratificar los objetivos(lo que tiene que hacer) en un orden sostenible
Principio 2: Operable
Principio 3: Comprensible
INTRODUCCIÓN: W3C
INTRODUCCIÓN: WCAG
Pauta 1.1 Alternativas textuales: Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.

Pauta 1.2 Medios tempodependientes: Proporcionar alternativas para los medios tempodependientes.

Pauta 1.3 Adaptable: Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.

Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.
Pauta 2.1 Accesible por teclado: Proporcionar acceso a toda la funcionalidad mediante el teclado.

Pauta 2.2 Tiempo suficiente: Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

Pauta 2.3 Convulsiones: No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

Pauta 2.4 Navegable: Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran
Pauta 3.1 Legible: Hacer que los contenidos textuales resulten legibles y comprensibles.
Pauta 3.2 Predecible: Hacer que las páginas web aparezcan y operen de manera predecible.
Pauta 3.3 Entrada de datos asistida: Ayudar a los usuarios a evitar y corregir los errores.

“Accesibilidad se refiere a un diseño Web que va a permitir que cualquier persona pueda percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a personas sin discapacidad.”
¿Qué es el consorcio w3c?

El W3C es un grupo internacional e independiente que define los protocolos y estándares para la web, como HTML, CSS, etc. Una de las principales iniciativas del W3C es la WAI (Web Accessibility Initiative o Iniciativa de Accesibilidad Web).
®
¿Y qué es la WAI?
La iniciativa de accesibilidad web asegura que personas con algún tipo de discapacidad van a poder hacer uso de la Web.

Una de las funciones de la Iniciativa de ccesibilidad Web (WAI) es desarrollar pautas y técnicas que proporcionen soluciones accesibles para el software Web y para los desarrolladores Web.
WCAG

Las pautas de WAI son consideradas como estándares internacionales de accesibilidad Web. Son conocidas como WCAG.

WCAG 1.0

La especificación contiene catorce pautas, que son los principios generales para el diseño accesible. Cada pauta está asociada a uno o más puntos de verificación que describen cómo aplicar esa pauta a las características particulares de las páginas Web.

Cada punto de verificación tiene asignado uno de los tres niveles de prioridad:
Prioridad 1: Todos los puntos de verificación que el desarrollador tiene que satisfacer; si no, algunos grupos de personas serán incapaces de acceder a la información de un sitio;
Prioridad 2: El desarrollador debe satisfacerla; sin ello alguien encontrará muchas dificultades para acceder a la información;
Prioridad 3: El desarrollador puede satisfacerla; de lo contrario, algunas personas hallarán dificultades para acceder a la información.

La especificación tiene tres "niveles de adecuación" para facilitar la referencia por otras organizaciones:

 El nivel de adecuación "A" (A) incluye los puntos de verificación de prioridad 1.
 El nivel "Doble A" (AA) incluye las prioridades 1 y 2.
 El nivel "Triple A" (AAA) incluye las prioridades 1, 2 y 3.

Actualmente se considera que un sitio Web es accesible si su nivel es AA.
Igual que la accesibilidad beneficia en muchas situaciones relativamente cotidianas, muchas veces estamos haciendo una pagina más accesible sin darnos cuenta. Por ejemplo si ponemos un menú de navegación visible y con nombres o iconos que dejen clara su función o si implementamos un diseño responsive que se visualice correctamente desde diferentes dispositivos.

A un usuario corriente que normalmente sepa desenvolverse puede serle difícil entender las dificultades de acceder a sitios poco accesibles.
Sería interesante realizar un pequeño ejercicio de empatía: piensa en algo que alguna vez se te haya dado realmente mal: un deporte, un juego, una asignatura…. Recuerda la sensación que sentías. Ahora imagina si tuvieses que enfrentarte a eso día a día por ejemplo para hacer tu trabajo o para estudiar.

WCAG 2.0

Las WCAG 2.0 son recomendación oficial de W3C desde el pasado 11 de diciembre de 2008. Están organizadas en 4 principios: Perceptible, Operable, Comprensible y Robusto (en alusión a las características de un documento Web accesible).
Principio 4: Robusto
Pauta 4.1 Compatible: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.
DISLEXIA
Efecto de lavado
: El texto se ve débil e indistinguible.
Usando letra serif.
Solución
: usar un tipo de letra Sans Serif
(Arial, Helvetica, Verdana o Tahoma)
Texto en cursiva.
Solución
: usar negrita
Efecto Rio
: Cuando existen huecos vacíos en el texto en líneas consecutivas.
Texto justificado.

Solución
: Alinear izquierda
2 espacios en blanco.

Solución
: Dejar un solo espacio.
Efecto Borroso:
Cuando se usa texto negro sobre blanco puro.
Solución
: Gris oscuro sobre gris claro.
Bloques de texto muy grandes.
Solución
: Dividir el texto en parrafos pequeños.
IMÁGENES MULTIMEDIA
Proporcionar equivalentes textuales para imágenes
WCAG [1.1 - P1] / UNE [4.4.3 - P1]

Existen dos tipos de alternativas textuales para las imágenes:
Texto alternativo: se indica a través del atributo
alt
del elemento de imagen IMG.
Descripción detallada: se indica a través del atributo
longdesc
del elemento imagen IMG.
(No obstante ésta ya no está soportada los navegadores)
.

IMÁGENES MULTIMEDIA
VIDEOS
OBJETOS PROGRAMADOS
Proporcionar una sincronización de alternativas accesibles (subtítulos)
WCAG [1.4 - P1] / UNE [4.6.4 - P1]
Es necesario proporcionar subtítulos sincronizados a los vídeos (transcripciones del audio de la película que incluyen diálogos y sonidos más importantes). Éstos pueden estar incrustados en el propio vídeo o en un archivo aparte.

Algunos documentos incorporan animaciones Flash, scripts o applets cuyas interfaces no pueden ser controladas a través HTML a los que debemos proporcionar equivalentes alternativos con interfaces accesibles.
Proporcionar una alternativa a los objetos programados
WCAG [1.1 - P1, 6.3 – P1] / UNE [4.4.3 - P1, 4.6.1 – P1]

Alternativas actualizadas en elementos dinámicos
WCAG [6.2 - P1] / UNE [4.4.1 - P1]

El contenido dinámico debe ser accesible
WCAG [6.5 – P2] / UNE [4.4.6 – P2]

OBJETOS PROGRAMADOS
Evitar provocar destellos en la pantalla
WCAG [7.1 – P1] / UNE [4.2.3 – P1]

Evitar el parpadeo del contenido
WCAG [7.2 – P2] / UNE [4.2.10 – P2]

Evitar el movimiento del contenido
WCAG [7.3 – P2] / UNE [4.2.11 – P2]

Contenido con cambios de estado
Una pantalla parpadeante o con destello puede provocar ataques en usuarios con epilepsia foto sensitiva; por eso, los desarrolladores debe evitarse causar destello de la pantalla. Además, debe proporcionarse un mecanismo de control del movimiento de todo contenido no estático.

OBJETOS PROGRAMADOS
Independencia de dispositivo de entrada
WCAG [6.4 – P2, 9.3 – P2] / UNE [4.6.6 – P2]
Un documento o aplicación con el que sólo se pueda interactuar mediante el ratón (evento dependiente del dispositivo), estará restringiendo el acceso, por ejemplo, las personas con discapacidades visuales no pueden utilizar dispositivos de apuntamiento y recurren a otro tipo de recursos como el teclado o la voz.
Objetos programados directamente accesibles
WCAG [8.1 – P1 / P2] / UNE [4.6.2 – P1, 4.6.5 – P1]
Si se añade una presentación en Flash, ésta debe ser accesible, permitiendo acceder y navegar por todos los elementos que contenga bien con un navegador, bien a través de un lector de pantalla.

Independencia de dispositivo
No todos los usuarios tienen un entorno gráfico con un ratón u otro dispositivo para apuntar. Algunos usuarios dependen del teclado, teclado alternativo o entrada de voz para navegar entre vínculos, activar los controles de formulario, etc.


10 FantasMitos de Accesibilidad
<
1
/>
Significa tener 2 versiones de un sitio web.
<
2
/>
Es solo para diseñadores y programadores.
<
3
/>
Una web accesible es fea y aburrida
<
4
/>
Una web debe visualizarse tal y como la
diseñó su autor.
<
5
/>
Es solo para ciegos
<
6
/>
Significa no usar Flash.
<
7
/>
Las herramientas automáticas son suficiente
para determinar el nivel de accesibilidad.
<
8
/>
Las versiones solo texto son suficientes.
<
9
/>
Las personas con discapacidad no son mi público.
<
10
/>
Una web accesible es cara.
Sergio Gallego + Fernando Pablo + Carlos Tomas
Sergio Gallego + Fernando Pablo + Carlos Tomas
- En españa, deacuerdo con la legislación vigente, todas las páginas web
de las administraciones y entidades públicas deben ser accesibles para las
personas con discapacidad desde el 1 de enero de 2009.
"RD 1494/2007; Ley 56/2007"

- De acuerdo con la legislación vigente, las infracciones en materia de accesibilidad web pueden ser sancionadas con multas desde 301 euros hasta
un máximo de 1.000.000 de euros.
"Ley 49/2007"
LEGISLACION EN ACCESIBILIDAD
Principios de la Accesibilidad
Principios de la Accesibilidad
Principios de la Accesibilidad
PONTE EN SU LUGAR
SENSIBILIDAD REDUCIDA AL CONTRASTE
Tabla de sensibilidad al contraste Hamilton-Veale
Utiliza una fuente clara y que no produzca confusión
Utiliza texto real y no imágenes.

El contenido debe ser claro de leer.
Los colores de alto contraste pueden dificultar la lectura.

Evita el texto justificado.
Las imágenes pueden ayudar y distraer a la vez.

Las animaciones son una distracción.
Los anuncios banners, son una distracción.


Algunos usuarios prefieren imprimir la página web.
Proporcionar un mecanismo de navegación global.
Es necesario seleccionar combinaciones colores con alto contraste.
La sensibilidad al contraste es la capacidad que tiene el sistema visual para discriminar un objeto del fondo en el que se encuentra situado.
RECOMENDACIONES
SENSIBILIDAD REDUCIDA AL CONTRASTE
Mínimo:

- Tamaño normal: 4,5:1
- Tamaño grande: 3:1
Mejorado:
- Tamaño normal: 7:1
- Tamaño grande: 4,5:1
Accesibilidad Web
El término dislexia viene del griego y representa una dificultad en el habla o la dicción
¿Como saber el ratio de contraste?
Un defecto de la vista, que ocasiona dificultad para distinguir los colores.
DALTONISMO
Elementos con interfaz propia independiente de dispositivo
WCAG [9.2 – P2] / UNE [4.6.7 – P2]
Todo elemento con interfaz propia (presentaciones interactivas en Flash, objetos cuya interfaz ha sido creada con JavaScript) debe poder manejarse independientemente del dispositivo de entrada usado (ratón, teclado, lector de pantalla, etc.).
OBJETOS PROGRAMADOS
Los marcos permiten presentar varios documentos simultáneamente en una misma página Web.

Alternativa para marcos
WCAG [1.1 – P1] / UNE [4.4.3 – P1]

Todo marco debe ofrecer una alternativa accesible equivalente a través del elemento NOFRAMES que debe incluir los elementos de navegación necesarios para moverse por el sitio Web así como los enlaces a las descripciones de los marcos.


MARCOS
Identificar encabezados
WCAG [5.1 – P1] / UNE [4.3.2 – P1]
Mediante el elemento <th>, <tbody> y <tfoot>.


Tablas de datos complejas
WCAG [5.2 – P1] / UNE [4.3.3 – P1]
En las tablas de datos complejas, aquellas con más de un nivel de encabezados, se deben usar atributos scope, id y headers.


Resúmenes en tablas de datos
WCAG [5.5 – P3] / UNE [4.3.9 – P2]
En tablas de datos simples, puede utilizarse el elemento CAPTION (título de la tabla) o el atributo summary (resumen) del elemento de tabla TABLE para este fin.


No utilizar tablas para maquetar
WCAG [5.3 – P2] / UNE [4.2.8 – P2]


No usar marcadores estructurales para dar formato
WCAG [5.4 – P2] / UNE [4.2.9 – P2]
En el caso de que sea absolutamente necesario emplear tablas para maquetar, estas no deben incluir elementos estructurales de tablas de datos (como th>,<tbody>, <tfoot>, etc.) para crear formatos visuales.
TABLAS
FORMULARIOS
FORMULARIOS
CAPTCHAS
Un formulario HTML es una sección de un documento que contiene contenido normal, código, controles (casillas de verificación, cuadros de texto, botones, menús, etc.) y etiquetas (LABEL) para esos controles.
OTROS PROBLEMAS VISUALES
JavaScript y Formularios
El envío de los datos no debe depender nunca de los scripts.



Alternativas para los scripts en los formularios
WCAG [6.3 – P1] / UNE [4.6.1 – P1]

Actualmente podemos validar muchos campos de formulario usando HTML5 con su correspondiente type (text, number, email, etc) y usando etiquetas como required que muestran el mensaje “rellene este campo” si algún campo está vacío.
Asociación implícita
WCAG [10.2 – P2] / UNE [4.4.8 – P2]
Todo control de formulario debe ser identificado mediante una etiqueta <label>.
Así podría quedar un campo de formulario finalmente:





Asociación explícita
WCAG [12.4– P2] / UNE [4.4.7– P2]
La asociación explícita permite interactuar con las etiquetas y sirve de ayuda contextual para los lectores de pantalla. Para asociar explícitamente una etiqueta con un control, se ha de identificar éste con el atributo id y asociar la etiqueta con el atributo for del elemento <label>.

El orden de tabulación describe un orden (lógico) para navegar de vínculo a vínculo o de control de formulario a control de formulario.

Orden de tabulación adecuado
WCAG [9.4 – P3] / UNE [4.5.9 – P2]

Normalmente podemos acceder secuencialmente a todos los campos de formulario usando el tabulador. Usando el atributo autofocus podemos situar el cursor en el primer campo facilitando la tarea del usuario (utilice ratón o no).

Agrupar la información de los formularios
WCAG [12.3 – P2] / UNE [4.3.6 – P2]

Cuando sea apropiado se debe emplear el elemento fieldset para agrupar controles de formulario relacionados y describir el grupo con el elemento legend.
Las listas largas de opciones se pueden organizar mediante el elemento optgroup.
FORMULARIOS - Independencia de dispositivo
Ceguera: No pueden incluir en alt el texto de los capcha porque el ordenador tambien pasaria la prueba.
Dislexia: Pueden confundir las letras.
Capcha sonoro, para ciegos incluyen
distorsiones
.
Barrera del Idioma
Es prueba de Turing completamente automática y pública para diferenciar maquinas de humanos
¿Son accesibles?
No hay alternativas perfectas
¿Conclusión?
HONEYPOT CAPTCHA

<input

id
=
"
real_email
"
type
="
text
"
name
="
real_email
"
size
="
25
"
alt
="
correo
"
value
=""
/>
<input

id
="
test_email
"
type
="
text
"
name
="
email
"
size
="
25
"
alt
="
correo
"
value
=""
/>

HTML
CSS

#test_email
{
display
: none;
}

Ventajas:
Simple, Transparente y Accesible.

Desventajas:
CSS no es interpretado en los lectores de pantalla, y los bots quizá mas adelante lo interpreten.
G
O
O
G
L
E
n
o
C
A
P
T
C
H
A
Usando optgroup dentro de una lista
Resultado
El código de las páginas Web no debe contener errores, ni elementos desaconsejados y debe optarse por la versión más reciente de la gramática.

Gramáticas formales

Para el caso del código relativo a las páginas Web existen 2 grupos HTML y XHTML.
Esta declaración debe hacerse al principio del a página antes de la etiqueta <html>.

Validar los documentos contra gramáticas formales
WCAG [3.2 – P2] / UNE [4.1.2 – P2]

Las páginas Web deben contener un código válido (tanto (X)HTML como CSS) según las gramáticas formales publicadas (en función de la declaración de tipo de documento o DTD especificado).
ESTÁNDARES
Los estándares Web son tecnologías establecidas por el W3C para crear una base común para el desarrollo Web. Algunas de las tecnologías actuales del W3C son:
HTML, XHTML, XML,CSS, XSLRDF,SMIL, XSLT, PNG y MathML.

Utilizar tecnologías W3C
WCAG [11.1 – P2] / UNE [4.1.1 – P2]

Se deben evitar otras tecnologías (Flash, PDF, DOC, XLS, etc.) para aquellos contenidos que pueden representarse de manera más adecuada mediante (X)HTML y CSS.

No usar características desaconsejadas
WCAG [11.2 – P2] / UNE [4.1.3 – P2]

Ejemplos de estas características desaconsejadas son: FONT, CENTER, MENU, U, align, bgcolor, border, name, size, etc.

Proporcionar alternativas accesibles
WCAG [11.4 – P1] / UNE [4.7.1 – P1]

En el caso de que resulte técnicamente imposible hacer accesible algún contenido, se debe proporcionar un enlace a una página con dicho contenido de forma accesible.
Tecnologias W3C
Legibilidad sin hojas de estilo
WCAG [6.1 – P1] / UNE [4.2.1 – P1]

La estructura y orden correcto de lectura de los contenidos debe ser independiente de la disponibilidad o soporte de hojas de estilo.

Utilizar hojas de estilo para maquetación y presentación
WCAG [3.3 – P2] / UNE [4.2.5 – P2]

Se ha de separar la estructura de la presentación. Para ello se deben emplear las hojas de estilo para controlar la maquetación y presentación de los contenidos en lugar de utilizar código (X)HTML.

Utilizar unidades relativas en vez de absolutas
WCAG [3.4 – P2] / UNE [4.2.4 – P2]

El uso de unidades relativas permite redimensionar el texto facilitando el acceso a la información a todos los usuarios. Se debe optar por un "diseño fluido" o "diseño líquido", aquel en el que las páginas Web se adaptan y transforman adecuadamente sea cual sea la resolución usada y el tamaño del texto.
HOJAS DE ESTILO
Encabezados
WCAG [3.5 – P2] / UNE [4.3.5 – P2]

Los elementos de encabezado (H1, H2, H3, H4, H5 y H6) marcan las diferentes secciones que componen un documento. La estructura de encabezados se debe corresponder con la estructura lógica del documento.

Listas
WCAG [3.6 – P2] / UNE [4.3.7 – P2]

Las enumeraciones de elementos deben estructurarse adecuadamente mediante los elementos HTML de listas ordenadas, desordenadas o de definición (OL, UL y No se deben utilizar los elementos de lista para crear efectos de presentación ni de formato, como dar sangría al texto.

Citas
WCAG [3.7– P2] / UNE [4.3.8 – P2]

Las citas deben marcarse mediante los elementos (X)HTML de cita (Q para citas en línea, BLOCKQUOTE para citas de bloque, atributo cite para indicar la URL de la fuente, y elemento CITE para marcar referencias).
Dividir bloques largos de información
WCAG [12.3– P2] / UNE [4.3.6 – P2]

Para ello se ha de utilizar párrafos, encabezados y listas para el contenido; se deben agrupar las filas y columnas relacionadas en las tablas de datos (COLGROUP, THEAD, TBODY, TFOOT) cuando sea necesario; y agrupar controles de formulario relacionados (FIELDSET) y listados de opciones (OPTGROUP).

Mediante algunos plugins como HTML5 Outliner (Chrome) o Headings Map (Firefox) podemos hacernos una idea de cómo se puede quedar esquematizado nuestro sitio web:
EJEMPLO HTML5 OUTLINER


El uso del lenguaje HTML promueve la accesibilidad por las siguientes razones:
El texto puede ser ampliado o interpretado como habla o braille.
Los mecanismos de búsqueda pueden usar la información del texto.

Usar marcadores en vez de imágenes para transmitir información
WCAG [3.1 – P2] / UNE [4.2.6 – P2]

No se deben utilizar imágenes para transmitir información textual cuando ésta es representable mediante (X)HTML+CSS. Aquí podemos ver al desactivar las imágenes como permanece el atributo alt pero el menú que está hecho con css no ha perdido detalle.
Marcadores mejor que imágenes


Lenguaje y Comprensión

Especificar tanto los cambios de idioma permite a los agentes de usuario y ayudas técnicas identificarlo de forma que los lectores de pantalla y programas de síntesis de voz utilicen la pronunciación y el acento adecuado.

Identificar el idioma principal del documento
WCAG [4.3 – P3] / UNE [4.4.4 – P1]

Se ha de identificar el idioma principal del documento mediante los atributos lang (HTML) y/o xml:lang (gramáticas basadas en xml) en la cabecera de la página Web. Identificar los cambios de idioma

Identificar los cambios de idioma
WCAG [4.1 – P1] / UNE [4.4.5 – P1]



Utilizar un lenguaje claro y sencillo
WCAG [14.1 – P1] / UNE [4.4.2– P1]

El empleo de un lenguaje claro y con estructura de frases sencilla, sin argot, jergas o giros lingüísticos.
Evitar las actualizaciones automáticas
WCAG [7.4 – P2] / UNE [4.5.4 – P2]

Se debe proporcionar un enlace que permita al usuario realizar dicha acción cuando lo considere oportuno.





Evitar el redireccionamiento automático
WCAG [7.5 – P2] / UNE [4.5.5 – P2]

En caso de que sea necesario redirigir una página hacia otra, se debe configurar el servidor para que realice dicha acción, de forma que está sea transparente al usuario.
Las descripciones deben ser claras y precisas. Utilizando frases concisas que tengan sentido cuando se lean fuera del contexto o como parte de una serie de vínculos.
ENLACES
OTROS ELEMENTOS
Un mecanismo de navegación crea un conjunto de caminos que el usuario puede seguir en un sitio (barras de navegación, mapas del sitio, búsqueda).
MECANISMOS DE NAVEGACIÓN
Proporcionar información sobre la estructura del sitio (mapa del sitio)
WCAG [13.3 – P2] / UNE [4.5.7– P2]
NAVEGACIÓN, LENGUAJE Y COMPRENSIÓN
Actualizaciones automáticas y redireccionamiento
Identificar claramente el destino de los enlaces
WCAG [13.1 – P1] / UNE [4.5.1 – P1]

Si se requiere información adicional deberá ser añadida por medio del atributo title, el cuál contendrá todo el texto del enlace además de dicha información adicional.
Evitar la apertura de nuevas ventanas
WCAG [10.1 – P2] / UNE [4.5.6 – P2]

En caso de realizarse se debe informar convenientemente al usuario mediante el texto del enlace o un icono representativo (con su correspondiente texto alternativo) de la apertura de nuevas ventanas.
Utilizar los mecanismos de navegación coherentemente


La utilización de mecanismos de navegación consistentes, así como una presentación coherente a lo largo del portal, facilita su identificación y localización a la vez que aumenta la usabilidad general del sitio.

Meta información
WCAG [13.2 – P2] / UNE [4.1.4 – P2]

Los metadatos añaden información semántica a los documentos de un sitio Web y proporcionan información relevante a los usuarios, a los robots de búsqueda y a los agentes de usuario (navegadores).
Los principales metadatos hacen referencia a la declaración de tipo de documento (DOCTYPE), el título de las páginas (TITLE), la codificación de caracteres empleada (charset), descripción (description) y palabras claves (keywords).
Cuando el contenido completo de un sitio Web no se puede incluir en el menú de navegación principal se debe proporcionar una página, accesible desde todos los documentos, que contenga la estructura completa del portal: el mapa Web.
Linea de Teclado Braille
DALTONISMO
Consejos:
No usar el color como único medio informativo

No seleccionar colores problematicos para elementos de navegación.

No codificar elementos críticos de interfaz solo con un color.

No basar gráficas web en texto únicamente
Si no hubiera más remedio, añadir contraste a la gráfica.
Chrome
Daltonize!
MiTo 1: Accesibilidad significa tener dos versiones de un sitio web
MiTo 3: Las páginas web accesibles son feas y aburridas
MiTo 2: La accesibilidad web es asunto de diseñadores y programadores.
MiTo 4: Los usuarios deben visualizar el sitio tal y como lo diseñó su autor
MiTo 5: La accesibilidad web es solo para ciegos
MiTo 6: La accesibilidad web significa no usar Flash
MiTo 7: Las herramientas automáticas son suficiente para determinar el nivel de accesibilidad
MiTo 8: Las versiones de solo texto son suficientes para garantizar la accesibilidad
MiTo 9: Para qué hacer un sitio web accesible si las personas con discapacidad no son mi target
MiTo 10: Hacer un sitio web accesible es costoso
Los 10 FantasMitos
"Tambien es de los que crean contenidos"
Zen Garden CSS es un recurso web de diseño.
Su objetivo es mostrar las posibilidades del diseño CSS. Se utilizan hojas de estilo aportadas por diferentes diseñadores para cambiar la presentación de un único archivo HTML.
El ejemplo más evidente de lo contrario son los videos subtitulados. Otro buen ejemplo son los enlaces, clicar en enlaces pequeños puede ser complicado, así como seleccionar texto en un link.
Se puede usar con criterios de accesibilidad.
Por ejemplo los subtítulos de Youtube como los que se mostraban en el mito anterior están generados con flash.
No bastan por si solas, podemos retomar el ejemplo del mito 2, en el que se muestra una tabla de datos puesta como imagen, algo que una herramienta no advertiría.
Se deben complementar con nuestra supervisión.
<img

src
="
distribucion.png
"
alt
="
Tabla de Distribución del local
"
/>
No son válidas para todos los usuarios con discapacidad, además en ciertos casos pueden no resultar igual de explicativas.
Es para todos, hay muchos tipos de discapacidades, incluso sin ser discapacitados, podemos actuar temporalmente como tales.

Retomando el ejemplo de seleccionar enlaces del mito 5,
imaginad no poder hacerlo con el brazo hábil.
Quizás puede llevar más tiempo, pero no debería ser más caro que cualquier otro desarrollo Web, lo que si está demostrado es que desarrollar teniendo la accesibilidad en mente desde el principio de los proyectos ayuda a que su aplicación sea mucho menos costosa, por ejemplo ayuda a priorizar el contenido más importante.
Test de Interpretación de Colores Ishihara
Bibliografía
Accesibilidad Web, Presentación de Adolfo Sanz de Diego.
(Facilitado en clase)

Documentos y vídeos sobre accesibilidad de Sergio Luján Mora.
http://gplsi.dlsi.ua.es/~slujan/

Artículo de la Wikipedia sobre accesibilidad web.
http://es.wikipedia.org/wiki/Accesibilidad_web

Vídeo y presentación de Mario Carvajal sobre los mitos de la accesibilidad.
http://www.slideshare.net/astromario/10-mitos-y-falacias-sobre-accesibilidad-web
http://www.youtub.com/watch?v=SZ0_BM-ba7s

Taller de actividades de sensibilización de la ONCE.
http://www.once.es/new/servicios-especializados-en-discapacidad-visual/publicaciones-sobre-discapacidad-visual/nueva-estructura-revista-integracion/copy_of_numeros-publicados/numero-59/copy_of_mapas-geograficos-para-personas-ciegas

Guía de recomendaciones de accesibilidad y calidad web (INTECO).
https://formacion-online.inteco.es/home

Sobrecarga cognitiva.
http://www.multivariada.com/sobrecarga-cognitiva-y-ansiedad.html
Full transcript