March 2016 lecture

1. Web Accessibility Workshop
Session Two
Vladimir Tomberg, PhD
Tallinn University

2. “The power of the web is in its
universality. Access by everyone
regardless of disability is an
essential aspect”
Tim Berners-Lee
Founder of the World Wide Web
Director of W3C
2
Web Accessibility
Workshop

3. Today Workshop
1. Presentation of the homework;
2. Framework for Accessible Web (continued);
3. Responsiveness exercise;
4. Discussion;
5. How to design accessible Web applications?
6. WCAG Requirements
7. WAVE Toolbar Demo
Web Accessibility
Workshop
3

4. 1. PRESENTATION OF HOMEWORK
Please be prepared to present your experience!
4
Web Accessibility
Workshop

5. 2. FRAMEWORK FOR ACCESSIBLE WEB
(CONTINUED)
Principles for Accessible UX
5
Web Accessibility
Workshop

6. 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
6http://goo.gl/Zl9bL3 Web Accessibility
Workshop

7. 6. CLEAN PRESENTATION
Supports Meaning
7
Web Accessibility
Workshop

8. Clean Presentation
• A clean presentation enhances the usability of
the site for everyone by designing the visual
layout and typography for easy perception;
• However, to ensure that the presentation is
accessible for the wide variety of visual
disabilities, the site must also be designed to
allow users to customize the look, either
through the browser or through controls built
into the site
8
Web Accessibility
Workshop

9. Presentation of Information
People can perceive and understand elements in the
design
9
Web Accessibility
Workshop
Image source: http://www.consumerreports.org

10. Flexible Presentation Allows
for User Needs & Preferences
10
Web Accessibility
Workshop
Source: http://www.csszengarden.com/

11. Design Simply
• Simple designs are stable and coherent;
• Consistent designs are easier to use because,
once learned, the interaction model can be
applied throughout the product;
• Design conventions can help with usability
because we all know how they work;
• Design patterns are also helpful
11
Web Accessibility
Workshop

12. Complexity VS Simplicity
12
Web Accessibility
Workshop
Image Source: http://habrahabr.ru

13. Example: Phone App
13
Web Accessibility
Workshop
Image Source: http://behance.net

14. Example: Phone App
14
Web Accessibility
Workshop
Image Source: http://behance.net

15. Example: Web Page
15
Web Accessibility
Workshop
Image Source: http://behance.net

16. Example: Web Page
16
Web Accessibility
Workshop
Source: http://www.brooksengland.com

17. Example: Web Page
17
Web Accessibility
Workshop
Source: http://www.apple.com

18. Design for Customization of the Display
Readability removes everything on the page except the
main content so that readers are not distracted
Web Accessibility
Workshop
18
Source: https://www.readability.com/

19. Design Responsive Layouts
19
Web Accessibility
Workshop

20. Robust Principle (POUR)
Universal
Design
Responsive
Design
Accessibility
Standards
20
Hardware People
Web Accessibility
Workshop
Robust: Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies.

21. 21
Web Accessibility
Workshop
flexible,
grid-based layout
flexible images
flexible video
added to CSS3
specifications
Three Main Components of
Responsive Layout

22. Flying Grid – One Content on
Different Layout
22
Web Accessibility
Workshop

23. Sample Grid
23
Web Accessibility
Workshop
Source: http://aaronkwhite.com

24. Popular Grid Frameworks
Skeleton
Twitter Bootstrap
LESS
24
Web Accessibility
Workshop

25. Defining Flexible Fonts
body {
font-size: 100% /* 16px */
}
h1 {
font-size: 1.5em
/* 24px / 16px */ }
25
Web Accessibility
Workshop

26. Scaling Fonts in Browser
26
Web Accessibility
Workshop

27. Em Font Size
27
Web Accessibility
Workshop
• “Ems” (em): The “em” is a scalable unit that is
used in web document media.
• An em is equal to the current font-size, for
instance, if the font-size of the document is
12pt, 1em is equal to 12pt.
• Ems are scalable in nature, so 2em would
equal 24pt, .5em would equal 6pt, etc.
Source http://kyleschaeffer.com

28. Flexible Media
img {max-width: 100%;}
• This rule allows our image to size to it's
maximum size, or the width of the
containing element... Which ever comes
first
28
Web Accessibility
Workshop

29. Flexible Media
29
Web Accessibility
Workshop

30. Media Query
Media Queries is a CSS3 module allowing content
rendering to adapt to conditions such as screen
resolution (e.g. smartphone vs. high definition screen)
30
Web Accessibility
Workshop
Source http://www.downgraf.com

31. Media Query Operators
31
Web Accessibility
Workshop
@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation:
landscape) { ... }
@media (min-width: 700px), handheld and
(orientation: landscape) { ... }
Source https://developer.mozilla.org

32. Embedding Media Query
32
Web Accessibility
Workshop
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)"
href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Source https://developer.mozilla.org

33. Live Examples
http://mediaqueri.es
33

34. RWD Testing Tools
Viewport Resizer and Responsive Design Bookmarklet
http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/
Web Accessibility
Workshop
34

35. Home Responsiveness Exercise
• Select the web sites that you tested on
previous workshop and test them on
responsiveness;
• Report back to us:
 What are results?
 Which features are implemented well?
 What doesn’t work?
35
Web Accessibility
Workshop

36. Recommended Reading
36
Web Accessibility
Workshop

37. Adaptive VS Responsive
Web Design
37
Web Accessibility
Workshop

38. Structure Content First
38
Web Accessibility
Workshop
Picture Source http://blog.braintraffic.com

39. Structure Content First
• Recommended Webcast
http://www.slideshare.
net/stephenhay/structu
red-content-first
39
Web Accessibility
Workshop
Picture Source http://blog.braintraffic.com

40. Poorly Structured Content
40
Web Accessibility
Workshop
http://www.telegraaf.nl/

41. Information
Architecture
• Navigation as
articulated in a Sitemap,
• Hierarchy of
information,
• On page layouts,
• Organizing the content
into a user centric
structure,
• Creating and plotting
the user/visitor journey
Web Accessibility
Workshop
41

42. User Journey Example #1
42
Web Accessibility
Workshop
Image Source: http://www.servicedesigntools.org

43. User Journey Example #2
43
Web Accessibility
Workshop
Image Source: http://mobile.bazaarvoice.com

44. Site Maps
44
Web Accessibility
Workshop
Image Source: http://fostermilo.com

45. Start with Mobile
If you can support the mobile web, you can
support anything
45
Web Accessibility
Workshop

46. Mobile First
46
Web Accessibility
Workshop
Source http://bradfrostweb.com

47. 4.12.2014 – the day Google predicted
mobile queries will reach 50%
47
Web Accessibility
Workshop
Source http://www.themobilewebtrends.com

48. Mobile-Oriented Design and Input
Changes
48
Web Accessibility
Workshop
Source http://blog.cloudfour.com

49. Mobile-Oriented Design and Input
Changes
49
Web Accessibility
Workshop
Source http://blog.cloudfour.com

50. Comfortable Touch Zones
50
Web Accessibility
Workshop
Source http://blog.cloudfour.com

51. Recommended Books
51
Web Accessibility
Workshop

52. 7. PLAIN LANGUAGE
Creates a Conversation
52
Web Accessibility
Workshop

53. Plain Language
• Plain language involves accessibility for
content, helping everyone read more
accurately and efficiently;
• Writing in plain language does not mean
“dumbing down” the information. It means
writing for the audience, using words and
concepts they will understand
53
Web Accessibility
Workshop

54. Medicare Summary Notice
54
Web Accessibility
Workshop
Source: CMS.gov

55. Plain Language: Creates a
Conversation
People can read, understand, and use the
information
55
Web Accessibility
Workshop

56. Source http://nces.ed.gov
• Below basic - only the most
simple and concrete reading
skills
• Basic - able to manage everyday
tasks
People Read with Different Levels of Literacy
• Intermediate - moderately
challenging activities like
consulting reference material
• Proficient - interpreting text,
comparing viewpoints
56
Web Accessibility
Workshop

57. Support Different Reading Styles and
Perception►
57
Web Accessibility
Workshop

58. 8. ACCESSIBLE MEDIA
Supports All Senses
58
Web Accessibility
Workshop

59. Supports all Senses
People can understand and use information contained in media,
such as images, audio, video, animation, and presentations
59
Web Accessibility
Workshop

60. Accessible Media
• Creating accessible media requires alternatives,
so that the media content supports all the senses.
It is the one type of content where a single
version is not enough;
• Types of alternatives include:
 descriptions of images (called alt text);
 captions for video files;
 transcripts for audio files;
 descriptions of any other non-text content that is not
communicated in any other way
60
Web Accessibility
Workshop

61. Meaningful Alternatives for Visual
Information
What’s the right ALT text for this image?
61
Web Accessibility
Workshop

62. Synchronized audio+text
Graham Pullen, author of Design Meets Disability
62
Web Accessibility
Workshop
Source: http://research.microsoft.com

63. 9. UNIVERSAL USABILITY
Creates Delight
63
Web Accessibility
Workshop

64. Universal Usability
• Although it’s important to meet basic
guidelines for accessibility, our goal is much
more inclusive: to create a good user
experience for everyone, including people
with disabilities
64
Web Accessibility
Workshop

65. 9. Universal Usability
People can focus on the experience and their own goals because
the product anticipates their needs
65
Web Accessibility
Workshop

66. 4. DISCUSSION
66
Web Accessibility
Workshop

67. 1. Which Principles for Accessible UX
you knew before? How well?
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
Web Accessibility
Workshop
67Image source: http://www.theartimes.com

68. 2. Did you use these principles
in your design works?
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
Web Accessibility
Workshop
68Image source: http://www.theartimes.com

69. 5. HOW TO DESIGN ACCESSIBLE
WEB APPLICATIONS?
Web Accessibility for Designers by WebAIM (Web Accessibility In Mind)
69
Web Accessibility
Workshop

70. Web Accessibility
for Designers
Guides and infographics on:
http://webaim.org/resources/
designers/
Web Accessibility
Workshop
70

71. Plan Heading Structure Early
• Pages should be structured
in a hierarchical manner;
• Lower degree headings
should be contained within
headings of the next
highest degree;
71
Web Accessibility
Workshop

72. Using Headings Correctly
• Do not use text formatting, such as font size or
bold to give the visual appearance of headings
- use actual heading (<h1> - <h6>) for all
content headings;
• Likewise, do not use headers to achieve visual
results only;
• Use the <strong> element instead
of <bold> and the <em> element instead
of <i>
72
Web Accessibility
Workshop

73. Using Lists Correctly
• HTML lists - <ul>, <ol>, and <dl> - also convey
a hierarchical content structure
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
73
Web Accessibility
Workshop

74. Consider Reading Order
• Audio interfaces present content linearly to users,
one item at a time;
• Skimming through content using:
 Links;
 Headings;
 WAI ARIA landmarks and page sections
(<main>,<nav>, <header>, etc);
 Paragraphs and page elements like <div>;
 Other (tables, lists, buttons, forms, links, images, etc.)
74
Web Accessibility
Workshop

75. Provide Good Contrast
• Be especially careful
with light shades of
gray, orange, and
yellow;
• Grey text is almost not
visible on yellow
background and there
are thousands of such
combinations
75
Web Accessibility
Workshop

76. Provide Good Contrast
• Check your contrast
levels with color
contrast checker;
• Level AA requires a
contrast ratio of 4.5:1
for normal text and 3:1
for large text.
• Level AAA requires a
contrast ratio of 7:1 for
normal text and 4.5:1
for large text.
76
Web Accessibility
Workshop
Color checker: http://webaim.org/resources/contrastchecker/

77. Use Alternative Text for Images
• Adding alternative text to images is one of the
easiest accessibility principles to learn and
one of the hardest to master;
• Alternative text may be provided in
the alt attribute or in the surrounding context
of the image;
• Every image must have an alt attribute;
77
Web Accessibility
Workshop

78. Use Alternative Text for Images
• Alternative text should:
 presents the CONTENT and FUNCTION of the
image.
 be short
• Decorative images still need an alt attribute,
but it should be null (alt="").
78
Web Accessibility
Workshop

79. Use Alternative Text for Images
• Alternative text should
not:
– be redundant (be the
same as adjacent or
body text);
– use the phrases "image
of…" or "graphic of…"
79
Web Accessibility
Workshop

80. Watch the Use of CAPS
• ALL CAPS CAN BE DIFFICULT TO READ AND
CAN BE READ INCORRECTLY;
• Screen reader software will sometimes spell
out words that are in all caps, rather than
reading them
80
Web Accessibility
Workshop

81. Use Adequate Font Size
Font size can vary based on the font chosen, but 10
point is usually a minimum
81
Web Accessibility
Workshop

82. Remember Line Length
• Don't make it too long
or too short;
• Web article: Yvette
Shen. Line Length
http://smad.jmu.edu/shen/webtype/linel
ength.html
82
Web Accessibility
Workshop

83. Make Sure Links are Recognizable
• Differentiate links in the body of the page with
underlines or something other than color
alone
83
Web Accessibility
Workshop

84. Use Tabindex
• The tabindex attribute allows you to define
logical tabbing order although if the HTML is
linear
<ul>
<li><a href="here.html“ tabindex="1"> Here </a></li>
<li><a href="there.html" tabindex="3"> There </a></li>
<li><a href="limbo.html" tabindex="2"> Limbo </a></li>
</ul>
84
Web Accessibility
Workshop

85. Link titles
• If you have a link that isn’t self-descriptive, you
can add information to the link using
the title attribute
<p>I'm really bad at writing link text.
<a href= "inept.html"
title="Why I'm rubbish at writing link text: An
explanation and an apology.">
Click here</a>
to find out more.</p>
85
Web Accessibility
Workshop

86. Accesskeys
• Access keys allow easier navigation by
assigning a keyboard shortcut to a link (which
will usually gain focus when the user presses
“Alt” or “Ctrl” + the access key)
<a href="somepage.html" accesskey="s">Some page</a>
86
Web Accessibility
Workshop

87. 87
• Ensure keyboard users can visually identify a
focused link;
• Use the standard dotted line or other non-
color designators
Design Link Focus Indicators
Web Accessibility
Workshop

88. Design a "Skip to Main Content" Link
• Examples:
– Skip navigation
– Skip main navigation
– Skip navigation links
– Skip to main content
– Skip to content
<body>
<a href= "#maincontent">
Skip to main content </a>
...
<main id="maincontent">
<h1>Heading</h1>
<p> This is the first
paragraph </p>
88
Web Accessibility
Workshop

89. Ensure Link Text
Makes Sense on Its Own
• Avoid "Click Here"
in link text;
• Other ambiguous links,
such as "More" or
"Continue", can also be
confusing
89
Web Accessibility
Workshop

90. Use Animation, Video, and Audio
Carefully
• If used, provide a
play/pause button;
• Avoid flashing or
strobing content: It can
cause seizures
90
Web Accessibility
Workshop

91. Don't Rely on Color Alone
Because users often can't distinguish or may override page
colors, color cannot be the only way information is conveyed
91
Web Accessibility
Workshop
Image and other examples: http://blog.templatemonster.com

92. Design Accessible Form Controls
• Ensure Forms are Logical and Easy to Use;
• Ensure Forms are Keyboard Accessible;
• Associate Form Labels with Controls
92
Web Accessibility
Workshop

93. Why all That Efforts?
─ There is no reason for building websites like this: it is not difficult to do it
right. But even well-meaning website builders ask: How can I justify the
extra cost for such a small percentage of the public?
─ And the answer is: Google. Looking at my website logs, it is clear that at
least half of the visitors find the sites via Google. And what Google sees is
exactly what a blind person sees.
Google is a blind user; a billionaire blind user, with millions of friends who
listen to his every word. If a blind user can't see your site, neither can
Google, and your site will suffer.
(Steven Pemberton, The Kiss of the Spiderbot, Interactions, 2003)
93
Web Accessibility
Workshop

94. 6. WCAG REQUIREMENTS
How to make content to be conformed to WCAG?
94
Web Accessibility
Workshop

95. POUR Principles of WCAG 2.0
(to remind)
• Perceivable: Information and user interface components must be
presentable to users in ways they can perceive.
 This means that users must be able to perceive the information being
presented (it can't be invisible to all of their senses)
• Operable: User interface components and navigation must be operable.
 This means that users must be able to operate the interface (the interface
cannot require interaction that a user cannot perform)
• Understandable: Information and the operation of user interface must be
understandable.
 This means that users must be able to understand the information as well as
the operation of the user interface (the content or operation cannot be
beyond their understanding)
• Robust: Content must be robust enough that it can be interpreted reliably
by a wide variety of user agents, including assistive technologies.
 This means that users must be able to access the content as technologies
advance (as technologies and user agents evolve, the content should remain
accessible)
95
Web Accessibility
Workshop

96. How to achieve the WCAG 2.0
principles?
Structure of WCAG 2.0
• Principles – Top 4 principles
• Guidelines – 12 guidelines provide the basic goals.
• Success criteria – For each guideline, testable success criteria
are provided.
• Levels of conformance – Three levels of conformance are
defined: A (lowest), AA, and AAA (highest)
• Sufficient and advisory techniques – An informative list of
typical mistakes and good-practice techniques is provided.
Techniques fall into two categories: those that are sufficient for
meeting the success criteria, and those that are advisory.
• Common Failures – which describe authoring practices known to
cause Web content not to conform to WCAG 2.0
96
Web Accessibility
Workshop

97. Source: http://www.w3.org
Levels of Conformance
• Level A: For Level A conformance (the minimum level
of conformance), the Web page satisfies all the Level A
Success Criteria, or a conforming alternate version is
provided.
• Level AA: For Level AA conformance, the Web page
satisfies all the Level A and Level AA Success Criteria, or
a Level AA conforming alternate version is provided.
• Level AAA: For Level AAA conformance, the Web page
satisfies all the Level A, Level AA and Level AAA Success
Criteria, or a Level AAA conforming alternate version is
provided
97
Web Accessibility
Workshop

98. Library Ramp Analogy
98
Web Accessibility
Workshop
Sourse: http://acc.nics.gov.uk

99. Five requirements to be classified as
'conforming' to WCAG 2.0.
• Conformance level – one of the Success Criteria
conformance levels is fully met;
• Full pages – conformance is for full web pages only and
can’t exclude parts of the page;
• Complete processes – when a web page is part of a
continuous process, all pages in the process must conform
at the specified level;
• Accessibility supported ways of using of technologies – only
accessibility supported uses are relied on to meet the
Success Criteria;
• Non-interference - technologies that are not accessibility
supported, or used in a non-conforming way, do not block
the ability of users to access the rest of the page
99
Web Accessibility
Workshop

100. What is a typical Evaluation process?
Compliance
criteria
Scope
Automatic
Tests
Expert
Tests
Results Results
User Tests
Results
Aggregated
report
Solving
issues
100
Web Accessibility
Workshop

101. 7. WAVE TOOLBAR DEMO
Semiautomatic Testing
101
Web Accessibility
Workshop

102. WAVE Toolbar
http://wave.webaim.org/toolbar/
102
Web Accessibility
Workshop

103. Errors, Features, Alerts
103
Web Accessibility
Workshop

104. Comprehensive Report
104
Web Accessibility
Workshop

105. Homework Assignment 2 (a)
A. Preparation for the next session:
Recall the Empathy Exercise from the 1-st
workshop. Some of you had troubles to
implement some specific tasks by using
keyboard. Try to find keyboard shortcuts that
work. Use Browser documentation, manuals
and search. Describe these solutions in your
report;
105
Web Accessibility
Workshop

106. Homework Assignment 2 (b)
B. Install WAVE toolbar and test 2-3 representative
pages that you have from the previous
homework;
C. Save copies of the source code of these pages
on a local hard disk;
D. Correct the code to repair errors;
E. Test the repaired code automatically and semi-
automatically again and describe this experience
in your report and upload that to Gdrive
106
Web Accessibility
Workshop