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
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
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
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/
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
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
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. 3. 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?
• About 15 minutes for testing and about 20
minutes to report
35
Web Accessibility
Workshop
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
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
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
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
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
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. How do 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
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 this Effort?
─ 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
95. 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
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
105. Homework Assignment 2 (a)
A. Preparation for the next session:
Remember 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
blog;
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 blog
106
Web Accessibility
Workshop
Notas del editor
Sarah Horton , Whitney QuesenberyA Web for Everyone: Designing Accessible User Experiences
About 15 minutes for test and about 20 minutes to report
According to Luke, recent studies by Intel and others have identified the portions of the screen that are most easily touched by users. The phone and tablet touch zones seem to make sense, but the laptop at first looks a little odd.The explanation is simple but surprising: researchers found that users tend to grip a touchable laptop screen much as they do a tablet, hence the similar pattern.http://www.peterchaivre.com/2012/11/is-this-the-future-of-touchscreen-navigation/
The redesigned Medicare Summary Notice letter is not only rewritten in plain language, but also formatted with headings and good use of clean design principles.
Sarah Horton , Whitney QuesenberyA Web for Everyone: Designing Accessible User Experiences
Sarah Horton , Whitney QuesenberyA Web for Everyone: Designing Accessible User Experiences
Headings: Authors should organize content with headings. To the extent possible, the headings should represent an accurate outline of the content.Paragraphs: When possible, place the distinguishing information of a paragraph in the first sentence.