Section 508: Are You Ready for ADA Compliance Standards? #stc17

Transcription

1 Section 508: Are You Ready for ADA Compliance Standards?

2 Agenda! Who is this Earl guy?! What is Section 508?! Building compliant content! Don t forget to test!! Wrapping up! Q & A

3 Who is this Earl guy?! 20 years in the technical writing field! VP User Experience at JohnsonRauhoff! Passion for creating the best customer experience! Works with many major consumer brands (and has worked with many more):

4 Who is this Earl guy And why does he care about ADA compliance?! Good practices for consumers in general, not just those with disabilities! Many companies are completely unaware of pending requirements and their impact! Many companies are underserving a significant customer base

5 WHAT IS SECTION 508?

6 What is Section 508? Section 508 is a government standard for ensuring that websites and the content on them meet a certain threshold for accessibility.! Standard set by the U.S. Access Board (part of Department of Health and Human Services)! Part of the Americans with Disabilities Act (ADA)! EIT (Electronic and Information Technology) added as amendment in 1998 and expanded in 2001

7 What does Section 508 cover? Virtually every aspect of digital communication.! Internet and intranet sites! Supporting content, such as video, animations, and images! Computer operating systems (Windows, Mac OS, Linux, etc.) used to support these sites/systems! Chat systems, mobile applications, etc.! Hardware, including computers and mobile devices

8 Who is impacted by Section 508? Section 508 was originally designed to ensure ADA compliance in organizations supported by federal tax dollars, including:! Federal agencies! Any institution that receives federal funding, including:! Government agencies! Federally funded nonprofits! Public higher education institutions! Public schools K 12

9 Who is impacted by Section 508? That landscape is changing:! Revised ADA guidelines with increased focus on video content take effect January 18, 2018! ADA applies to businesses with 15 or more employees! Private sector companies increasingly impacted:! Retailers! Manufacturers! Service providers

10 Who is impacted by Section 508? The Department of Justice s (DoJ) policy on website accessibility states that Title III of the ADA addresses businesses that are places of public accommodation, and as a result, the effective communication rule applies to entities that use the internet as a means of communication for their goods or services because they must be prepared to present these communications through an accessible medium.

11 Why does this matter? According to the 2010 census:! Approximately 56.7 million people in the U.S. have some form of disability! 18.7% of the population! Half of disabilities are considered severe! Represent upwards of $200 billion in discretionary spending

12 A look at the numbers 8.1 MILLION Have difficulty seeing 2.0 MILLION Are blind or unable to see 2010 US Census data, issued July 25, 2012

13 A look at the numbers 7.6 MILLION Have difficulty hearing 1.1 MILLION Have severe hearing loss 5.6 MILLION Use hearing aids 2010 US Census data, issued July 25, 2012

14 Trends Additional 2015 data is even more impactful:! 32.4% (74.8 million) of American adults 18 and over have at least one basic action difficulty or complex activity limitation! 60.5% (26.1 million) of American adults 65 and over have at least one basic action difficulty or complex activity limitation This second number is expected to grow significantly as our population ages. Source:

15 Common disabilities addressed by Section 508! Visual impairment (blindness, macular degeneration, color blindness, etc.)! Hearing impairment (limited or complete hearing loss)! Mobility issues (paralysis, fine motor skills impairment, amputees, etc.)! Cognitive function! Other disabilities, such as epilepsy

16 What s the impact for private companies? Already, numerous retail companies have been sued over digital accessibility:! Subscription services such as Netflix! Retailers/sales sites such as Amazon, CVS, ebay, Staples, Target, Ticketmaster, and others This number is expected to continue to grow as the marketplace changes.

17 What s the impact for private companies? Digital accessibility impacts many fronts for private companies:! General information, from company overviews to product/ service details, including support content like PDF or video! E-commerce pages, such as check-out pages! HR/hiring pages and websites! Employee portals and intranets

18 BUILDING COMPLIANT CONTENT

19 What is compliant content? ADA-compliant content meets two key criteria:! Accessible it must be in a format that allows use by users with a wide range of potential disabilities, such as vision, hearing, and/or mobility! Adaptable it must be presented in such a way that users can easily navigate on a wide range of devices

20 WCAG 2.0 to the rescue! If a website conforms to the World Wide Web Consortium s Web Content Accessibility Guidelines 2.0 AA standards, it will be ADA-compliant. WCAG 2.0 recognizes four key factors for accessibility:! Perceivable! Operable! Understandable! Robust

21 Translating WCAG 2.0 to Section 508 Different terminology with the same underlying concept:! Perceivable = Accessible: content can be easily consumed by users either directly or through the use of assistive technologies! Operable + Robust = Adaptable: content is easy to navigate and can be accessed using a wide range of different devices and inputs! Understandable: content is written and organized in a clear and logical way

22 What is perceivable content?! Perceivable content does not exclude a particular category of users due to how it is presented! Perceivable is defined by the type of content, such as text, images, video, and audio (more about this in a moment!)! Relevant content is tagged! Irrelevant (or decorative) content is NOT tagged

23 What is perceivable content? Some guidelines for visual content:! Text is scalable with easy-to-read fonts! Content meets minimum contrast requirements! Avoids color combinations problematic for those with color blindness! Content does not rely solely on color to convey information! All images include alt-text readable by assistive technology! Form fields include text descriptions! Tables have column and row headers identified using <th> tag! Video includes a descriptive audio track

24 Let s talk content: What is perceivable content? BAD BAD BAD THIS IS GOOD CONTRAST

25 Let s talk content: What is perceivable content? Some fonts are easy to read. ALL CAPS NOT SO MUCH AND SOME FONTS SHOULD BE AVOIDED LIKE THE PLAGUE

26 Let s talk content: What is perceivable content? Avoid low-contrast colors

27 Let s talk content: What is perceivable content? Do not rely solely on color to convey information

28 Let s talk content: What is perceivable content? Form fields include text descriptors

29 Let s talk content: What is perceivable content? Alternate text readable by assistive technologies

30 What is perceivable content? Audio content is just as important:! Video should include closed captioning or subtitles! Audio content should include a text transcript! Avoid signal tones without an additional form of communication such as a light or vibration

31 What is perceivable content? Other disabilities need to be accounted for, as well:! Provide alternative options for time-based interactions! Avoid flashing/blinking content or text that can trigger seizures (2 55 Hz)! Allow for alternative ways to display content, such as simplified layouts, without losing content or structure! Minimize distractions

32 Adaptability Adaptability implies designs that are both operable and robust in WCAG 2.0 terminology and are more about operation than content. Image courtesy of AbleData.com

33 Adaptability Operable content focuses on navigation and interaction:! Navigation is simple and well-defined, including the ability to skip forward or backward through content if needed! Page content, including alt-text, flows logically and sequentially when using accessibility tools! Users have the ability to review and confirm information before submitting and to correct errors if necessary

34 Adaptability! Users can navigate content through alternate input methods such as keyboard only, or with a stylus or other tools! Links and input elements are well-identified and large enough for easy interaction at least 9 mm! Sufficient time is provided for user interaction

35 Adaptability Robust content functions across platforms and improves error avoidance:! ADA-compliant websites and content should not require proprietary software or hardware to access them! Accessible on computers, tablets, and mobile devices! Windows, Mac OS, and Android all include accessibility tools! No errors due to incomplete tags

36 One last thing from WCAG 2.0: Understandable Making content understandable should feel natural for technical writers:! Text is readable and easy to understand, avoiding jargon and unnecessary technical terminology! Foreign languages are clearly identified as such! Page appearance and operation should be predictable and logical

37 DON T FORGET TO TEST!

38 Testing is key Three levels of WCAG 2.0 conformance A, AA, and AAA:! ADA-compliant websites meet level A and part of AA! Testing is important to make sure all content is compliant and operates as expected! Testing should be done across multiple devices and platforms

39 Multiple testing options There are a number of ways to test for ADA compliance:! Internal testing with a wide range of available testing tools and resources! Working with nonprofit and educational organizations! Numerous companies provide consulting, testing, and corrective action services

40 Testing tools and resources: WebAIM.org (Web Accessibility in Mind)! Run by Utah State University s Center for Persons with Disabilities! Offers a wide range of information, including testing tools, checklists, simulators, and more! Also provides training, consulting, certification, and evaluation services! Very comprehensive website

41 Testing tools and resources: WAVE WAVE (Web Accessibility Evaluation Tool) extension for Chrome and Firefox from WebAIM! Free web-based tool to evaluate and provide feedback on a web page s accessibility! Flags potential errors such as missing tags, style and structure issues, image contrast problems, and more! Also available by entering the URL you wish to test at

42 Testing tools and resources: WAVE

43 Testing tools and resources: Color contrast checker Evaluates colors to ensure minimum contrast requirements are met! Tests small and large text for WCAG 2.0 AA and AAA conformance

44 Testing tools and resources: ColorHexa Free web-based tool to evaluate colors for use on websites! Compare colors side by side to find possible contrast issues! Includes color blindness simulator

45 Testing tools and resources: ColorHexa

46 Testing tools and resources: Accessibility Tools! Accessibility tools are integrated into Windows, Mac OS, and Android operating systems! Integrated tools within Adobe Acrobat! Many other programs, such as Microsoft Word, allow full access to accessibility tools in operating systems

47 Testing tools and resources: Real-world testing To simulate operating with a disability, have internal users try:! Navigating with keyboard only or with only their off hand! Zooming in to test page navigation! Using text reading tools to ensure content is read in the proper sequence and nothing is missed! Viewing black-and-white printouts to simulate color blindness

48 Testing tools and resources: Real-world testing Enlist testers with different disabilities through a variety of sources:! Consulting companies! Nonprofit and university programs! Internal staff or customer base

49 Testing tools and resources: Checklist Complete a checklist for each web page to ensure all bases are covered. A Quick ADA Checklist Every image, video file, audio file, plug-in, etc. has an alt tag Complex graphics are accompanied by detailed text descriptions The alt descriptions describe the purpose of the objects If an image is also used as a link, make sure the alt tag describes the graphic and the link destination Decorative graphics with no other function have empty alt descriptions (alt= ) Add captions to videos Add audio descriptions Create a text transcript Provide a link to the video rather than embedding it into web pages Add a link to the media player download Add an additional link to the text transcript The page should provide alternative links to the Image Map The <area> tags must contain an alt attribute Data tables have the column and row headers appropriately identified (using the <th> tag) Tables used strictly for layout purposes do NOT have header rows or columns Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes) Make sure the page does not contain repeatedly flashing images Check to make sure the page does not contain a strobe effect A link is provided to a disability-accessible page where the plug-in can be downloaded All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided When form controls are text input fields use the LABEL element When text is not available, use the title attribute Include any special instructions within field labels Make sure that form fields are in a logical tab order Include a Skip Navigation button to help those using text readers (Courtesy U.S. Department of Health and Human Services)

50 WRAPPING UP

51 Some final thoughts Official ADA requirements for PRIVATE companies are still being finalized, but are expected by early 2018.! Being proactive now reduces scrambling later! For many companies, it s good business sense! Reduces risk of litigation! Represents best practices for usability and communication

52 Resources Below are some great resources for learning more about Section 508, ADA Compliance, and WCAG 2.0:!

53 Q & A

54 Contact Earl Peters VP of User Experience JohnsonRauhoff Tel:

55 Every image, video file, audio file, plug-in, etc. has an alt tag Complex graphics are accompanied by detailed text descriptions The alt descriptions describe the purpose of the objects If an image is also used as a link, make sure the alt tag describes the graphic and the link destination Decorative graphics with no other function have empty alt descriptions (alt= ) Add captions to videos Add audio descriptions Create a text transcript Provide a link to the video rather than embedding it into web pages Add a link to the media player download Add an additional link to the text transcript The page should provide alternative links to the Image Map The <area> tags must contain an alt attribute A Quick ADA Checklist Data tables have the column and row headers appropriately identified (using the <th> tag) Tables used strictly for layout purposes do NOT have header rows or columns Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes) Make sure the page does not contain repeatedly flashing images Check to make sure the page does not contain a strobe effect A link is provided to a disability-accessible page where the plug-in can be downloaded All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided When form controls are text input fields use the LABEL element When text is not available, use the title attribute Include any special instructions within field labels Make sure that form fields are in a logical tab order Include a Skip Navigation button to help those using text readers (Courtesy U.S. Department of Health and Human Services)