Universal Design Principles for websites in Teaching and Learning in the Digital World

Universal Design Principles for websites in Teaching and Learning in the Digital World

Contents

TOC h u z t "Heading 1,1,Heading 2,2,Heading 3,3,"Universal Design Principles for websites in Teaching and Learning in the Digital World1

1. Include a welcoming access statement.1

2. Provide simple, consistent navigation.1

3. Choose tools carefully2

4. Use color with care.2

5. Make sure text is readable.3

6. Provide accessible document formats.3

7. Describe graphics and visual elements.4

8. Caption videos and transcribe audio clips.4

10. Rethink, redesign PowerPoint presentations.5

Example of good content structure6

Example of good link creation7

1. Include a welcoming access statement.

A well-crafted access statement communicates your level of commitment to designing the course in a way that is inclusive and welcoming to all studentsincluding those with disabilitiesand provides guidance for students who encounter barriers.

Include contact information (Simulated in this case).

Avoid the use of wording that inadvertently communicates that the primary reason for providing access is to be in compliance with the law.

Avoid using language that places all of the responsibility for access on the student.

2. Provide simple, consistent navigation.

Be consistent throughout your course.

HYPERLINK l "_17dp8vu" Example of consistent course navigation

Use concise, meaningful text for links.

Like this: Writing Good Link Descriptions

Not this: Click here for information on writing good link descriptions.

To the extent possible, avoid requiring students to drill down multiple times to reach your content.

Provide a table of contents for easy navigation to all components of your course.

Make sure all links can be controlled by keyboard-only navigation.

3. Choose tools carefully.

While many of the tools that are a part of most popular Learning management systems support helpful instructional strategies, they may present barriers for some students. An awareness of the potential barriers may help you determine when to use, when to avoid, and when to provide alternatives to these tools.

Testing and Quiz Tools

Students who use adaptive technology Currently, some of the testing tools have compatibility problems with some screen reader technologies. This occasionally results in the screen reader program crashing during an exam. A good practice would be to have a mock exam available for students to try so that they will know ahead of time if their adaptive technology will work with your exam. If it does not, an alternate version of the exam will need to be provided.

Students receiving the accommodation of extended time Because students with disabilities are often allowed the accommodation of extended time on exams, it is important to be able to provide this accommodation in an online setting as well. In most course management systems, it is possible to adjust an individual students exam length, but it is not always simple to do this. In some cases, it is necessary to set up a different exam for the student who needs extended time.

4. Use colour with care.

Provide good colour contrast.

Off-black text on an off-white or light background is the most readable.

Patterns and images behind text make it more difficult to read.

If you are creating an HTML document to post in your course, consider using CSS to assign colours. This allows the user to change the way colours are viewed if desired.

You can check your contrast against the accessibility standards here: https://webaim.org/resources/contrastchecker/

Do not use colour alone to convey meaning.

The use of colour to convey meaning may result in your images or information not being accessible to students who are colour blind.

Some students may choose to print materials using a black and white printer. The images would not be meaningful once printed.

Another way that colour is sometimes used to convey meaning is to differentiate items in a list. For example, a professor may write the following: All assignments in red must be completed in APA style. This poses a problem for students who are blind and students who are colour blind. The use of colour is not discouraged altogether. There are definite advantages for other students. It is possible to meet the needs of all of these students, by including another indication in addition to the colour. In the example above, simply adding APA after the item will achieve that goal.

5. Make sure text is readable.

Choose a sans serif font such as Arial or Helvetica for your text. These fonts are easier to read for most people but especially for those with low vision.

Make sure font sizes are large enough to read comfortably.

Avoid capitalizing or italicizing large blocks of text.

As mentioned above, make sure you have good contrast between text colour and background colour.

Limit the amount of text provided in graphics. Images may not magnify gracefully enough to be readable by students using magnification software.

For example, this graphic is difficult to read as it is and if you zoom in to it the text is pixelated and still hard to read.752475455930

3038475160655

6. Provide accessible document formats.

It is common to upload content in MS Word, Rich Text, and PDF documents. Providing content in this way can be a great way to provide access for students because it makes content portable to other devices. The design of these documents can improve access or create a barrier for students. Below are a few tips for creating documents with greater usability. The resource highlights provide detailed tutorials on creating accessible documents.

MS Word

Use headings to provide structure. People often make the mistake of creating headings by simply applying sizes, colour, bold or italics. While this makes the document appear to have structure, there is not structure when someone reads the document using a screen reader.

Provide alternative text for images.

Create lists by using the actual ordered and unordered list tools.

Avoid the use of Word Art and text box tools.

Adobe Acrobat PDF Documents

PDF files are only as accessible as the document from which they were created. Following the instructions above and creating an accessible MS Word document is the best place to begin.

PDF files created before Acrobat 4.0 are totally inaccessible as they are simply images of the original document.

Some PDF files created more recently are also only images because they have been created by scanning the original document as an image.

7. Describe graphics and visual elements.

When used effectively, images can greatly improve the experience of students in an online course. Images help tell the story you want to tell and may help messages stick with the learner longer. For a person who does not see the images, though, it is important to provide the information those students are missing.

In MS Word, some Learning management system and most HTML editors, the user has the option of adding an image description or alternate text. Make sure to add the text description by simply describing what the user who does not see the object is missing.

Descriptions are not necessary for any images that are purely aesthetic.

Sometimes charts and graphs will require longer explanations to be meaningful. In HTML, there is an element called long description that can be used for this. If you are not using HTML, you will need to find another way to provide that description. An excellent approach is simply to describe the chart as you would if you were talking about it and include that description in the text of the document.

Besides still images, instructors often use videos to enhance learning. There are often visual elements in a video that are crucial to understanding the content. This may include names and titles of speakers in the video, demonstrations of processes, text on the screen that is not spoken, or portions of the story line that are not revealed by the dialogue. These elements which are missing for someone who does not see them, will need to be described.

When you are creating a video, keep this in mind as you create it. A well-designed video can provide descriptions of most if not all the visual elements naturally without requiring a later add-on audio description.

8. Caption videos and transcribe audio clips.

Captioning videos used to be a highly technical process, and now that has all changed. If you can upload a video to YouTube or Vimeo, you can also learn to caption your videos. The process requires just a few simple steps. (Some videos may auto-caption*)

Create a transcript of your video.

Add information about audio that is not dialog such as music or background noise.

Add names of speakers if appropriate.

Add timings.

9. Rethink, redesign PowerPoint presentations.

Presentation software applications, like PowerPoint, are designed to provide visual information to augment a live presentation. Often instructors use the same PowerPoint presentations they have developed for a face-to-face course and drop it into the online course. This is often ineffective because much of the information is missing.

In order for a PowerPoint presentation to be effective as a standalone eLearning resource, it has to be designed differently. It is worth reconsidering whether this format is the best way to deliver our content in an online course.

Below are tips on creating accessible PowerPoint presentations. Depending on the design of your PowerPoint, the best way to provide equal access may vary, but these tips will help you make a traditional PowerPoint more accessible to a non-visual user.

Some of the tips to keep in mind are:

Avoid starting with a blank slide and adding a custom text box.

Instead, choose the layout that fits your slide design.

Look at the outline view of the slide to see if the text on your slide is visible there.

Describe images, charts, and graphs with alternative text.

Example of good content structure

Module 1: An Introduction to Universal Design

M1 Video: What is Universal Design?

M1 Video (QuickTime T1)

M1 Video (QuickTime DSL)

M1 Transcript

M1 Reading Assignments

A Historical Perspective of Universal Design

Universal Design as a Philosophical Framework

The Principles of Universal Design

List of additional suggested readings

M1 Activities

M1 Reaction Paper

M1 Questions to Ponder (Discussion Board)

M1 Self-Test

Return to starting point

Common Problem Sample of Problem Suggested Solution

When documents are provided in multiple formats, links are given as format name only. Homework Assignment #1:PDFWordHTML

Homework Assignment #2:PDFWordHTML Homework:

Assignment #1 (PDF)

Assignment #1 (Word)

Assignment #1 (HTML)

Introductory sentences are provided with links to more at the end of it. Elusive Ivory-billed Woodpecker is finally caught on videotape.More Elusive Ivory-billed Woodpecker is finally caught on videotape >>

Professor wins award for article on sustainable design.More Professor wins award for article on sustainable design >>

A similar format to the above is often seen following a longer introductory paragraph. The hard work of our own Dr. Vince Williams has come to fruition in the release of his recent award-winning publication entitled Sustainable Institutions. A reception will be held celebrating the release of this book and honouring his accomplishments.Details The hard work of our own Dr. Vince Williams has come to fruition in the release of his recent award-winning publication entitledSustainable Institutions. A reception will be held celebrating the release of this book and honouring his accomplishments.Full article: Professor wins award for book on sustainable design > >

One of the most common problems is the use of the phrase click here as a link to more information. Click hereto go to the latest news on your university. Get the latest news on your university>>

Click here!

Big Savings Opportunities for Students!

Example of good link creation

Return to starting point

Student Name:

ID Number:

Assessment Title:Assessment 2

Self-Assessment:

How well did you understand the assessment criteria?

[ ] Very well [ ] Well [ ] Somewhat [ ] Not at all

How condent are you in your work quality?

[ ] Very condent [ ] Condent [ ] Somewhat [ ] Not

How much effort did you put into this assessment?

[ ] A lot [ ] Enough [ ] Some [ ] Little [ ] None

What would you like feedback on?

lesson sequencing

Self-assessed Grade

[ ] Fail [ ] Pass [ ] Credit [ ] Distinction [ ] High Distinction

AI Usage :

Which AI tool did you use for this assessment?

What did you ask the AI tool to do?

How did the AI tool help you with your assessment?

Published Website URL: (not a link to the editor/builder)

Reflection:

References:

Video Script: