WFAccessibility Guidelinesfor Online Course Content

How to Make AccessiblePOWERPOINTs

How to Make Accessible

WORDDocuments

(Versions 2010, 2011 & 2013)

How to Make Accessible

PDFs

GuidelinesvVideo & AudioClosed Captions & Transcripts

Publisher’s OnlineMaterials

(Versions 2010, 2011 & 2013)

The Anatomy of an Accessible Pagepage 1/2

Syllabus

Format lists as proper lists

Heading 3

Heading 4

TableColumnHeader

Table Row Header

Heading 4ISufficientColorContrast

DL 101 - In troduction to O nline LearningCourse Information:

• Course Title: Introduction to Online Learning• C R N :12345• Credits: 3• Term: W in ter 2014

AddAlternative (Alt) text to images

Heading 3 ► Instructor Information:Hello! M y name is John Doe, and I'll be your instructor for this course. I've taught this course online for the past tw o years.Each tim e I teach it, I learn something new.

Assignments/Assessments:Grading Scale

John Doe Instructor

G rade G rading Scale by Points G rading Scale by P ercentages

A 202 - 225 + 90 - 100%B 180 - 201 80 - 89%

C (or P) 157 - 179 70 - 79%D 135 - 156 60 - 69%

F (or NP) < 134 < 59%

Late Work & Make-up PolicyAssignments must be com pleted on tim e in order to earn full credit.

p- (Late assignments w ill earn 50% credit.)

Write meaningful link textspage 2/2

Special Accommodations:Any student needing to arrange a reasonable accommodation for a documented disability should contact Student Access and Accommodation Services at 350 Fell Hall, 309-438-5853, or visit the website at studentaccess.illinoisstate.edu.

Heading 3

DL 101 - O nline Learning Best PracticesBest Practices when using complex graphics: «

Heading 2

Heading 3

% Home Broadband Users

50

45

3530

25

20

15

10

5

0Jan 04 Jul 04 Jan 05 Jul 05 Jan 06 Jul 06 Jan 07 Jul 07 Jan 08

This graph summarize the growth of students using home broadband the period from January 2004 to 2008. The percentage increased from 22% in 2004 to 48% in 2008.

When using complex images, include Alt text as you would for any other image but also include additional description as a caption.If more description is needed, include it in the content of the page.

40

WEB Accessibility GuidelinesComponent Guideline Why Is This Important?

H eadings Use properly formatted headings to structure a page.

Headings help organize your content, making it easier for everyone to read. Headings are a primary way to navigate pages using screen reading software.

Lists Format lists as proper lists. When typing a list, use the proper tools to make a list. Properly formatted numbered lists and bulleted lists are accessible.

Links Write meaningful link text. Links embedded in text should describe the link’s destination. It helps users navigate the page more efficiently, especially screen reader users.

Tables Create tables with column and/or row headers, and ensure a proper reading order.

Why Column Headers in a Data Table are ImportantTable headers are essential to understanding how the information is organized.Why the Reading Order in a Table is ImportantScreen readers read tables from left to right, top to bottom, one cell at a time. If cells are split or merged, check the reading order.

Color Use sufficient color contrast. Don't use color alone to convey meaning.

Without sufficient color contrast between font and background, people who are color blind and have low vision will not benefit from the information. Using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning.

KeyboardAccessibility

Ensure that any action that uses a mouse, can also be completed using only the keyboard.

Mobility and visual disabilities often prevent people from using a mouse.If content is not keyboard accessible, it will limit many people’s opportunities to learn from the content.

Im a g e ALT te x t

Provide alternative (Alt) text descriptions for images.

Alt text is read by a screen reader. It should adequately describe what is being displayed and why it’s important. This allows screen reader users to benefit from the information being conveyed by the image, even if they cannot see it.

WEB Accessibility Guidelines vComponent Guideline Why Is This Important?

N a v ig a tio n Design clear and consistent navigation.

Clear and consistent navigation in your course will allow students to focus on your content rather than on how to find it.

B lin k in gL im it

Eliminate or limit blinking / flashing content to 3 seconds.

Blinking content is not only distracting it can cause seizures in persons with a photosensitive disorder.

Form sLabel form fields and buttons clearly, and ensure a proper reading order in a form.

Why the reading order of a form is importantUsing the tab key, your cursor should follow through the form in the same order it is intended to be completed.Why labeling buttons and form fields is importantA screen reader will identify the field by reading the label. It should adequately describe what should be filled in.

C a p tio nV id e o

Provide captions or transcripts for video that you produced.

Video captions benefit many viewers. Captions are essential for those who are deaf or hard of hearing. They also assist non-native English speakers, those who are unfamiliar with vocabular, and viewers with some learning disabilities.

T ran scrib eA u d io

Provide a transcript for audio. Audio transcripts many students. They are essential for the deaf and hard of hearing, but they also assist anyone who would like to read or search the transcript.

R e q u ire dS o ftw a re

Require only accessible software & applications.

Inaccessible software and applications will shut students with disabilities out. Ask the software developer questions to help determine the product’s accessibility.

M a th & S cience

Write math and science equations accessibly.

Use an accessible equation editor, such as MathType plugin for Word, to write scientific notations, equations and formulas.

How to (

Accessible PowerPoints1 Component BestPractices How to Make it Accessible 1

O u tlin e V ie w

(The outline view is often preferred by students with visual impairments.)

■ Check the outline view.■ Compose your outline in

the outline view, and then move to the slide view to add images and design.

1. Click on View tab in the Presentation Views group (Mac: View menu.)2. Choose Normal (PowerPoint 2013: click on Outline View instead of Normal button.)3. In the Outline panel, make sure all text from the slides appears in the Outline View.

S lid e L a y o u t

(To help your slide's reading order remain intact.)

■ Use the PowerPoint provided slide layouts when building slides.

From Home tab, choose the New Slide drop down menu and select a slide template.

R e a d in g O rd e r

(To help an assistive technology user navigate a slide in the correct order.)

■ Check the slide’s reading order.

1. Click on the slide without selecting any of the content placeholders.2. Using the keyboard, tab through the slide. This is the reading order of the slide (meaning that

is the order a screen reader will read the content.)

■ Change the reading order. 1. On the Home tab, click on Arrange and choose Selection Pane (Reorder Objects for Mac - MS PowerPoint 2011 & 2016.)

2. Tab through the slide and the corresponding element will highlight.3. On the Selection Pane, click arrow up and down icon (On Mac, drag layers) to re-arrange

the reading order, reading order begins at the bottom and moves to the top (On Mac, highest number is read first.)

Im a g e s , C lip a r t, S hapes

■ Add alternative (Alt) text to images and shapes.

1. Right click on the image and select Format Picture.2. Select Alt Text on the sidebar (PowerPoint 2013: click the Q icon to open Alt text field.)3. Enter appropriate alt text in the Description field (not the Title field.)

f is ts ■ Format a list as a list using Numbering or Bullets lists.

Click on the Home tab. In the Paragraph group, select the Numbering or Bullets icon.■ Use Numbering lists if a sequential order is important to the list.■ Use Bullets lists if all items are of equal value.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1

How to Make

Accessible PowerPointsComponent BestPractices How to Make it Accessible

L inks ■ Create a meaningful link that describes its destination.

1. Type out text that describes the destination of the link. For example: ISU Homepage.2. Select the text, right click and choose Hyperlink... from the menu.3. The Insert Hyperlink window will open. Enter a complete URL address in the Address field

(Mac - PowerPoint 2011: Link to field.) For example: http://www.ilstu.edu.4. Click the OK button to save the link.

Tab les ■ Indicate column headers for data tables.Note: You cannot create row headers in MS Word and PowerPoint.

1. Place the cursor in the top row of your data table.2. Click on the Design tab under Table Tools (Mac - PowerPoint 2011: Table tab.)3. In the Table Style Options group, select the Header Row check box.4. Now the cells in the top row of your table make up the headers for the columns.

■ Check the reading order.

■ The screen reader reads a table from left to right, and top to bottom (never repeating a cell.)■ Merged, nested, and split cells may change the reading order of a table.■ Make sure you construct your table in a way that accommodates a good reading order.

C o lo r ■ Use sufficient color contrast.

■ Make sure there is enough color contrast between the text and background colors.■ Without sufficient color contrast, people who are low-vision and color blind will not benefit

from the information.■ For information on how to check color contrast, go to www.pcc.edu/access/powerpoint.

■ Don't use color alone to convey meaning.

Don't use color alone to make a distinction, a comparison or to set something off or apart from the rest of the document. If you categorize something by color alone, those who are color blind or blind will not be able to benefit from the information.

M a th & S c ience ■ Use the M athType plugin http://www.dessci.com/en/ for MS Word to create math and science equations, and formulas.

V id e o & A u d io ■ Link out to media. Provide captions or a transcript for video that you produce. If you have an enrolled student who is deaf or hard of hearing, SAAS will contact you regarding captions for accommodations.

How to MakeAccessible Word Documents

Component BestPractices How to Make it Accessible

H eadings Properly format headings.

Use headings in the correct order.

1. Select the text that you want to make into a heading.2. Go to the Home tab.3. Choose the appropriate heading level from the Styles group.

The Heading 1 should only be used ONCE per page. Heading 2, 3, etc. can be used multiple times. DO NOT skip heading levels.

Im ages Add alternative (Alt) text to images.

1. Right click on the image, and select Format Picture....2. The Format Picture window will open.3. Select Alt text (Word 2013: select the J Q icon. Then click on [> (right arrow) to expand Alt text.)4. Enter your image description in the Description field (Not in the Title field.)

Lists Format a list as a list using Numbering or Bullets lists.

1. Select the text that you want to make into a list.2. On the Home tab, in the Paragraph group, select the Bullets or Numbering icon.

Links Create a meaningful link that describes its destination.

1. Type out text that describes the destination of the link. For example: ISU Homepage.2. Select the text, right click and choose Hyperlink... from the menu.3. The Insert Hyperlink window will open. Enter a complete URL address in the Address field

(Mac - Word 2011: Link to field.) For example: http://www.illinoisstate.edu.4. Click the OK button to save the link.

M a th & Science

Use MathType (a MS Office plug-in) to write equations.

Use the MathType plugin http://www.dessci.com/en/ for MS Word to create math and science equations, formulas and notations. DO NOT use Microsoft's equation editor.

How to Make

Accessible Word DocumentsComponent Best Practices How to Make it Accessible

Tables Indicate column headers for data tables.

Check the reading order.

1. Place the cursor in the top row of your data table.2. Click on the Design tab under Table Tools (Table tab on Mac - Word 2011.)3. In the Table Style Options group, select the Header Row check box.4. Click on the Layout tab under Table Tools (Table Layout tab on Mac - Word 2011.)5. Click the Repeat Header Row button. This will indicate the top row as the table's header.

The screen reader reads a table from left to right, and top to bottom (never repeating a cell.) Merged, nested, and split cells may change the reading order of a table.Make sure you construct your table in a way that accommodates a good reading order.

Color Use sufficient color contrast.

Make sure there is enough color contrast between the font and its background colors.Without sufficient color contrast, people who are low-vision and color blind will not benefit from the information.For more information on how to check color contrast, go to www.pcc.edu/access/word.

Don't use color alone to convey meaning.

Don't use color alone to make a distinction, a comparison or to set something off or apart from the rest of the document. If you categorize something by color alone, those who are color blind or blind will not be able to benefit from the information.

Form s Label form fields and buttons.

Use real text labels or alternative text when creating buttons and form fields. Use a form template to create a form.

Check the reading order of forms.

To check, press the tab key repeatedly to replicate the order a screen reader would navigate through the form. If it doesn’t land on the form fields in the correct order, you will need to edit the form.

The tab order (or reading order) is important to those who are blind or physically disabled.

How to Make

Accessible PDFs12 Ways to creates PDF Software / Hardware How to Make it Accessible

C onve rt M S O ffice to an Accessib le PDF d o c u m e n t

■ Microsoft Office 2010 1. Start with a well-structured word document or presentation.2. Click the File tab and select Save as. In the Save as type field, select PDF (*.pdf.)3. Enter a file name in the File name field.4. Click on the Options button and make sure the Document structure tags for

accessibility and Create bookmarks using Headings checkboxes are checked.5. Click OK and Save. This will tag all of the text formatting so page headings and lists are

correctly interpreted by a screen reader.

■ MS Office 2011 (for Mac) ■ Microsoft Word & PowerPoint 2011 for the Mac cannot produce a fully accessible PDF.■ Go to http://www.pcc.edu/resources/instructional-support/access/pdfs-from-mac.html

for options on how to create an accessible PDF.

Scan & Create an Accessib le PDF

Touch Screen Scanners (Milner Library)

1. Touch to begin - select your destination to save your scan.2. Save as: Searchable PDF. Scan your document.3. System will prompt you to save to your desired location.4. When done, click OK.

W hen needed:Run O p tica l C haracter R ecogn ition (OCR)

■ Adobe Acrobat Pro (Version XI Pro)

1. If you've already scanned your document, open your PDF file.2. Open the Tools panel (click Tools in top right) and click Text Recognition.3. Click In This File and the Recognize Text window will open. Under Edit, adjust OCR setting

Select English for Primary OCR Language, Searchable Image and 600 dpi to Downsample To4. Click OK when done.

Linking to3rd Party Online Materials

Ask about Questions and Considerations

How accessible are their digital

Are the videos captioned and audio recordings transcribed?There should be transcripts for audio recordings and captions or subtitles for video. If they aren't available, ask the publishing representative when they plan to have them.

materials? Are images described in alternative text?PowerPoint slides from publishers often have images without any alt text. Ask your publishers if their images have alt text.

■ Can all of the text that is displayed on the screen be read aloud by text-to-speech software?Screen readers (assistive technology used by people who are blind) read real text. They cannot read images of text or text embedded in Flash animations/movies/simulations.

■ How accessible are the E-books?Are the images described? Are embedded objects like videos keyboard accessible and captioned? Is the E-reader keyboard and screen reader accessible? SAAS staff would be happy to test it, if requested.

■ Can all interactivity (media players, quizzes, flashcards, etc.) function using only the keyboard (no mouse)?People who are blind or have upper mobility disabilities cannot use a mouse. They use the keyboard to navigate and interact on the Web.It is required that any interactive elements on a publisher's website (or on a DVD included with the book) be operable by keyboard alone if they are used in your course.

■ Is there any documentation available (VPAT or White Paper for example) that confirms accessibility or usability testing results?A VPAT (Voluntary Product Accessibility Template) is used by many organizations to report the level of accessibility of software products.

■ Is your multimedia (Adobe) Flash or (Oracle) Java-based? Can your materials be watched on mobile devices?Content created in Flash or Java can be inaccessible and may not run on mobile devices and tablets, which are becoming more prevalent.

■ OERs have the same accessibility requirements as all other digital materials. However if they are not accessible, we can usually retrofit them to be accessible which we can't do if the materials reside on a publisher's server. Plus, OERs are usually free to students!Open Educational

Resources (OER)__________________________y

1 How to Make1 Accessible Video & Audio

0050

Component Best Practices How to Make it Accessible

Media Player Keyboard NavigationIt is important to accessibility that students can access and operate a media player with the keyboard alone (not using a mouse).

The buttons need to be properly labeled so a screen reader user can operate the player.

CaptionedMedia JWe recommend you first search for captioned media, but you are not required to use only captioned media. Use the best media for your lesson. Uncaptioned media will be accommodated at the time of need.

Search for captioned mediaM ilner Library has a wide selection of captioned media. Check with your Subject Area Librarian.

Make sure the YouTube video you use IS NOT Auto-generated.

To test for keyboard accessibility, press the Tab key to navigate to the player, and use the Tab, Arrow keys, Enter, and Spacebar to interact with the media player buttons.

How do I find human transcribed captioned videos on YouTube? (Search from YouTube site)1. Enter your search keyword in the YouTube Search fie ld .2. Add a : , CC (a comma, CC)3. Press Enter or click the magnifying glass icon

How do I find human transcribed captioned videos from Google?1. Fill out the Advanced Video Search fields (http://www.google.com/advanced_video_search)

that you need.2. Choose the "Subtitles: Closed captioned only" option.3. Press Enter or click the Advanced Video search button .

How do I know?■ Click the Settings button and check the

Subtitles field. Avoid auto-generated subtitles and the Translate feature which are not usually accurate.

Keep track o f your uncaptioned m edia. You may need this list if a student has an accommodation need.

MS Offices 2010 & 2013 Windows (Word, PowerPoint)

■ A built-in accessibility checker

(Note: The accessibility checker only checks .docx and .pptx files)

1. Go to the File tab.2. Select Info from the sidebar menu.3. Click on the Check for Issues button.4. Select Check Accessibility from the drop-down list.

The Accessibility Checker panel will open to the right of the document. The accessibility checker provides you with a list of errors, warnings & tips. When you click on an error or warning, instructions on how to fix it appear below in "Additional Information".

PDF (Adobe Acrobat XI Professional)

A built-in accessibility checker(View > Tools > Accessibility)

1. Click the Tools tab to open the Accessibility Tool panel on the right.(If you don't see it, click the View menu and select Tools > Accessibility).

2. Select the Full Check button & the Accessibility Checker Options will open.■ On the Report Options section, check on Create Accessibility Report .■ On the Checking Options section: select Document under Category field, and

check all items.3. Click on the Start Checking button and the Accessibility Report will display.

D2L &Web Pages

A browser-based checker,WebAIM WAVE accessibility add-on to the Firefox browser

©1. Download & Install the WAVE toolbar (http://wave.webaim.org/toolbar/)2. Open a web page in its own window by clicking on the Open in a new window icon.3. Right-click on the page in the new window, and select WAVE, then choose

"Errors, Features, and Alerts" to see what accessibility errors you have on the page.4. Error icons in green, red, yellow and blue will appear on the page. If you hover over an error icon

more information on the error will appear.5. Return to the original web page to repair the problems you found.

Who's Responsible for Accessibility of Online Courses?Faculty, CTLT and Student Access and commodation Services (SAAS) all collaborate

Test the accessibility of instructional materials and software used in online courses. Work together to identify and implement appropriate accommodations.

^ Develop accessibility plans for course design.

FacultyRESPONSIBILITIES

As the subject matter expert and the course developer, faculty:

Designs clear and consistent navigation.

Writes alternative text descriptions for images.

Creates documents using accessibility guidelines.

Uses captioned media whenever possible.

Checks accessibility of required software and web applications used in course.

Collaborates with Student Access and Accommodations to accommodate course materials

CTLTRESPONSIBILITIES

As the online course development facilitator and faculty resource, CTLT:

Offers training sessions (Traditional, Blended & Online) and consultation.

Develops training materials (Accessibility Guidelines Handbook)

Supports acessibility plan development to proactively address course barriers.

Maintains CTLT website with accessibility instructions, (www.ctlt.illinoisstate.edu)

Reviews courses for accessibility and provides feedback and support to faculty.

SAASRESPONSIBILITIES U

r As a student and faculty resource, with expertise in alt formats and assistive technologies,Student Access and Accommodations:

Reviews documentation of disability & determines student eligibility for accommodation.

Leads efforts to ensure students are appropriately accommodated by:

Notifying faculty when an accommodation is required

► Supplying students with an accessible format of the textbook and other course materials.Providing notetaker and testing accommodations.

Administering other reasonable auxiliary aidsand services.

Offers individual student and faculty appointments.

Increases awareness of disability and works alongside staff & faculty regarding accessibility efforts at ISU.

w w w .stud entaccess .illino isstate .ed u

This in fo rm a tio n is m o d ifie d w ith perm ission fro m PCC D istance Education

WEl G u ide lines

Training & SupportQuestions about online course accessibility at ISUCenter for Teaching, Learning, and Technology; (309) 438-2542

http://ctlt.illinoisstate.edu/

Questions about course accommodations at ISU:

Student Access and Accommodation Services; (309) 438-5853 http://studentaccess.illinoisstate.edu/

Accessibility Training: Go to ctlt.illinoisstate.edu/courses to

sign up for faculty workshops at CTLT.

Testing ToolsFirefox: WAVE Toolbarhttp://wave.webaim.org/toolbar/

MS Word : Built-in 2010, 2013

MS PowerPoint: Built-in 2010, 2013

PDF: Built-in Adobe Acrobat Pro

Colour Contrast Analyserhttp://www.paciellogroup.com/resources/contrastAnalyser

■ www.pcc.edu/access: Checkaccessibility website for how-to instructions

& video tutorials.

Copyright © 2013 Portland Community College. All rights reserved.Permission to use and modify for educational purposes is granted by the copyright holder.

Accessibility Guidelines Handbook. This material is modified with permission from Portland Community College.