Web accessibility workshop 2
-
Upload
vladimir-tomberg -
Category
Education
-
view
836 -
download
2
description
Transcript of Web accessibility workshop 2
![Page 1: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/1.jpg)
Web Accessibility WorkshopSession Two
Vladimir Tomberg, PhDTallinn University
![Page 2: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/2.jpg)
2Web Accessibility Workshop
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect”
Tim Berners-LeeFounder of the World Wide WebDirector of W3C
![Page 3: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/3.jpg)
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 Requirements7. WAVE Toolbar Demo
Web Accessibility Workshop
![Page 4: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/4.jpg)
4Web Accessibility Workshop
1. PRESENTATION OF HOMEWORKPlease be prepared to present your experience!
![Page 5: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/5.jpg)
5
2. FRAMEWORK FOR ACCESSIBLE WEB(CONTINUED)
Principles for Accessible UX
Web Accessibility Workshop
![Page 6: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/6.jpg)
6
Principles for Accessible UX as a Framework for Web Accessibility
1. People first2. Clear purpose3. Solid structure4. Easy interaction5. Helpful wayfinding6. Clean presentation7. Plain language8. Accessible media9. Universal usability
http://goo.gl/Zl9bL3 Web Accessibility Workshop
![Page 7: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/7.jpg)
7Web Accessibility Workshop
6. CLEAN PRESENTATIONSupports Meaning
![Page 8: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/8.jpg)
8Web Accessibility Workshop
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
![Page 9: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/9.jpg)
9Web Accessibility Workshop
Presentation of Information
People can perceive and understand elements in the design
Image source: http://www.consumerreports.org
![Page 10: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/10.jpg)
10Web Accessibility Workshop
Flexible Presentation Allows for User Needs & Preferences
Source: http://www.csszengarden.com/
![Page 11: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/11.jpg)
11Web Accessibility Workshop
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
![Page 12: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/12.jpg)
12Web Accessibility Workshop
Complexity VS Simplicity
Image Source: http://habrahabr.ru
![Page 13: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/13.jpg)
13Web Accessibility Workshop
Example: Phone App
Image Source: http://behance.net
![Page 14: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/14.jpg)
14Web Accessibility Workshop
Example: Phone App
Image Source: http://behance.net
![Page 15: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/15.jpg)
15Web Accessibility Workshop
Example: Web Page
Image Source: http://behance.net
![Page 16: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/16.jpg)
16Web Accessibility Workshop
Example: Web Page
Source: http://www.brooksengland.com
![Page 17: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/17.jpg)
17Web Accessibility Workshop
Example: Web Page
Source: http://www.apple.com
![Page 18: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/18.jpg)
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
Source: https://www.readability.com/
![Page 19: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/19.jpg)
19Web Accessibility Workshop
Design Responsive Layouts
![Page 20: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/20.jpg)
Web Accessibility Workshop
Robust Principle (POUR)
Universal Design
Responsive Design
Accessibility Standards
20
Hardware People
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
![Page 21: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/21.jpg)
Web Accessibility Workshop
21
3 главных компонента.
flexible, grid-based layout
flexible imagesflexible video
added to CSS3 specifications
![Page 22: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/22.jpg)
22Web Accessibility Workshop
Flying Grid – One Content on Different Layout
![Page 23: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/23.jpg)
23Web Accessibility Workshop
Sample Grid
Source: http://aaronkwhite.com
![Page 24: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/24.jpg)
24Web Accessibility Workshop
Popular Grid Frameworks
Skeleton
Twitter Bootstrap
LESS
![Page 25: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/25.jpg)
25Web Accessibility Workshop
Defining Flexible Fonts
body {font-size: 100% /* 16px */}
h1 {font-size: 1.5em
/* 24px / 16px */ }
![Page 26: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/26.jpg)
26Web Accessibility Workshop
Scaling Fonts in Browser
![Page 27: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/27.jpg)
27Web Accessibility Workshop
Em Font Size
• “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
![Page 28: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/28.jpg)
28Web Accessibility Workshop
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
![Page 29: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/29.jpg)
29Web Accessibility Workshop
Flexible Media
![Page 30: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/30.jpg)
30Web Accessibility Workshop
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
Source http://www.downgraf.com
![Page 31: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/31.jpg)
31Web Accessibility Workshop
Media Query Operators
@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
Source https://developer.mozilla.org
![Page 32: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/32.jpg)
32Web Accessibility Workshop
Embedding Media Query
<!-- 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
![Page 34: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/34.jpg)
Web Accessibility Workshop
34
RWD Testing Tools
Viewport Resizer and Responsive Design Bookmarklet
http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/
![Page 35: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/35.jpg)
35Web Accessibility Workshop
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
![Page 36: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/36.jpg)
36Web Accessibility Workshop
Recommended Reading
![Page 37: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/37.jpg)
37Web Accessibility Workshop
Adaptive VS ResponsiveWeb Design
![Page 38: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/38.jpg)
38Web Accessibility Workshop
Structure Content First
Picture Source http://blog.braintraffic.com
![Page 39: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/39.jpg)
39Web Accessibility Workshop
Structure Content First
• Recommended Webcast http://www.slideshare.net/stephenhay/structured-content-first
Picture Source http://blog.braintraffic.com
![Page 40: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/40.jpg)
40Web Accessibility Workshop
Poorly Structured Content
http://www.telegraaf.nl/
![Page 41: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/41.jpg)
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
![Page 42: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/42.jpg)
42Web Accessibility Workshop
User Journey Example #1
Image Source: http://www.servicedesigntools.org
![Page 43: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/43.jpg)
43Web Accessibility Workshop
User Journey Example #2
Image Source: http://mobile.bazaarvoice.com
![Page 44: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/44.jpg)
44Web Accessibility Workshop
Site Maps
Image Source: http://fostermilo.com
![Page 45: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/45.jpg)
45Web Accessibility Workshop
Start with Mobile
If you can support the mobile web, you can support anything
![Page 46: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/46.jpg)
46Web Accessibility Workshop
Mobile First
Source http://bradfrostweb.com
![Page 47: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/47.jpg)
47Web Accessibility Workshop
4.12.2014 – the day Google predicts mobile queries will reach 50%
Source http://www.themobilewebtrends.com
![Page 48: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/48.jpg)
48Web Accessibility Workshop
Mobile-Oriented Design and Input Changes
Source http://blog.cloudfour.com
![Page 49: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/49.jpg)
49Web Accessibility Workshop
Mobile-Oriented Design and Input Changes
Source http://blog.cloudfour.com
![Page 50: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/50.jpg)
50Web Accessibility Workshop
Comfortable Touch Zones
Source http://blog.cloudfour.com
![Page 51: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/51.jpg)
51Web Accessibility Workshop
Recommended Books
![Page 52: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/52.jpg)
52Web Accessibility Workshop
7. PLAIN LANGUAGECreates a Conversation
![Page 53: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/53.jpg)
53Web Accessibility Workshop
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
![Page 54: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/54.jpg)
54Web Accessibility Workshop
Medicare Summary Notice
Source: CMS.gov
![Page 55: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/55.jpg)
55Web Accessibility Workshop
Plain Language: Creates a Conversation
People can read, understand, and use the information
![Page 56: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/56.jpg)
56Web Accessibility Workshop
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
![Page 57: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/57.jpg)
57Web Accessibility Workshop
Support Different Reading Styles and Perception►
![Page 58: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/58.jpg)
58Web Accessibility Workshop
8. ACCESSIBLE MEDIASupports All Senses
![Page 59: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/59.jpg)
59Web Accessibility Workshop
Supports all Senses
People can understand and use information contained in media, such as images, audio, video, animation, and presentations
![Page 60: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/60.jpg)
60Web Accessibility Workshop
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
![Page 61: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/61.jpg)
61Web Accessibility Workshop
Meaningful Alternatives for Visual Information
What’s the right ALT text for this image?
![Page 62: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/62.jpg)
62Web Accessibility Workshop
Synchronized audio+text
Graham Pullen, author of Design Meets Disability
Source: http://research.microsoft.com
![Page 63: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/63.jpg)
63Web Accessibility Workshop
9. UNIVERSAL USABILITYCreates Delight
![Page 64: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/64.jpg)
64Web Accessibility Workshop
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
![Page 65: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/65.jpg)
65Web Accessibility Workshop
9. Universal Usability
People can focus on the experience and their own goals because the product anticipates their needs
![Page 66: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/66.jpg)
66Web Accessibility Workshop
4. DISCUSSION
![Page 67: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/67.jpg)
67
1. Which Principles for Accessible UX you knew before? How well?
1. People first2. Clear purpose3. Solid structure4. Easy interaction5. Helpful wayfinding6. Clean presentation7. Plain language8. Accessible media9. Universal usability
Web Accessibility Workshop
Image source: http://www.theartimes.com
![Page 68: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/68.jpg)
68
2. How do you use these principles in your design works?
1. People first2. Clear purpose3. Solid structure4. Easy interaction5. Helpful wayfinding6. Clean presentation7. Plain language8. Accessible media9. Universal usability
Web Accessibility Workshop
Image source: http://www.theartimes.com
![Page 69: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/69.jpg)
69Web Accessibility Workshop
5. HOW TO DESIGN ACCESSIBLE WEB APPLICATIONS?
Web Accessibility for Designers by WebAIM (Web Accessibility In Mind)
![Page 70: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/70.jpg)
Web Accessibility Workshop
70
Web Accessibility for DesignersGuides and infographics on:http://webaim.org/resources/designers/
![Page 71: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/71.jpg)
71Web Accessibility Workshop
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;
![Page 72: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/72.jpg)
72Web Accessibility Workshop
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>
![Page 73: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/73.jpg)
73Web Accessibility Workshop
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>
![Page 74: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/74.jpg)
74Web Accessibility Workshop
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.)
![Page 75: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/75.jpg)
75Web Accessibility Workshop
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
![Page 76: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/76.jpg)
76Web Accessibility Workshop
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.
Color checker: http://webaim.org/resources/contrastchecker/
![Page 77: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/77.jpg)
77Web Accessibility Workshop
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;
![Page 78: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/78.jpg)
78Web Accessibility Workshop
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="").
![Page 79: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/79.jpg)
79Web Accessibility Workshop
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…"
![Page 80: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/80.jpg)
80Web Accessibility Workshop
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
![Page 81: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/81.jpg)
81Web Accessibility Workshop
Use Adequate Font Size
Font size can vary based on the font chosen, but 10 point is usually a minimum
![Page 82: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/82.jpg)
82Web Accessibility Workshop
Remember Line Length
• Don't make it too long or too short;
• Web article: Yvette Shen. Line Length
http://smad.jmu.edu/shen/webtype/linelength.html
![Page 83: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/83.jpg)
83Web Accessibility Workshop
Make Sure Links are Recognizable
• Differentiate links in the body of the page with underlines or something other than color alone
![Page 84: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/84.jpg)
84Web Accessibility Workshop
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>
![Page 85: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/85.jpg)
85Web Accessibility Workshop
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>
![Page 86: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/86.jpg)
86Web Accessibility Workshop
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>
![Page 87: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/87.jpg)
87Web Accessibility Workshop
• Ensure keyboard users can visually identify a focused link;
• Use the standard dotted line or other non-color designators
Design Link Focus Indicators
![Page 88: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/88.jpg)
88Web Accessibility Workshop
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>
![Page 89: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/89.jpg)
89Web Accessibility Workshop
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
![Page 90: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/90.jpg)
90Web Accessibility Workshop
Use Animation, Video, and Audio Carefully
• If used, provide a play/pause button;
• Avoid flashing or strobing content: It can cause seizures
![Page 91: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/91.jpg)
91Web Accessibility Workshop
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
Image and other examples: http://blog.templatemonster.com
![Page 92: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/92.jpg)
92Web Accessibility Workshop
Design Accessible Form Controls
• Ensure Forms are Logical and Easy to Use;• Ensure Forms are Keyboard Accessible;• Associate Form Labels with Controls
![Page 93: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/93.jpg)
93Web Accessibility Workshop
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)
![Page 94: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/94.jpg)
94Web Accessibility Workshop
6. WCAG REQUIREMENTSHow to make content to be conformed to WCAG?
![Page 95: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/95.jpg)
95Web Accessibility Workshop
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)
![Page 96: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/96.jpg)
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
96Web Accessibility Workshop
![Page 97: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/97.jpg)
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
97Web Accessibility Workshop
![Page 98: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/98.jpg)
98Web Accessibility Workshop
Library Ramp Analogy
Sourse: http://acc.nics.gov.uk
![Page 99: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/99.jpg)
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
99Web Accessibility Workshop
![Page 100: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/100.jpg)
What is a typical Evaluation process?
Compliance criteria
Scope
Automatic Tests
Expert Tests
Results Results
User Tests
Results
Aggregated report
Solving issues
100Web Accessibility Workshop
![Page 101: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/101.jpg)
101Web Accessibility Workshop
7. WAVE TOOLBAR DEMOSemiautomatic Testing
![Page 102: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/102.jpg)
102Web Accessibility Workshop
WAVE Toolbar
http://wave.webaim.org/toolbar/
![Page 103: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/103.jpg)
103Web Accessibility Workshop
Errors, Features, Alerts
![Page 104: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/104.jpg)
104Web Accessibility Workshop
Comprehensive Report
![Page 105: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/105.jpg)
105Web Accessibility Workshop
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;
![Page 106: Web accessibility workshop 2](https://reader037.fdocuments.net/reader037/viewer/2022110118/554ab48ab4c905e4668b56ac/html5/thumbnails/106.jpg)
106Web Accessibility Workshop
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