Accesibilidad digital

Accesibilidad digital
Dr. Toni Granollers
Presentación realizada 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
• Algunos proyectos
Accesibilidad digital [T.Granollers - UTP Panamá, Agosto 2017] 2

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
Accesibilidad digital [T. Granollers - UTP Panamá, Agosto 2017] 3

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

Accesibilidad.
Ejemplos de personas discapacitadas interactuando con
tecnología
http://www.vilaweb.tv/?video=4380
http://youtu.be/rOy8q1eiPfk?t=4m40s
http://www.youtube.com/w
atch?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

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
Fuente: 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/en
abling-accessibility.aspx
También: 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
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

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 asistencial.
Lectura fácil para usuarios con dislexia
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

Tecnología asistencial.
Sistemas de Comunicación Aumentativa y Alternativa
http://www.ceapat.es/InterPresent2/grou
ps/imserso/documents/binario/comunicaci
naumentativayalterna.pdf

http://aspacenet.aspace.org/main-
menu/tabletas-apps-23
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)

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=tw
itter
Using a Braille Display
https://youtu.be/du5Z2c3cz6Y

Tecnologia assistencial “cercana”
Enable Viacam:
http://eviacam.sourceforge.net
http://www.crea-si.com/esp/inicio.php
http://robotica.udl.cat
http://www.fundacionvodafone.es/ap
p/eva-facial-mouse

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_document
al/tecnologiasinformacion/acceso_ordenador/I
M_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.

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

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

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

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

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

WAI. Pautas WCAG
• WCAG (Web Content Accessibility Guidelines)
• Pautas de accesibilidad que explican como hacer
contenido Web accesible para personas con
discapacidades o de edad avanzada
• 3 niveles de prioridad
• Simple(Nivel A) Doble (Nivel AA) Triple (Nivel AAA)
http://www.w3.org/WAI/WCAG2-Conformance

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

Visual map of Web Content Accessibility
Guidelines 2.0
https://www.di
gitalpulse.pwc.
com.au/wp-
content/upload
s/2014/08/WC
AG20Map.pdf

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 en
paralelo en lasWCAG
3.0
https://www.w3.org/TR/WCAG21
https://olgacarreras.blogspot.com.es/2017/04/wcag-21-medida-provisional-hasta-las.html

WAI. Pautas WCAG
Entendiendo las pautas
http://www.w3.org/TR/UNDERSTANDING-WCAG20
http://www.w3.org/TR/UND
ERSTANDING-WCAG20/text-
equiv.html

WAI. Pautas WCAG
Quick Reference
• Table of Contents
• WCAG 2.0 Quick Reference List
– 1.1Text Alternatives
– 1.2Time-based Media
– 1.3 Adaptable
– 1.4 Distinguishable
– 2.1 Keyboard Accessible
– 2.2 EnoughTime
– 2.3 Seizures
– 2.4 Navigable
– 3.1 Readable
– 3.2 Predictable
– 3.3 Input Assistance
– 4.1 Compatible
http://www.w3.org/WAI/WCAG20/quickref
En espanyol: http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20

W3C Web Content Accessibility Guidelines
2.0 Conformance Logos
• Place the icon for the appropriate conformance level using
the HTML source code from
http://www.w3.org/WAI/WCAG2-Conformance
<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>

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

Estrategia Española sobre Discapacidad 2012-
2020
http://www.msssi.gob.es/ssi/discapacidad/informacion/estr
ategiaEspanolaDiscapacidad.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
(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
– Las nuevas páginas web se tienen que ajustar al nivel 1 desde la entrada en vigor del reglamento  el
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

Legislación en Panamá
http://www.senadis.gob.pa/?page_id=1784
https://www.presidencia.gob.pa/Deporte/Panama-se-compromete-con-las-personas-con-capacidades-especiales

(otros) Retos actuales.
Prosumers y accesibilidad
Usuarios con
discapacidad
Usuarios web 2.0
Entorno de
publicación
Contenido web
CMSEditor Web
Prosumidores
Productores + Consumidores

Índice
Definiciones
Normativa legal y pautas de accesibilidad

WCAG-EM Overview:
Website Accessibility 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 ofWeb
– Involving Users inWebAccessibility Evaluation
– SelectingWebAccessibility EvaluationTools
– ReportingTemplate

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")
• ResizeText
– Interaction:
• Keyboard access and visual focus
• Forms, labels, and errors (including Search fields)
– General:
• Multimedia (video, audio) alternatives
• Basic Structure Check
https://www.w3.org/WAI/eval/preliminary

Easy Checks - A First Review of Web Accessibility
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

Image text alternatives ("alt text")
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

ejemplo
<img
alt="Resultado%20de%20la%20fase%20de%20Dialogo%20del%20Compr
omiso%20Nacional%20por%20la%20Educacion%20Agosto%202017.jpg"

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

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/contrastc
hecker

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

How to check for accessible colors --
A11ycasts #17
OATMEAL Color
Contrast: https://goo.g
l/khWzhs
aXe Chrome
Extension: https://goo.
gl/TMZoBP
https://youtu.be/LBmLs
pdAtxM?list=PLNYkxOF
6rcICWx0C9LVWWVqvH
lYJyqw7g

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

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
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)
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
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
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
• This is best practice, not a requirement. People should not have to re-enter
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).

Easy Checks - A First Review ofWebAccessibility
– Involving Users inWeb Accessibility valuation
– SelectingWebAccessibility EvaluationTools

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
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

Involving Users inWebAccessibility Evaluation
– Selecting Web Accessibility EvaluationTools
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://www.examinator.ws
– http://wave.webaim.org/?lang=es
– http://achecker.ca/checker/index.php
– http://www.tenon.io
WARNIGS must be manually
reviewed

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
presented to the user has a text alternative that serves the
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
– Internet Explorer:Web AccessibilityToolbar For IE
• http://www.paciellogroup.com/resources/wat/ie
– Mozilla Firefox:Web DeveloperToolbar
• https://addons.mozilla.org/es-ES/firefox/addon/60
– Wave toolbar: http://wave.webaim.org/toolbar

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

Tools
• Accessibility in
Wordpress

Involving Users inWebAccessibility Evaluation
SelectingWebAccessibility EvaluationTools

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 toWCAG 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

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

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.proyectosfundacionor
ange.es/intic/index.php

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

“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?

Gracias por su
atención !!!
Toni Granollers
Escola Politècnica Superior
Universitat de Lleida (UdL)
C/ Jaume II, 69
25001 – Lleida (Catalonia)
(+34) 973 702750
antoni.granollers@udl.cat
@DCU_MPIUA
slideshare.net/DCU_MPIUA


@

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)

nuevo
https://www.youtube.com/watch?v
=b0Q5Zp_yKaU&feature=youtu.be

Accesibilidad digital

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Accesibilidad digital

Similar a Accesibilidad digital (20)

Más de DCU_MPIUA

Más de DCU_MPIUA (18)

Último

Último (20)

Accesibilidad digital

Notas del editor