Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Common Accessibility Mistakes (and how to avoid them) Beth Crutchfield, VP of Policy and Program Services Agenda • Common Planning Mistakes • Common Design Mistakes • Common Coding and UX Mistakes • Summary Planning Mistakes Planning Mistakes - Overview Common Mistake: Failure to identify accessibility requirements prior to development Planning Mistakes - Overview (cont.) How to avoid: ▪Clear direction from client regarding requirements ▪Review the selected requirements and determine how they will impact your project ▪Add accessibility in at the beginning of the planning process Planning Mistakes – Technology Issues Selecting a technology without verifying its support for accessibility standards Planning Mistakes – Technology Issues (cont.) How to avoid: ▪Understand what it’s going to take to meet your accessibility requirements using the development technology you have selected Design Mistakes Design Mistakes – Design Elements Common Mistake: Selecting design elements that limit accessibility ▪Color and contrast ▪Alternative text ▪Icon fonts Design Mistakes – Color Contrast Common Mistake: Providing insufficient color contrast for text and images of text ▪Text has a luminosity contrast ratio of 1.92:1 ▪ Fails AA and AAA requirements for small and large text Design Mistakes – Color as the Sole Method Common Mistake: Using color as the sole method to identify selection or meaning of an element Using color to demonstrate selection of page tabs Design Mistakes – Shape and Location Common Mistake: Using shape and location to convey meaning Food Pyramid Implicit List Structure Organization Chart John Smith Bob Garcia Stan Johnson Morgan Trekker Tom Stein Jennifer Jones Design Mistakes – Alternative Text #1 Common Mistake: Displaying images with missing alternative text <img class=“dog” src=“dog1234_dog_dog.png”> The image is missing alternative text Design Mistakes – Alternative Text #2 Common Mistake: Displaying images with meaningless alternative text <img class=“dog” src=“dog.png alt=“image of dog”> The image contains alternative text, however, the alternative text does not convey the meaning of the image and provides unnecessary information Design Mistakes – Alternative Text #3 Common Mistake: Displaying decorative images with a missing alt attribute <img class=“decorative” src=“spacer.gif”> Provide a null alt attribute or alt=“” for decorative images Design Mistakes – Images of text Common Mistake: Using images of text <img type=“image” name=“submitbutton” alt=“submit” src=“submit.png”> <button class=“submit”>Submit</button> (Style with CSS) Coding Mistakes Coding Mistakes – Unusable Forms Overview Common Mistake: Creating unusable forms ▪ Lack of semantic grouping for related form elements ▪ Lack of proper and explicit labels ▪ Mishandling errors Coding Mistakes – Fieldset and Legend Common Mistake: Lack of fieldset and legend elements for groups of form controls ▪ Grouped elements require a fieldset and legend element ▪ The legend and the label for each form within the fieldset will be rendered by the screen reader Coding Mistakes – Form Errors Common Mistake: Mishandling form errors ▪Error at the bottom of the form after submit ▪Programmatic focus does not move to the form error Coding Mistakes – Form Labels Common Mistake: Using placeholder text as the label for a form field Placeholder text in place of label for all form fields Coding Mistakes – Form Labels (cont.) Common Mistake: Improper association of label and input field <label>First Name<span>*</span></label> <input type=“text”…> No association between label and text input field Coding Mistakes – Forms (Summary) How to avoid: ▪Use visible label text ▪Provide support for groups of form controls ▪Communicate constraints: required, character limit ▪Give the user help when submission fails: what, where, how Coding Mistakes – Headings Common Mistake: Incorrect use of Headings Heading Fails Heading Wins Coding Mistakes – Headings (Summary) How to Avoid: ▪Use proper heading structure (h1 – h6) ▪Avoid implicit headings ▪Avoid unnecessary headings <h1>An inside look at the new SpaceBear 8™</h1> <h2>Cotton Fur</h2> <p>paragraph about cotton fur</p> <h2>Sapphire Eyes</h2> <p>paragraph sapphire eyes</p> <h2>Synthetic Felt Paws</h2> <p>paragraph synthetic felt paws</p> W3 Page Structure Example UX Mistakes UX Mistakes – Visible Focus Common Mistake: Removing visual indication of keyboard focus from active elements ▪ Keyboard only users as well as users with low vision rely on visual focus to identify current location ▪ Users without disabilities may use the keyboard to navigate through active elements UX Mistakes – Visible Focus (Summary) How to Avoid: ▪Do not use outline:none to remove default outline ▪Ensure sufficient color contrast is provided for visual focus outline UX Mistakes – Keyboard Access and Focus Common Mistake: Keyboard focus and keyboard trap ▪ When users are shifted to a form field without initiating the focus change, users of AT can become confused and disoriented ▪ If a user cannot move back to the previous form using the keyboard, keyboard only users will not be able to efficiently interact with the controls UX Mistakes – Keyboard Access and Focus (cont.) How to Avoid: ▪Use tabindex and javascript .focus() method ▪Ensure focus moves appropriately (shift and shift+tab) ▪Use html elements that natively receive keyboard focus Questions? Thank You Contact Us Beth Crutchfield, VP of Policy and Program Services beth.crutchfield@ssbbartgro up.com Follow Us @SSBBARTGroup linkedin.com/company/ SSB-BART-Group facebook.com/ SSBBARTGroup SSBBARTGroup.com/blog About SSB BART Group • • • • • • Unmatched Experience Focus on Accessibility Solutions That Manage Risk Real-World Strategy Organizational Strength and Continuity Dynamic, Forward-Thinking Intelligence • • • • • • Fourteen hundred organizations (1445) Fifteen hundred individual accessibility best practices (1595) Twenty-two core technology platforms (22) Fifty-five thousand audits (55,930) One hundred fifty million accessibility violations (152,351,725) Three hundred sixty-six thousand human validated accessibility violations (366,096) Design Mistakes (Appendix) Design Mistakes – Icon Fonts Common Mistake: Using icon fonts without an accessible label <i class=“font-button”>i</i> Visually hiding content .hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} 1.<i class=“font-button”>i<span class=“hidden”>Info</span></i> 2.<i class=“font-button”>i Info</i> 3.<i class=“font-button aria-hidden=“true” aria-label=“Info”>i</i> Design Mistakes – Complex Images Common Mistake: Displaying complex images that do not provide a text alternative • • Text alternative is not provided for the complex image Screen reader users as well as some users with cognitive disabilities may not be able to fully interact with and understand the image Design Mistakes – Background Images Common Mistake: Providing meaningful background images with a missing text equivalent Colors Enabled Colors Disabled High Contrast Mode Enabled Design Mistakes – Images of Text (Exceptions) Original Documents Photograph that happens to have text in it, but the main purpose is to show the surrounding content Logo Design Mistakes – Design Elements (Summary) How to avoid: ▪Select a UI that supports users with a wide range of abilities ▪ Provide text alternatives for images and icon fonts that convey meaning ▪ Provide meaningful alternative text for images ▪ Provide text alternatives for complex images ▪ Provide sufficient contrast for text and images of text Coding Mistakes (Appendix) Coding Mistakes – Tables (Summary) How to avoid: ▪Data tables should only be used to present tabular data ▪ Use th, scope, id & headers ▪Layout tables must not contain data table elements or attributes ▪ Use role=presentation Coding Mistakes – Web Controls Overview Common Mistake: using controls that do not support AT ▪ Simulated controls ▪ Device-dependent event handlers ▪ Keyboard access Mozilla Developer Network Example Widget Coding Solution – Web Controls Common Mistake: Failure to provide accessibility information such as name, state, role, and value of an element Coding Solution – Web Controls (cont.) Use ARIA to provide missing accessibly information <!-- Now *these* are Tabs! --> <!-- We've added role attributes to describe the tab list and each tab. --> <ol role="tablist"> <li id="ch1Tab" role="tab"> <a href="#ch1Panel">Chapter 1 active</a> </li> <li id="ch2Tab" role="tab"> <a href="#ch2Panel">Chapter 2</a> </li> <li id="quizTab" role="tab"> <a href="#quizPanel">Quiz</a> </li> </ol> <div> <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --> <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div> </div> Coding Mistake – Web Controls Common Mistake: Providing controls that use device-dependent event handlers ▪ All functionality must be actionable regardless of the input method used ▪ This requirement is necessary to ensure that people who are blind, people with low vision, and people with dexterity impairments who do not use the mouse can access all <div onclick="alert('This is not functionality keyboard accessible')">Non-standard link </div> Coding Mistakes – Web Controls (Summary) How to avoid: ▪ Ensure that web controls have the Name, Role and State to correctly identify them to assistive technology ▪ Ensure that web controls provide the functionality and user interactive experience the user is expecting from the control ▪ Use non device-dependent event handlers Event Handler Keyboard Alternative OnClick OnKeyPress OnMouseDown OnKeyDown OnMouseUp OnKeyUp OnMouseOver OnFocus OnMouseOut OnBlur Coding Mistake – Dialog Boxes Improper implementation of dialog boxes • Ensure dialog boxes receive focus • Ensure focus remains within the dialog • Ensure focus returns properly when the dialog is closed Coding Mistake – Dialog Boxes (Focus) Common Mistake: Failure to provide keyboard focus to the dialog when the dialog is displayed • When the dialog is activated, focus must move appropriately to the first content element in the simulated dialog or to the dialog as a whole • Use tabindex=“-1” on the div tag that contains the dialog • Use javascript focus() method to set focus on the content as a whole Coding Mistake – Dialog Boxes (Hidden Content) Common Mistake: Providing focus to hidden content outside of the dialog content • • Keyboard only users or screen reader users may be able to access content that is not active with the mouse but actionable from the keyboard Users of the keyboard may become confused as the visual and programmatic focus is no longer in the dialog and the user is able to interact with inactive elements. Coding Mistake – Dialog Boxes (Return Focus) Common Mistake: Failure to return focus to the most appropriate location when the dialog is closed • Focus must return to the most appropriate location when the dialog is closed • Use Javascript focus() function after removing the dialog from display Coding Mistakes – Attribute Misuse Common Mistake: Incorrect use of accessibility attributes ▪ Combining attributes ▪ alt ▪ title ▪ aria-label ▪ aria-labelledby ▪ Redundant < Accessible <label for=fName>First Name:</label><input type=text id=fName alt=“First Name” arialabel=”First Name”…> <a href=“something” title=“Home”>Home</a> Coding Mistakes – Tables Overview Improper data table structure ▪Screen reader users rely on proper data table structure when reading through tabular information ▪Screen reader users navigate through a table using table reading commands Coding Mistakes – Layout Tables Common Mistake: Using a data table to layout a form Coding Mistakes – Data Tables Common Mistake: Lack of association between table headings and data cells Coding Mistakes – Skip Link ▪Common Mistake: Failure to provide a visible mechanism for skipping past repetitive navigation links The skip to main content link provides a mechanism for screen reader users and sighted keyboard-only users to navigate past repetitive links Coding Mistakes – Language (cont.) Common Mistake: Failing to identify changes in natural language Coding Mistakes – Language (demo) Screen Reader Language Support Demo Coding Mistakes – Language (Summary) How to Avoid: ▪Set the language of the document in the HTML ▪When changes in natural language occur, identify changes inline UX Mistakes (Appendix) UX Mistakes – Animation Animation Demo Should I use a Carousel W3C Carousel Tutorial UX Mistakes – Multimedia Common Mistake: Providing multimedia without a synchronized text alternative and audio description ▪Multimedia requires synchronized captioning for users who are hearing impaired as well as audio description for users who are blind or visually impaired Frozen Trailer with Audio Description UX Mistakes – Synchronized Multimedia (Summary) How to Avoid: ▪Provide synchronized audio and text equivalents for multimedia (through audio description and closed captioning) Summary Planning ▪ Identify the standard(s) for your team and/or confirm requirements for the project (Section 508, WCAG 2.0, CVAA. Etc.) ▪ Investigate development framework’s support for accessibility your standard. ▪ Design: ▪ Provide text alternatives for non-text elements ▪ Provide sufficient color contrast for text and images of text Coding and UX ▪ Use the right attribute or approach ▪ Provide keyboard access for all active elements ▪ Ensure focus is provided appropriately ▪ Ensure form fields are coded correctly using appropriate labels ▪ Test with users, via code review, use automated testing tools, and/or with assistive technology Agenda • Big Picture Stuff • Laws, Regulations & Standards • Accessibility Technology Big Picture Stuff People are getting older …every day in fact • • • • Global population growth is declining Life expectancy is growing The big opportunity for accessibility – a graying population – 7% of the global population is 65 and older in 2005 – 16% of the global population is 65 and older in 2050 – Tripled since 1950, will triple again by 2050 – Developed Countries • 15% of the population in 2012 • 26% of the population by 2050 That population is increasingly digital Pretty pictures pulled from Mary Meeker’s 2016 Internet Trends Talk Population data from Graying of the Global Population – Stanford Center of Longevity Graying Population Accessibility Needs ▪Not likely to identify as disabled ▪May use assistive technologies if packaged in a clever fashion ▪Need and want to (and maybe have to?) be productive longer The Mobile Market You know it’s big, but it’s REALLY big ▪ Mobile ▪ 1995 – 80M Mobile Phone Users ▪ 1% ▪ use is exploding of population 2014 – 5.2B Mobile Phones Users ▪ 73% of population ▪ 97 subscriptions per 100 people in the global population ▪ Rich countries often over 100 per 100 people ▪ Mobile data and video traffic growing strongly ▪ Time spent on mobile devices > time spent on desktop for digital media Smartphones and Access ▪ Smartphone growth is strong, slowing ▪ 2.5B smartphone users ▪ Up 21% YoY (down 10%) ▪ Smartphone use growing rapidly in Asia Pacific, emerging markets ▪ Smartphone is the default “Assistive Technology” platform for emerging markets ▪ Smartphone are still expensive as a % of per capita income The Mobile Market And what is it like for people with disabilities? • Desktop still primary means of access for people with disabilities – Opportunity • • Mobile reaching parity of use in terms of penetration and use iOS is dominant platform (70%) but Android growing in use (21%) – General market share Android (83%) and iOS (14%) – Opportunity • Data pulled from WebAIM Screen Reader User Survey #6 http://webaim.org/projects/screenreadersurvey6/ Communication is Key ▪ Mobile is the dominant platform for communication ▪ Communication uses are driving onboarding to mobile platforms ▪ Communication uses required to be accessible under FCC requirements in US, similar requirements globally Laws, Regulations & Standards Section 508 Refresh - Timing Timing to Final Rule ▪ NPRM and comment period complete in 2015 ▪ Good odds for published regulation in 2016 ▪ U.S. Access Board staff working on preamble currently ▪ Board approves the draft regulation (September 11 – 13 2016) ▪ Final regulation and cost analysis goes to OMB ▪ Submission Status ▪ OMB reviews and approves rule and cost analysis ▪ 90 days by executive order ▪ As long as they want by practical reality ▪ Final rule published ▪ Board saying October - call it November to make it easy Section 508 Refresh - Application Application After Final Rule ▪ Once final rule published, application follows ▪ Significant rules effective 60 days after pub in Federal Register (FR) (estimated January 2017) ▪ Complaints can be filled under 508 rules 6 mos after rules take effect (estimated May/June 2017) ▪ Conformance may vary ▪ No central enforcement or policing ▪ Each federal department/agency must revise their procurement policies and directives ▪ Matches 6 month complaint window; “Effective date” 6 months after publication in FR Americans with Disabilities Act Enforcement Environment ▪ Public (Title II) and private (Title III) sector orgs continues to see active litigation under ADA, related state statutes DoJ continues to actively pursuing web-related litigation ▪ Advocacy groups actively using litigation to accomplish access ▪ ADA focused attorneys now actively pursuing web-related litigation ▪ ▪ We expect accelerated litigation activity in this area ▪ Tracking standards continue to be WCAG 2.0 A and AA THIS IS A MATTER OF LITIGATION NOT REGULATION! ▪ Functional use by people with disabilities remains key issue ▪ Settlement language varies and WCAG 2.0 carve outs can drastically impact cost ▪ Check out our ADA Lessons Learned Blog and Webinar Series for more information on this ▪ Americans with Disabilities Act Regulatory Environment ▪ ▪ ▪ ▪ Title II – RIN 1190-AA65 ▪ Currently in SANPRM ▪ Please comment! ▪ Target standards: WCAG 2.0 AA ▪ Compliance Timeline: Two Years ▪ Lots of other items ▪ July 2017 NPRM date Title III – RIN 1190-AA61 ▪ Moved to a long term action ▪ No actions expected before fiscal 2018 We expect regulations in effect only in the distant future ▪ Title II (5+ years) ▪ Title III (9+ years) ▪ Administration risk with 2016 election We expect legal risk management (versus regulatory conformance) will drive accessibility for foreseeable future Americans with Disabilities Act Title II SANPRM ▪ DoJ continues to view (and enforce) Title II as applying to web sites ▪ WCAG 2.0 AA is the likely standard “the Department believes that Level AA conformance is the most appropriate standard.” (81 FR 28663). ▪ Rough safe harbor for site changes ▪ ▪ Partial compliance still required if undue burden is relevant ▪ Mobile application coverage open for comment ▪ Economic and regulatory impact analysis clearly a challenge Americans with Disabilities Act Title II SANPRM Themes ▪ What ▪ “The Department is generally considering including within the scope of its proposed rule all Web content public entities make available to the public on their Web sites and Web pages, regardless of whether such Web content is viewed on desktop computers, notebook computers, smart phones, or other mobile devices.” (81 FR 28662) ▪ DoJ ▪ would be covered? takes a dim view of alternatives for providing access Accessible alternative means for obtaining access to services, programs, and activities offered on Web sites, such as a staffed telephone line, would need to afford individuals with disabilities equivalent access to such Web-based information and services (i.e., 24 hours a day/7 days a week). As indicated in the 2003 guidance, the Department questions whether alternative means would be likely to provide an equal degree of access. As Web sites have become more interconnected, dynamic, and content heavy, it has become more difficult, if not impossible, for public entities to replicate by alternative means the services, programs, and activities offered on the Web. (81 FR 28661) Americans with Disabilities Act Title II SANPRM Themes • Timing? – “The Department is considering a two-year implementation timeframe for most public entities in an effort to balance the importance of accessibility for individuals with disabilities with the resource challenges faced by public entities.” (81 FR 28665) • Exceptions? – “The Department is currently of the view that some exceptions to any Web access standards may be warranted and should therefore be part of any Department rulemaking. At this juncture, the Department is considering a number of categories of Web content for potential exceptions: (1) Archived Web content; (2) certain preexisting conventional electronic documents; (3) third-party Web content linked from a public entity’s Web site; and (4) certain Web content posted by third parties on a public entity’s Web site” (81 FR 28668) Accessibility Technology Mobile Dominance AT Environment ▪ Desktop Platforms ▪ Mostly costed assistive technology - some FOSS and some bundled AT ▪ Accessibility supported via apps / sites or AT scripting ▪ Mobile ▪ Free platforms assistive technology ▪ Generally installed and configured as part of core OS ▪ Accessibility must be supported directly via apps / sites Mobile Dominance Platform of Choice for Access Key Question: Are mobile access solutions inherently more accessible than desktop solutions? • • • • Accessibility and assistive technology baked into OS releases Mobile platforms provide cheaper access to assistive technology Mobile apps and sites tend to be simplified and streamlined UIs App developer understanding and actual application support low but gaining… …but how is that really different than desktop web and application development? Voice Control Going Mainstream ▪ Speaker independent voice control really works ▪ People are really using it In 2013 30% of people used smartphone voice assistant ▪ In 2015 65% of people used smartphone voice assistant ▪ Google Voice search queries up 35x since 2008 ▪ 20% of searches on mobile phones are voice ▪ ▪ Businesses are embracing it Alexa skills – 14 in September 2015 ▪ Alexa skills – 950 in May 2015 ▪ Voice Control (cont.) Opportunity • • • • • Voice control and audio interfaces for many applications – But still a fraction of what it will be Voice enabled personal assistants are one front end – Siri, Google Now, Cortana Voice enabled devices are another front end – Amazon Echo – a good example of where this is going Generally redundant app interfaces We see this as a big opportunity The Rise of Free Costed vs. Free Assistive Technologies • • Increasing viability of open source and free assistive technologies – Of the top three used screen readers one is open source (NVDA) and one is free (VoiceOver®) – NVDA and VoiceOver® showing the strongest numbers in terms of use growth Costed ATs still primary mode of access in professional environments and for heavy use – Don’t see this changing anytime soon Internet of Things • “Always on” smart devices controlled via IP • Users do not expect access through primary devices alone – Access through secondary Bluetooth app control – Mobile apps much, much, much easier to make accessible than native devices • Going forward view: – We see secondary routes of accessible control for hardware as a norm – Accessibility concerns aligning with broader demographic design considerations and regulatory environment – Likely that a central home hub will help normalize access for connected devices Multi-device Access Solutions • Accessible App + Inaccessible Hardware = Access? – Multi-device solutions are effective, easy way to address accessibility in way that aligns with mainstream use – Leverages access at logical points – Practically supports functional use – A general trend we are happy to see – Effectively supports broader modal use requirements • Multi-device workflows becoming commonplace – OS X Yosemite - Handoff - full framework for crossdevice interaction – Right device for the task – Apple environment provides the most fertile ground for seeing how this impacts accessibility Multi-device Access Solutions (cont.) • Generational pressure for this – Gen X = One Screen – Millennials = Two Screens – Gen Z = Five Screens Other Technologies to Watch Round One • Responsive Web Design continues as a dominant theme – Functionality works across multiple devices – Mobile profile often more accessible than desktop – Test, test, test! • Frameworks a primary coding approach – – – – – Every framework has unique accessibility issues Support is improving but still limited Framework accessibility issues often very difficult to fix Proceed with caution Test, test, test! Other Technologies to Watch (cont.) Round One (cont.) • Computer vision systems getting really good – Microsoft Cognitive Services – Facebook Automatic Alternative Text – Aligns with an increasingly image centric communication paradigm • Touch interfaces are a dominant focus going forward – Keyboard access no longer guarantees a sufficient accessible input method – Compelling alternatives to touch are needed – Standardized alternatives to touch are needed Other Technologies to Watch (cont.) Round Two • Gaming Access – – – – • Accessibility of gaming systems and ACS features of games Incremental improvements now, more with extended software waiver expiration Next gen systems and upgrade likely to have bigger impact Voice and multi-device access solutions Electronic Document Access – Significant focal point for the Section 508 regulations – Need for materially better tools for generating accessible e-documents – Big problem SSB is focused on • • Self-driving cars – huge impact on ability to live and commute independently Custom physical AT - assistive tools and prosthetics created with with 3D printers Thank You Contact Us Follow Us Beth Crutchfield @SSBBARTGroup VP of Policy and Program Services [email protected] linkedin.com/company/ SSB-BART-Group facebook.com/ SSBBARTGroup SSBBARTGroup.com/blog [email protected] | www.ssbbartgroup.com | (800) 889-9659 About SSB BART Group • • • • • Unmatched Experience Focus on Accessibility Solutions That Manage Risk Real-World Strategy Organizational Strength and Continuity • Dynamic, Forward-Thinking Intelligence • Fourteen hundred organizations (1445) • Fifteen hundred individual accessibility best practices (1595) • Twenty-two core technology platforms (22) • Fifty-five thousand audits (55,930) • One hundred fifty million accessibility violations (152,351,725) • Three hundred sixty-six thousand human validated accessibility violations (366,096)