Making Content Accessible

1. Making Content Accessible Introduction to Accessibility

2. Introduction • Section 508 of the Rehabilitation Act, as amended in 1998 - requires that when Federal agencies develop, use, maintain, or procure (purchase) electronic and information technology (EIT), they shall ensure that the electronic and information technology allows Federal employees with disabilities and members of the public with disabilities to have access to and use of information and data that is comparable to the access to and use of data by Federal employees and members of the public who are not individuals with disabilities. • This law was updated in January 2018 to include all information and communication technology (ICT).

3. Why Section 508 Section 508 is about doing the right thing to provide equal access to information technology for Federal employees and members of the public. • Example: A blind employee relies on assistive technology, as well as accessible web applications to do his job. • Service Disabled Veterans who are entering the Federal workforce in record numbers by providing job opportunities with accessible environments • Persons with disabilities who work for or are seeking employment with the Federal government by providing an accessible workplace • Members of the public with disabilities who need to access information.

4. When Should We Consider Accessibility • Before you Buy (it’s a procurement law) • Development • Design • Build • Test • Production

5. What Needs to be Accessible • Hardware • Software • Web pages • Word documents • Excel spreadsheets • PowerPoint presentations • College courses

6. What Does Not Need to be Accessible • National Security systems • If an undue burden will exist (cost a lot to update/replace, for example) • If it will cause a fundamental alteration to a product • Legacy ICT (aka “Safe Harbor”, accessible prior to 01/2018) • ICT in Maintenance & Monitoring Spaces • Undue Burden or Fundamental Alteration In most cases, if possible, an Alternate Means should be sought/provided

7. Lawsuits Here is a list of companies that have been sued for not making their websites accessible: • Target • Winn-Dixie • State and Federal Governments • Colleges and Universities • Credit Unions and Banks • Hospitals

8. Accessibility Tools ACPG Accessibility Series

9. Microsoft Word, Excel and PowerPoint • Some Microsoft applications have a built-in accessibility checker that can be accessed by going to the File – menu, and when you select the Check for Issues button and choose Check Accessibility, you will be shown a list of possible errors within your document.

10. Microsoft Word, Excel and PowerPoint (2) The accessibility checker results are shown on the right.

11. Adobe Acrobat A trial version of Acrobat is available online, however, it is a paid tool. It has a built-in checker that provides an in-depth look at issues within your PDF file. All issues can be remediated with some patience. There are plugins that work with Acrobat to automate and make it easier to fix errors in the document. Again, this tool does not check for color, you will need to perform a manual color contrast check.

12. PDF Accessibility Checker (PAC) 3 PAC 3 is a free download and provides an at-a-glance view of the state of your PDF file. The results from a sample file are shown on the right. It is available for download at: https://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checker-pac.html.

13. JAWS – Job Access With Speech JAWS is the most popular screen reader in use today. JAWS is a free download and is available at: https://www.freedomscientific.com/Products/Blindness/JAWS, however, you can only use the free version for 40 minutes.

14. ZoomText Magnifier/Reader ZoomText is owned by Freedom Scientific, which also owns JAWS and doubles as a screen reader and a screen magnifier. It is a paid product and is used to audit content. ZoomText and JAWS can complement each other because each program can catch issues the other program may not.

15. Colour Contrast Analyser One of the issues I check for accessibility is color contrast. The new updates to Microsoft Office 2016 and 365 include a built-in color contrast checker. For other applications, software and web pages, Colour Contrast Analyser is used. It is a free download and available at the Paciello Group website.

16. Wave.webaim.org This is a screenshot of the Politico website evaluated by the free Wave tool.

17. Web Accessibility Toolbar (IE only) This is a screenshot of the free Web accessibility (WAT) tool that is available for install on IE only. It allows you to check web pages for structure, count the number of images, identify whether images have alt text, tables, frames and a number of other items.

18. Making Web Pages Accessible ACPG Accessibility Series

19. General Web Guidance & Checklists The current accessibility standard that web content is being held to is the web content accessibility guidelines (WCAG 2.0). These guidelines cover a wide range of features including: • Video (YouTube for example) • Documents • Web pages • Responsive: Mobile/Tablet • Web applications An outline of the basic principles and guidelines are listed on the next page. Here is a checklist to use as a guide when you review web pages. 1 Perceivable 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.2 Provide alternatives for time-based media. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background. 2 Operable 2.1 Make all functionality available from a keyboard. 2.2 Provide users enough time to read and use content. 2.3 Do not design content in a way that is known to cause seizures. 2.4 Provide ways to help users navigate, find content, and determine where they are. 3 Understandable 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. 4 Robust 4.1 Maximize compatibility with current and future user agents, including assistive technologies.

20. General Web Guidance & Checklists The WCAG 2.0 guidelines which are used to evaluate web pages, are listed below: 1 Perceivable 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.2 Provide alternatives for time-based media. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background. 2 Operable 2.1 Make all functionality available from a keyboard. 2.2 Provide users enough time to read and use content. 2.3 Do not design content in a way that is known to cause seizures. 2.4 Provide ways to help users navigate, find content, and determine where they are. 3 Understandable 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. 4 Robust 4.1 Maximize compatibility with current and future user agents, including assistive technologies. Some items to consider when reviewing web pages are: • Sufficient color contrast, Images have alt text, use a Keyboard only to navigate, tables are properly formed, frames are named, and headings are logical. Here is a checklist to use as a guide when you review web pages.

21. Making PDF Files Accessible ACPG Accessibility Series

22. General PDF Guidance & Checklists Some general points to consider when you review PDF files are: • Is it tagged • Are the Title, Subject, Author and Tags fields filled out • Is the correct language set • Is there any flashing that may cause seizures • Do images have alt text Here is a checklist to use as a guide when you review PDF files.

23. Making Word, Excel and PowerPoint Accessible ACPG Accessibility Series

24. Testing Methods • Automatic testing in Word • Automatic Testing with manual verification • Some plugins such as aXesPDF and others automate the process of ensuring word, PDF, PowerPoint and other files are accessible. • Manual Testing using a checklist

25. Word Accessibility Basics • Word has many features built-in that help people with different abilities read and author documents. • Word offers the Accessibility Checker that locates elements within the document that might create issues for people with disabilities. • To access the Accessibility Checker, go to the File menu, select Check for Issues and choose Check Accessibility.

26. Remediating in Word

27. What to look for • General Document Requirements • General Layout and Formatting Requirements • Image Requirements • Table Requirements • Link Requirements • Accessibility Checker

28. General Document Requirements • Properties: Title, Author, Subject, Keywords, Language • Track Changes turned off • Remove all comments • If necessary, provide a separate accessible version of the document.

29. General Layout and Formatting Requirements • Conveyed information independent of Color • Create structure using Style Elements (Heading 1, Heading 2…) • List are formatted as Using List Styles • Table of Contents (TOC), Headers, Footers, Footnotes, etc. should be created using Word’s built-in formatting features • Use hierarchical Outline (i.e. Heading 1 to Heading 2 to Body Text) • Use page breaks and paragraph spacing to format white space • Use page numbering codes vs manually typed page numbers • Use recommended fonts: Times New Roman; Verdana; Arial, Tahoma; Helvetica; or Calibri. • Do not use background images (watermarks) or floating text boxes

30. Image Requirements • All images, grouped images and non-text elements (charts, graphs, etc.) that convey information must have meaningful alternative text • All images not conveying meaningful information are given “null” alt text • Flatten all multilayered objects use one alternative text description for the image • Grouped all multiple associated images • Images/graphics appear crisp and legible • Descriptive Text (Long description) for complex content near the content • Set text wrap to “In Line with Text” • Tag first image of series of repetitive images with alt text, then artifact the rest. For example, the Morgan State University logo that appears in the footer of every page gets proper alt text on the first slide, is decorative on the rest.

31. Table Requirements • Use table formatting vs tabs & Spacebar • Avoid blank cells • Logical reading order from left to right, top to bottom • Entire first row designated as a ‘Header Row’ in table properties • Uncheck “Allow row to break across pages” • Table free of merged or split cells • All tables should be described (summary) and labeled (caption) • Descriptive heading for each row and column in a data table

32. Link Requirements • All links function correctly, email, URLs, • Underlining should be used for links only and not as formatting emphasis • Add Tool tip to each link • Link should express purpose (not “Click Here”, “More”, or other non-descriptive text).

33. Common Issues

34. Common Issues (2)

35. Common Issues (3)

36. Add alt text to images • Add alt text to images, such as pictures, clip art, and screenshots, so that screen readers can read the text to describe the image to users who can’t see the image. • Right-click an image. • Select Format Picture > Layout & Properties. • Select Alt Text. • Type a description and a title. Tip: Include the most important information in the first line, and be as concise as possible. Can also right click image “Edit Alt Text… for independent Alt test window with checkbox for decorative text

37. Add alt text to tables • Right-click a table. • Select Table Properties. • Select the Alt Text tab. • Type a description and a title. • Tip: Include the most important information in the first line, and be as concise as possible. • This information is checked in Acrobat as a Table Summary.

38. Add alt text to SmartArt graphics • Select all components of Smart Art, • Right click to Group • Save as picture • Delete Smart Art and replace with picture • Right click to “Edit Alt Text” • Add Alt Text to Field

39. Add alt text to charts • Right-click a chart. • Select Format Chart Area > Chart Options > Layout & Properties. • Select Alt Text. • Type a description and a title. • Tip: Include the most important information in the first line, and be as concise as possible.

40. Make hyperlinks, text, and tables accessible • Right-click the text you want to add the hyperlink and select Hyperlink.The text you selected displays in the Text to display box. • Enter hyperlink destination address in the Address box. • Type a ScreenTip in the ScreenTip box. • Tip: This hyperlink text matches the title on the destination page: CNBC website.

41. Apply built-in heading styles • Select the heading text. • On the Home tab, in the Styles group, select a heading style, for example, Heading 1 or Heading 2. • Formatting of heading styles should follow a logical order throughout your document. For example, H1, then H2, then H3, etc. • Styles can be modified

42. Creating & Modifying Styles • Create a Style • Home Tab  Style Group Options Dropdown  Create a Style Styles can be modified by selecting the copy in your document you want the style to be follow, then go to the Style Group and right-click over Heading 2, for example, and choose update style to match selection. A best practice would be to include corporate styles in frequently used templates.

43. Use bulleted lists • Position the cursor anywhere in your document. • Select the Home tab. • In the Paragraph group, select the Bullets button. • Type each bullet item in the bulleted list. • If you have to export your document to a PDF, using built in styles in MS Office ensures a more accessible file.

44. Use ordered lists • Position the cursor anywhere in your document. • Select the Home tab. • In the Paragraph group, select the Numbering button. • Type the sequential steps.

45. Use accessible text format Here are some ideas to consider: • Add an underline to color-coded hyperlink text. That can help colorblind people know the text is linked even if they can’t see the color. Using the default settings already does this. • Add shapes if color is used to indicate status. For example, add a checkmark symbol if green is used to indicate “pass” and an uppercase X if red indicates “fail”. Note: These resources provide other suggestions: usability.gov and Web Accessibility for Users with Color Blindness.

46. Use accessible text color • Higher contrast makes it easier to distinguish one item from another. Contrast makes it easier to find dark colored rocks and shells on a sandy beach. • Here are some ideas to consider: • Ensure that text displays well by using the Automatic setting for font colors. Select your text, and then select Home > Font Color > Automatic. • A palette can be developed for use in your templates which your organization can use to create documents with adequate contrast.

47. Use accessible text color (2) Use the Colour Contrast Analyzer, a free app that analyzes colors and contrast, and displays results almost immediately to test the color contrast of your document. Webaim.org also has a web-based color contrast tool with which you can check contrast. The minimum contrast ratio you need to pass is 4.5:1 to meet the WCAG AA requirements.

48. Use table headers • Position the cursor anywhere in a table. • On the Table Tools Design tab, in the Table Style Options group, select the Header Row check box. • Type column headings.

49. Use text spacing • Increase or decrease white space between sentences and paragraphs. • 1. Select your text. • 2. Select the Home tab. • 3. In the Paragraph group, in the lower-right corner of the group, select the More button. • The Paragraph dialog box opens, showing the Indents and Spacing tab. • 4. Under Spacing, select the spacing options you want.

50. Exporting to PDF (Save As Method) When your document is complete, go to the File menu and choose Save As PDF. Below is an example of a Word doc exported to PDF using this method. You will notice there are only 4 issues under the Accessibility Checker.