For the latest COVID-19 information, please go to our  coronavirus page. 

nau logo

mountain campus

IN > OIEI > ID&S > Step-by-Step Tutorials

Accessible Design

There are many ways to make your online course more intuitive, easier to navigate, and more inclusive. These enhancements can help users on low bandwidth connections, on mobile devices like smartphones and tablets, and some simple changes can significantly increase access for users with disabilities while also improving the class for everyone.

Watch Audra Travelbee's presentation on Universal Design for Learning (UDL)

ALLY for Accessible Documents

Use the Ally tool, which works with both Blackboard and Canvas, to improve the accessibility of your documents and make them available to users in a variety of formats.

Captions in Kaltura

Kaltura is NAU's Streaming Media Server, and it is fully integrated with the LMS. Fast, free machine-captioning is available in Kaltura. While the accuracy is only about 80-90%, you can edit the caption file. If you need higher quality, the Usable Materials Center, part of NAU's Disability Resources office, is available, but it will take longer because transcripts are reviewed by people. Captions can make a video easier to understand for the hearing impaired, for non-native speakers, and can also help with accented speech and unfamiliar terminology.

Long videos can be made more engaging by breaking them into short segments with embedded activities (quizzes, discussions, etc) in between that check for understanding. The Analytics tools in Kaltura can be useful to see who's watching your videos and for how long.

order machine captions

Use of Color

Some instructors use color as a navigational cue, or to signify the importance of something in their course. However, there are an estimated 300 million people in the world with color vision deficiency. Approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) are color blind. Color should not be the only method used to draw attention to an element of the course. In general, providing alternate ways of accessing content is helpful.

1 in 8 men and 1 in 200 women are colorblind

Text

serif and sans-serif text

Extended Time on Test

If you are notified by Disability Resources that a student needs extra time on a test in Bb Learn, it's easy to create an exception for one or more students.

Hyperlinks

Images

Things to avoid

Graphics Tags

Use the ALT or LONGDESC HTML tags to explain what an image depicts. A graphic of a dog could just be tagged "dog". Decorative images that convey no meaning should also be tagged as such, so that a screen reader will ignore them. A graph or chart, however, will probably require a LONGDESC tag explaining in words what the image represents. For example, "Figure 1 shows seasonal rainfall in the desert and the tropics, and suggests that while the tropics get more rain overall, both environments have heavier rains during the summer and winter months, and lighter rains during spring and fall."

How to ALT tag an image in Bb Learn:

After adding an image (from the + menu, browse the Content Collection or My Computer for your graphic), right click the image to bring up the editor by selecting Image...

adding an ALT tag to an image in Bb Learn

Add an ALTernative description in the box and click the Save button.

add a brief image description

There are additional tricks you can employ to enhance the way graphics display in the LMS using just a bit of HTML code. For example, Blackboard uses fixed image sizes so a large image can cause a lot of unnecessary horizontal scrolling. Scaling the graphic to a percentage (80% of screen size, for example) is an easy change that makes images render better whether you're viewing the page on a smartphone or a large monitor. To edit the HTML that controls the graphic, click on the <> button in the editor to bring up the HTML source code.

source code editor

Accessible Word docs

In Microsoft Word, you can add topic headings to your document to make it easier for a screen reader to index the content. The screen reader will list headings first, allowing the user to skip to the part they want to review. Create headings (H1, H2, H3) from the Styles button on the Home tab. You can also open the Styles pane from the next button to the right.

Use Word's Styles button to create topic headings

Other Word tips:

Accessible PDFs

Similar to Word, you can tag your PDF to provide navigational cues for a screen reader. If you own Adobe Acrobat Pro, go to the Tools menu and add the Accessibility tool. You can use the AutoTag Document option to automatically add tags to the document. Adobe provides detailed instructions.

Accessible Tables

Tables can help make data more readable. A prominently placed table of graded assignments can help students keep track of when work is due. Screen readers will adjust how information is presented in a table depending on whether the table has a header row and/or a header column. For example, if a table has a header row, the screen reader will read down the columns rather than across the rows.

TH=table header, TR=table row, TD=table data

Table with Header Row and a Header Column

R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5
R5 C1 R5 C2 R5 C3 R5 C4 R5 C5

 

Table with Header Row but no Header Column

R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5
R5 C1 R5 C2 R5 C3 R5 C4 R5 C5

 

Table with no Header Row but a Header Column

R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5
R5 C1 R5 C2 R5 C3 R5 C4 R5 C5

 

Table with no Header Row and no Header Column

R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5
R5 C1 R5 C2 R5 C3 R5 C4 R5 C5

Operating System Accessibility Settings

computer accessibility settings

Your computer, phone, and tablet have additional settings that can be used to increase accessibility, including voice recognition, text-to-speech, screen contrast, brightness, magnification, and more.