Web accessibility workshop 2


Published on

Workshop on Web Accessibility on spring semester in Tallinn University
Session 2

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Web accessibility workshop 2

    1. 1. Web Accessibility Workshop Session Two Vladimir Tomberg, PhD Tallinn University
    2. 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. 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. 4. 1. PRESENTATION OF HOMEWORK Please be prepared to present your experience! 4 Web Accessibility Workshop
    5. 5. 2. FRAMEWORK FOR ACCESSIBLE WEB (CONTINUED) Principles for Accessible UX 5 Web Accessibility Workshop
    6. 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. 7. 6. CLEAN PRESENTATION Supports Meaning 7 Web Accessibility Workshop
    8. 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. 9. Presentation of Information People can perceive and understand elements in the design 9 Web Accessibility Workshop Image source: http://www.consumerreports.org
    10. 10. Flexible Presentation Allows for User Needs & Preferences 10 Web Accessibility Workshop Source: http://www.csszengarden.com/
    11. 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. 12. Complexity VS Simplicity 12 Web Accessibility Workshop Image Source: http://habrahabr.ru
    13. 13. Example: Phone App 13 Web Accessibility Workshop Image Source: http://behance.net
    14. 14. Example: Phone App 14 Web Accessibility Workshop Image Source: http://behance.net
    15. 15. Example: Web Page 15 Web Accessibility Workshop Image Source: http://behance.net
    16. 16. Example: Web Page 16 Web Accessibility Workshop Source: http://www.brooksengland.com
    17. 17. Example: Web Page 17 Web Accessibility Workshop Source: http://www.apple.com
    18. 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. 19. Design Responsive Layouts 19 Web Accessibility Workshop
    20. 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. 3 главных компонента. flexible, grid-based layout flexible images flexible video added to CSS3 specifications 21 Web Accessibility Workshop
    22. 22. Flying Grid – One Content on Different Layout 22 Web Accessibility Workshop
    23. 23. Sample Grid 23 Web Accessibility Workshop Source: http://aaronkwhite.com
    24. 24. Popular Grid Frameworks Skeleton Twitter Bootstrap LESS 24 Web Accessibility Workshop
    25. 25. Defining Flexible Fonts body { font-size: 100% /* 16px */ } h1 { font-size: 1.5em /* 24px / 16px */ } 25 Web Accessibility Workshop
    26. 26. Scaling Fonts in Browser 26 Web Accessibility Workshop
    27. 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. 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. 29. Flexible Media 29 Web Accessibility Workshop
    30. 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. 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. 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. 33. Live Examples http://mediaqueri.es 33
    34. 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. 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
    36. 36. Recommended Reading 36 Web Accessibility Workshop
    37. 37. Adaptive VS Responsive Web Design 37 Web Accessibility Workshop
    38. 38. Structure Content First 38 Web Accessibility Workshop Picture Source http://blog.braintraffic.com
    39. 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. 40. Poorly Structured Content 40 Web Accessibility Workshop http://www.telegraaf.nl/
    41. 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. 42. User Journey Example #1 42 Web Accessibility Workshop Image Source: http://www.servicedesigntools.org
    43. 43. User Journey Example #2 43 Web Accessibility Workshop Image Source: http://mobile.bazaarvoice.com
    44. 44. Site Maps 44 Web Accessibility Workshop Image Source: http://fostermilo.com
    45. 45. Start with Mobile If you can support the mobile web, you can support anything 45 Web Accessibility Workshop
    46. 46. Mobile First 46 Web Accessibility Workshop Source http://bradfrostweb.com
    47. 47. 4.12.2014 – the day Google predicts mobile queries will reach 50% 47 Web Accessibility Workshop Source http://www.themobilewebtrends.com
    48. 48. Mobile-Oriented Design and Input Changes 48 Web Accessibility Workshop Source http://blog.cloudfour.com
    49. 49. Mobile-Oriented Design and Input Changes 49 Web Accessibility Workshop Source http://blog.cloudfour.com
    50. 50. Comfortable Touch Zones 50 Web Accessibility Workshop Source http://blog.cloudfour.com
    51. 51. Recommended Books 51 Web Accessibility Workshop
    52. 52. 7. PLAIN LANGUAGE Creates a Conversation 52 Web Accessibility Workshop
    53. 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. 54. Medicare Summary Notice 54 Web Accessibility Workshop Source: CMS.gov
    55. 55. Plain Language: Creates a Conversation People can read, understand, and use the information 55 Web Accessibility Workshop
    56. 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. 57. Support Different Reading Styles and Perception► 57 Web Accessibility Workshop
    58. 58. 8. ACCESSIBLE MEDIA Supports All Senses 58 Web Accessibility Workshop
    59. 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. 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. 61. Meaningful Alternatives for Visual Information What’s the right ALT text for this image? 61 Web Accessibility Workshop
    62. 62. Synchronized audio+text Graham Pullen, author of Design Meets Disability 62 Web Accessibility Workshop Source: http://research.microsoft.com
    63. 63. 9. UNIVERSAL USABILITY Creates Delight 63 Web Accessibility Workshop
    64. 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. 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. 66. 4. DISCUSSION 66 Web Accessibility Workshop
    67. 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. 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. 69. 5. HOW TO DESIGN ACCESSIBLE WEB APPLICATIONS? Web Accessibility for Designers by WebAIM (Web Accessibility In Mind) 69 Web Accessibility Workshop
    70. 70. Web Accessibility for Designers Guides and infographics on: http://webaim.org/resources/ designers/ Web Accessibility Workshop 70
    71. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
    94. 94. 6. WCAG REQUIREMENTS How to make content to be conformed to WCAG? 94 Web Accessibility Workshop
    95. 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. 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. 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. 98. Library Ramp Analogy 98 Web Accessibility Workshop Sourse: http://acc.nics.gov.uk
    99. 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. 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. 101. 7. WAVE TOOLBAR DEMO Semiautomatic Testing 101 Web Accessibility Workshop
    102. 102. WAVE Toolbar http://wave.webaim.org/toolbar/ 102 Web Accessibility Workshop
    103. 103. Errors, Features, Alerts 103 Web Accessibility Workshop
    104. 104. Comprehensive Report 104 Web Accessibility Workshop
    105. 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. 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