Published on March 13, 2014
Web Accessibility Workshop Session One Vladimir Tomberg, PhD Tallinn University Design for ALL 1
Using Mac Lab Login: kasutaja Password: apple 2 Web Accessibility Workshop
Introduction 3 Web Accessibility Workshop https://www.youtube.com
Course Evaluation Criteria • Work in class gives 20% of final grade; • There will be four different home works; • Fulfillment of each gives 20% of the final grade
Today Workshop 1. Target user groups – Who benefits from accessible Web design? 2. Empathy exercise: using Web with limited abilities 3. Framework for Accessible Web 4. WCAG 2.0 – preparing for testing
TARGET USER GROUPS Who benefits from accessible Web design? Design for ALL 6
What does Accessibility mean? The goal of Accessibility is that: • Users with disabilities have access to and use of information and data that is comparable to that of users without disabilities (Section 508) • Disabled users should be able to use a system In the usual way like other users, Without particular difficulties, Without help of others
Who is concerned? (1/3) • People with a physical or cognitive disability, e.g.: Blind or visually impaired Deaf or hard of hearing Mobility or dexterity impaired Reduced cognitive abilities Most disabled people became disabled as adults, it can happen to all of us.
Who is concerned? (2/3) • Elderly people often develop disabilities, e.g. Reduced vision, reduced hearing; Reduced mobility or dexterity; Reduced tactile and fine motor abilities; Reduced short-term memory; Dyspraxia (difficulties to plan a task); Dyslexia; Etc.
I Wonder what it's Like to be Dyslexic • This book aims to provide the reader with design led experience of what it feels like to struggle with reading Design for ALL 10Source: https://www.kickstarter.com
Who is concerned? (3/3) • It is individually very different, which types of disability a person develops, when it starts, and how severe the disability becomes • In most cases it is a combination of several disabilities; • The probability that a person becomes disabled raises with age
Example: UK Disability Statistics • Almost 1 in 5 people in the UK have a disability; • There are 5.1 million males with disabilities; • There are 5.8 million females with disabilities; • Only 17% of disabled people were born with impairments. The majority of disabled people acquire their impairments during their working lives 12 Web Accessibility Workshop Source: http://www.mph-uk.com
The impact of age How many people have less than “Full ability”? Source: 1996/97 Disability follow-up survey
Who is concerned? Most of us will be concerned at some point in our lives
Who else would benefit? • People with temporary disabilities (e.g., after an accident or stroke) • Users in a context causing a temporary reduction of abilities (handicapping situation), such as Noisy environment (similar to reduced hearing) Hands engaged in other tasks (similar to reduced mobility) Eyes engaged in other task (similar to reduced vision) Attention on more important task (reduced cognitive capacity) Limited hardware features of mobile devices, etc. (similar to various physical handicaps)
Who else would benefit? Accessible Web design => Design for All
Is Web accessibility relevant for disabled? (1) • Internet usage of disabled is higher than average! ”The Web is not a barrier to people with disabilities, it is the solution“ (WebAIM); • Overall, 60% of EU citizens frequently use the Internet; this means that more than 60% of disabled people (>30 Mln) actually use the Internet
• People who already use the Internet will continue to use it when becoming older, as long as it is accessible for them. • eAccessibility is important for a large, increasing number of people! Is Web accessibility relevant for disabled? (2) Frequent Internet usage 2008 Overall Female Age 16-24 Age 25-54 Age 55-74 EU 27 60% 53% 83% 63% 29%
eInclusion Policy and Legislation Worldwide These are examples; similar regulations exist in most countries. Legislation usually is based on the WCAG by W3C-WAI.
eInclusion in Europe • Initiative eEurope (2000); • Ministerial Declaration “ICT for an Inclusive Society”, Riga, 2005; • i2010-Strategy – A European information society for growth and employment (2008); • eAccessibility is a legal obligation in all European countries; • All regulations refer to “Web Content Accessibility Guidelines (WCAG)” by W3C-WAI consortium.
European Parliament urges stronger public website access law • This week (26-02-2014) European Parliament backed a move by 593 votes to 40, with 13 abstentions, to require EU member states to ensure all public websites are fully accessible, not just those in 12 categories proposed by the European Commission such as social security benefits and enrolment in higher education
Banks, Energy Providers and Public Bodies Should be Subject to Web Accessibility Rules, Vote MEPs • Just a third of the 761,000 public sector websites in the EU currently conform to "international web-accessibility standards“; • Organisations whose websites would be subject to the new rules would have one year from the introduction of the new laws to ensure that new content added to their sites complies with the new rules. They would have three years within which to adapt existing content and five years if that content is "live audio“ 28 Feb 2014 Source: http://www.out-law.com
EMPATHY EXERCISE Using Web with Limited Abilities Design for ALL 23
The First Task (5-10 min) • Write a list containing several typical Web sites you attend on every day base; • Describe couple of usual tasks that you implement on each of these Web sites (looking for weather, news, buying a bus ticket, etc.) Design for ALL 24
The Second Task (15-20 minutes) • Now I want you to throw away your mouse; • Then browse the Web doing what you usually do, and see how you get on with booking your concert (or whatever do you do) • Make short notes on your experience and be ready to share it with audience Design for ALL 25
Some Useful Shortcuts For Safari and Other Browsers http://www.shortcutworld.com/en/mac/Safari_5.html 26 Web Accessibility Workshop
FRAMEWORK FOR ACCESSIBLE WEB Principles for Accessible UX Design for ALL 27
Principles for Accessible UX as a Framework for Web Accessibility 1. People first 2. Clear purpose 3. Solid structure 4. Easy interaction 5. Helpful wayfinding 6. Clean presentation 7. Plain language 8. Accessible media 9. Universal usability Design for ALL 28http://goo.gl/Zl9bL3
1. PEOPLE FIRST Designing for Differences 29 Web Accessibility Workshop
People First When designing for differences, people are the first consideration, and sites are designed with the needs of everyone in the audience in mind Design for ALL 30
Additional Data for Persona • Ability: Information about their ability (physical, cognitive, language) and any assistive technology (AT) they use • Aptitude: Their current knowledge and ability to make inferences • Attitude: Their motivation, emotion, risk tolerance, and persistence • Assistive Technology: Any technology if used or required Design for ALL 31
Emily: I want to do everything for myself Ability: Cerebral palsy. Difficult to use hands and has some difficulty speaking clearly; uses a motorized wheel chair Aptitude: Uses the computer well, with the right input device; good at finding efficient search terms Attitude: Wants to do everything for herself; can be impatient Assistive Technology: • Communicator (AAC) with speech generator, • iPad, • power wheelchair • 24 years old • Graduated from high school and working on a college degree • Lives in a small independent living facility • Works part-time at a local community center
Jacob: The right technology lets me do anything • Ability: Blind since birth with some light perception • Aptitude: Skilled technology user • Attitude: Digital native, early adopter, persists until he gets it • Assistive Technology: Screen reader, audio note-taker, Braille display • 32 years old • College graduate, legal training courses • Shares an apartment with a friend • Paralegal, reviews cases and writes case summaries • Laptop, braille display, iPhone
My only disability is that everyone doesn't sign • Ability: Native language is ASL; can speak and read lips; uses SMS/IM, Skype, and video chat • Aptitude: Good with graphic tools, and prefers visuals to text; poor spelling makes searching more difficult • Attitude: Can be annoyed about accessibility, like lack of captions • Assistive Technology: Sign language, CART, captions, video chat • 38 years old • Art school • Graphic artist in a small ad agency • iPad, iPhone, MacBook Pro; good computer at work
2. CLEAR PURPOSE Well-Defined Goals 36 Web Accessibility Workshop
Clear purpose • Well-defined goals; • People enjoy products that are designed for the audience and guided by a defined purpose and goals • These products are recognizable by their straightforward effectiveness, dedication to users’ goals, a direct path to the task at hand, and freedom from confusing clutter or extraneous elements
38 • The clarity of the design of the OXO products hides the attention to detail that makes them work so well Example: Oxo Good Grips Image courtesy of www.phaidon.com
Clear Purpose Thinking about accessibility from the beginning — “Accessibility First” — is similar to the approach of thinking “Mobile First” to ensure that the design works as well in a screen reader as it does on a small screen 39 Web Accessibility Workshop
Three Accessibility Strategies 1. Universal (or inclusive) design—one site; 2. Equivalent use—includes alternatives; 3. Accommodation—a separate “accessible” version 40 Web Accessibility Workshop
3. SOLID STRUCTURE Built to Standards 41 Web Accessibility Workshop
Solid Structure • A solid structure depends on good coding practice. A site coded to standards, with all information written to be machine-readable, supports use of the site by different browsers or devices, including assistive technology. 42 Web Accessibility Workshop
43 • Stylesheets separate content from presentation, using code to communicate semantic meaning, such as content structure, emphasis, or function, as well as visual style; CSS Web Accessibility Workshop
Built to Standards • Web accessibility relies on the software’s ability to read and understand the content and instructions contained in web pages; • The more “meta” information you can provide, the better the user experience will be Design for ALL 44
Organize Code for Clarity and Flow • The order of the source code makes a difference to: Web browsers generally Screen readers Search engines • Content that appears “above the fold” in code will be what gets read first by the software Design for ALL 45
Organizing Code • Pages are organized so that when code is read in the order it appears in the file, it not only makes sense, but it puts the most important information first 46 Web Accessibility Workshop
Unfriendly Structure Example 47 Web Accessibility Workshop
Standards for the Web (2) • User Agent Accessibility Guidelines (UAAG) for web browsers and media players; • Authoring Tool Accessibility Guidelines (ATAG) for software that creates websites • A new WAI project, IndieUI (Independent User Interface), is working to create a device- independent way to communicate user actions, such as scrolling, to a web application Design for ALL 49
People feel confident using the design because it is stable, robust, and secure Supporting Standards in Templates A big hat tip to @AccessibleJoe and all the folks working on making WordPress more accessible, and to Sylvia Eggers, author of the accessible child theme shown here.
4. EASY INTERACTION Everything Works 51 Web Accessibility Workshop
Easy Interaction (1) Making the interaction easy for people with disabilities is an extension of making interaction easy for everyone. Interactive elements are identified clearly and are designed to be easy to use 52 Web Accessibility Workshop
Easy Interaction (2) • The site supports interaction with a keyboard, allowing assistive technology to emulate the keyboard; • This also requires that the keyboard tab order make sense, matching the visual presentation 53 Web Accessibility Workshop
Don’t Require Point-and-Click Interaction • Hover: Some devices do not support hover, such as touchscreens— hover all you want over a touchscreen, and nothing is going to happen; • Select: Using “select” to trigger actions is problematic for keyboard users; • Drag and drop: This style of interaction makes direct manipulation of objects easy, but typically requires a pointing device and dexterity 54 Web Accessibility Workshop This feature, collecting bookmarks for related items, requires a mouse to drag and drop items into the list. A simple Add button would make this more accessible
User Control • A site with easy interaction enables users to control the interface, with large enough controls. It avoids taking unexpected actions for users that they can do on their own; • Easy interaction also includes both preventing and handling errors in an accessible way 55 Web Accessibility Workshop
Images: Braille, foot pedal, magnifier, Talking Dial, Voiceover, joystick, audio, high contrast keyboard, Glenda Watson Hyatt and her iPad Everything Works People can use the product across all modes of interaction and operating with a broad range of devices.
5. HELPFUL WAYFINDING Guides Users 57 Web Accessibility Workshop
58 • In the physical world, we rely on maps, street signs, and how spaces are designed to help us get around; • With helpful wayfinding, people can navigate a site, feature, or page following self-explanatory signposts Helpful Wayfinding Web Accessibility Workshop
Create Consistent Cues for Orientation and Navigation (1) • Identify the site. (name of the site and the organization); • Title the page. ( Title appears in the title bar of the browser, in a bookmarks list, in search results, and it is the first thing announced by screen reader software); • Provide good headings. (describe the main topic of the page, as well as sections of content. The correct markup (<h1–h6>) makes it easier for people who use assistive technology to find them); 59 Web Accessibility Workshop
Create Consistent Cues for Orientation and Navigation (1) • Start with an overview. (It’s common for users to leave sites if they don’t see what they are looking for quickly); • Highlight the current location. (In the page title, by highlighting the menu item for the section, by breadcrumb navigation. • Use multiple cues (E.g., using an icon with color-coding and a strong text label) 60 Web Accessibility Workshop
Use WAI ARIA for Navigation Roles HTML5 elements and ARIA roles are complementary. Including both of them in your site provides a solid code structure and good navigation around the page 61 Web Accessibility Workshop
6. CLEAN PRESENTATION Supports Meaning 62 Web 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 63 Web Accessibility Workshop
Presentation of Information People can perceive and understand elements in the design 64 Web Accessibility Workshop Image source: http://www.consumerreports.org
Flexible Presentation Allows for User Needs & Preferences 65 Web 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 66 Web Accessibility Workshop
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 67
Design Responsive Layouts 68 Web Accessibility Workshop
7. PLAIN LANGUAGE Creates a Conversation 69 Web 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 70 Web Accessibility Workshop
Medicare Summary Notice 71 Web Accessibility Workshop Source: CMS.gov
7. Plain Language: Creates a Conversation People can read, understand, and use the information
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
Support Different Reading Styles and Perception►
8. ACCESSIBLE MEDIA Supports All Senses 75 Web Accessibility Workshop
Supports all Senses People can understand and use information contained in media, such as images, audio, video, animation, and presentations 76 Web 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 77 Web Accessibility Workshop
Meaningful Alternatives for Visual Information What’s the right ALT text for this image? 78 Web Accessibility Workshop
Synchronized audio+text Graham Pullen, author of Design Meets Disability 79 Web Accessibility Workshop Source: http://research.microsoft.com
9. UNIVERSAL USABILITY Creates Delight 80 Web 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 81 Web Accessibility Workshop
9. Universal Usability 82 Web Accessibility Workshop
Discussion Which Principles for Accessible UX are already known for you? How do you use these principles in your design works? 83 Web Accessibility Workshop
WCAG 2.0 Preparing for Testing 84 Web Accessibility Workshop
Web Content Accessibility Guidelines (WCAG) 2.0 • WCAG 2.0 defines how to make Web content more accessible to people with disabilities; • Several layers of guidance are provided including overall principles, general guidelines, testable success criteria and a rich collection of sufficient techniques, advisory techniques, and documented common failures with examples, resource links and code 85 Web Accessibility Workshop
Integrated Accessibility Guidelines • WCAG is part of an integrated suite of accessibility guidelines and specifications from the W3C WAI: Web Content Accessibility Guidelines (WCAG) for web content Authoring Tool Accessibility Guidelines (ATAG) for authoring tools, HTML editors, content management systems (CMS), blogs, wikis, etc. User Agent Accessibility Guidelines (UAAG) for Web browsers, media players, and other "user agents" Accessible Rich Internet Applications Suite (WAI-ARIA) for accessible rich Internet applications developed with Ajax and such 86 Web Accessibility Workshop
Principles • At the top are four principles (POUR) that provide the foundation for Web accessibility: Perceivable, Operable, Understandable, Robust 87 Web Accessibility Workshop
Guidelines • Guidelines are under the principles; • The 12 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities 88 Web Accessibility Workshop
Web Accessibility Workshop 89Image: http://www.projectrics.org
Success Criteria • For each guideline, testable success criteria are provided to allow WCAG 2.0 to be used; • In order to meet the needs of different groups and different situations, three levels of conformance are defined: • A (lowest), • AA, and • AAA (highest). 90 Web Accessibility Workshop
Success Criteria 91 Web Accessibility Workshop Image: http://www.michaelgaigg.com
Sufficient and Advisory Techniques • For each of the guidelines and success criteria in the WCAG 2.0 document itself, the working group has also documented a wide variety of techniques; • The techniques are informative and fall into two categories: Sufficient for meeting the success criteria; Advisory for meeting the success criteria 92 Web Accessibility Workshop
WCAG 2.0 Guidelines http://www.w3.org/TR/WCAG20/#guidelines 93 Web Accessibility Workshop
Two WCAG versions • WCAG 1.0 (1999) • WCAG 2.0 (2008) • WCAG 2.0 builds on WCAG 1.0 and incorporates what we've learned to make WCAG more useful and more effective; • Most websites that meet ("conform to") WCAG 1.0 should not require significant changes in order to meet WCAG 2.0 94 Web Accessibility Workshop
How WCAG 2.0 Differs from WCAG 1.0 • The guidelines are organized around four basic principles (POUR), which together constitute the basic philosophy of the guideline; • The guidelines themselves are under the principles; • Finally, each guideline includes a series of success criteria which, like the WCAG 1.0 checkpoints, define rules for the accessibility of Web content; • Unlike WCAG 1.0, criteria are testable. The success criteria are assigned conformance levels (A, AA, AAA), in a similar way as WCAG 1.0 checkpoints 95 Web Accessibility Workshop
TESTING SITES ON WCAG 2.0 CRITERIA 96 Web Accessibility Workshop
Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 97 Web Accessibility Workshop Adapted from http://www.w3.org/TR/WCAG-EM/
Example: Generated Site Map 98 Web Accessibility Workshop
Evaluation Tools • While Web accessibility evaluation tools can significantly reduce the time and effort to evaluate Web sites, no tool can automatically determine the accessibility of Web sites; • W3C does not endorse specific vendor products; • Web Accessibility Evaluation Tools: Overview 99 Web Accessibility Workshop
Comparison Of The Tools 100 Web Accessibility Workshop Source: http://usabilitygeek.com
Homework Assignment 1 A. Choose a Web site for testing. It could be a government Web site, as well as public sector Web site (bank, public transportation company, etc.) B. Implement steps from Conformance Evaluation Methodology WCAG-EM, like define the scope of the Web site, identify common Web pages of the Web site, select a representative sample, audit the selected sample; C. Select one or two tools link one, link two, and make testing of Selected Sample; D. Analyze and report results in your blog 101 Web Accessibility Workshop
References • A training course “Introduction to eAccessibility” by Fraunhofer FIT http://www.dfaei.org (developed in a framework of DFA@eInclusion project); • Sarah Horton , Whitney Quesenbery. A Web for Everyone: Designing Accessible User Experiences, Rosenfeld Media; 1st edition (January 16, 2014) Design for ALL 102
Workshop 1 Basics of Web Accessibility Web Content Accessibility Project Funded by BCcampus Natasha Boskic, Kirsten Bole, Nathan Hapke University of British.
Workshop Outline; Developing Web Accessibility Presentations and Training: Overview ... Using an accessible web (1 hour for people with accessibility needs)
Simon Harper, Yeliz Yesilada, Carole A. Goble: Proceedings of the 2006 International Cross-Disciplinary Workshop on Web Accessibility (W4A 2006): Building ...
Bibliographic content of Workshop on Web Accessibility 2004. ... Cross-Disciplinary Workshop on Web Accessibility, New York, NY, USA, ... , ISBN 1-58113-903-9.
Web Accessibility Training. When: January 10–11, 2017 Where: Logan, Utah Cost: $850/person ($700/person for groups of two or more) Join WebAIM's ...
This workshop provides a non-technical introduction to digital accessibility as it relates to web content and documents. Participants will gain ...
Second W3C Web and TV Workshop. ... Program and position papers posted on the workshop website. 1 ... Accessibility. Accessibility of Web and TV ...
Accessibility of Microsoft products, assistive technology, keyboard shortcuts, disability types, demos, tutorials, news, resources for educators.
Workshop from Microsoft provides information about accessibility and accessible technology to help teachers find accessibility technology options for ...