Accessibility & Digital Learning @ CPCC: Course Design & Distance Learning

Create Your Material

Technology changes rapidly and the needs of our students vary. Keep in mind that the format of your Word documents, PowerPoint presentations, etc. may need to be modified or enhanced later on (Ex. A graph in an online course is embossed on a sheet of paper, a textbook converted to braille, a description of images added to the document).

Use the Accessibility Checker in Word, PowerPoint, Excel

Microsoft has a built-in Accessibility Checker in Word, PowerPoint, and Excel to help you determine what may need to be made modified or reconsidered for your presentation. The Checker may make a recommendation that requires you to determine if you are going to make a change based on accessibility guidelines.

The Checker is to be used as a guide. It may not catch everything. Therefore, before or after you have used the Accessibility Checker, you should review your material using the information on this site to identify and correct other issues.

Video

How to Activate the Accessibility Checker in Microsoft
(Length: 39 seconds)

Using the Checker

To activate the Checker:

1. Click File.
2. Click Info.
3. Click Check for Issues.
4. Click Check Accessibility.

The Accessibility Checker will open on the right side. The Checker will show a list of items in your document that may pose a barrier to someone with a disability. The items are sorted into three categories:

• Error: Content that may be very difficult or impossible for someone with a disability to understand. These must be fixed.
• Warning: Content that, in most but not all cases, can be challenging for people with disabilities to understand. It may be your choice to fix or adjust the items. For example, WCAG 2.0 guidelines advises linking text to a website or webpage instead of listing the full web address. However, you may want to include the full link so that readers are familiar with it. In that case, you may want to leave the full link.
• Tip: Content that is not impossible or very challenging for someone with a disability to understand but could be better organized. It is also your choice to make adjustments to the content.

In the example below, the Accessibility Checker shows that there are two errors (missing alt text and no header row specified), four warnings (infrequent headings, merged or split cells, unclear hyperlink text, repeated blank characters), and one Tip (skipped heading level). The triangles next to the items indicate that the list can be expanded or collapsed by clicking on them.

To Fix or Make Adjustments to the Items in the Checker Results:

Click an item in the list and the Checker will highlight that area within the document. The Additional Information section at the bottom of the Accessibility Checker briefly explains why the items should be fixed or adjusted (as illustrated in the image below on the left). Scroll down within the Additional Information box to the How to Fix section which tells you what to click so that you can fix or make adjustments (as illustrated in the image below on the right).

If the changes you make no longer conflict with the Accessibility Checker's interpretation of the way it should be formatted, some of the items may disappear from the list. If you have made enough changes to cause all the items to disappear or if the Checker doesn't find any issues at all, the Checker will state "No accessibility issues found. People with disabilities should not have difficulty reading this document."

Important: Keep in mind that this is not a guarantee that there are no issues with your document because the Checker doesn't catch everything.

If the Checker Doesn't Open

If you attempt to run the Accessibility Checker and get a message stating that it is unable to run and cannot check the current file type for accessibility issues, you must save the Word document again in a new format.

To Save It As A Different Format:

1. Click File.
2. Click Save As.
3. Click Browse.
4. Choose the location you want to save the document to (i.e. your desktop, a folder on your computer, or a USB drive).
5. In the Save as type menu at the bottom, choose “Word Document” as the type. It’s the very first one at the top.

Note: Even if you use the Accessibility Checker to identify missing alternative text, it may not catch everything. In some instances, Word may insert automatically insert text into the description box that is not alternative text. It could be the location of the picture on your computer or a unique identifier for the picture. Double check the alternative text of images to ensure you have true alternative text. For more about alternative text, please see tab 4 "Images and Tables."

Use Styles to Enhance Structure

Someone may be using a screen reader to read the document aloud to them. In order for the screen reader to know what the title and headings are, it needs you to apply the headings styles to the documents or sections of your course. This section is divided into two sections: Applying Headings to Word and Applying Headings in Blackboard.

Applying Headings to Word Documents

1. Highlight the text that the style needs to be applied to.
2. From the Home ribbon, go to the Styles Group and select a Style.

• Heading 1 – Apply to the title of the document. 
• Heading 2 – Apply to a main heading.
• Heading 2 – Apply to the subsection of main heading.
• Heading 3 - Apply to the subsection of previous subsection (Heading 2).
• Normal – Generally applied to paragraphs and other text.

Example of headings 1 and 2, and normal styles are applied to the first two sections of a study guide:

If you do not like the font type of size of the styles, you can change them.

1. Right-click on the style you want to change.
2. Click Modify.
3. Adjust the style as you'd like.
4. If you want all new Word documents to use this style, select "New documents based on this template.
5. Click OK.

If the Style Can't Be Found

If you look for a style that can’t be found in the styles section, press Control + Shift + S at the same time. A box will appear. Highlight the text that you need to apply the style to. Click the style from the box.

Blackboard Headings

When information is typed into the textbox, appropriate heading levels should be applied. 

• Heading (Used for main headings)
• Subheading 1 (Used for section within main heading)
• Subheading 2 (Used for section within subheading 1)
• Paragraph (Used for paragraphs/ text that is not a heading or subheading.)

Here's an example of how these headings are applied. In the instructor's view, you will see this. US Constitution is labeled as Heading because it is the primary section. 1787 Convention Primary Points is labeled as the subheading because it is a section within the the primary section. The Bill of Rights is labeled as Subheading 2 because it is a subsection within the 1787 Convention Primary Points. 

If you are unsure if you should apply the Heading, Subheading 1, or Subheading 2 levels, imagine this information is written in a Word document. How would you format it there? Ask yourself if this is a new primary section. If so, then apply Heading. If the next section is related to the primary section, it should be labeled as Subheading 1. If the next section is related to the previous subsection, then it should be labeled as subheading 2. This can be subjective.

WCAG Reference

“Headings.” Headings • Page Structure • WAI Web Accessibility Tutorials, www.w3.org/WAI/tutorials/page-structure/headings/.

Updated 1/19/18

Add Alternative Text to Images and Charts

• Images, charts, and tables need a written description. This is referred to as alternative text, alt text, and/or image description.
• The goal is to describe the same information in the image, chart, or table, as is shown in the image.
• The alt text must be meaningful. The context of what the image is used to convey is key to determine what should be included in the alt text.
• Example – Suitable alternative text for the image on the left would be “beach ball” because that is all that is shown. Suitable alternative text for the image on the right would be “beach ball in pool” or “beach ball in ocean” because the ball is in a body of water.

Guidelines

• The alt text should not be redundant to information around it.
• It is unnecessary to write “Picture of” or “Image of” at the beginning of the alt text unless this is necessary to demonstrate a point.
• If a chart is inserted as an image, the alternative text should state everything in the chart.
• If the image is considered purely decorative, it is appropriate to enter “” (double quotations also referred to a null) so that the screen reader will skip this.

To Add Alternative Text to an Image:

1. Right-click on the image.
2. Click Format.
3. Click Size and Properties.
4. Enter the alternative text in the description box.

Note: Even if you use the Accessibility Checker to identify missing alternative text, it may not catch everything. In some instances, Word may insert automatically insert text into the description box that is not alternative text. It could be the location of the picture on your computer or a unique identifier for the picture. Double check the alternative text of images to ensure you have true alternative text.

​WCAG Reference

“Images Concepts.” Images Concepts • Images • WAI Web Accessibility Tutorials, www.w3.org/WAI/tutorials/images/.

Updated 1/19/18

Principles of Creating Tables

• For tables in Word, create them using the Add a Table button.   It's located in the toolbar in the Insert tab.
• Keep tables as simple as possible. Cells can be merged but you want to minimize the usage of these as much as possible.
• Create headings for rows and identify them. (Instructions below)
• Tables need alternative text. (Instructions below)
• Check to ensure a table can be navigated easily with a keyboard by using the tab key. (Instructions below)

Tables in Word

Make sure tables have headings for each row. In the example table below, the headings identify the data that is contained in the columns beneath it.

After making sure your table has a header row, you must then identify it so that screen readers know it's there:

1. Highlight the header row.
2. Click the Layout tab in the top toolbar.
3. Click Repeat Header Rows.

Add Alternative Text to A Table in Word:

Your table also needs alternative text; a description of the table and the purpose that it serves within the context of the rest of the document.

• Consider how the table is intended to be used. If someone is supposed to complete cells within the table, the alternative text should reflect this (Ex. – “Fill in the missing ratios.”) In some cases, the alternative text for the table may be the same as the title of the table. This is an exception to the rule of making sure alternative text is not redundant to what is around it.

1. Hover your mouse over the table. A four-sided arrow appears in the upper left corner.
2. Move your mouse over the four-sided arrow.  Your cursor will turn into a four-sided arrow. Right-click on the arrow.
3. Click Table Properties.
4. Click the Alt Text tab.
5. Enter alternative text in the description box.

Use the Tab Key to Navigate the Table

1. Click inside the first cell of the table.
2. Press the Tab key repeatedly. This should move the cursor from left to right from the top row until the last cell. If it doesn't, the table may need to be simplified by removing merged or split cells.

Tables in PowerPoint

Tables in PowerPoint and Word may look similar, but they're actually quite different to a screen reader. A screen reader can identify and read what's in a simple table in Word if the table has alternative text and the headings of the rows have been identified.

Webaim.org suggests, "If your presentation contains more than the simplest tables, and if you have Adobe Acrobat, consider saving your presentation to PDF and adding the additional accessibility information in Acrobat Pro."

Tables & Graphs as Images

• If your table is a picture, you may need to add alternative text that includes all the information in the table or chart. This is especially important if you are requiring someone to answer a question based on the information in the graph. In the example below, appropriate alternative text is "Month 1, 10% of goal.  Month 2, 20% of goal. Month 3, 18% of goal. Month 4, 18% of goal. Month 5, 19% of goal. Month 6, 20% of goal. Month 7, 38% of goal. Month 8, 39% of goal. Month 9, 55% of goal. Month 10, 63% of goal. Month 11, 80%. Month 12, 60%. Month 13, 60%. Month 14, 79%. Month 15, 80%."

​WCAG Reference

“Tables Concepts.” Tables Concepts • Tables • WAI Web Accessibility Tutorials, www.w3.org/WAI/tutorials/tables/.

To help establish structure within your material, use the bulleted and numbered lists.

Numbered Lists

Numbered lists, also referred to as ordered lists, are used to communicate steps or the sequence someone should take to accomplish a task. The example below is also a set of directions for adding a numbered list to a Word document.

If haven't typed the list yet:

1. Click the Numbering button in the toolbar. The first number in the list will appear.
2. Type your text.
3. When you're done with the first item in the list, press Enter. The second number for the list will appear.
4. Continue steps 2 and 3 until your list is complete.
5. When you're done with the list, click the Numbering button again to turn it off.

If you've already created your list and want to number them:

1. Highlight all of the text that you want numbered.
2. Click the Numbering button in the toolbar.

Sometimes, Word will automatically start the bulleted list of you if you type "1." followed by the space key.

Bulleted Lists

Bulleted lists, also referred to as unordered lists, are used to communicate a list of items that may not have a sequence. An example is a general list of things to do.

Example:

• Walk the dog.
• Grade the papers.
• Shop for grocery.

To add bulleted lists if haven't typed the list yet:

1. Click the Bullets button in the toolbar. The first number in the list will appear.
2. Type your text.
3. When you're done with the first item in the list, press Enter. The second number for the list will appear.
4. Continue steps 2 and 3 until your list is complete.
5. When you're done with the list, click the Bullets button again to turn it off.

If you've already created your list and want to number them:

1. Highlight all of the text that you want numbered.
2. Click the Bullets button in the toolbar.

​WCAG Reference

“Content Structure.” Content Structure • Page Structure • WAI Web Accessibility Tutorials, www.w3.org/WAI/tutorials/page-structure/content/.

“H48: Using ol, ul and dl for lists or groups of links.” H48: Using ol, ul and dl for lists or groups of links | Techniques for WCAG 2.0, www.w3.org/TR/WCAG20-TECHS/H48.html.

Updated 1/19/18

Ensuring PowerPoint is Accessible

The Key Elements

• Structure

• Reading Order  

• Alternative Text  

• Color Contrast  

• Presentation

Structure

• Use built-in tools to create PowerPoint.

• Built-in tools improve structure and are easier for screen readers to understand.

• Built-in tools include bulleted/numbered lists and pre-built layouts.

  • Use bullets/numbering to organize content.

• Apply layouts with pre-built boxes to facilitate content creation.

  • Go to “Layout” located under the “HOME” tab. You can also select the drop-down arrow under “New Slide.”

• Insert unique slide titles using pre-built boxes.

  • Repeating slide titles creates confusion for users using screen readers.

• If a slide continues the information from a previous slide, add the words “continued” or “Part 2” to the slide title, or others words that indicate a continuation of a previous slide. 

Reading Order

• The order in which the screen reader will read each item.

How to Check and Edit the Reading Order

1. On the Home tab, in the Drawing group, click Arrange. 
2. Choose Selection Pane.                                                                                                                                                                                                                                                  
3. Use the up and down arrows to rearrange the reading order of the items. The order is read from bottom to top.                                                                                                               

Video

How to Check the Reading Order

(Length: 2 minutes, 13 seconds)

Alternative Text

• Text description of images for screen readers to read.

• Images, charts, and tables need a text description.

• Appropriate alternative text is subjective

  • Proper alternative text depends on the context and content around the image (see tab 4 “Images/Tables” for more about alternative text).

How to Insert Alternative Text

1. Right-click the image.                                  

2. Select format picture.                                  

3. Select the Size and Properties box (third box from the left).                                                                                                                                                                                                                                                                   
4. Click “ALT TEXT.”
5. Insert the alternative text into the “Description” box (a title is not necessary).

Examples of alternative text

• Suitable alternative text for the image above would be “beach ball” because that is all that is shown. 

• Suitable alternative text for the image above would be “beach ball in pool” or “beach ball in ocean” because the ball is in a body of water.

Video

How to Insert Alternative Text in PowerPoint

(Length: 47 seconds)

Color Contrast

• Provide enough color contrast.

• Do not rely on color alone to convey meaning.

  • Include text to communicate importance.

                    (Ex: “Important: Test Tomorrow” or “Note: Due Thursday”)

• Avoid using orange, red, and green together.

• When applying Slide Themes:

  • Ensure that the theme colors provide enough color contrast and do not interfere with the content of the PowerPoint.

• Use SSB Bart Group’s Color Contrast Checker (opens in new tab) to check color contrast.

How to Check Color Contrast Using SSB Bart Group’s Color Contrast Checker

1. Select the colored text. A portion of the text can also be selected.                                                                                                                                                     
2. Select the “Font Color” drop-down arrow located in the “Font” group under the “HOME” tab.                                                                                 
3. Select “More Colors…”                                                                                                                                                                                                                                                         
4. Go to the “Custom” tab.                                                                                                                                                                                                                                        
5. Make note of the “Red,” “Green,” and “Blue” number settings.                                                                                                                                                                            
6. Go to SSB Bart Group’s Color Contrast Checker.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
7. Under the “Foreground RGB” box, enter the number settings for “Red,” “Green,” and “Blue” that were made note of in step 5 and press enter.
8. If the background color is white, like in this example, no changes need to be made to the “Background RGB” box. If the background is a color other than white, select a color that most resembles your background color.                                                                                                                                                                                                                                                                              
9. If the color is compliant, no changes need to be made. If the color is not compliant, continue the next steps.
10. Enter lower numbers for the color settings in the “Foreground RGB" box. Keep entering lower numbers until the selected color is compliant.
11. Once the color meets compliance standards, make note of the color settings, highlight the entire colored text in PowerPoint, and insert the color settings in PowerPoint by selecting the “Font Color” drop-down arrow, choosing “More Colors…” and selecting the “Custom” tab. Insert the correct values, click “OK,” and the text color will be changed. 

Video

How to Check and Change Color Contrast

Length: 3 minutes, 6 seconds)

Presentation

• Minimize transitions and animations.

• Do not put too much information in one slide.

• Important information placed in the notes section should be inserted into the PowerPoint slides because screen readers do not always read the notes section.  

Accessibility Checker

• Helps you determine what may need to modified or reconsidered in order to meet accessibility guidelines.

• Shows issues that may make it impossible or challenging for someone with a disability and/or using assistive technology to navigate the document.

  • Error: Impossible or very difficult to navigate.

  • Warning: Challenging, but not impossible to navigate.

  • Tip: Reconsider organizing content (can be ignored if organization already follows a logical order).

• Additional Information section explains why the issue should be fixed and/or how to fix it.

How to Activate Accessibility Checker

1. Click File.

2. Click Info.

3. Click Check for Issues.

4. Click Check Accessibility.

Review your documents and course to see if any of these principles apply:

• Do not rely on color alone to communicate important information.  - Consider using text that also communicates the information that you want to convey. For example, rather than simply highlighting text, include the words "Important", "Please Note" or something of that nature.
• 
• Make sure that the color contrast between the text and background color is sufficient by using a color contrast checker. 
  Level Access Color Contrast Checker
  WebAIM Color Contrast Checker
• Using highlighting sparingly.  - If highlighting is overused, it could be hard for most people to read hte document.

Sometimes, programs that you use to create graphs and charts will provide colors that can hard to distinguish from each other.  In the pie chart below, the goal is to show the percentage of people who responded with their favorite food. However, the shades of blue are so similar that if a student were asked to distinguish how many like sushi and how many like hamburgers, it may be very difficult.

A better option is to use patterns in addition to the colors to help distinguish the information. In the example below, the color has been darkened and a pattern has been added to the section representing those who like sushi, thus making it easier to distinguish from the other colors.

To Change the Color And/Or Change Texture:

1. Right-click the specific name "Pizza."
2. Click Fill.
3. Hover your mouse over Texture. Options will appear. For more options click "More Textures."
4. If you chose More Textures, the Format Legend panel will appear on the right. Click the triangle next to Fill to expand the menu.
5. Click "Pattern fill."
6. Click a pattern and/or color from the options.

Checking Color Options

If you're unsure if the colors in the charts could be challenging to distinguish, view the it in grayscale. If you're using PowerPoint, these steps work:

If two colors are hard to differentiate, you should reconsider the color contrast. In the example used before, the two shades of blue for people who like fried chicken and hamburger look almost the same in grayscale.

Possible Solution:  WebAim'org's color contrast checker (opens in a new tab/window) can help you determine the appropriate colors to use.

• Text Color: The color of the text should be great in contrast to the background. WebAIM.org's color contrast checker can help you determine the appropriate contrast ratio.
  • Do not rely on color alone to convey meaning. Consider including text around this that communicates the importance (Ex. – “Final exams are due by the due date" rather than relying on highlighting alone.)
  • Additionally, be mindful of how often you highlight information. Too much highlighting can make it difficult to understand your intention for highlighting information and can make it harder to read the information.
  1. Click the legend for the chart.
  1. Click the specific name for the part of the chart you want to change. In this example, we'll click "Pizza."
  1. Go to the View tab in the toolbar at the top.
  2. Click Grayscale.

YouTube Video: What It's Like To Be Color Blind

YouTube Video: What It’s Like to Be Blind

​WCAG Reference

“Contrast (Minimum):Understanding SC 1.4.3.” Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0, www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html.

“Use of Color:Understanding SC 1.4.1.” Understanding Success Criterion 1.4.1 | Understanding WCAG 2.0, www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html.

Updated 1/19/16

Have you ever tried to watch a game in a noisy restaurant but couldn't understand what the commentators were saying? Captions would have come in handy because what was said would have been written at the bottom or top of the screen so that you could follow along.

Captioning Also Benefits People Who:

• Learn by reading
• Like to take notes
• Prefer a visual reinforcement of what is heard
• Are in a noisy place and can’t hear what is being said. They can read the captions instead.
• Are learning a new language
• Need to become familiar with new terminology

CPCC's Captioning Process

On January 6, 2017, CPCC Executive Director Learning Technology Services Gary Ritter sent a letter about captioning videos. If you didn’t see it, please contact your Chair. Key points from the letter:

If Disability Services approves captioning of videos in your course as an accommodation for the student, CPCC will have this captioned for you. This process in place at this time is not for all videos. The process doesn’t necessarily apply in all instances in which a student with a disability enrolls in your course. Disability Services considers specific factors to determine if captioning is an accommodation that needs to be added to a video.

This also only applies to videos that were created by CPCC and are on CPCC’s Panopto repository.

Panopto

Panopto is a tool that CPCC provides so that employees can record video lectures, narrate PowerPoint, record audio, and video tutorials. Panopto also has a tool to help you create your own captions for the videos that you create. Depending on how the viewer is watching the video, the captions appear at the bottom of the video or as a synchronized transcript to the left side of the screen.

Note: You must complete Panopto training in order to get a Panopto account. Training is offered several times throughout the semester. Dates can be found in LearnerWeb and on eLearning’s webpage.

Directions: Using Automatic Captioning in Panopto

(Length: 3 minutes, 45 seconds)

Determining If a Video Is Captioned Accurately

The best way to determine if a video is captioned is to watch part or all of the video and attempt to turn on the closed captions. If captions are available, a closed caption button will appear in the lower right corner of the video.

 Captions may appear at the bottom or to the side of the video depending on the type of program used to create and host the video. The videos should include the same information spoken in the video.

Directions: Turn on captions in YouTube

When Captions Aren’t Needed

If the words spoken are exactly the same as what is displayed on the screen, captions are not needed. For example, if an instructor is narrating a PowerPoint presentation and the slide displays the same words spoken by the instructor, captions are not necessary.

Videos from YouTube, Textbook Publishers, Other Sources

YouTube can automatically create captions for videos. However, the captions aren’t always accurate. Words are sometimes misinterpreted and don’t include punctuation or appropriately capitalized words, thus creating captions that change the meaning of what is actually said.

To determine if the video is inaccurate, watch part or all of the video. If the captions are inaccurate, you can:

• Contact the owner of the YouTube Channel and request accurate captions for the video. (Directions: How to locate the YouTube Channel owner – opens in a new window/tab.)
• Contact your textbook publisher and request an accessible version of the video.
• If the video is on a website, contact the website owner and request that they caption the video.
• Use another video that is accurately captioned.
• Contact CPCC’s Learning Resource Center (opens in a new window/tab) for assistance locating a comparable video that is already captioned in its database.

Captioning Tips

• To Script or Not to Script? – It sometimes helps to write a script before recording your message. That way, when it’s time to create the captions, you can copy and paste from the script.
• Don’t Put Too Much In One Caption – Keep captions to no more than 2 lines showing on the screen at one time.
• Use A Captioning Style Guide – The Described and Captioned Media Program opens in a new window/tab) provides a guide on how to caption videos. This is especially helpful to refer to for questions on how to convey sounds, identify speakers, and other questions.

​WCAG Reference

“Time-Based Media:Understanding Guideline 1.2.” Understanding Guideline 1.2 | Understanding WCAG 2.0, www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html.

Audio should be accompanied by a transcript. Transcripts should include the same information spoken or heard in the audio and should be placed near the audio recording.

Transcripts Benefit People Who:

• Learn by reading
• Like to take notes
• Who have a hearing impairment
• Prefer a visual reinforcement of what is heard
• Are in a noisy place and can’t hear what is being said. They can read the transcripts instead.
• Are learning a new language
• Need to become familiar with new terminology

Examples

A transcript can be formatted several ways but a simple Word document or web page containing the transcript can suffice. If you're unsure of how the transcript should look after you're done, check out these examples:

• Audio Sample
• Transcript of Above Audio
• Interview Between Two People
• Samples From Professional Service (Includes Audio)

Where to Put A Transcript

In the example below, the audio is located in the course and the Word document containing the transcript is available above it (Blackboard course) and below it (Moodle course) for listeners to download.

Options to Obtain A Transcript

If the audio is from a website but does not contain a transcript, you can:

• Contact the owner of the website and request a transcript. The contact information is typically located at the top or bottom of the website.
• Use another recording.
• Contact CPCC’s Learning Resource Center for assistance locating a comparable audio file in its database that is already transcribed.
• Schedule of NPR Transcript Availability

Tips

• To Script or Not to Script? – If you’re recording audio, it sometimes helps to write a script beforehand. You can use the script as your transcript.
• Use a Style Guide – The Baylor University Institute for Oral History provides a Style Guide for editing oral history transcripts. This is especially helpful to refer to for questions on how to convey sounds, identify speakers, and other questions.

​WCAG Reference

“Time-Based Media:Understanding Guideline 1.2.” Understanding Guideline 1.2 | Understanding WCAG 2.0, www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html.

Updated 1/19/18

Have you ever clicked part of a sentence that took you to a website? The text was hyperlinked to a website. Hyperlinks can take a person to a website, different sections of the same document, or another part of the course.  In order for hyperlinks to be most effective, keep these principles in mind:

• Tell people where the link will take them when they click on it.
• Tell people why the link is there.
• Tell people if the link will open in a new tab/window or cause something to download to their computer.

Examples:

• Use WebAIM’s color contrast checker (opens in a new window/tab) to check the color contrast of your text.
• More examples of meaningful links provided by W3.org

 Avoid using the phrase, “click here” to convey that something can be clicked. Video: How a screen reader reads a page with "click here" used often and with several links. (Length: 3 minutes, 02 seconds)

​WCAG Reference

“Link Purpose (In Context):Understanding SC 2.4.4.” Understanding Success Criterion 2.4.4 | Understanding WCAG 2.0, www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html.

“H30: Providing link text that describes the purpose of a link for anchor elements.” H30: Providing link text that describes the purpose of a link for anchor elements | Techniques for WCAG 2.0, www.w3.org/TR/WCAG20-TECHS/H30.html.

Please do not assume that the products you intend to purchase from textbook publishers are accessible. Although some have made strides in making their electronic textbooks, study tools, and online sites accessible, some publishers state that they are still working on compliance.

What Can You Do?

• Ask textbook publishers for the accessible version. - This can save you a lot of development time. In one instance at CPCC, instructor requested accessible versions of the publisher’s PowerPoint presentations during the summer and the publisher returned them before the semester started.
• Ask for the accessible material early. – It may take the publisher several weeks to get the accessible version of the material to you. Therefore, you should start asking about accessibility early. A good time to start is when the sales representative reaches out to you to sell the product.
   

PDF Created from a Word Document

One of the greatest benefits of saving a Word document as a Portable Document Format (PDFs) is that the format of the document is maintained. If a Word document is shared with someone who has a different version of Word, the document may look different; the fonts may look different or things may shift. But, if it’s saved as a PDF, it looks the same way the person created it.

However, not all PDFs are accessible. There are a few quick ways to check:

1. If your cursor turns into a plus sign when you move your mouse over text and doesn’t let you highlight the text, the document may not be accessible . Although it looks like a regular document, a screen reader or document reader cannot “see” the text.

2. Use the Read Out Loud tool to see how much text and alternative text will be read to you. This tool is built into Adobe Acrobat Reader and Adobe Acrobat Pro.

1. To turn this tool on:
2. Click View.
3. Hover over Read Out Loud.
4. Click Activate Read Out Loud.
5. Follow steps 1 and 2 again, then select Read this page only or read to the end of the document.

If you follow steps 1 and 2 in Adobe Acrobat Pro and get an alert like the one below, this means the document is probably not accessible. Adobe Acrobat Pro is asking you if you want it to attempt to convert the contents of the PDF into text that can be read by a screen reader which may make it more accessible. More information on that in the Option 3 in the "How to Make A PDF Accessible".

If you follow steps 1-4 in Adobe Acrobat Pro  or Adobe Acrobat Reader and the Read Out Loud tool says “Blank”, this essentially means that text or alternative text cannot be recognized by the tool, making the document inaccessible.

How To Make a PDF Accessible

Option 1:

1. Make the Word document used to create the PDF accessible first (alternative text, headings applied, etc.). These steps are outlined in the other tabs of this guide. If you don’t have the original version of the Word document used to create the PDF or have the copyright permissions to edit the PDF, scroll down to Option 2.
2. Save the document as a PDF (Instructions based on your version of Word from webaim.org.)
3. Make the PDF accessible in Adobe Acrobat Pro. (Instructions)

Option 2:

Convert the PDF back to a Word document that you can then make accessible. After you save it as a PDF (Instructions), make the PDF accessible in Adobe Acrobat Pro (Instructions).

To convert the PDF back to a Word document:

1. Click Tools.
2. Click Export PDF.
3. Choose the appropriate format based on the type of document you are working with (Word, PowerPoint, Excel, etc.). Note: For Word document - Select Word Document, not Word 97-2003. This will allow you to use the Accessibility Checker in Word.
4. Click Export.

 Option 3: 

Allow Adobe Acrobat Pro to recognize the text. This can be done by clicking "Yes" when you get the scanned document alert or use the Recognize Text tool:

1. Click Tools.
2. Click Enhance Scan.
3. Click Recognize Text.
4. Click In This File to use it for only one document or In Multiple Files. (Directions for Multiple Files)
5. Make sure "All Pages" and the appropriate language of the document is selected from the dropdown menus.
6. Click Recognize Text.
7. Run the Read Out Loud tool as described in the section above to see if text can be recognized.

Note: Completing the steps above does not ensure that your document is completely accessible. The Recognize Text tool may not be able to recognize text if the contents of the document are of poor quality (blurred text or images or several stray dots or specks). If the document is hard to read before you scan it, chances are it will be even harder to convert after it is scanned.

Option 4:

For scanned in documents, scan them using an optical character recognition (OCR) scanner.

​WCAG Reference

“PDF Techniques for WCAG 2.0.” PDF Techniques | Techniques for WCAG 2.0, www.w3.org/TR/WCAG-TECHS/pdf.html.

Updated 1/19/18

Apply Heading Styles

As you create your Blackboard course, use this checklist to ensure you’re addressing the most common and basic points of accessibility. All links in this checklist open in a new tab/window.

1. Headings styles are applied.

2. Heading (Used for main headings)

3. Subheading 1 (Used for section within main heading)

4. Subheading 2 (Used for section within subheading 1)

5. Paragraph (Used for paragraphs/ text that is not a heading or subheading.)

Here's an example of how these headings are applied. In the instructor's view, you will see this. US Constitution is labeled as Heading because it is the primary section. 1787 Convention Primary Points is labeled as the subheading because it is a section within the the primary section. The Bill of Rights is labeled as Subheading 2 because it is a subsection within the 1787 Convention Primary Points. 

If you are unsure if you should apply the Heading, Subheading 1, or Subheading 2 levels, imagine this information is written in a Word document. How would you format it there? Ask yourself if this is a new primary section. If so, then apply Heading. If the next section is related to the primary section, it should be labeled as Subheading 1. If the next section is related to the previous subsection, then it should be labeled as subheading 2. This can be subjective.

Format Lists Using Numbered or Bulleted List Buttons

Describe Images (Alternative Text) or Insert " (Double Quotation Marks) for Purely Decorative Images

Step 1: Click the Insert/Edit image button to insert a picture.

Step 2: Write the description.

For more information about alternative text, please refer to the Images tab.

Use Table Headings Above Each Column

In the example below, Assignment and Due Date are the headings. These are also referred to as header rows.

Hyperlinks Are Descriptive and Explain What Happens When Person Clicks On It

Hyperlinks are descriptive and explain where the person will be taken when they click on it, if it will open in a new tab/window, and what it will do/what they will see after they click on it. Examples:

• (Download) Practice Document
• CPCC’s ITS Help Desk (opens in a new tab/window) is available for technical help.
• All links this is course open in a new window/tab. (This can be written in the Course Information section.)

Avoid using the phrase, “click here” to convey that something can be clicked.

Video: How a screen reader reads a page with "click here" used often and with several links.
(Length: 3 minutes, 02 seconds)

Do Not Rely On Color Alone to Convey Information

Color should not be the only thing used to convey importance.  Include text that conveys the intention of using the color as well. (Example: Rather than stating “Late work will not be accepted” (in all red letters) consider “Important: Late work will not be accepted.”

Ensure Color Contrast Is Sufficient

Make sure that the color contrast between the text and background color is sufficient by using a color contrast checker. 

• Level Access Color Contrast Checker
• WebAIM Color Contrast Checker

Option 1:

1. Type your text into Blackboard.
2. Highlight the text you want to change to a different color.
3. Click the Text Color button to select the color you want to use. Blackboard will then change the text to the new color.
   
4. Go back to the Text Color button and click the dropdown arrow to the right of the button.
   
5. Click More Colors.
   
   
    
6. Blackboard shows you a number assigned to the color you are using, also referred to as the hex color code, at the bottom. Highlight and copy this code, including the # (press Ctrl + C).
   
   
    
7. Open one of the color contrast checkers (Level Access Color Contrast Checker or WebAIM Color Contrast Checker) in a new tab or window.
8. If you're using the Level Access Checker, paste the code into the Foreground RGB IN hex (Level Access) color box.
9. If you're using the WebAIM Checker, paste the code into the Foreground box.
10. Press Enter.
11. The color contrast checkers will show a preview of the text color.Level Access will indicate in the Compliance Levell section if if the color you want to use is compliant. WebAIM will indicate this beneath the section you entered the hex code color.
12. Repeat steps 3-12 until you locate a color that is compliant/passes the standard.

Option 2:

1. Open one of the color contrast checkers (Level Access Color Contrast Checker or WebAIM Color Contrast Checker) in a new tab or window.
2. Click the color selection button to the right of the hex color code box.  
3. Use the slider or pointer to locate the color that you want. Click OK.
   
4. The color contrast checkers will show a preview of the text color.Level Access will indicate in the Compliance Level section if the color you want to use is compliant. WebAIM will indicate this beneath the section you entered the hex code color.
5. Repeat steps 2 -3 until you locate a color that is compliant/passes the standard.
6. Copy the hex color code (Ctrl + C) including the #.
7. In your Blackboard course, highlight the text you want to change to a different color.
8. Click the dropdown arrow to the right of the Text Color button.
   
9. Click More Colors.
   
10. Paste the hex color code into the Color box at the bottom, including the #.
    
11. Click Apply.
    
    You can also use Options 1 and 2 to check the background color if you intend to change it from something other than white. Test the background color using in the "Background RGB in hex" (Level Access) or "Background Color"(WebAIM) sections.

This contains a list of helpful resources as well as the handouts and files provided on the other tabs of this guide.

Word Document

Color Contrast Checker

• SSBART Group Color Contrast Checker - Provides RGB codes to put into Word
• WebAIM Color Contrast Checker - Does not provide RGB codes, provides Hexacode

Captions

• Adding Captions to Panopto
• Turning on Captions in YouTube
• DCMP Captioning Key - A style guide for captions

Audio

Transcript Examples

• Audio Sample
• Transcript of Above Audio
• Interview Between Two People
• Samples From Professional Service (Includes Audio)

Additional Audio Resources

• NPR Schedule of Transcript Availability
• Baylor University Institute for Oral History

Video Tutorials & Simulations

• How to Activate the Accessibility Checker in Microsoft (Length: 39 seconds)
• YouTube Video: What It's Like To Be Color Blind (Length: 2 minutes, 28 seconds)
• YouTube Video: What It’s Like to Be Blind (Length 3 minutes, 34 seconds)

Web Accessibility Guidelines

• Introduction to Web Accessibility by Web Accessibility Initiative
• World Wide Web Consortium (W3C) -Includes the complete Web Content Accessibility Guidelines (WCAG)
• Web Accessibility Tutorials - Simpler version of WCAG guidelines for page structure, menus, images, tables, and forms
• WebAIM - Simple, easy to understand application of guidelines

Assistive Technology

• Understanding Assistive Technology
• Commercial with examples of assistive technology

Common Terms

Blackboard Accessibility

• Tips from Blackboard
• Accessibility Features in Blackboard (includes keyboard shortcuts you can provide to students as a link in your course)