7. Accessibilidad

ACCESIBILIDAD DIGITAL
Grau en Enginyeria Informàtica
Interacció Persona-Ordinador
Toni Granollers
El Curso de Interacción Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.

Índice
• Definiciones
• Tecnología asistencial
• Accesibilidad y documentos digitales
• Normativa legal y pautas de
accesibilidad
• Metodología de evaluación
• Ejemplos y Buenas prácticas
Accesibilidad - GEInformàtica, IPO

Definiciones
• Accesible
• Que puede ser accedido
• De fácil acceso o trato
• De fácil comprensión, inteligible
• Accesibilidad
• capacidad de que “algo” sea
accesible
• Discapacitado
• Dicho de una persona: Que
tiene impedida o entorpecida
alguna de las actividades
cotidianas consideradas
normales, por alteración de sus
funciones intelectuales o
físicas.
• Discapacidad
• Cualidad de discapacitado
Accesibilidad en el contexto TIC
• Técnicamente es la capacidad de acceso e interacción con un
elemento tecnológico por parte de cualquier tipo de usuario,
independientemente de sus capacidades o de su contexto de
navegación.
• Sin embargo, suele asociarse SIEMPRE la accesibilidad en el
contexto TIC con la capacidad de acceso para las personas
que sufren alguna discapacidad

Grupos de discapacidades
• Visuales
• Auditivas
• Motrices
• Cognitivas
http://icons.anatom5.de/

Accesibilidad.
Ejemplos de personas discapacitadas interactuando con tecnología
https://www.vilaweb.cat/noticies/ser-cec-i-navegar-per-internet
http://youtu.be/rOy8q1eiPfk?t=4m40s
http://www.youtube.com/
watch?v=NzAYtBA8uTQ#
t=41
http://www.thisisinsider.com/aipoly-app-tells-blind-people-
surroundings-visually-impaired-languages-identify-objects2017-1
http://aipoly.com

Discapacidades y TICs
• DOS visiones del diseño accesible:
1) Diseño universal / Diseño para todos
• Un único diseño, adaptable, es válido para todo tipo de
discapacidades y dispositivos
2) Diseño adaptado a la persona
• Cada tipo de discapacidad requiere un diseño propio.
http://es.wikipedia.org/wiki/Dise%C3%B1o_universal

Inclusive Design
• "The design of mainstream
products and/or services that are
accessible to, and usable by, as
many people as reasonably
possible ... without the need for
special adaptation or
specialized design.“
• Inclusive design IS NOT:
• a stage that can be added in the
design process
• adequately covered by a
requirement that the product should
be easy to use
• solely about designing products for a
particular capability loss
http://www.inclusivedesigntoolkit.com
http://www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html
Todas las
plataformas
Todas las
resoluciones
Todos los
usuarios
Todos los
dispositivos
Todos los
navegadores
Universal
Design

A web that is for everyone
must be everyone's
responsibility
https://accessibility.digital.gov

Algunas reflexiones sobre la accesibilidad
• La accesibilidad no es una cualidad de un producto, sino
que es el resultado de la interacción de diversos
componentes trabajando conjuntamente. (W3C)

Tecnología asistencial
FONT: http://blogs.msdn.com/b/b8/archive/2012/02/14/enabling-accessibility.aspx

• Término que agrupa todos los equipos, dispositivos,
instrumentos o programas utilizados para incrementar,
mantener o mejorar la calidad de vida y la autonomía de
las personas que tienen algún tipo de discapacidad

http://blogs.msdn.com/b/b8/archive/2012/02/14/e
nabling-accessibility.aspx
També: Reaching more customers with accessible Metro style apps in HTML5
http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-843T

W8 Enabling accessibility

http://www.microsoft.com/enable https://www.apple.com/accessibility
For developers:
https://msdn.microsoft.com/en-us/windows/bb735024.aspx

No basta con que la app se vea bien, también
ha de poder utilizarse por todos los usuarios
Accesibility
Scanner nos
invitará a
pasearnos por
todas las pantallas
de la aplicación en
cuestión
sugiriendo los
posibles errores a
corregir
http://www.elandroidelibre.com/2016/03/google-accesibilidad-aplicaciones.html

http://docs.fedoraproject.org/en-
US/Fedora/16/html/Accessibility_Guide/index.html
https://wiki.gnome.org/Accessibility

Tecnología asistencial. Teclados y
apuntadores alternativos

Tecnología asistencial. Sintetizadores de
voz/Ampliadores de pantalla/Impr. Braille

Tecnología asistencial.
https://youtu.be/Ks7AwV_uxO0

WIIM es
un smartwatch
diseñado para
personas con
problemas auditivos
que convierte los
sonidos en
sensaciones sobre la
pielhttps://wiim.eu/es

Tecnología assistencial.
Lectura fàcil para usuarios con dislexia
https://www.onenote.com/learningtools

Tecnología asistencial. Reconocimiento
voz / Autocompletar / Lengua de signos
Demo:
http://www.youtube.com/watch?v=S5Jf9tmaGWQ
http://newsite.ahf-net.com/soothsayer
Demo (per ara sol funciona amb iExplorer):
http://www.latice.rnu.tn/websign/_site/demo_free.php
Word Prediction
http://www.signall.us

http://es.fifa.com/worldcup/index.html
http://es.fifa.com/worldcup/videos/y=2014/m=6/video=uruguay
-inglaterra-lenguaje-internacional-de-signos-2378315.html
https://www.youtube.com/watch?v=GDI11Co5APU#t=89

Sistemas de ComunicaciónAumentativa y Alternativa
http://www.ceapat.es/InterPresent2/gro
ups/imserso/documents/binario/comuni
cacinaumentativayalterna.pdf

Tecnología asistencial proyecto que tiene
como misión mejorar
la autonomía y la
calidad de vida de
las personas con
parálisis cerebral a
través de la
tecnología y,
específicamente, las
Tecnologías de Apoyo
(TA) y los Sistemas
Alternativos y
Aumentativos de
Comunicación
(SAAC)
https://aspace.org/net

Holy Braille: a Kindle-style
tablet for the blind
http://www.foxnews.com/tech/2016
/01/13/holy-braille-scientists-
developing-kindle-style-tablet-for-
blind.html?utm_content=29689129
&utm_medium=social&utm_source
=twitter
Using a Braille Display
https://youtu.be/9yLZRPXJ8lo

Tecnologia assistencial “propera”
Enable Viacam:
http://eviacam.sourceforge.net
http://www.crea-si.com/esp/inicio.php
http://www.fundacionvodafone.es/a
pp/eva-facial-mouse
http://robotica.udl.cat/catedra.htm

Cruz Roja hace accesible su teleasistencia al
integrarla en los smartphones
25/05/2017: Cruz Roja ha desarrollado una versión de su servicio de
teleasistencia integrable en cualquier dispositivo Android facilitando su
uso por personas mayores y personas con discapacidad
TalkBack
Google

Mi Interfaz de acceso al ordenador
http://ceapat.es/ceapat_01/centro_docume
ntal/tecnologiasinformacion/acceso_orden
ador/IM_071759
Centro de Referencia Estatal de
Autonomía Personal y Ayudas Técnicas
2013.
Serie: Tecnología y Comunicación, nº 3
Resumen:
En este documento se describen los recursos y
alternativas existentes para posibilitar el uso del
ordenador a las personas con diversidad funcional.
Constituye un apoyo para la elección de
la interfaz que mejor se ajuste a las capacidades,
necesidades y preferencias del usuario, aportándole la
mayor autonomía con el menor esfuerzo.

Las tecnologies en las
entidades ASPACE
https://aspace.org/assets/uploads/publicaci
ones/dff2e-tecnologia_entidades_final.pdf
2018 © CONFEDERACIÓN ASPACE

Accesibilidad y documentos digitales
• La Accesibilidad en los documentos digitales
beneficia a todos
• Las instituciones educativas debemos adoptar
las medidas necesarias para asegurar el
acceso a la información digital a TODOS los
estudiantes

Accesibilidad y documentos:
editores de texto y presentaciones
• Programas tipo Microsoft Word o Open Office
Writer
• Microsoft Word, propietario pero es un estándar
de facto que todo el mundo conoce y utiliza
• Programas tipo Microsoft PowerPoint o Open
Office Impress
• Versión esquemática de ideas principales
• Estándar de facto para todo tipo de
presentaciones (e incluso como documento)
• Fuerte componente gráfico
• Combinación de información multimedia
• visual + texto + sonido
• Altamente recomendable para audiencias con
personas con discapacidad cognitiva

Accesibilidad y documentos Documentos
formato PDF (Portable Document Format)
• Ideales para formularios
• Opciones de firma digital y gestión de derechos
digitales
• Documentos multiplataforma y de formato abierto
• Portabilidad entre diferentes equipos y sistemas
• Admiten múltiples fuentes, imágenes, perfiles de
colores, elementos multimedia y elementos
vectoriales, anotaciones ...
• Fidelidad en la reproducción del formato y diseño
• Impresión tal como se muestra en la pantalla

Guías de contenido digital accesible
• http://www.udl.cat/serveis/seu/UdLxtothom/recursos/guies.html
• http://griho.udl.cat/projects/GuiesCongintutDigitalAccessible.html

Guía de contenido digital accesible: vídeo
• http://www.videoaccessible.udl.cat
http://www.youtube.com/watch?v=d-IUOWiGsa4

Accessibilidad en el mundo de los
videojuegos
International game developers assiciation https://igda-gasig.org
http://gameaccessibilityguidelines.com
Buenas prácticas de accesibilidad
en videojuegos (2012)
http://www.ceapat.es/InterPresent1/groups/imserso/docu
ments/binario/accesvideojuegos.pdf
MÁS: https://www.mcarmendealba.com/accesibilidad/accesibilidad-videojegos
https://www.discapnet.es/areas-tematicas/accesibilidad/ocio-accesible/guia-de-videojuegos-accesibles

Índice
Definiciones
Tecnología asistencial
Accesibilidad y documentos digitales
• Normativa legal y pautas de accesibilidad

Web Accessibility Initiative (WAI)
• Grupo de trabajo permanente del W3C (Word Wide Web
Consortium), organización internacional que trabaja en el
desarrollo de estándares web
• La WAI se encarga de velar
por la accesibilidad de los
contenidos web
http://www.w3.org/WAI

WAI (Web Accessibility Initiative)
• Grupo de trabajo permanente del W3C cuyos
objetivos principales son:
• Facilitar el acceso a la WEB a las personas con discapacidad
• Desarrollar pautas de accesibilidad (WCAG)
• Desarrollar y mejorar las herramientas de evaluación y de
reparación de la accesibilidad Web
• Formación y concienciación en relación del diseño accesible
(design for all, ...)

WAI. Pautas WCAG
• WCAG (Web Content Accessibility Guidelines)
• Pautas de accesibilidad que explican como
hacer el contenido Web accessible para
personas con discapacidades o de edad
avanzada
• Tienen tres niveles de prioridad
Simple(Nivel A) Doble (Nivel AA) Triple (Nivel AAA)
https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos

W3C Web Content Accessibility
Guidelines 2.0 Conformance Logos
• Place the icon for the appropriate conformance level
using the HTML source code from
https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos/
<a href="http://www.w3.org/WAI/WCAG2A-
Conformance" title="Explanation of WCAG
2.0 Level A Conformance">
<img height="32" width="88"
src="http://www.w3.org/WAI/wcag2A"
alt="Level A conformance, W3C WAI Web
Content Accessibility Guidelines 2.0">
</a>

WAI. Pautas WCAG
Ejemplo de las pautas
http://www.w3.org/TR/WCAG20

Principios
• Perceptible: ofrecer alternativas para los
usuarios que pueden utilizar alguno de sus
sentidos
• Comprensible: diseñar tanto la información
como la interfaz de usuario fácil de leer y
comprender.
• Operable: proporcionar elementos de
interacción y de navegación para que pueda ser
utilizados por personas con diferentes
capacidades.
• Robusto: capacidad de que la IU sea
transmitida, interpretada y ejecutada por los
diferentes agentes de usuario (navegadores,
reproductores mm, plug-ins, ….
• Muy dependiente de la tecnología
Perceptible Comprensible
Operable Robusto
https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards

Understanding the Four Principles of
Accessibility
• Perceivable - Information and user interface components must
be presentable to users in ways they can perceive.
• users must be able to perceive the information being presented (it
can't be invisible to all of their senses)
• Operable – UI components and navigation must be operable.
• users must be able to operate the interface (the interface cannot
require interaction that a user cannot perform)
• Understandable - Information and the operation of user
interface must be understandable.
• users must be able to understand the information as well as the
operation of the user interface (the content or operation cannot be
beyond their understanding)
• Robust - Content must be robust enough that it can be
interpreted reliably by a wide variety of user agents, including
assistive technologies.
• users must be able to access the content as technologies advance (as
technologies and user agents evolve, the content should remain
accessible)
https://www.w3.org/TR/UNDERSTANDING-
WCAG20/intro.html#introduction-fourprincs-head

VisualmapofWebContentAccessibilityGuidelines2.0
DesignedbyStamfordInteractivewww.stamfordinteractive.com.au
BasedonWorldWideWebConsortiumdocumentationavailableatwww.w3.org/TR/WCAG20
https://www.digitalpulse.pwc.com.au/wp-
content/uploads/2014/08/WCAG20Map.pdf

Intopia Launches WCAG 2.1 Map
Written by Ricky Onsman on 27
February 2019
http://intopia.digital/articles/intopia-
launches-wcag-2-1-map

WCAG 2.0  WCAG 2.1 [ WCAG 3.0]
• Objetivo: que las
WCAG 2.1 sean
recomendación a
mediados de 2018
• Se está trabajando
paralelo en las
3.0
https://www.w3.org/TR/WCAG21
https://olgacarreras.blogspot.com.es/2017/04/wcag-21-medida-provisional-hasta-las.html

WCAG 2.1 was published on 5 June 2018
• What's New in WCAG 2.1
• https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21
https://www.w3.org/WAI/standards-guidelines/wcag

WAI. Pautas WCAG
Entendiendo las pautas
http://www.w3.org/TR/UNDE
RSTANDING-WCAG20
http://www.w3.org/TR/UN
DERSTANDING-
WCAG20/text-equiv.html

WAI. Pautas WCAG
Quick Reference
• Table of Contents
• WCAG 2.0 Quick Reference List
• 1.1 Text Alternatives
• 1.2 Time-based Media
• 1.3 Adaptable
• 1.4 Distinguishable
• 2.1 Keyboard Accessible
• 2.2 Enough Time
• 2.3 Seizures
• 2.4 Navigable
• 3.1 Readable
• 3.2 Predictable
• 3.3 Input Assistance
• 4.1 Compatible
https://www.w3.org/WAI/WCAG21/quickref

http://www.w3.org/WAI/demos/bad/Overview.html

Estrategia Española sobre Discapacidad 2012-2020
http://www.msssi.gob.es/ssi/discapacidad/informacion/p
lanAccionEstrategiaEspanolaDiscapacidad.htm

Plan de Acción de la Estrategia Española sobre
Discapacidad 2014-2020
http://www.msssi.gob.es/ssi/discapacidad/informacion/planAccionEstrategiaEspanolaDiscapacidad.htm

https://ec.europa.eu/digital-agenda/en/web-accessibility

Legislación española
• Real Decreto 1494/2007 de 12 de noviembre el 2007, por el que se aprueba el
“Reglamento sobre las condiciones básicas para el acceso de las personas
con discapacidad a las tecnologías, productos y servicios relacionados con
la Sociedad de la Información y medios de comunicación social”
• A parte de la web, trata acerca de la garantía de accesibilidad de la TDT para las personas con
discapacidad (contenidos + HW)
• Por ej.: Ergonomía en los receptores de televisión digital, así como en todos sus
dispositivos asociados, y, muy especialmente, en el diseño de los mandos a distancia.
• Plazos para las páginas de internet de las administraciones públicas o con
financiación pública:
• Las nuevas páginas web se tienen que ajustar al nivel 1 desde la entrada en vigor del
reglamento  el día siguiente al de su publicación en el BOE, es decir, 22/11/2007
• Las páginas web existentes se tienen que adaptar al nivel 1 en el plazo de 6 meses 
22/05/2008
• Todas las páginas, actualmente existentes o de nueva creación, tienen que cumplir el nivel 2 a
partir del 31/12/2008
• Los niveles mencionados son según la Norma UNE 139803:2004
R.D. 1494/2007: http://www.boe.es/boe/dias/2007/11/21/pdfs/A47567-47572.pdf
UNE 139803:2004: http://www.inteco.es/Accesibilidad/difusion/Normativa/Descarga/DescargaUNE_139803
ATENCIÓN !!: la norma UNE 139803:2004 es anulada por la UNE 139803:2012

[01/06/2017] El CERMI anima a la ciudadanía a denunciar las
páginas webs de organismos públicos que no sean accesibles

Índice
Definiciones
Normativa legal y pautas de accesibilidad

WCAG-EM Overview:
WebsiteAccessibility Conformance Evaluation Methodology
• 5 main steps:
1. Define the scope of the evaluation - defining what is included
in the evaluation; the goal of the evaluation; and the WCAG
conformance level (A, AA, AAA).
2. Explore the website - identifying key web pages; key
functionality; types of web content, designs, functionality, etc.;
required web technologies.
3. Select a representative sample - guidance on structured and
randomly selected web pages when it is not feasible to evaluate
every web page on a website.
4. Evaluate the selected sample - determining successes and
failures in meeting WCAG 2.0; accessibility support for website
features; and recording evaluation steps.
5. Report the evaluation findings
http://www.w3.org/WAI/eval/conformance

Evaluating Websites for Accessibility
• These are particularly important resources that outline
different approaches for evaluating websites for
accessibility:
• Easy Checks - A First Review of Web Accessibility
• Involving Users in Web Accessibility Evaluation
• Selecting Web Accessibility Evaluation Tools
• Reporting Template

Easy Checks - A First Review of Web
Accessibility
• checks for the following specific aspects of a web page
• Page title
• Image text alternatives ("alt text") in pictures, illustrations, charts,
etc.
• Text:
• Headings
• Contrast ratio ("color contrast")
• Resize Text
• Interaction:
• Keyboard access and visual focus
• Forms, labels, and errors (including Search fields)
• General:
• Multimedia (video, audio) alternatives
• Basic Structure Check

Easy Checks - A First Review of WebAccessibility
Page titles
• Page titles are:
• shown in the window title bar in some browsers
• shown in browsers' tabs when there are multiple
web pages open
• shown in search engine results
• used for browser bookmarks/favorites
• read by screen readers
HTML: they are the <title> within the <head>
The first thing
screen readers say
when the user
goes to a different
web page is the
page title

Image text alternatives ("alt text")
• Text alternatives ("alt text"):
• convey the purpose of an image (pictures, illustrations, charts,
etc.)
• used by people who cannot see the image
• people who are blind and use screen readers can hear the alt text
read out
• people who have turned off images to speed download or save
bandwidth can see the alt text
• Appropriate text alternative?
• for a search button would be "search", not "magnifying glass“
• Automated tests can tell you if alt is missing. To determine if
the alternative text is appropriate, you need to see the image
and judge it in context
The text should be functional and
provide an equivalent user experience,
not necessarily describe the image

El paciente le dice al
medico: Doctor, hace una
semana que no como, no
duermo y no tomo agua.
¿Que cree que tengo?.
Y el doctor responde:
Pues, hambre, sueño y
sed
Imagen 1
Tíulo: Gráfica de evolución demográfica de Granada entre 1900 y 2013
Podemos ver que la población pasa de 75570 habitantes en 1900 a 255000 en
1991. A partir de aquí se estanca, aunque disminuye ligeramente.
Fuente: Wikipedia- Granada
Fuente:
http://www.todacolombia.com/departamentos/departamentoscolombianos.html

Ejemplo: error difícil de encontrar

Text: Headings
• The heading hierarchy is meaningful. Ideally
the page starts with an "h1" — which is
usually similar to the page title — and does
not skip levels; however, these are not
absolute requirements.
people can navigate to the
headings — including
people who cannot use a
mouse and use only the
keyboard, and people who
use a screen reader

Easy Checks - A First Review of Web
Accessibility Text: Headings

Text: color contrast
Some people cannot read text if
there is not sufficient contrast
between the text and background
High contrast is required by some people with visual impairments,
including many older people who lose contrast sensitivity from ageing

• While some people need high contrast, for others (by ex.
people with dyslexia) bright colors (high luminance) are
not readable. They need low luminance
Web browsers should allow
people to change the color of
text and background, and web
pages need to work when
people change colors

• Some tools
http://webaim.org/
resources/contras
tchecker

Chromatic Vision
Simulator
normal
deuteranope
protanope
tritanope
solution
https://www.smashingmagazine.com/2014/
10/color-contrast-tips-and-tools-for-
accessibility/#chromatic-vision-simulator

Chromatic Vision
Video source: https://youtu.be/evQsOFQju08

Text: Resize
• Some people need
• to enlarge web content in order to read it
• to change other aspects of text display: font, space between lines,
and more
• (most) browsers allow users to change text size through:
• text size settings (usually through Options or Preferences)
• text-only zoom
• page zoom (which also zooms images, buttons, etc.)
• BUT when pages are not designed properly, they can be
unusable when the text size is changed, especially when it is
changed through text-only zoom or text settings.
• Sometimes columns and sections overlap, the space between lines
disappears, lines of text become too long, or text disappears

Text: Resize
when text size is increased, the
heading overlaps the main text,
the main text overlaps the
sidebar text; and the sidebar text
is cut off at the bottom

Text: Resize
Most people cannot
effectively read text
that requires
horizontal scrolling,
and some
disabilities make
this impossible
normal-size text
larger text "wraps"
to fit the width
some of the larger text is not
visible without scrolling
horizontally

http://www.totparc.com

Easy Checks -AFirst Review of WebAccessibility
Interaction: Keyboard access and visual focus
• Some people cannot use a mouse and rely on the
keyboard to interact with the Web.
• Some blind and people with mobility impairments rely on
the keyboard or on assistive technologies and
strategies that rely on keyboard commands, such as
voice input.
• Websites need to enable people to access all content
and functionality — links, forms, media controls, etc.
— through a keyboard

Keyboard focus should
be visible and should
follow a logical order
through the page
elements.

• check for:
• Tab to all
• Tab away (A common problem is the keyboard focus gets caught in media
controls and you cannot get out; it's called the "keyboard trap")
• Tab order: logical reading order (e.g., for left-to-right languages: top to bottom,
left to right) in sequence
• Visual focus
• All functionality by keyboard: Check that you can do everything with the
keyboard; that is, you don't need the mouse to activate actions, options, visible
changes, and other functionality.
• A common problem is that some functionality is available only with mouse hover, and
is not available with keyboard focus
• Drop-down lists: Check that after you tab into a drop-down list, you can use
the arrow keys to move through all the options without triggering an action.
• A common problem for drop-downs used for navigation is that as soon as you arrow
down, it automatically selects the first item in the list and goes to a new page — you
cannot get to other items in the list.)
• Image links: when images are links, they have clear visual focus and can be
activated using the keyboard (usually by pressing the Enter key)

Interaction: Forms, labels, and errors
• Form fields and other form controls usually have visible
labels as the label for a text field.
When these labels are marked up correctly,
people can interact with them using only
the keyboard, using voice input, and using
screen readers.
<div>
<p id="namenewsletter" class="input">
<label for="mr">Mr. <input type="radio" name="t" id="mr" value="mr" title="title"></label>
<label for="mrs">Mrs. <input type="radio" name="t" id="mrs" value="mrs" title="title"></label>
<label for="n">Name: <input type="text" name="n" id="n" size="30"></label>
</p>
<p id="emailinput" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<label for="em">eMail Address: <br><input type="text" name="em" id="em" size="20"></label>
</p>
<p id="emailvalid" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<label for="ev">Retype eMail: <br><input type="text" name="ev" id="ev" size="20"></label>
</p>
</div>

Interaction: Forms, labels, and errors
• Error handling: try leaving required fields blank or
entering incorrectly-formatted information (such as
telephone number or e-mail address), then submitting the
form.
• If you get errors, check that:
• clear and specific guidance is provided to help people understand
and fix the error.
• the errors are easily findable.
• Generally it is best if the error
messages are before the form,
rather than after the form.
• the fields without errors are still populated with the data you
entered.
• This is best practice, not a requirement. People should not have to re-
enter all the information in the form, except for some sensitive data such
as credit card numbers.
for some disabilities, this
is the only way of being
able to link the error
message with the field

General: Multimedia alternatives
• Information in podcasts or other audio is not
available to people who are deaf or some people
who are hard of hearing, unless it is provided in an
alternative format such as captions (subtitles)
and text transcripts.
• Visual information in videos is not available to
people who are blind or some people what have
low vision, unless it is provided in an alternative
format such as audio or text.
http://www.videoaccessible.udl.cat/faq.html
Text can be read by a
screen reader or Braille
display, or enlarged and
reformatted for people
with low vision

General: Basic structure check
• Web pages are often designed with multiple columns,
sections, colors, and other visual aspects that help
organize information for people who see the page in its
default display.
• However, some people do not see the page this way.
• People who are blind listen to the page with a screen reader or
read it from a Braille display.
• Some people with low vision and others change the way the page
is displayed so they can read it
• for example, change from multiple columns to one column, change the
text size, and more.
• An important issue is how the web page works when it is
"linearized" into one column and the presentation is
changed.

The order of the sections (e.g., navigation
at top or bottom or elsewhere) depends on
how the web page is developed — the
user usually cannot control the order
"linearized"
into one
column

• What to do? Get a basic
structure view of the page:
• Turn off images and show the
text alternatives.
• Turn off style sheets (CSS),
which specifies how the page
is displayed with layout,
colors, etc.
• Linearize the page or the
tables (depending on the
toolbar).

accessibility:
Easy Checks - A First Review of Web Accessibility
• Involving Users in Web Accessibility Evaluation

It’s enough validating WAG ??

Involving Users in Web Accessibility
Evaluation
• Range of User Evaluation
• Informal evaluation of a specific accessibility issue can be as simple as
asking someone you know who uses a screen reader, someone with other
disabilities, or even your grandmother, to find some data in an early draft of a
data table that you are developing, observing her interaction, and discussing
issues.
• Formal usability testing of a website follows established protocols to gather
quantitative and qualitative data from representative users performing specific
tasks.
• Formal usability tests can be optimized to focus on accessibility issues.
• What type of evaluation you do depends on factors such as the stage
in your project, for example, initial investigation of design ideas,
testing specific areas of prototypes, or reviewing final designs.
• Readings:
• http://www.w3.org/WAI/eval/users
• http://www.w3.org/WAI/users/involving
Combine User Evaluation
with Standards

accessibility:
Involving Users in Web Accessibility Evaluation
http://www.w3.org/WAI/eval/selectingtools

Selecting Web Accessibility Evaluation
Tools http://www.w3.org/WAI/ER/tools

Tools
Use at least 2 automàtic evaluators:
• http://www.tawdis.net
• http://wave.webaim.org/?lang=es
• http://www.examinator.ws
• http://achecker.ca/checker/index.php
• http://www.tenon.io
WARNIGS must be
manually reviewed
16 Tools for Website Accessibility, APRIL 23, 2018:
https://www.practicalecommerce.com/16-tools-website-accessibility

IMPORTANT: Automated Web Accessibility
Testing Tools Are Not Judges
• An automated testing tool cannot even tell with 100%
certainty whether or not a web page passes WCAG 2.0
1.1.1:
• Non-text Content: All non-text content that is presented to the user
has a text alternative that serves the equivalent purpose…
• Or:
Gato
A picture of a dog, with an alt
attribute of "cat" will pass all
automated accessibility tools,
despite being completely
inaccurate even in terms of what
is displayed in the image
http://www.karlgroves.com/2017/03/24/automated-web-accessibility-testing-tools-are-not-judges

http://www.tawdis.net

Tools
• Toolbars/Brower extensions
• Mozilla Firefox: Web Developer Toolbar
• https://chrispederick.com/work/web-developer
• Wave browser extensions: https://wave.webaim.org/extension

Desgraciadamente … en 2018 ni rastro de accesibilidad
en la web oficial de la Fifa para el mundial de Rusia

Tools
• Tools: Chrome accessibility
https://chrome.google.com/webstore/search/accessibility

Tools
• Accessibility in
Wordpress

accessibility:
Involving Users in Web Accessibility Evaluation
Selecting Web Accessibility Evaluation Tools

Reporting Template
• 1. Executive Summary
• 2. Background about Evaluation
• 3. Web Site Reviewed
• 4. Reviewer(s)
• 5. Review Process
• 6. Results and Recommended Actions
• Interpretative summary of review results
• Detailed results, structured according to WCAG Checklist
• Describe or point to a suggested program of on-going monitoring of
Web site accessibility, re-evaluation of authoring tools, etc.
• 7. References
• 8. Appendices
http://www.w3.org/WAI/eval/template.html

Al campus virtual: [EXEMPLE] Informe_Avaluacio_Accessibilitat_PlantillesSPRL (Maig2010).pdf

Índice
Definiciones
Normativa legal y pautas de accesibilidad
Metodología de evaluación

http://webaim.org/resources/
evalquickref/evalquickref.pdf

• 10 Quick Tips (http://www.w3.org/WAI/quicktips)
1. Images & animations: Use the alt attribute to describe
the function of each visual.
2. Image maps. Use the client-side map and text for hotspots.
3. Multimedia. Provide captioning and transcripts of audio, and
descriptions of video.
4. Hypertext links. Use text that makes sense when read out of context.
For example, avoid "click here“.
5. Page organization. Use headings, lists, and consistent structure.
Use CSS for layout and style where possible.
6. Graphs & charts. Summarize or use the longdesc attribute.
7. Scripts, applets, & plug-ins. Provide alternative content in case
active features are inaccessible or unsupported.
8. Frames. Use the noframes element and meaningful titles.
9. Tables. Make line-by-line reading sensible. Summarize.
10. Check your work. Validate. Use tools, checklist, and guidelines at
http://www.w3.org/TR/WCAG
Buenas prácticas de diseño web

Simular discapacidades i altres eines
• Simulació discapacitats visuals
https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfd
cn
• Visión (Visual Impairment Simulator): http://vis.cita.uiuc.edu/downld.php
• Simulació daltonisme
https://chrome.google.com/webstore/detail/chrome-
daltonize/efeladnkafmoofnbagdbfaieabmejfcf
• Nocoffee Visual impairment simulator (Chrome extension):
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeig
abjfbddl
• NC state university palette accessibility evaluator:
http://accessibility.oit.ncsu.edu/tools/color-contrast/
• Contrast finder: http://contrast-finder.tanaguru.com/
• Per testejar les APIs d'accessibilitat
http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/
• Valid XHTML YouTube embed code generator:
http://www.tools4noobs.com/online_tools/youtube_xhtml
• http://www.webaim.org/simulations/distractability-sim.html

Accessible and beautiful Web
designs http://www.csszengarden.com

http://webaim.org/resources/designers

Algunos proyectos
• In-TIC (Integración de las Tecnologías de la Información y
las Comunicaciones en los colectivos de personas con
diversidad funcional)
http://www.proyectosfundaciono
range.es/intic/index.php

Algunos proyectos
• Tur4All Turismo para Todos
http://aspacenet.aspace.org/tabletas-
apps/item/tur4all-turismo-para-todos
NOU:
https://www.tur4all.es

“Como discapacitados, cuestionamos la idoneidad de
las ayudas técnicas o de los arreglos que se han hecho
para hacer una zona accesible
 Diseño Centrado en el Usuario ???
algunas de las rampas para acceder a los pasos de
peatones tienen demasiada inclinación
se requiere aún de más empuje y mucha maña cuando
se trata de salvar pequeños socavones en el asfalto
en los que las ruedas quedan encalladas justo antes de
subir a la acera
Subir por las rampas de varios metros con la silla de
ruedas es toda una odisea
Los semáforos son otros de los obstáculos … no por
cuestión de altura o pendiente, sino porque el tiempo
para cruzar es demasiado escaso y a menudo nos
quedamos en medio de la calzada cuando ya está en
rojo para los peatones
¿Es suficiente?

¿Es suficiente?
• Senior Friendly
• http://www.nlm.nih.gov/pubs/c
hecklist.pdf

http://www.webaim.org/articles
Referecias destacadas
https://delicious.com/tgranollers/
accessibility
http://accesibilidadenlaweb.blogspot.com.es
http://www.ilr.cornell.edu/edi/webaccesstoolkit/index.cfm
• Tecnología asistencial:
• http://www.taservicios.com
• http://www.tecnoaccesible.net
• Responsabilidades:
• http://www.w3.org/community/wai-
engage/wiki/Accessibility_Responsibility_Breakdown
• http://wet-boew.github.io/wet-boew/demos/arb-rra/arb-rra-en.html
http://olgacarreras.blogspot.com.es/2009/04/dos-
anos-de-usable-y-accesible.html#accesibilidad

Pro HTML5 Accessibility
Professional Apress
Joshue O Connor
March 26, 2012 | ISBN-10: 1430241942
Clark, Joe. Building Accessible Websites.
Indianapolis, Ind: New Riders, 2003.
http://joeclark.org/book/sashay/serialization/
Thatcher, Jim Web Accessibility: Web
Standards and Regulatory Compliance.
Friends of Ed: 2006, ISBN: 1590596382
http://uiaccess.com/understanding.html
Slatin, John M, Sharron Rush Maximum
accessibility : making your Web site more
usable for everyone ; Boston : Addison-
Wesley, cop. 2003 xliv, 588 p. ISBN 0-201-
77422-4
Kara Pernice Coyne and Jakob
Nielsen Beyond ALT text: making the
web easy to use for users with
disabilities Fremont, CA : Nielsen
Norman Group, 2001
Bibliografía
Henry, Shawn Lawton
Just ask: integrating accessibility
throughout design,
February 2007
Language: English
ISBN-10: 1430319526
http://www.uiaccess.com/accessucd

Estudio de accesibilidad a la red
Romero Zúnica, Rafael, Francisco Alcantud
Marín, Antonio M. Ferrer Manchón
http://acceso.uv.es/accesibilidad/Estudio
Guía de acceso al ordenador para
personas con discapacidad Madrid
Candelos Arnao, Amparo, Manuel Lobato
Galindo
IMSERSO, 1997 ISBN 84-88986-71-8
Informática y discapacidad: fundamento y
aplicaciones
México: Novedades Educativas, 2000
ISBN: 987-538-002-4
Sánchez Montoya, Rafael Ordenador y
discapacidad: Guía práctica de apoyo a las
personas con necesidades educativas
especiales Madrid:Cepe,2002
http://www.ordenadorydiscapacidad.net/
Sloan, David Tangram Model For Web
Accessibility, QA Focus briefing document no.
101, UKOLN,
[http://www.ukoln.ac.uk/qa-
focus/documents/briefings/briefing-101/]
Bibliografía
Strategic IT Accessibility: Enabling the
Organization
Jeff Kline
Live Oak Book Company (August 18, 2011)

El Curso de Interacción Persona-Ordenador ha sido realizado por Toni
Granollers bajo la licencia Creative Commons Reconocimiento-
NoComercial 4.0 Internacional License.

7. Accessibilidad

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 7. Accessibilidad

Similar a 7. Accessibilidad (20)

Más de DCU_MPIUA

Más de DCU_MPIUA (16)

Último

Último (20)

7. Accessibilidad

Notas del editor