ADA Compliant Design. Short Guide

Transcription

1 ADA Compliant Design Short Guide Suffolk County Community College Center for Innovative Pedagogy 2018

2 Table of Contents ADA Compliant Design: General Tips Using Heading Styles in Microsoft Word Creating Accessible PDFs from Word Documents Using Acrobat Pro to Check a PDF for Accessibility Microsoft Office s Accessibility Checker Requirements for ADA Compliant Captions Searching for Closed Captioned Videos on YouTube Using YouTube to Create Captions Tips for Creating Your Own Captions ADA Compliance Checklist 19 Suffolk County Community College Center for Innovative Pedagogy 2018

3 ADA Compliant Design: General Tips ADA compliance is not just the law; it is simply the right way to design digital content so that it is accessible to all. Use only one or two 12-point sans-serif fonts such as Arial or Verdana. Please note: Not all browsers will render the same font size in the same way. When designing your course in Blackboard, check your fonts in multiple browsers. Make sure there is enough contrast between text and the background. For example, do not use light-colored text on a light background or dark-colored text on a dark background. Do not rely on color to relay important information. In Microsoft Word, use heading styles instead of bold to indicate sections or titles (see page 3). When converting a Word document to a PDF, make sure to save the document as a tagged PDF (see page 5). Add alt text (text that describes or explains the content) to any object, picture, video or shape in a Word document* that is essential in order to understand the content. If the image is decorative only, do not enter an ALT tag. Hyperlink text should provide a clear description of the link destination. Do not simply write click here. Audio and/or video must contain captions and a transcript. Source: accessible-instructional-materials/ *How to add alt text: picture-chart-table-smartart-graphic-or-other-object-44989b2a-903c- 4d9a-b742-6a75b451c669 2

4 Using Heading Styles in Microsoft Word Instead of bolding or underlining text to indicate different sections of a document, use heading styles instead. Heading styles enable students using screen readers to jump to different parts of a document without the screen reader having to read through the entire text. Using Heading Styles in New Documents 1. Click the File tab, select New > Blank Document. 2. Go ahead and type your document, switching between a heading style (Home tab > Styles) when you type a heading, and Normal, when you type body text. 3. You can also choose from other types of styles by expanding the Styles panel. Applying Heading Styles to Existing Documents 1. Open the document to which you would like to add heading styles. 3

5 2. Select all the text by choosing Select > Select All. 3. Select a heading style to apply to your text. Creating Custom Heading Styles 1. To modify a heading style, right-click the style in the Styles toolbar, then select Modify. 2. To create your own style, expand the Styles toolbar by clicking on the last arrow in the scroll bar, and select Create a Style. Additional information: 4

6 Creating Accessible PDFs from Word Documents Tagged PDF files make it easier for screen readers and other assistive technologies to determine a logical reading order and navigation for the file. They also allow for content reflow when using large type displays and mobile phones. This tagging can be done automatically when you save a file in PDF format. These instructions apply to Word 2010 and above. 1. Click the File tab and then click Save As. 2. Under Choose a Location, choose where you want the file to be saved. 5

7 3. In the Save As dialog box, click the arrow in the Save as type list and then choose PDF. Next, select Options. 4. Make sure that the Document structure tags for accessibility check box is selected, then click OK. 5. Click Save. Source: 6

8 Using Acrobat Pro to Check a PDF for Accessibility Acrobat Pro has tools to check for and correct accessibility issues in your PDf documents. 1. Open your PDF document in Acrobat Pro, then click on Tools. 2. Scroll down and then click on Accessibility. 3. Click on Full Check. 7

9 4. In the Accessibility Checker Options dialog box, select the options as shown below, or select or deselect options per your specific need. When you are done, click on Start Checking. 5. As shown on the following page, a list of which accessibility requirements your document has passed and failed will be generated. Click on each title to expand the content and follow the instructions. 8

10 9

11 Microsoft Office Accessibility Checker The Accessibility Checker in Word, Excel, and PowerPoint can help identify possible accessibility issues in a document. The instructions below apply to Office 2010 and above. 1. Open a document in Microsoft Word and go to File > Info. 2. If the Accessibility Checker sees any potential issues, you will see a message next to the Check for Issues button. 3. To view and repair the issues in your file, click Check for Issues > Check Accessibility. 10

12 4. Your file will reappear and the Accessibility Checker task pane will show the inspection results. 5. Click a specific issue to see additional information and steps you can take to change the content. Accessibility Checker Inspection Results Each issue is classified as an error, warning, or tip. An error is for content that makes a file very difficult or impossible for people with disabilities to understand. A warning is for content that in most, but not all, cases makes a file difficult for people with disabilities to understand. A tip is for content that people with disabilities can understand, but that might be better organized or presented in a way that would improve their experience. Fixing some issues might require you to change, reformat, or update your content. Accessibility Checker also lets you know about Office features you can use to make your content more accessible. Source: 11

13 12 Requirements for ADA Compliant Captions In order for a video to be ADA compliant, it must contain closed captions (not burned in captions) and a transcript. Video repositories such as Films on Demand or Kanopy come complete with captions and transcripts. However, if you create your own videos, you might have to also create your own captions. Follow the tips below to ensure your captions are ADA compliant. Caption Timing and Positioning Each caption frame should hold 1 to 3 lines of text at a time, viewable for a duration of 3 to 7 seconds. Each line should not exceed 32 characters. Each caption frame should be replaced by another caption. All caption frames should be precisely time-synched to the audio. A caption frame should be repositioned if it obscures onscreen text or other essential visual elements. Caption Style and Formatting When multiple speakers are present, it is helpful to identify who is speaking. Both upper and lowercase letters should be used. The font should be sans-serif, such as Arial or Verdana. Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets. Punctuation should be used for maximum clarity in the text, not necessarily for textbook style. Captions should preserve and identify slang or accents. Source:

14 Searching for Closed Captioned Videos on YouTube Films on Demand and Kanopy are ADA-verified products which are both accessible from the Suffolk library website. However, you might also want to search for content on YouTube. Please note that the auto-captioning built into YouTube is usually not accurate. To find videos on You- Tube that do have captions that are ADA compliant, follow the steps below. 1. Enter your keywords in the YouTube search text box and click on the Search button. 2. On the results page, click on the Filters button and then click on Subtitles/CC. 3. A list of ADA compliant videos will be displayed. You can tell if a YouTube video is compliant if the video has CC under the video description. Source: 13

15 Using YouTube to Create Captions YouTube does a good job converting speech to text. Even if you don t want to leave your video up on YouTube, you can use it to caption your video, edit the captions, and then download the caption file for use in other applications, such as Camtasia. 1. First you will need to upload the video to YouTube. Once it is uploaded, click on Edit Video. 2. Next, click on Subtitles/CC. 14

16 3. Click on Add new subtitles or CC and then select English (or whichever other language you choose). 4. Then, select how you want to create your captions. Upload file allows you to upload a caption file or a transcript, which it will then auto-synch to the narration. Transcribe and auto-synch allows you to manually transcribe the video as it plays, and selecting Create new subtitles or CC allows YouTube to create automatic captions which you can then edit. For this example, we will select Create new subtitles or CC. 5. Automatically synched captions will appear on the left. Please note, it might take a few minutes after uploading the video for the automatic captions to appear. If they do 15

17 not appear, close out YouTube, wait a bit longer and try the process again. Once the captions appear, click on Edit to begin the editing process. 6. The accuracy of the captions will depend on the quality of the audio. YouTube does a very good job; however, you will need to edit any mistakes. Edit the text by clicking and typing in the boxes. You can also use the x and + signs to delete or add lines. 16

18 7. When you re finished editing, click on Save changes. 8. If you d like to download the caption file to use in another application, such as Camtasia, click on Actions and then select.srt. 17

19 Tips for Creating Your Own Captions Creating your own captions can be tricky. Below are some tips that might help make the process easier. When Creating Your Own Videos After creating a PowerPoint presentation, use Camtasia to record your narration instead of PowerPoint. Record the PowerPoint with Camtasia and then use the voice training feature 1 to enable Camtasia to create more accurate captions from your voice. If you are not narrating your presentation on-the-fly, write up a transcript. You can then upload the transcript to Camtasia and synch it to the audio When Creating Captions for Existing Narration In Camtasia, select the audio you want to create captions for and then use the voice training feature to help create more accurate captions. Please note that this will only work with audio of your voice. If you have a transcript, record the presentation with Camtasia, then upload the transcript and time it to the audio. If you do not have a transcript, YouTube often does a better job with creating accurate captions than Camtasia. Record the presentation with Camtasia, then upload the video file to YouTube. Use the caption function to have YouTube create automatic captions. This caption file can be edited in YouTube, 3 or you can export it and edit it in Camtasia. 1. Voice training in Camtasia 2. Synch transcript to audio in Camtasia v=otxuktbd43o 3. Editing captions in YouTube

20 ADA Compliance Checklist The checklist on pages will guide you through the steps necessary to ensure that your course is accessible to your online course participants. Course Design Course Menu Buttons High contrast between text color and background for best readability. Note: Dark text on a light background is preferable. Patterned buttons are not used. Note: Patterns make text difficult to read. Course Links Descriptively and consistently named. Note: Avoid the usage of text click here or more. Used to help students navigate the site. High contrast between text color and background. Buttons and tools not used are hidden or removed. Note: Since screen readers read every link on a page, it is important to turn off unused icons and tools. Course layout Course and content layout is organized and consistent to provide easiest access to materials. Course Content Assessment Grade Center columns are displayed in relevant, coherent order Documents If PDFs are used, Word or plain text versions are also provided or made readily available. 19

21 Linked titles for documents attached in Blackboard include the file extension in the title, such as doc or rtf. Summaries are provided for data tables. Data tables include identifying headers. Course syllabus includes the accessibility statement. Layout, Color & Text Layout Pages minimize scrolling. Content pages have text clear enough to read. High contrast between text color and background. Tables are not used to format or arrange text and images. Alternate text format is available if tables are used for organized items in a row or column, such as a course calendar or list of due dates. White space is used on pages. Color Color combinations provide sufficient contrast to better distinguish text from background. Font colors are not used to convey meaning. For example, avoid the use of all items in RED are required. No yellow/blue or red/green combinations. Note: Color blind students will not be able to read these. Text Fonts should be a minimum of 12 point. Sans-serif fonts are used, i.e. Arial, Verdana. Blinking or moving text is avoided. 20

22 Multimedia & Graphics Graphics Alt text is provided for all images descriptive of the context of the image in relation to the course. Note: To create an alt tag when adding an embedded image in Blackboard, click the image icon in the text box editor, then browse for the image file. In the Insert Image options box that appears, enter a description of the image in the ALT Text line, then click Submit. Provide alt text for images within Word or PowerPoint. Note: After inserting an image in Word or PowerPoint, rightclick the image box and select Format Picture Layout & Properties (Size & Properties in PowerPoint) ALT TEXT. If images are used in assessments, a description of the image is included in the question or answer text. Multimedia Transcripts and closed captions are provided for all video content. If you need help designing ADA compliant materials, please contact bbsupport@sunysuffolk.edu. 21