Pautas de accesibilidad para la construcción de sitios web

1. Accesibilidad Web
Haciendo la web accesible

2. ¿Qué es la accesibilidad web?
La accesibilidad web 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.
• La necesidad de que la Web sea universal y accesible por cualquier persona
está presente desde el principio de la Web, ya que era un requisito
contemplado en su diseño por su creador Tim Berners-Lee:
“The power of the Web is in its universality. Access by everyone regardless of
disability is an essential aspect.”
El poder de la Web está en su universalidad. El acceso por cualquier persona,
independientemente de la discapacidad que presente es un aspecto esencial.
Tim Berners-Lee, Director del W3C e inventor de la World Wide Web

3. Acceso en igualdad de condiciones
• La Organización Mundial de la Salud (OMS)
recoge en sus informes un total de 600 millones
de personas con discapacidad. El acceso de estas
personas a la tecnología debe tenerse en cuenta
en la construcción de una sociedad igualitaria.

4. Pensando en la accesibilidad
Cuando los sitios web están diseñados pensando en la accesibilidad,
todos los usuarios pueden acceder en condiciones de igualdad a los
contenidos.
• Por ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se proporciona
un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo,
esto permite a los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los
contenidos.
• Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán
entenderlos plenamente.
• Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones,
los usuarios con dislexia o problemas de aprendizaje están en mejores condiciones de entenderlos.
• Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan
leerlo sin dificultad.
• De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los
usuarios que no pueden controlar el ratón con precisión.
• Si se evitan las acciones que dependan de un dispositivo concreto (pulsar una tecla, hacer clic con
el ratón) el usuario podrá escoger el dispositivo que más le convenga.

5. Pautas de Accesibilidad
Lo mencionado anteriormente se puede resumir en Pautas de
Accesibilidad; estas pautas explican cómo hacer accesibles los
contenidos de la web a personas con discapacidad.
Las pautas están pensadas para todos los diseñadores de
contenidos de la web y para los diseñadores de herramientas de
creación. El fin principal de estas pautas en promover la
accesibilidad.
Estas pautas son una especificación del W3C que proporciona
una guía sobre la accesibilidad de los sitios de la web para las
personas con discapacidad. Han sido desarrolladas por la
Iniciativa de Accesibilidad en la Web (WAI) del W3C.

6. Límites en la accesibilidad
Las limitaciones en la accesibilidad de los sitios Web pueden ser:
• Visuales: En sus distintos grados, desde la baja visión a la ceguera total, además de
problemas para distinguir colores (Daltonismo).
• Motrices: Dificultad o la imposibilidad de usar las manos, incluidos temblores, lentitud
muscular, etc, debido a enfermedades como el Parkinson, distrofia muscular, parálisis
cerebral, amputaciones, entre otras.
• Auditivas: Sordera o deficiencias auditivas.
• Cognitivas: Dificultades de aprendizaje (dislexia, etc) o discapacidades cognitivas que
afecten a la memoria, la atención, las habilidades lógicas, etc.
• A las personas con discapacidad podemos añadir el conjunto de personas de la "tercera
edad", ya que las carencias y problemas de los medios físicos, así como muchas veces el
contenido, hacen que estas personas se encuentren también en riesgo de infoexclusión.

7. Problemas de accesibilidad
Las principales dificultades con las que se encuentra la persona con discapacidad suelen ser
de:
• Manejo de terminales: Los teléfonos, ordenadores, cajeros automáticos y televisión
digital la mayoría de las veces no están diseñados y colocados, en el caso de los cajeros,
prestando atención a las necesidades de las personas con discapacidad. La variedad de
terminales es muy grande, lo que se debe buscar es seguir la tendencia a reducirlos y
acceder a todos los servicios a través de unos pocos.
• Interacción con las interfaces: Los menús, barras de navegación y botones no suelen
ser accesibles desde una variedad de terminales adaptados.
• Acceso a los contenidos: Los contenidos a los que se tiene acceso desde un mismo
dispositivo son cada vez mayores y, este rápido crecimiento no suele atender las
necesidades específicas de la discapacidad.

8. Un sitio web accesible
Un sitio web accesible debe ser:
• Transformable: La información y los servicios deben ser
accesibles para todos y deben poder ser utilizados con todos los
dispositivos de navegación.
• Comprensible: Contenidos claros y simples.
• Navegable: Mecanismos sencillos de navegación.

9. Web Accessibility Initiative (WAI)
La Web Accessibility Initiative (WAI) o Iniciativa para la Accesibilidad Web es una
rama del World Wide Web Consortium (W3C) que vela por la accesibilidad de la Web.
Publica las Guías de Accesibilidad al Contenido Web. La idea general del WAI es crear una
serie de reglas claras.
El grado de accesibilidad se establece en niveles denominados A, AA, y AAA, correspondiendo
respectivamente a criterios mínimos de accesibilidad, extendidos, y accesibilidad máxima.
Técnicamente la accesibilidad se implementa mediante pautas de lógica estructural de
documentos, contenido auto-explicativo y semántica adicional, con la intención de permitir, a
una audiencia lo más extensa posible de usuarios con distintos niveles de dotación tecnológica
y capacidad sensorial, acceder a la información que se intenta representar y transmitir.
Se incide especialmente en que las capacidades tecnológicas de vanguardia (entiéndase por
ejemplo animaciones con Adobe Flash, JavaScript, AJAX, HTML5 o CSS3) se usen con la
moderación o consideración suficiente para llegar al máximo conjunto posible de usuarios con
una funcionalidad suficiente, sin desvirtuar el concepto de acceso frente al de avance
tecnológico de moda, y prestando especial cuidado de ofrecer información alternativa.

11. WCAG 2.0 checklist Level A (Beginner)
Guideline Summary
1.1.1 – Non-text Content
Provide text alternatives for non-text
content
1.2.1 – Audio-only and Video-only
(Pre-recorded)
Provide an alternative to video-only
and audio-only content
1.2.2 – Captions (Pre-recorded)
Provide captions for videos with
audio
1.2.3 – Audio Description or Media
Alternative (Pre-recorded)
Video with audio has a second
alternative
1.3.1 – Info and Relationships Logical structure
1.3.2 – Meaningful Sequence
Present content in a meaningful
order
1.3.3 – Sensory Characteristics
Use more than one sense for
instructions
1.4.1 – Use of Colour
Don’t use presentation that relies
solely on colour
1.4.2 – Audio Control Don’t play audio automatically
2.1.1 – Keyboard Accessible by keyboard only
2.1.2 – No Keyboard Trap Don’t trap keyboard users
2.2.1 – Timing Adjustable Time limits have user controls
2.2.2 – Pause, Stop, Hide
Provide user controls for moving
content
2.3.1 – Three Flashes or Below
No content flashes more than three
times per second
2.4.1 – Bypass Blocks Provide a ‘Skip to Content’ link
2.4.2 – Page Titled Use helpful and clear page titles
2.4.3 – Focus Order Logical order
2.4.4 – Link Purpose (In Context)
Every link’s purpose is clear from its
context
3.1.1 – Language of Page Page has a language assigned
3.2.1 – On Focus
Elements do not change when they
receive focus
3.2.2 – On Input
Elements do not change when they
receive input
3.3.1 – Error Identification Clearly identify input errors
3.3.2 – Labels or Instructions Label elements and give instructions
4.1.1 – Parsing No major code errors
4.1.2 – Name, Role, Value Build all elements for accessibility

12. WCAG 2.0 Level AA (Intermediate)
Guideline Summary
1.2.4 – Captions (Live) Live videos have captions
1.2.5 – Audio Description (Pre-
recorded)
Users have access to audio
description for video content
1.4.3 – Contrast (Minimum)
Contrast ratio between text and
background is at least 4.5:1
1.4.4 – Resize Text
Text can be resized to 200% without
loss of content or function
1.4.5 – Images of Text Don’t use images of text
2.4.5 – Multiple Ways Offer several ways to find pages
2.4.6 – Headings and Labels Use clear headings and labels
2.4.7 – Focus Visible
Ensure keyboard focus is visible and
clear
3.1.2 – Language of Parts
Tell users when the language on a
page changes
3.2.3 – Consistent Navigation Use menus consistently
3.2.4 – Consistent Identification Use icons and buttons consistently
3.3.3 – Error Suggestion Suggest fixes when users make errors
3.3.4- Error Prevention (Legal,
Financial, Data)
Reduce the risk of input errors for
sensitive data

13. WCAG 2.0 Level AAA (Advanced)
Guideline Summary
1.2.6 – Sign Language (Pre-recorded)
Provide sign language translations for
videos
1.2.7 – Extended Audio description
(Pre-recorded)
Provide extended audio description for
videos
1.2.8 – Media Alternative (Pre-
recorded)
Provide a text alternative to videos
1.2.9 – Audio Only (Live) Provide alternatives for live audio
1.4.6 – Contrast (Enhanced)
Contrast ratio between text and
background is at least 7:1
1.4.7 – Low or No Background Audio Audio is clear for listeners to hear
1.4.8 – Visual Presentation
Offer users a range of presentation
options
1.4.9 – Images of Text (No Exception) Don’t use images of text
2.1.3 – Keyboard (No Exception)
Accessible by keyboard only, without
exception
2.2.3 – No Timing No time limits
2.2.4 – Interruptions Don’t interrupt users
2.2.5 – Re-authenticating Save user data when re-authenticating
2.3.2 – Three Flashes
No content flashes more than three times
per second
2.4.8 – Location Let users know where they are
2.4.9 – Link Purpose (Link Only) Every link’s purpose is clear from its text
2.4.10 – Section Headings Break up content with headings
3.1.3 – Unusual words Explain any strange words
3.1.4 – Abbreviations Explain any abbreviations
3.1.5 – Reading Level
Users with nine years of school can read
your content
3.1.6 – Pronunciation
Explain any words that are hard to
pronounce
3.2.5 – Change on Request
Don’t change elements on your website
until users ask
3.3.5 – Help Provide detailed help and instructions
3.3.6 – Error Prevention (All) Reduce the risk of all input errors

14. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
En las páginas de un sitio web suelen existir
elementos que se repiten en cada página, como el
encabezado de página (el logo y el título del sitio
web), los mecanismos de navegación (el menú
principal y secundario del sitio web) y los
anuncios. Un mecanismo que permita a los
usuarios saltar los elementos que se repiten en
cada página facilita la lectura de la página a las
personas que son ciegas o tienen graves
problemas de visión y dependen de un lector de
pantalla. El mecanismo consiste en un enlace con
el texto “Saltar al contenido”, “Saltar al contenido
principal” o “Saltar navegación” situado en la
parte superior de la página que salta al contenido
principal de la página. Este enlace puede estar
visible para todos los usuarios o se puede ocultar
para que sólo esté disponible para los usuarios de
lectores de pantalla.

15. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
Los encabezados de página (<h1>, <h2>, etc.)
permiten definir la estructura de una página web.
Un lector de pantalla permite navegar a través de
los encabezados de una página. De esta forma, un
usuario que utiliza un lector de pantalla puede
llegar fácil y rápidamente a distintas partes de
una página sin tener que pasar por todo el
contenido de la página.
Los encabezados de página también pueden estar
visibles para todos los usuarios o se pueden
ocultar para que sólo estén disponibles para los
usuarios de lectores de pantalla.

16. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
El texto alternativo (atributo alt en la etiqueta
<img>) proporciona una alternativa textual a los
contenidos que no son texto en las páginas web,
como por ejemplo las imágenes.
El texto alternativo es especialmente útil para las
personas que utilizan un lector de pantalla para
acceder al contenido de un sitio web.
El texto alternativo debe ser adecuado al contexto
de uso del contenido no textual, debe transmitir
la misma información o debe proporcionar la
misma funcionalidad.
Si un contenido no textual requiere una
descripción muy larga se debe emplear el atributo
longdesc para indicar una página web en la que se
ofrece dicha descripción.

17. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
Las tablas se utilizan para mostrar y organizar los
datos.
Las tablas que se utilizan para organizar datos
tabulados deben tener encabezados de fila y de
columna adecuados (la etiqueta <th>).
Los encabezados facilitan la navegación y el
entendimiento de las tablas de datos a los
usuarios que utilizan un lector de pantalla.
Si la estructura de la tabla es compleja, las celdas
de datos deben estar correctamente asociadas con
sus cabeceras (atributos headers y scope).

18. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
Cada control de un formulario debe tener una
etiqueta asociada (etiqueta <label>). La etiqueta
debe ser descriptiva y adecuada a la función que
realiza el control.

19. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
Cada enlace debe tener sentido si el texto del
enlace es leído de forma aislada, ya que los
usuarios de lectores de pantalla tienen una opción
que les permite navegar por la lista de enlaces de
una página web. Por tanto, los enlaces cuyo texto
es “más”, “más información”, “pulsa aquí” o
“descargar” deben ser evitados.

20. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
El uso del color puede mejorar la comprensión de
una página web, pero no se debe utilizar sólo el
color para transmitir información.
La información que se transmite únicamente a
través del color puede no estar disponible para
una persona que es daltónica y no estará
disponible para usuarios de lectores de pantalla.

21. Buenas prácticas HTML
• Proporciona un mecanismo que permita a los
usuarios saltar los elementos repetitivos
• Proporciona encabezados de página
• Proporciona un texto alternativo
• Proporciona encabezados para las tablas de
datos
• Proporciona una etiqueta para los controles de
formulario
• Garantiza que los enlaces tengan sentido fuera
de contexto
• No transmitas información únicamente a través
del color
• Garantiza la accesibilidad del contenido que no
sea HTML
No solo la página web debe ser accesible. Todo el
contenido que se incluya o se enlace desde una
página web, como vídeos, audios, archivos PDF,
documentos de Microsoft Word o presentaciones
de PowerPoint debe ser accesible.

22. Buenas prácticas CSS 1/3
• Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las
etiquetas) y evite hojas de estilo incrustadas (directamente en la página).
• Use la unidad "em" para fijar el tamaño de letra.
• Proporcione un equivalente textual para cualquier imagen o texto importantes
generados por la hoja de estilo
• Asegúrese de que todo contenido importante aparezca dentro del objeto del
documento

23. Buenas prácticas CSS 2/3
• Especifique siempre un tipo de letra genérico por defecto.
• Asegúrese de que los colores de primer plano y de fondo tienen buen contraste.
• Asegúrese de que la información no se transmite sólo a través del color.
• Los contenidos deben ser maquetados, ubicados, colocados en capas y
alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y
colocación absoluta) y no mediante tablas

24. Buenas prácticas CSS 3/3
• Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes
invisibles o transparentes.
• Asegúrese de que la presentación del contenido es comprensible cuando no se
aplican hojas de estilo.
• Cree distintas hojas de estilo para adaptar la presentación del documento
a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY,
pantalla, móvil, etc.) mediante los "tipos de medios" de CSS2 (empleados con las reglas
@media)

25. Usabilidad vs. Accesibilidad
• La usabilidad trata las
recomendaciones que se deben
tener en cuenta al diseñar un sitio
web. Siempre, en lo referente a la
facilidad de acceso para
los usuarios.
• Se trata de que un sitio web sea
fácilmente navegable, es decir,
que un usuario no se pierda en
los contenidos, que encuentre
fácilmente los menús y que llegue
a cumplir los objetivos del sitio
web: comprar, descargar,
subscribirse, etc…
• La accesibilidad trata las normas
que se deben cumplir al diseñar
un sitio web. Siempre, en lo
referente al correcto acceso a los
contenidos, desde los
diferentes dispositivos.
• Las normas de accesibilidad
también hablan del acceso
universal para todos los
usuarios. Velando por que éstos,
tengan alguna minusvalía o no,
puedan acceder a todos los
contenidos de un sitio web.

26. Muchas gracias por su atención
César Jodra
www.JODRA.com