Workshop on Web Accessibility on spring semester in Tallinn University

1. Web Accessibility Workshop
Session One
Vladimir Tomberg, PhD
Tallinn University
Design for ALL 1

2. Using Mac Lab
Login: kasutaja
Password: apple
2
Web Accessibility
Workshop

3. Introduction
3
Web Accessibility
Workshop
https://www.youtube.com

4. Course Evaluation Criteria
• Work in class gives 20% of final grade;
• There will be four different home works;
• Fulfillment of each gives 20% of the final
grade

5. Today Workshop
1. Target user groups – Who benefits from
accessible Web design?
2. Empathy exercise: using Web with limited
abilities
3. Framework for Accessible Web
4. WCAG 2.0 – preparing for testing

6. TARGET USER GROUPS
Who benefits from accessible Web design?
Design for ALL 6

7. What does Accessibility mean?
The goal of Accessibility is that:
• Users with disabilities have access to and use of
information and data that is comparable to that of
users without disabilities
(Section 508)
• Disabled users should be able to use a system
 In the usual way like other users,
 Without particular difficulties,
 Without help of others

8. Who is concerned? (1/3)
• People with a physical or cognitive
disability, e.g.:
 Blind or visually impaired
 Deaf or hard of hearing
 Mobility or dexterity impaired
 Reduced cognitive abilities
Most disabled people became disabled as
adults, it can happen to all of us.

9. Who is concerned? (2/3)
• Elderly people often develop disabilities, e.g.
 Reduced vision, reduced hearing;
 Reduced mobility or dexterity;
 Reduced tactile and fine motor abilities;
 Reduced short-term memory;
 Dyspraxia (difficulties to plan a task);
 Dyslexia;
 Etc.

10. I Wonder what it's Like to be Dyslexic
• This book aims to
provide the reader
with design led
experience of what it
feels like to struggle
with reading
Design for ALL 10Source: https://www.kickstarter.com

11. Who is concerned? (3/3)
• It is individually very different,
 which types of disability a person develops,
 when it starts, and
 how severe the disability becomes
• In most cases it is a combination of several
disabilities;
• The probability that a person becomes
disabled raises with age

12. Example: UK Disability Statistics
• Almost 1 in 5 people in the UK have a
disability;
• There are 5.1 million males with disabilities;
• There are 5.8 million females with disabilities;
• Only 17% of disabled people were born with
impairments. The majority of disabled people
acquire their impairments during their
working lives
12
Web Accessibility
Workshop
Source: http://www.mph-uk.com

13. The impact of age
How many people have less than “Full ability”?
Source: 1996/97 Disability follow-up survey

14. Who is concerned?
Most of us will be concerned
at some point in our lives

15. Who else would benefit?
• People with temporary disabilities (e.g., after an
accident or stroke)
• Users in a context causing a temporary reduction of
abilities (handicapping situation), such as
 Noisy environment (similar to reduced hearing)
 Hands engaged in other tasks (similar to reduced mobility)
 Eyes engaged in other task (similar to reduced vision)
 Attention on more important task (reduced cognitive
capacity)
 Limited hardware features of mobile devices, etc. (similar
to various physical handicaps)

16. Who else would benefit?
Accessible Web design => Design for All

17. Is Web accessibility relevant for
disabled? (1)
• Internet usage of disabled is higher than
average!
”The Web is not a barrier to people with
disabilities, it is the solution“ (WebAIM);
• Overall, 60% of EU citizens frequently use the
Internet; this means that more than 60% of
disabled people (>30 Mln) actually use the
Internet

18. • People who already use the Internet will continue
to use it when becoming older, as long as it is
accessible for them.
• eAccessibility is important for a large, increasing
number of people!
Is Web accessibility relevant for
disabled? (2)
Frequent
Internet usage
2008
Overall Female Age 16-24 Age 25-54 Age 55-74
EU 27 60% 53% 83% 63% 29%

19. eInclusion Policy and Legislation
Worldwide
These are examples; similar regulations exist in most
countries.
Legislation usually is based on the WCAG by W3C-WAI.

20. eInclusion in Europe
• Initiative eEurope (2000);
• Ministerial Declaration “ICT for an Inclusive Society”,
Riga, 2005;
• i2010-Strategy – A European information society for
growth and employment (2008);
• eAccessibility is a legal obligation in all European
countries;
• All regulations refer to “Web Content Accessibility
Guidelines (WCAG)” by W3C-WAI consortium.

21. European Parliament urges stronger
public website access law
• This week (26-02-2014) European Parliament
backed a move by 593 votes to 40, with 13
abstentions, to require EU member states to
ensure all public websites are fully accessible,
not just those in 12 categories proposed by
the European Commission such as social
security benefits and enrolment in higher
education

22. Banks, Energy Providers and Public Bodies Should be
Subject to Web Accessibility Rules, Vote MEPs
• Just a third of the 761,000 public sector websites
in the EU currently conform to "international
web-accessibility standards“;
• Organisations whose websites would be subject
to the new rules would have one year from the
introduction of the new laws to ensure that new
content added to their sites complies with the
new rules. They would have three years within
which to adapt existing content and five years if
that content is "live audio“
28 Feb 2014
Source: http://www.out-law.com

23. EMPATHY EXERCISE
Using Web with Limited Abilities
Design for ALL 23

24. The First Task (5-10 min)
• Write a list containing several typical Web
sites you attend on every day base;
• Describe couple of usual tasks that you
implement on each of these Web sites
(looking for weather, news, buying a bus
ticket, etc.)
Design for ALL 24

25. The Second Task (15-20 minutes)
• Now I want you to throw away your mouse;
• Then browse the Web doing what you usually
do, and see how you get on with booking your
concert (or whatever do you do)
• Make short notes on your experience and be
ready to share it with audience
Design for ALL 25

26. Some Useful Shortcuts
For Safari and Other Browsers
http://www.shortcutworld.com/en/mac/Safari_5.html
26
Web Accessibility
Workshop

27. FRAMEWORK FOR ACCESSIBLE WEB
Principles for Accessible UX
Design for ALL 27

28. Principles for Accessible UX as a
Framework for Web Accessibility
1. People first
2. Clear purpose
3. Solid structure
4. Easy interaction
5. Helpful wayfinding
6. Clean presentation
7. Plain language
8. Accessible media
9. Universal usability
Design for ALL 28http://goo.gl/Zl9bL3

29. 1. PEOPLE FIRST
Designing for Differences
29
Web Accessibility
Workshop

30. People First
When designing for differences, people are the
first consideration, and sites are designed with
the needs of everyone in the audience in mind
Design for ALL 30

31. Additional Data for Persona
• Ability: Information about their ability
(physical, cognitive, language) and any
assistive technology (AT) they use
• Aptitude: Their current knowledge and ability
to make inferences
• Attitude: Their motivation, emotion, risk
tolerance, and persistence
• Assistive Technology: Any technology if used
or required
Design for ALL 31

32. Emily: I want to do everything for myself
Ability: Cerebral palsy. Difficult to use
hands and has some difficulty speaking
clearly; uses a motorized wheel chair
Aptitude: Uses the computer well, with
the right input device; good at finding
efficient search terms
Attitude: Wants to do everything for
herself; can be impatient
Assistive Technology:
• Communicator (AAC) with speech
generator,
• iPad,
• power wheelchair
• 24 years old
• Graduated from high school and
working on a college degree
• Lives in a small independent
living facility
• Works part-time at a local
community center

33. Jacob: The right technology lets me do anything
• Ability: Blind since birth with
some light perception
• Aptitude: Skilled technology
user
• Attitude: Digital native, early
adopter, persists until he gets
it
• Assistive Technology: Screen
reader, audio note-taker,
Braille display
• 32 years old
• College graduate, legal
training courses
• Shares an apartment with a
friend
• Paralegal, reviews cases and
writes case summaries
• Laptop, braille display,
iPhone

34. My only disability is that everyone
doesn't sign
• Ability: Native language is ASL;
can speak and read lips; uses
SMS/IM, Skype, and video chat
• Aptitude: Good with graphic
tools, and prefers visuals to
text; poor spelling makes
searching more difficult
• Attitude: Can be annoyed about
accessibility, like lack of
captions
• Assistive Technology: Sign
language, CART, captions, video
chat
• 38 years old
• Art school
• Graphic artist in a small ad
agency
• iPad, iPhone, MacBook Pro;
good computer at work

36. 2. CLEAR PURPOSE
Well-Defined Goals
36
Web Accessibility
Workshop

37. Clear purpose
• Well-defined goals;
• People enjoy products that are designed for
the audience and guided by a defined purpose
and goals
• These products are recognizable by their
straightforward effectiveness, dedication to
users’ goals, a direct path to the task at hand,
and freedom from confusing clutter or
extraneous elements

38. 38
• The clarity of the design of the OXO products
hides the attention to detail that makes them
work so well
Example: Oxo Good Grips
Image courtesy of www.phaidon.com

39. Clear Purpose
Thinking about accessibility from the beginning
— “Accessibility First” — is similar to the
approach of thinking “Mobile First” to ensure
that the design works as well in a screen reader
as it does on a small screen
39
Web Accessibility
Workshop

40. Three Accessibility Strategies
1. Universal (or inclusive) design—one site;
2. Equivalent use—includes alternatives;
3. Accommodation—a separate “accessible”
version
40
Web Accessibility
Workshop

41. 3. SOLID STRUCTURE
Built to Standards
41
Web Accessibility
Workshop

42. Solid Structure
• A solid structure depends on good coding
practice. A site coded to standards, with all
information written to be machine-readable,
supports use of the site by different browsers
or devices, including assistive technology.
42
Web Accessibility
Workshop

43. 43
• Stylesheets separate content from
presentation, using code to communicate
semantic meaning, such as content structure,
emphasis, or function, as well as visual style;
CSS
Web Accessibility
Workshop

44. Built to Standards
• Web accessibility relies on the software’s
ability to read and understand the content
and instructions contained in web pages;
• The more “meta” information you can
provide, the better the user experience will be
Design for ALL 44

45. Organize Code for Clarity and Flow
• The order of the source code makes a
difference to:
 Web browsers generally
 Screen readers
 Search engines
• Content that appears “above the fold” in code
will be what gets read first by the software
Design for ALL 45

46. Organizing Code
• Pages are organized so that when code is read
in the order it appears in the file, it not only
makes sense, but it puts the most important
information first
46
Web Accessibility
Workshop

47. Unfriendly Structure Example
47
Web Accessibility
Workshop

48. Standards for the Web
• HTML - (Hypertext Markup Language), a language for describing the
structure of a page, including semantic information, for including
interactive links and forms, and for embedding media elements
such as images and video
• CSS (Cascading Style Sheets) – a language for describing the
presentation aspects of a page, including color, type, and layout
• JavaScript - scripting language for providing interaction and dynamic
content
• WCAG 2.0 - (Web Content Accessibility Guidelines) - guidelines and
techniques for making websites and web applications accessible to
people with disabilities.
• WAI-ARIA (Accessible Rich Internet Applications Suite) – a
framework for adding attributes to web documents in order to
make actionable elements accessible to people using assistive
technology
Design for ALL 48

49. Standards for the Web (2)
• User Agent Accessibility Guidelines (UAAG) for
web browsers and media players;
• Authoring Tool Accessibility Guidelines (ATAG)
for software that creates websites
• A new WAI project, IndieUI (Independent User
Interface), is working to create a device-
independent way to communicate user
actions, such as scrolling, to a web application
Design for ALL 49

50. People feel confident using the design because it is stable, robust,
and secure
Supporting Standards in Templates
A big hat tip to @AccessibleJoe and all the folks working on
making WordPress more accessible, and to Sylvia Eggers, author
of the accessible child theme shown here.

51. 4. EASY INTERACTION
Everything Works
51
Web Accessibility
Workshop

52. Easy Interaction (1)
Making the interaction
easy for people with
disabilities is an extension
of making interaction easy
for everyone. Interactive
elements are identified
clearly and are designed
to be easy to use
52
Web Accessibility
Workshop

53. Easy Interaction (2)
• The site supports interaction with a keyboard,
allowing assistive technology to emulate the
keyboard;
• This also requires that the keyboard tab order
make sense, matching the visual presentation
53
Web Accessibility
Workshop

54. Don’t Require Point-and-Click Interaction
• Hover: Some devices do not
support hover, such as
touchscreens— hover all you
want over a touchscreen, and
nothing is going to happen;
• Select: Using “select” to trigger
actions is problematic for
keyboard users;
• Drag and drop: This style of
interaction makes direct
manipulation of objects easy,
but typically requires a pointing
device and dexterity
54
Web Accessibility
Workshop
This feature, collecting
bookmarks for related items,
requires a mouse to drag
and drop items into the list.
A simple Add button would
make this more accessible

55. User Control
• A site with easy
interaction enables users
to control the interface,
with large enough
controls. It avoids taking
unexpected actions for
users that they can do on
their own;
• Easy interaction also
includes both preventing
and handling errors in an
accessible way
55
Web Accessibility
Workshop

56. Images: Braille, foot pedal, magnifier, Talking Dial, Voiceover, joystick, audio, high contrast keyboard, Glenda
Watson Hyatt and her iPad
Everything Works
People can use the product across all modes of
interaction and operating with a broad range of devices.

57. 5. HELPFUL WAYFINDING
Guides Users
57
Web Accessibility
Workshop

58. 58
• In the physical world, we rely on maps, street signs,
and how spaces are designed to help us get around;
• With helpful wayfinding, people can navigate a site,
feature, or page following self-explanatory signposts
Helpful Wayfinding
Web Accessibility
Workshop

59. Create Consistent Cues for
Orientation and Navigation (1)
• Identify the site. (name of the site and the
organization);
• Title the page. ( Title appears in the title bar of
the browser, in a bookmarks list, in search results,
and it is the first thing announced by screen
reader software);
• Provide good headings. (describe the main topic
of the page, as well as sections of content. The
correct markup (<h1–h6>) makes it easier for
people who use assistive technology to find
them);
59
Web Accessibility
Workshop

60. Create Consistent Cues for
Orientation and Navigation (1)
• Start with an overview. (It’s common for users
to leave sites if they don’t see what they are
looking for quickly);
• Highlight the current location. (In the page
title, by highlighting the menu item for the
section, by breadcrumb navigation.
• Use multiple cues (E.g., using an icon with
color-coding and a strong text label)
60
Web Accessibility
Workshop

61. Use WAI ARIA for Navigation Roles
HTML5 elements and ARIA roles are complementary. Including both of them in
your site provides a solid code structure and good navigation around the page
61
Web Accessibility
Workshop

62. To be Continued on the Next
Lesson
Web Accessibility
Workshop
62

63. WCAG 2.0
Preparing for Testing
63
Web Accessibility
Workshop

64. Web Content Accessibility Guidelines
(WCAG) 2.0
• WCAG 2.0 defines how to make Web content
more accessible to people with disabilities;
• Several layers of guidance are provided
including overall principles, general guidelines,
testable success criteria and a rich collection
of sufficient techniques, advisory techniques,
and documented common failures with
examples, resource links and code
64
Web Accessibility
Workshop

65. Integrated Accessibility Guidelines
• WCAG is part of an integrated suite of accessibility
guidelines and specifications from the W3C WAI:
 Web Content Accessibility Guidelines (WCAG) for web
content
 Authoring Tool Accessibility Guidelines (ATAG) for
authoring tools, HTML editors, content management
systems (CMS), blogs, wikis, etc.
 User Agent Accessibility Guidelines (UAAG) for Web
browsers, media players, and other "user agents"
 Accessible Rich Internet Applications Suite (WAI-ARIA) for
accessible rich Internet applications developed with Ajax
and such
65
Web Accessibility
Workshop

66. Principles
• At the top are four principles (POUR) that
provide the foundation for Web accessibility:
 Perceivable,
 Operable,
 Understandable,
 Robust
66
Web Accessibility
Workshop

67. Guidelines
• Guidelines are under the principles;
• The 12 guidelines provide the basic goals that
authors should work toward in order to make
content more accessible to users with
different disabilities
67
Web Accessibility
Workshop

68. Web Accessibility
Workshop
68Image: http://www.projectrics.org

69. Success Criteria
• For each guideline, testable success criteria
are provided to allow WCAG 2.0 to be used;
• In order to meet the needs of different groups
and different situations, three levels of
conformance are defined:
• A (lowest),
• AA, and
• AAA (highest).
69
Web Accessibility
Workshop

70. Success Criteria
70
Web Accessibility
Workshop
Image: http://www.michaelgaigg.com

71. Sufficient and Advisory Techniques
• For each of the guidelines and success criteria
in the WCAG 2.0 document itself, the working
group has also documented a wide variety of
techniques;
• The techniques are informative and fall into
two categories:
 Sufficient for meeting the success criteria;
 Advisory for meeting the success criteria
71
Web Accessibility
Workshop

72. WCAG 2.0 Guidelines
http://www.w3.org/TR/WCAG20/#guidelines
72
Web Accessibility
Workshop

73. Two WCAG versions
• WCAG 1.0 (1999)
• WCAG 2.0 (2008)
• WCAG 2.0 builds on WCAG 1.0 and
incorporates what we've learned to make
WCAG more useful and more effective;
• Most websites that meet ("conform to")
WCAG 1.0 should not require significant
changes in order to meet WCAG 2.0
73
Web Accessibility
Workshop

74. How WCAG 2.0 Differs from WCAG 1.0
• The guidelines are organized around four basic
principles (POUR), which together constitute the basic
philosophy of the guideline;
• The guidelines themselves are under the principles;
• Finally, each guideline includes a series of success
criteria which, like the WCAG 1.0 checkpoints, define
rules for the accessibility of Web content;
• Unlike WCAG 1.0, criteria are testable. The success
criteria are assigned conformance levels (A, AA, AAA),
in a similar way as WCAG 1.0 checkpoints
74
Web Accessibility
Workshop

75. TESTING SITES ON WCAG 2.0
CRITERIA
75
Web Accessibility
Workshop

76. Website Accessibility Conformance Evaluation
Methodology (WCAG-EM) 1.0
76
Web Accessibility
Workshop
Adapted from http://www.w3.org/TR/WCAG-EM/

77. Example: Generated Site Map
77
Web Accessibility
Workshop

78. Evaluation Tools
• While Web accessibility evaluation tools can
significantly reduce the time and effort to
evaluate Web sites, no tool can automatically
determine the accessibility of Web sites;
• W3C does not endorse specific vendor
products;
• Web Accessibility Evaluation Tools: Overview
78
Web Accessibility
Workshop

79. Comparison Of The Tools
79
Web Accessibility
Workshop
Source: http://usabilitygeek.com

80. Homework Assignment 1
A. Choose a Web site for testing. It could be a
government Web site, as well as public sector Web
site (bank, public transportation company, etc.)
B. Implement steps from Conformance Evaluation
Methodology WCAG-EM, like define the scope of the
Web site, identify common Web pages of the Web
site, select a representative sample, audit the
selected sample;
C. Select one or two tools link one, link two, and make
testing of Selected Sample;
D. Analyze and report results in your blog
80
Web Accessibility
Workshop

81. References
• A training course “Introduction to
eAccessibility” by Fraunhofer FIT
http://www.dfaei.org (developed in a
framework of DFA@eInclusion project);
• Sarah Horton , Whitney Quesenbery. A Web
for Everyone: Designing Accessible User
Experiences, Rosenfeld Media; 1st edition
(January 16, 2014)
Design for ALL 81