SlideShare a Scribd company logo
1 of 71
EVALUACIÓN DE LA
ACCESSIBILIDAD DIGITAL
Dr. Cristian Rusu
Pontificia Universidad Católica de Valparaíso, Chile
cristian.rusu@pucv.cl
Dr. Toni Granollers
U. de Lleida, Catalonia, Spain
antoni.granollers@udl.cat
El taller “Evaluando eXperiencias y habilidades:
Usabilidad, Comunicabilidad, Accesibilidad, User
eXperience, Customer eXperience” ha sido impartido por
Cristian Rusu y Toni Granollers en la ciudad de Popayán-
Colombia del 27 al 30 de Septiembre del 2016 durante el
11Congreso Colombiano de Computación.
Este material está sujeto a la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.
Índice
• Normativa legal y pautas de accesibilidad
• Metodología de evaluación
• Ejemplos y Buenas prácticas
Accesibilidad - 11CCC
Web Accessibility Initiative (WAI)
• Grupo de trabajo permanente delW3C (WordWideWeb
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
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
WAI. Pautas WCAG
• WCAG (Web Content Accessibility Guidelines)
• Pautas de accesibilidad que explican como hacer
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)
http://www.w3.org/WAI/WCAG2-Conformance
Accesibilidad - 11CCC
WAI. Pautas WCAG
Ejemplo de las pautas
http://www.w3.org/TR/WCAG20
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
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>
Accesibilidad - 11CCC
http://www.w3.org/WAI/demos/bad/Overview.html
Accesibilidad - 11CCC
EstrategiaEspañola sobre Discapacidad2012-2020
http://www.msssi.gob.es/ssi/discapacidad/informacion/e
strategiaEspanolaDiscapacidad.htm
Accesibilidad - 11CCC
Plan de Acción de la EstrategiaEspañola sobre Discapacidad
2014-2020
http://www.msssi.gob.es/ssi/discapacidad/informacion/planAccionEstrategiaEspanolaDiscapacidad.htm
Accesibilidad - 11CCC
https://ec.europa.eu/digital-agenda/en/web-accessibility
Accesibilidad - 11CCC
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
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 
• 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
Accesibilidad - 11CCC
Norma UNE 139803
• la Norma UNE 139803:2012 es equivalente a las WCAG 2.0
• Los requisitos de nivel A, AA y AAA son los criterios de conformidad
nivel A, AA y AAA de las WCAG 2.0, a los que se referencia
sin reescribirlos.
• Para cumplirlos se deberá tener en cuenta también el documento:
Techniques for WCAG 2.0. Techniques and Failures for Web Content
Accessibility Guidelines 2.0 (W3C Working Group Note 3 January
2012)
• http://www.w3.org/TR/WCAG20-TECHS
• Ampliar detalles:
• http://olgacarreras.blogspot.com.es/2012/07/nueva-version-de-la-norma-une-139803.html
Accesibilidad - 11CCC
Norma Técnica Colombiana (NTC) 5854
Enero31de2012
• Comité de normalización
conformado por 15
entidades entre publicas,
privadas y de educación
• Objeto: establecer los
requisitos de accesibilidad
que se deben implementar
en las páginas web
nacionales en los niveles de
conformidad A, AA y AAA
delW3C.
• Esta norma es equivalente
a WCAG 2.0
Accesibilidad - 11CCC
Legislación en Colombia
• Colombia dispone de unas leyes y unas normas de las más
avanzadas en el área de Iberoamérica.
• ...
• El 20 de noviembre de 2013 se publicó la Ley No. 1680, por la
cual se garantiza a las personas ciegas y con baja visión, el
acceso a la información, a las comunicaciones, al conocimiento
y a las tecnologías de la información y de las comunicaciones.
• Ley 1712 de 6 de marzo de 2014, "por medio de la cual se crea
crea la Ley deTransparencia y del Derecho de Acceso a la
Información Pública Nacional y se dictan otras disposiciones“
• ARTÍCULO 8o. CRITERIO DIFERENCIAL DEACCESIBILIDAD
Accesibilidad - 11CCC
Índice
Normativa legal y pautas de accesibilidad
• Metodología de evaluación
• Ejemplos y Buenas prácticas
Accesibilidad - 11CCC
WCAG-EMOverview:
WebsiteAccessibilityConformanceEvaluationMethodology
• 5 main steps:
1. Define the scope of the evaluation - defining what is included in the
evaluation; the goal of the evaluation; and theWCAG 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
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
Accesibilidad - 11CCC
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 inWeb Accessibility Evaluation
• SelectingWeb Accessibility EvaluationTools
• ReportingTemplate
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof 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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
context
The text should be functional and
provide an equivalent user experience,
not necessarily describe the image
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
Ejemplo: error difícil de encontrar
Accesibilidad - 11CCC
Ejemplo: error difícil de encontrar
Accesibilidad - 11CCC
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility Text:
Headings
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Some people cannot read text if
there is not sufficient contrast
between the text and background
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
Text: color contrast
• While some people need high contrast, for others (by ex.
people with dyslexia) bright colors (high luminance) are not
readable.They need low luminance
Some people cannot read text if
there is not sufficient contrast
between the text and background
Some people cannot read text if
there is not sufficient contrast
between the text and background
Web browsers should allow
people to change the color of
text and background, and web
pages need to work when
people change colors
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
Text: color contrast
• Some tools
http://webaim.org/
resources/contras
tchecker
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
EasyChecks-AFirstReviewofWebAccessibility
Interaction:Keyboard access and visual focus
• Some people cannot use a mouse and rely on the keyboard to
interact with theWeb.
• 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
keyboard
Accesibilidad - 11CCC
EasyChecks-AFirstReviewofWebAccessibility
Interaction:Keyboard access and visual focus
Keyboard focus should
be visible and should
follow a logical order
through the page
elements.
Accesibilidad - 11CCC
EasyChecks-AFirstReviewofWebAccessibility
Interaction:Keyboard access and visual focus
• check for:
• Tab to all
• Tab away (A common problem is the keyboard focus gets caught in media controls
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
activated using the keyboard (usually by pressing the Enter key)
Accesibilidad - 11CCC
EasyChecks-AFirstReviewofWebAccessibility
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>
Accesibilidad - 11CCC
EasyChecks-AFirstReviewofWebAccessibility
Interaction:Forms, labels, and errors
• Error handling: try leaving required fields blank or entering
incorrectly-formatted information (such as telephone
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
the information in the form, except for some sensitive data such as credit
numbers.
for some disabilities, this
is the only way of being
able to link the error
message with the field
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
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.
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
General: Basic structure check
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
Accesibilidad - 11CCC
EasyChecks - A First Reviewof Web Accessibility
General: Basic structure check
• 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).
Accesibilidad - 11CCC
Evaluating Websites for Accessibility
• These are particularly important resources that outline
different approaches for evaluating websites for accessibility:
Easy Checks - A First Review ofWeb Accessibility
• Involving Users inWeb Accessibility Evaluation
• SelectingWeb Accessibility EvaluationTools
• ReportingTemplate
Accesibilidad - 11CCC
It’s enough validating WAG ??
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
Evaluating Websites for Accessibility
• These are particularly important resources that outline
different approaches for evaluating websites for accessibility:
Easy Checks - A First Review ofWeb Accessibility
Involving Users inWeb Accessibility Evaluation
• SelectingWeb Accessibility EvaluationTools
• ReportingTemplate
http://www.w3.org/WAI/eval/selectingtools
Accesibilidad - 11CCC
Selecting Web Accessibility Evaluation Toolshttp://www.w3.org/WAI/ER/tools
Accesibilidad - 11CCC
Selecting Web Accessibility Evaluation 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
Accesibilidad - 11CCC
http://www.tawdis.net
Accesibilidad - 11CCC
Selecting Web Accessibility Evaluation 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
The WAVE Firefox Toolbar is no longer available ... We recommend that you
install the updated WAVE Chrome extension. [http://wave.webaim.org/toolbar]
Accesibilidad - 11CCC
Selecting Web Accessibility Evaluation Tools
• Tools: Chrome accessibility
https://chrome.google.com/webstore/search/accessibility
Accesibilidad - 11CCC
Selecting Web Accessibility Evaluation Tools
• Accessibility in
Wordpress
Accesibilidad - 11CCC
Evaluating Websites for Accessibility
• These are particularly important resources that outline
different approaches for evaluating websites for accessibility:
Easy Checks - A First Review ofWeb Accessibility
Involving Users inWeb Accessibility Evaluation
SelectingWeb Accessibility EvaluationTools
• ReportingTemplate
Accesibilidad - 11CCC
Reporting Template
• 1. Executive Summary
• 2. Background about Evaluation
• 3.Web Site Reviewed
• 4. Reviewer(s)
• 5. Review Process
• 6. Results and RecommendedActions
• 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
Accesibilidad - 11CCC
Al campus virtual: [EXEMPLE] Informe_Avaluacio_Accessibilitat_PlantillesSPRL (Maig2010).pdf
Accesibilidad - 11CCC
Í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 - 11CCC
http://webaim.org/resources/
evalquickref/evalquickref.pdf
Accesibilidad - 11CCC
• 10 QuickTips (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
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
Accesibilidad - 11CCC
Simular discapacidades i altres eines
• Simulació discapacitats visuals
https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn
• Visión (Visual Impairment Simulator): http://vis.cita.uiuc.edu/downld.php
• Simulació daltonisme
https://chrome.google.com/webstore/detail/chrome-
daltonize/efeladnkafmoofnbagdbfaieabmejfcf
• NocoffeeVisual impairment simulator (Chrome extension):
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjf
bddl
• 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 XHTMLYouTube embed code generator:
http://www.tools4noobs.com/online_tools/youtube_xhtml
• http://www.webaim.org/simulations/distractability-sim.html
Accesibilidad - 11CCC
Accessible and beautiful Web
designs http://www.csszengarden.com
Accesibilidad - 11CCC
http://webaim.org/resources/designers
Accesibilidad - 11CCC
Algunos proyectos
• In-TIC (Integración de las Tecnologías de la Información y las
Comunicaciones en los colectivos de personas con
funcional)
http://www.proyectosfundaciono
range.es/intic/index.php
Accesibilidad - 11CCC
Algunos proyectos
• Tur4All Turismo para Todos
http://aspacenet.aspace.org/tabletas-
apps/item/tur4all-turismo-para-todos
Accesibilidad - 11CCC
“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?
Accesibilidad - 11CCC
¿Es suficiente?
• Senior Friendly
• http://www.nlm.nih.gov/pubs/ch
ecklist.pdf
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
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
Accesibilidad - 11CCC
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)
Accesibilidad - 11CCC
Gracias por su
atención !!!
Toni Granollers
Escola Politècnica Superior
Universitat de Lleida (UdL)
C/ Jaume II, 69
25001 – Lleida
(+34) 973 702750
antoni.granollers@udl.cat
@DCU_MPIUA
slideshare.net/DCU_MPIUA


@
Accesibilidad - 11CCC

More Related Content

Viewers also liked (6)

1 (de 3). Assessing e xperiences and abilities
1 (de 3).  Assessing e xperiences and abilities1 (de 3).  Assessing e xperiences and abilities
1 (de 3). Assessing e xperiences and abilities
 
2 (de 3). Evaluación de Usabilidad
2 (de 3).  Evaluación de Usabilidad2 (de 3).  Evaluación de Usabilidad
2 (de 3). Evaluación de Usabilidad
 
8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacción8.1.- IPO. Estilos y paradigmas de interacción
8.1.- IPO. Estilos y paradigmas de interacción
 
Task Analysis
Task Analysis Task Analysis
Task Analysis
 
Task analysis
Task analysisTask analysis
Task analysis
 
Task Analysis
Task AnalysisTask Analysis
Task Analysis
 

Similar to 3 (de 3). Evaluación de Accessibilidad Digital

Similar to 3 (de 3). Evaluación de Accessibilidad Digital (20)

Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
 
What’s Next with Accessibility?
What’s Next with Accessibility?What’s Next with Accessibility?
What’s Next with Accessibility?
 
WCAG
WCAGWCAG
WCAG
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Accessibility part 2
Accessibility part 2Accessibility part 2
Accessibility part 2
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
My talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility MeetupMy talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility Meetup
 
LouiseGruenbergFFWD2015
LouiseGruenbergFFWD2015LouiseGruenbergFFWD2015
LouiseGruenbergFFWD2015
 
ADA Site Compliance
ADA Site ComplianceADA Site Compliance
ADA Site Compliance
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
 
BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...
BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...
BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
 
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital AccessibilityTCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
 
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1
 
ADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilityADA Compliance & Website Accessibility
ADA Compliance & Website Accessibility
 

More from DCU_MPIUA

More from DCU_MPIUA (20)

7. Accessibilidad
7.  Accessibilidad7.  Accessibilidad
7. Accessibilidad
 
Perspectivas sobre el presente y futuro de la ux
Perspectivas sobre el presente y futuro de la uxPerspectivas sobre el presente y futuro de la ux
Perspectivas sobre el presente y futuro de la ux
 
UX en la era del Internet de las Cosas (IoT) y la IA
UX en la era del Internet de las Cosas (IoT) y la IAUX en la era del Internet de las Cosas (IoT) y la IA
UX en la era del Internet de las Cosas (IoT) y la IA
 
UX en la era del IoT y la IA
UX en la era del IoT y la IAUX en la era del IoT y la IA
UX en la era del IoT y la IA
 
Nuevas tendencias en IPO. Presente y Futuro de la UX
Nuevas tendencias en IPO. Presente y Futuro de la UXNuevas tendencias en IPO. Presente y Futuro de la UX
Nuevas tendencias en IPO. Presente y Futuro de la UX
 
New heuristics final (ok)
New heuristics final (ok)New heuristics final (ok)
New heuristics final (ok)
 
Accesibilidad digital
Accesibilidad digitalAccesibilidad digital
Accesibilidad digital
 
Diseño de la interfaz de usuario
Diseño de la interfaz de usuarioDiseño de la interfaz de usuario
Diseño de la interfaz de usuario
 
DCU. Metodología MPIu+a
DCU. Metodología MPIu+aDCU. Metodología MPIu+a
DCU. Metodología MPIu+a
 
Diseñar tecnología para las personas (UTP - Panamá '17)
Diseñar tecnología para las personas (UTP - Panamá '17)Diseñar tecnología para las personas (UTP - Panamá '17)
Diseñar tecnología para las personas (UTP - Panamá '17)
 
6. Evaluación
6. Evaluación6. Evaluación
6. Evaluación
 
5. Prototipado
5.  Prototipado5.  Prototipado
5. Prototipado
 
4. Requisitos
4.  Requisitos4.  Requisitos
4. Requisitos
 
3. DCU-MPIu+a
3. DCU-MPIu+a3. DCU-MPIu+a
3. DCU-MPIu+a
 
2. El Factor Humano
2. El Factor Humano2. El Factor Humano
2. El Factor Humano
 
1. Fundamentos. Usabilidad, accessibilitat, UX
1.  Fundamentos. Usabilidad, accessibilitat, UX1.  Fundamentos. Usabilidad, accessibilitat, UX
1. Fundamentos. Usabilidad, accessibilitat, UX
 
Usabilidad, ux … cómo lo medimos?
Usabilidad, ux … cómo lo medimos?Usabilidad, ux … cómo lo medimos?
Usabilidad, ux … cómo lo medimos?
 
Multiculturality & internationalization
Multiculturality & internationalizationMulticulturality & internationalization
Multiculturality & internationalization
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
 
Information Architecture. Card Sorting
Information Architecture. Card SortingInformation Architecture. Card Sorting
Information Architecture. Card Sorting
 

Recently uploaded

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 

3 (de 3). Evaluación de Accessibilidad Digital

  • 1. EVALUACIÓN DE LA ACCESSIBILIDAD DIGITAL Dr. Cristian Rusu Pontificia Universidad Católica de Valparaíso, Chile cristian.rusu@pucv.cl Dr. Toni Granollers U. de Lleida, Catalonia, Spain antoni.granollers@udl.cat El taller “Evaluando eXperiencias y habilidades: Usabilidad, Comunicabilidad, Accesibilidad, User eXperience, Customer eXperience” ha sido impartido por Cristian Rusu y Toni Granollers en la ciudad de Popayán- Colombia del 27 al 30 de Septiembre del 2016 durante el 11Congreso Colombiano de Computación. Este material está sujeto a la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.
  • 2. Índice • Normativa legal y pautas de accesibilidad • Metodología de evaluación • Ejemplos y Buenas prácticas Accesibilidad - 11CCC
  • 3. Web Accessibility Initiative (WAI) • Grupo de trabajo permanente delW3C (WordWideWeb 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 Accesibilidad - 11CCC
  • 4. 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 Accesibilidad - 11CCC
  • 5. WAI. Pautas WCAG • WCAG (Web Content Accessibility Guidelines) • Pautas de accesibilidad que explican como hacer 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) http://www.w3.org/WAI/WCAG2-Conformance Accesibilidad - 11CCC
  • 6. WAI. Pautas WCAG Ejemplo de las pautas http://www.w3.org/TR/WCAG20 Accesibilidad - 11CCC
  • 7. 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 Accesibilidad - 11CCC
  • 8. 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 Accesibilidad - 11CCC
  • 9. 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> Accesibilidad - 11CCC
  • 12. Plan de Acción de la EstrategiaEspañola sobre Discapacidad 2014-2020 http://www.msssi.gob.es/ssi/discapacidad/informacion/planAccionEstrategiaEspanolaDiscapacidad.htm Accesibilidad - 11CCC
  • 14. 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 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  • 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 Accesibilidad - 11CCC
  • 15. Norma UNE 139803 • la Norma UNE 139803:2012 es equivalente a las WCAG 2.0 • Los requisitos de nivel A, AA y AAA son los criterios de conformidad nivel A, AA y AAA de las WCAG 2.0, a los que se referencia sin reescribirlos. • Para cumplirlos se deberá tener en cuenta también el documento: Techniques for WCAG 2.0. Techniques and Failures for Web Content Accessibility Guidelines 2.0 (W3C Working Group Note 3 January 2012) • http://www.w3.org/TR/WCAG20-TECHS • Ampliar detalles: • http://olgacarreras.blogspot.com.es/2012/07/nueva-version-de-la-norma-une-139803.html Accesibilidad - 11CCC
  • 16. Norma Técnica Colombiana (NTC) 5854 Enero31de2012 • Comité de normalización conformado por 15 entidades entre publicas, privadas y de educación • Objeto: establecer los requisitos de accesibilidad que se deben implementar en las páginas web nacionales en los niveles de conformidad A, AA y AAA delW3C. • Esta norma es equivalente a WCAG 2.0 Accesibilidad - 11CCC
  • 17. Legislación en Colombia • Colombia dispone de unas leyes y unas normas de las más avanzadas en el área de Iberoamérica. • ... • El 20 de noviembre de 2013 se publicó la Ley No. 1680, por la cual se garantiza a las personas ciegas y con baja visión, el acceso a la información, a las comunicaciones, al conocimiento y a las tecnologías de la información y de las comunicaciones. • Ley 1712 de 6 de marzo de 2014, "por medio de la cual se crea crea la Ley deTransparencia y del Derecho de Acceso a la Información Pública Nacional y se dictan otras disposiciones“ • ARTÍCULO 8o. CRITERIO DIFERENCIAL DEACCESIBILIDAD Accesibilidad - 11CCC
  • 18. Índice Normativa legal y pautas de accesibilidad • Metodología de evaluación • Ejemplos y Buenas prácticas Accesibilidad - 11CCC
  • 19. WCAG-EMOverview: WebsiteAccessibilityConformanceEvaluationMethodology • 5 main steps: 1. Define the scope of the evaluation - defining what is included in the evaluation; the goal of the evaluation; and theWCAG 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 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 Accesibilidad - 11CCC
  • 20. 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 inWeb Accessibility Evaluation • SelectingWeb Accessibility EvaluationTools • ReportingTemplate Accesibilidad - 11CCC
  • 21. 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 Accesibilidad - 11CCC
  • 22. EasyChecks - A First Reviewof 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 Accesibilidad - 11CCC
  • 23. EasyChecks - A First Reviewof Web Accessibility 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 context The text should be functional and provide an equivalent user experience, not necessarily describe the image Accesibilidad - 11CCC
  • 24. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 25. Ejemplo: error difícil de encontrar Accesibilidad - 11CCC
  • 26. Ejemplo: error difícil de encontrar Accesibilidad - 11CCC
  • 28. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 29. EasyChecks - A First Reviewof Web Accessibility Text: Headings Accesibilidad - 11CCC
  • 30. EasyChecks - A First Reviewof Web Accessibility 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 Some people cannot read text if there is not sufficient contrast between the text and background Accesibilidad - 11CCC
  • 31. EasyChecks - A First Reviewof Web Accessibility Text: color contrast • While some people need high contrast, for others (by ex. people with dyslexia) bright colors (high luminance) are not readable.They need low luminance Some people cannot read text if there is not sufficient contrast between the text and background Some people cannot read text if there is not sufficient contrast between the text and background Web browsers should allow people to change the color of text and background, and web pages need to work when people change colors Accesibilidad - 11CCC
  • 32. EasyChecks - A First Reviewof Web Accessibility Text: color contrast • Some tools http://webaim.org/ resources/contras tchecker Accesibilidad - 11CCC
  • 33. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 34. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 35. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 36. EasyChecks-AFirstReviewofWebAccessibility Interaction:Keyboard access and visual focus • Some people cannot use a mouse and rely on the keyboard to interact with theWeb. • 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 keyboard Accesibilidad - 11CCC
  • 37. EasyChecks-AFirstReviewofWebAccessibility Interaction:Keyboard access and visual focus Keyboard focus should be visible and should follow a logical order through the page elements. Accesibilidad - 11CCC
  • 38. EasyChecks-AFirstReviewofWebAccessibility Interaction:Keyboard access and visual focus • check for: • Tab to all • Tab away (A common problem is the keyboard focus gets caught in media controls 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 activated using the keyboard (usually by pressing the Enter key) Accesibilidad - 11CCC
  • 39. EasyChecks-AFirstReviewofWebAccessibility 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> Accesibilidad - 11CCC
  • 40. EasyChecks-AFirstReviewofWebAccessibility Interaction:Forms, labels, and errors • Error handling: try leaving required fields blank or entering incorrectly-formatted information (such as telephone 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 the information in the form, except for some sensitive data such as credit numbers. for some disabilities, this is the only way of being able to link the error message with the field Accesibilidad - 11CCC
  • 41. EasyChecks - A First Reviewof Web Accessibility 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 Accesibilidad - 11CCC
  • 42. EasyChecks - A First Reviewof Web Accessibility 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. Accesibilidad - 11CCC
  • 43. EasyChecks - A First Reviewof Web Accessibility General: Basic structure check 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 Accesibilidad - 11CCC
  • 44. EasyChecks - A First Reviewof Web Accessibility General: Basic structure check • 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). Accesibilidad - 11CCC
  • 45. Evaluating Websites for Accessibility • These are particularly important resources that outline different approaches for evaluating websites for accessibility: Easy Checks - A First Review ofWeb Accessibility • Involving Users inWeb Accessibility Evaluation • SelectingWeb Accessibility EvaluationTools • ReportingTemplate Accesibilidad - 11CCC
  • 46. It’s enough validating WAG ?? Accesibilidad - 11CCC
  • 47. 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 Accesibilidad - 11CCC
  • 48. Evaluating Websites for Accessibility • These are particularly important resources that outline different approaches for evaluating websites for accessibility: Easy Checks - A First Review ofWeb Accessibility Involving Users inWeb Accessibility Evaluation • SelectingWeb Accessibility EvaluationTools • ReportingTemplate http://www.w3.org/WAI/eval/selectingtools Accesibilidad - 11CCC
  • 49. Selecting Web Accessibility Evaluation Toolshttp://www.w3.org/WAI/ER/tools Accesibilidad - 11CCC
  • 50. Selecting Web Accessibility Evaluation 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 Accesibilidad - 11CCC
  • 52. Selecting Web Accessibility Evaluation 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 The WAVE Firefox Toolbar is no longer available ... We recommend that you install the updated WAVE Chrome extension. [http://wave.webaim.org/toolbar] Accesibilidad - 11CCC
  • 53. Selecting Web Accessibility Evaluation Tools • Tools: Chrome accessibility https://chrome.google.com/webstore/search/accessibility Accesibilidad - 11CCC
  • 54. Selecting Web Accessibility Evaluation Tools • Accessibility in Wordpress Accesibilidad - 11CCC
  • 55. Evaluating Websites for Accessibility • These are particularly important resources that outline different approaches for evaluating websites for accessibility: Easy Checks - A First Review ofWeb Accessibility Involving Users inWeb Accessibility Evaluation SelectingWeb Accessibility EvaluationTools • ReportingTemplate Accesibilidad - 11CCC
  • 56. Reporting Template • 1. Executive Summary • 2. Background about Evaluation • 3.Web Site Reviewed • 4. Reviewer(s) • 5. Review Process • 6. Results and RecommendedActions • 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 Accesibilidad - 11CCC
  • 57. Al campus virtual: [EXEMPLE] Informe_Avaluacio_Accessibilitat_PlantillesSPRL (Maig2010).pdf Accesibilidad - 11CCC
  • 58. Í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 - 11CCC
  • 60. • 10 QuickTips (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 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 Accesibilidad - 11CCC
  • 61. Simular discapacidades i altres eines • Simulació discapacitats visuals https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn • Visión (Visual Impairment Simulator): http://vis.cita.uiuc.edu/downld.php • Simulació daltonisme https://chrome.google.com/webstore/detail/chrome- daltonize/efeladnkafmoofnbagdbfaieabmejfcf • NocoffeeVisual impairment simulator (Chrome extension): https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjf bddl • 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 XHTMLYouTube embed code generator: http://www.tools4noobs.com/online_tools/youtube_xhtml • http://www.webaim.org/simulations/distractability-sim.html Accesibilidad - 11CCC
  • 62. Accessible and beautiful Web designs http://www.csszengarden.com Accesibilidad - 11CCC
  • 64. Algunos proyectos • In-TIC (Integración de las Tecnologías de la Información y las Comunicaciones en los colectivos de personas con funcional) http://www.proyectosfundaciono range.es/intic/index.php Accesibilidad - 11CCC
  • 65. Algunos proyectos • Tur4All Turismo para Todos http://aspacenet.aspace.org/tabletas- apps/item/tur4all-turismo-para-todos Accesibilidad - 11CCC
  • 66. “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? Accesibilidad - 11CCC
  • 67. ¿Es suficiente? • Senior Friendly • http://www.nlm.nih.gov/pubs/ch ecklist.pdf Accesibilidad - 11CCC
  • 68. 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 Accesibilidad - 11CCC
  • 69. 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 Accesibilidad - 11CCC
  • 70. 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) Accesibilidad - 11CCC
  • 71. Gracias por su atención !!! Toni Granollers Escola Politècnica Superior Universitat de Lleida (UdL) C/ Jaume II, 69 25001 – Lleida (+34) 973 702750 antoni.granollers@udl.cat @DCU_MPIUA slideshare.net/DCU_MPIUA   @ Accesibilidad - 11CCC