ADA Compliant DesignShort Guide

Suffolk County Community College Center for Innovative Pedagogy

2018

Table of Contents

2

3

5

7

10

12

13

14

18

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

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 asArial or Verdana. Please note: Not all browsers will renderthe same font size in the same way. When designing yourcourse in Blackboard, check your fonts in multiple brows-ers.

• Make sure there is enough contrast between text andthe background. For example, do not use light-coloredtext on a light background or dark-colored text on adark background.

• Do not rely on color to relay important information.

• In Microsoft Word, use heading styles instead of bold toindicate sections or titles (see page 3).

• When converting a Word document to a PDF, make sureto save the document as a tagged PDF (see page 5).

• Add alt text (text that describes or explains thecontent) to any object, picture, video or shape in a Worddocument* that is essential in order to understand thecontent. If the image is decorative only, do not enter anALT tag.

• Hyperlink text should provide a clear description of thelink destination. Do not simply write “click here.”

• Audio and/or video must contain captions and a transcript.Source:http://depts.washington.edu/uwdrs/current-students/accommodations/accessible-instructional-materials/*How to add alt text:https://support.office.com/en-us/article/Add-alternative-text-to-a-shape-picture-chart-table-SmartArt-graphic-or-other-object-44989b2a-903c-4d9a-b742-6a75b451c6692

3

Using Heading Styles in Microsoft Word

Instead of bolding or underlining text to indicate different sections of a document, use heading styles instead. Head-ing 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 betweena heading style (Home tab > Styles) when you type aheading, and Normal, when you type body text.

3. You can also choose from other types of styles byexpanding the Styles panel.

Applying Heading Styles to Existing Documents

1. Open the document to which you would like to addheading styles.

4

Additional information:https://support.office.com/en-us/article/Style-basics-in-Word-d382f84d-5c38-4444-98a5-9cbb6ede1ba4

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 theStyles toolbar, then select Modify.

2. To create your own style, expand the Styles toolbar byclicking on the last arrow in the scroll bar, and selectCreate a Style.

5

Creating Accessible PDFs from Word Documents

Tagged PDF files make it easier for screen readers and other assistive technologies to determine a logical read-ing 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 thefile to be saved.

6

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 foraccessibility check box is selected, then click OK.

5. Click Save.

Source:https://support.office.com/en-us/article/create-accessible-pdfs-064625e0-56ea-4e16-ad71-3aa33bb4b7ed

7

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 onTools.

2. Scroll down and then click on Accessibility.

3. Click on Full Check.

8

4. In the Accessibility Checker Options dialog box, selectthe options as shown below, or select or deselect op-tions per your specific need. When you are done, clickon Start Checking.

5. As shown on the following page, a list of which acces-sibility requirements your document has passed andfailed will be generated. Click on each title to expandthe content and follow the instructions.

9

10

Microsoft Office Accessibility Checker

The Accessibility Checker in Word, Excel, and PowerPoint can help identify possible accessibility issues in a docu-ment. 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, youwill see a message next to the Check for Issues button.

3. To view and repair the issues in your file, click Check forIssues > Check Accessibility.

11

4. Your file will reappear and the Accessibility Checkertask pane will show the inspection results.

5. Click a specific issue to see additional information andsteps 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 orimpossible 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 tounderstand.

• A tip is for content that people with disabilities canunderstand, but that might be better organized orpresented 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:https://support.office.com/en-us/article/use-the-accessibility-checker-on-your-windows-desktop-to-find-accessibility-issues-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f?ui=en-US&rs=en-US&ad=US

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 tothe audio.

• A caption frame should be repositioned if it obscuresonscreen text or other essential visual elements.

Caption Style and Formatting

• When multiple speakers are present, it is helpful toidentify 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] shouldbe added in square brackets.

• Punctuation should be used for maximum clarity in thetext, not necessarily for textbook style.

• Captions should preserve and identify slang or accents.Source:http://www.3playmedia.com/2013/09/27/the-ada-online-video-captioning-standards/

13

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 boxand click on the Search button.

2. On the results page, click on the Filters button andthen click on Subtitles/CC.

3. A list of ADA compliant videos will be displayed. You cantell if a YouTube video is compliant if the video has “CC”under the video description.

Source:http://www.kent.edu/sas/ada-compliant-youtube-videos

14

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. Onceit is uploaded, click on Edit Video.

2. Next, click on Subtitles/CC.

15

3. Click on Add new subtitles or CC and then select Eng-lish (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 tran-script, which it will then auto-synch to the narration. Tran-scribe and auto-synch allows you to manually transcribethe video as it plays, and selecting Create new subtitlesor CC allows YouTube to create automatic captions whichyou can then edit. For this example, we will select Createnew subtitles or CC.

5. Automatically synched captions will appear on the left.Please note, it might take a few minutes after uploadingthe video for the automatic captions to appear. If they do

16

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 qualityof the audio. YouTube does a very good job; however, youwill need to edit any mistakes. Edit the text by clicking andtyping in the boxes. You can also use the x and + signs todelete or add lines.

17

7. When you’re finished editing, click on Save changes.

8. If you’d like to download the caption file to use in an-other application, such as Camtasia, click on Actions andthen select .srt.

18

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. Recordthe PowerPoint with Camtasia and then use the voicetraining feature1 to enable Camtasia to create more ac-curate captions from your voice.

• If you are not narrating your presentation on-the-fly,write up a transcript. You can then upload the tran-script to Camtasia and synch it to the audio.2

When Creating Captions for Existing Narration

• In Camtasia, select the audio you want to createcaptions for and then use the voice training feature to helpcreate more accurate captions. Please note that this willonly work with audio of your voice.• If you have a transcript, record the presentation withCamtasia, then upload the transcript and time it to theaudio.• If you do not have a transcript, YouTube often doesa better job with creating accurate captions thanCamtasia. Record the presentation with Camtasia, thenupload the video file to YouTube. Use the captionfunction to have YouTube create automatic captions.This caption file can be edited in YouTube,3 or you canexport it and edit it in Camtasia.

1. Voice training in Camtasia https://www.youtube.com/watch?v=eL-X8AgLs8w2. Synch transcript to audio in Camtasia https://www.youtube.com/watch?

v=OTXUktBd43o3. Editing captions in YouTube https://www.youtube.com/watch?v=Jyl9dsNkyoY

19

ADA Compliance Checklist

The checklist on pages 13–15 will guide you through the steps necessary to ensure that your course is accessible to your online course participants.

Course DesignCourse 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 isimportant to turn off unused icons and tools.

Course layout☐ Course and content layout is organized and consistent

to provide easiest access to materials.

Course ContentAssessment☐ Grade Center columns are displayed in relevant, coherent

orderDocuments☐ If PDFs are used, Word or plain text versions are also

provided or made readily available.

20

☐ Linked titles for documents attached in Blackboardinclude 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 & TextLayout

☐ 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 fororganized items in a row or column, such as a coursecalendar 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.

21

Multimedia & GraphicsGraphics☐ 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 embeddedimage in Blackboard, click the image icon in the text boxeditor, then browse for the image file. In the Insert Imageoptions box that appears, enter a description of the imagein 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, right-click the image box and select Format PictureLayout& Properties (Size & Properties in PowerPoint)ALTTEXT.

☐ If images are used in assessments, a description of theimage 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.