Office of Academic Innovation
Portland State University
OAI Course Builder Accessibility Worksheet
2
Design Guidelines
3
Site, course or module uses consistent language, navigation, and structure.
3
Limit the number of options or steps required by the user to complete a task.
3
Reading and navigation order is logical and meaningful.
3
Placement and location of navigation items is easy to follow and it is easy to find information.
4
There is a home button.
4
Language elements are helpful to users and there are no visual cues in content.
4
Font is not smaller than 10 points. (Recommended 12 point)
5
I am using a sans-serif font.
5
If color is used to convey meaning, a black and white compatible version is also included.
6
Colored Text to Communicate Emphasis:
6
Color to Convey Emphasis Example:
7
All caps font is not used to convey emphasis.
7
How to convey emphasis:
8
Color contrast checked for font foreground/background through the webaim.org color checker.
8
Abbreviations or acronyms explain or expand on the definition the first time it is used, or provides a link to the
definition.
10
I have not used text in images.
10
Describe navigation cues such as timed assignment, quiz, or video length before required action.
11
I have provided instructions when requiring user input or interaction.
11
Site or course has all proper sequential heading structures.
11
How to use Headers:
12
All lists are formatted structurally, not manually and use the bullet or numbering button.
12
All tables must include heading structures.
13
Complex tables, diagrams, timelines, or other complex images include all proper heading structures, captions and
tags.
13
There is no flashing, blinking, or moving content in my course or site.
13
Multi Media
An alternative format is provided for time-based media.
Videos have easy to understand closed captions and users can turn captions on and off.
Audio-only and video-only files provide an alternative form of media that present all equivalent information.
Videos are audio described.
In my course or site, users have the ability to pause/stop/hide video.
Low or no background audio in media.
I do not use sound to communicate meaning.
Word and text based documents are provided as an alternative to time based media, interactive media, and web
applications.
Required class software is accessible.
14
14
14
15
15
15
15
16
16
17
1
iClicker format has been tested for accessibility.
17
Links
All images that are links have title descriptions.
Alt Text vs. Title Descriptions
All hyperlinks use self-describing links and do not use URL’s.
Site or course uses new page for linking external websites and same page for linking internal pages.
Pages and external media have titles that describe topic or purpose.
Hyperlinks have been tested and are active, working links.
Links are visually apparent and are all the same color.
17
17
17
18
18
19
19
19
External web applications
External web applications have been tested for accessibility.
Linked external websites have been tested for accessibility.
Web conferences are managed in an accessible format.
Interactive media has an alternative format for content that presents equivalent information.
No authentication verification pop ups are used.
20
20
20
20
20
20
Self Testing Resources:
21
Course Materials
I have an accessible electronic syllabus.
My syllabus includes the PSU disability statement.
My PDF’s are accessible.
PowerPoint’s or Keynote slideshows are accessible.
Course readers have been checked for accessibility.
I have selected an accessible textbook, ebook product or any additional add-ons.
All course handouts are available in an additional accessible format.
Course materials from the Portland State University’s Reserve Materials or Library are in an accessible format.
22
22
22
22
23
24
24
25
25
References
25
OAI Course Builder Accessibility Worksheet
This set of standards is informative and has been developed by the Office of Academic Innovation to
assist with designing and developing accessible online materials and environments. It reflects best
practices of Universal Design for Learning and requirements for Level “AA” conformance outlined by
the WCAG 2.0 (Web Content Accessibility Guidelines) and section 508 of the Rehabilitation Act.
**Please note this resource is meant to be illustrative and although content and materials may satisfy
standards criteria, components may not always be usable by people with a wide variety of disabilities,
and does not ensure full WCAG compliance with A, AA, and AAA standards.
2
Design Guidelines
Site, course or module uses consistent language, navigation, and structure.
When designing a site, course, page, or module, keep navigational elements that occur on
multiple pages in the same spot on every page and make descriptive language the same for
every occurrence. Structural elements such as tables and headers should be styled
consistently throughout the site as much as possible. For example, if an instructor designs a
home button for the class website, the home button should appear in the same place on every
page.
Another example: If directing users to an assignments page, use the same language every
time. “Go to assignment one, go to assignment two, go to assignment three”. Stay away from
language that uses different descriptions for the same item, “discussion, discussion forum,
discussion post, assignment discussion”.
Limit the number of options or steps required by the user to complete a task.
As a general rule, it is a good design practice to limit the number of steps by a user to
complete a task. This includes using a limited number of links or tabs to find information. When
you are linking a document or external URL, make sure you are creating a direct link. This
means when you click on the link, it will take you directly to the content, and not to another
page with another link. Another example may be if you are directing students to an assignment
on the week 2 page of the course, create a link to the assignment on the page, instead of
directing them to the main assignments folder, then to the assignments folder for week 2, then
to the assignment. By creating a direct link, you are making it easier to find information and
navigate your site.
Reading and navigation order is logical and meaningful.
Users navigate and process online information in different ways. The application of logical,
consistent and meaningful navigation will allow users to move around your site, or course in
predictable ways. It also means that they can place their focus on processing content and not
divert cognitive energy to looking for information.
When establishing navigation for your site you should provide:
● Standard navigation information on all pages.
● At least some contextual information about where the user is in relation to the section
of the web site.
● Descriptive and straightforward navigation labels.
3
Placement and location of navigation items is easy to follow and it is easy to find
information.
Using a consistent layout is important as a familiar layout helps people to quickly find what
they are looking for. In order for users to be able to locate and process information easily you
need to:
● Provide the shortest possible routes to a given piece of content.
● Ensure that your overall navigation structure will remain stable and support additional
content being added to the site.
There is a home button.
A home button is a link back to the main page that appears on all additional site pages. After
logging into your course or site, the homepage will be the first page that users see. This is
where users will have quick access to general information, and by providing a home button in
your navigation; users will be able to easily return to the starting point of their session.
In Desire2Learn the course name at the top of every page is automatically linked to the home
page so you may not feel the need to build in an additional home button. If you are working on
another platform such as Google Sites, you will need to create a home button on every page
that is not the home page. By providing consistent navigation, you are making the course or
site easy to navigate and find information for all users.
Widgets within D2L have an explanation in a text-based format, and are accessible.
When building in D2L, you will have the option of creating and adding a custom widget.
Accessibility best practices apply to content created in homepage widgets, and any interactive
elements should include proper alt text and/or a descriptive caption or transcript in order to
make the information easy to find and read.
Language elements are helpful to users and there are no visual cues in content.
By using language that adequately name objects; you are making it easy to locate information
for all users, not just those with a disability. Remember when providing instructions give
adequate descriptions and properly name objects. Screen reader users are reading text and
will look for the exact description provided.
For example, it is easy to call an assignment a discussion (if it is both), or an essay an exam or
paper. It may help to use naming conventions based on where the assignment or task is
placed within your course. For example, if Assignment One is a discussion and is located in
the discussion folder, call it Discussion One, or Discussion Assignment One. By using
4
descriptive language that identifies where the object can be located, you are making it easy to
navigate your course and find information.
Here is an example of how to provide instructions: “Go to Assignment One to begin the next
step. You can also find Assignment One under the assignments folder in the navigation bar”.
A common mistake may be: “Click on the green arrow at the top of the screen to go to the first
assignment”. This final instruction names the element by its color and shape, possible
descriptions that will be unknown to a user with visual impairments.
Font is not smaller than 10 points. (Recommended 12 point)
The standard font size for document creation is 12 points, however many browsers allow users
to customize their font sizes and style preferences. Font smaller than 10 points can be
challenging to read if someone has a visual limitation, so, as a best practice when building
content, use a standard size of 12 points.
I am using a sans-serif font.
Fonts are categorized into families based on their style characteristics, with serif and sans serif
fonts being the most common. Sans-serif fonts are blockier and do not flare out at the edges,
while serif fonts are noted by their flared edges.
You can choose font type in many WYSIWYG editors with styles like Times New Roman, Arial,
Verdana, Garamond, etc. Sans-serif fonts are blockier and lack the flared extensions of serif
fonts, making them easier to read for people with limited visibility and are easier to scale to a
larger size. Sans-serif fonts are also commonly used for computer displays and are more
easily read on a screen. As people tend to skim information online, it is a best practice to
choose a sans-serif font style such as Arial or Calibri. Remember to limit your course or site to
a maximum of 2-3 different font styles, as it is important to keep a consistent look and feel
throughout your course.
5
If color is used to convey meaning, a black and white compatible version is also
included.
Users differ in their ability to perceive color, and color alone should not be the sole method
used to communicate meaning. Where possible, a black and white version should also be
available or a caption describing pertinent information. Note the example map of the MAX rail
lines in color includes a black and white version that spells out which line is which color so that
color is not the sole method for communicating lines. It also includes end train direction so
someone may be able to associate the train line with the direction it is heading.
Colored Text to Communicate Emphasis:
If you want to indicate an assignment is due on a certain date by marking it in red, you would
also need to create a strong tag and bold styling option for the text to indicate the same
emphasis to a screen reader. Note: that use of a bold font alone is not detectable by most screen
reader software, using built in Styles allow accurate navigation by users of assistive technologies. The
goal is to create emphasis that is understandable by all readers. Microsoft Word is a common
6
text editor and will be the software used to demonstrate emphasis, as well as Portland State’s
Learning Management System Desire2Learn.
Color to Convey Emphasis Example:
Today we will be covering ancient Rome with subjects and themes covering the political,
social, economic, cultural, and religious impact on society. Your assignment will be due Friday
at 5pm.
Issue: Someone with limited vision, using a screen reader, or someone with a color blindness
disability, would not be able to associate the importance of the text marked in red. By
structurally marking your document with a strong tag, as well as the bold styling option, the text
is noted as important by all users.
What is a strong tag?
Bold + Strong Tag Example:
Note the example text is bolded and tagged and does not use color to reference emphasis:
Today we will be covering ancient Rome with subjects and themes covering the political,
social, economic, cultural, and religious impact on society. Your assignment will be due
Friday at 5pm.
How to Create Emphasis Using the Bold Key and Strong style in Microsoft Word:
In Microsoft Word the bold and strong styles are located under the Home tab and Styles
section. Note that both bold and strong will need to be selected to convey emphasis.
All caps font is not used to convey emphasis.
All caps font can be used for acronyms and is often misused to convey emphasis in content.
For example, “Don’t forget your assignment is DUE ON FRIDAY, and will require you to read
three chapters and pass an online quiz”. Screen readers often increase the volume when
reading all caps, or will spell out a word letter by letter. This can be disrupting to someone
using a screen reader and may cause confusion.
7
How to convey emphasis:
This may depend on the content editor you are working in. In Microsoft Word, to structurally
style text with an added emphasis, you want to use the strong style option. The strong tag
creates a style, which alerts the screen reader user in the content code or document html that
the text is emphasized. You will also need to make the item bold in order for it to be
emphasized visually. (for visual users)
To Review: Creating emphasis depends on the software you are working in. In Microsoft Word
you need to make selected text bold and strong in order to create emphasis
The strong style option is located under the Home and Styles section in the toolbar.
Color contrast checked for font foreground/background through the webaim.org color
checker.
The intent of this success criteria item is to distinguish text from its background color so it may
be visible to people with moderate or low vision capabilities. The appropriate level of color
contrast will aid users in reading text on a webpage, as many users will scale the text to a
larger size. For standard size text the recommended color contrast ratio is at least 4:5:1.
Using the Color Contrast Checker
The webaim.org color contrast checker is a great tool to assist you in selecting the appropriate
accessible color contrast. The website has you input your foreground (text) color and your
background color into the checker. It will calculate if these two colors provide enough contrast
between foreground and background to be visible and useable by all users at a WCAG AA
pass level (4:5:1) or even a AAA pass level (7:1) for all normal text. The words “pass” in green
or “fail” in red will notify you of a pass/fail evaluation. The checker uses hexadecimal codes for
web colors, or a six-digit number for each color value preceded by a pound sign. For example
black = #000000, and white = #ffffff. The checker includes “lighten” and “darken” buttons that
will allow you to experiment with supported color contrast ratios.
The WebAIM Color Contrast Checker starts with having you input your foreground color code,
and background color code. It will then calculate the contrast ratio between the two colors,
provide a pass or fail evaluation, and show you a visual of the two colors in action.
8
*Note: to use the WebAIM color contrast checker JavaScript must be enabled and supported
on your computer.
Finding your color’s Hexadecimal Code
Did you know that every color has an assigned number that distinguishes it from other colors?
This is known as a color’s hexadecimal code. Knowing or finding your web content exact color
hexadecimal or hex code can be complicated. A superior web tool to extract color from any
web page is called Colorzilla, and is supported only on the Mozilla Firefox and Google Chrome
browsers as a downloadable website-add on.
Firefox Colorzilla has an eyedropper tool that once installed, is located on the right hand side
of your browser menu bar. Take the eyedropper and select a color on the page. An
information bar will appear with a visual of the color and the color’s hexadecimal color values
indicated by starting with a pound sign (#).
Google Chrome’s Colorzilla has a color wheel icon and once installed is located on the right
hand side of your browser menu bar. Chrome’s Colorzilla gives you several options to choose
from, with the first option to “Pick Color From Page”. This will turn into an eyedropper that will
allow you to click and select a color from a web page. A dialog box with the color’s
hexadecimal value will appear, also indicated by the pound sign (#).
9
*Please note that both versions of Colorzilla are free and browser specific, and do require you
to download the software to your computer.
Abbreviations or acronyms explain or expand on the definition the first time it is
used, or provides a link to the definition.
Many screen readers have difficulty defining content to aid in understanding and will need
acronyms or abbreviations spelled out the first time they are used.
Example = PSU, Portland State University.
I have not used text in images.
Images of text are often used as banners or headers to create a stylized heading to a web
page or course page. Images of text can be difficult to interpret for someone using assistive
technologies and should be limited to essential communication design only, such as a
company logo or brand name. By using real text instead of an image of text, you are allowing
someone with a vision impairment to customize and adjust the text size, font, spacing or
alignment so they may be able to interpret the intended information.
*Note: Any charts, graphs, screenshots, or diagrams that convey a significant amount of
important information through text is ok as an image as long as it is accompanied with
captioning.
10
Describe navigation cues such as timed assignment, quiz, or video length before
required action.
The intent of this item is to make interactive content more predictable for users with disabilities.
An unexpected change can be disorienting for users with visual or cognitive disabilities
attempting to interact with a web page. For example, if your course or site requires the user to
input information that will then cause the format of the page to change, you will need to provide
users with a description of the changes.
Imagine that you ask users to input their quiz answers into an online quiz in D2L. You have
created the quiz with a setting where students cannot go back and check their work and you
have put a time limit on the quiz. Students with limited visual and cognitive abilities might have
problems with these settings after they have put in their information as the quiz could hit a time
limit and close, or not allow a user to go back and check their work. This situation would
require you to provide information to students before they take the quiz about these settings in
the form of a descriptive paragraph.
Remember to provide adequate and descriptive instructions when creating quizzes in D2L so
as to provide your students with the best possible experience in your classroom.
*Note: This does not apply to clicking links and going to a new page, it refers to users
interacting with content through the input of information.
I have provided instructions when requiring user input or interaction.
Form fields and quizzes are examples of web elements where a user might need to input
information when working online. It is important to provide descriptive instructions that explain
what the input should be and how the system will work once text has been entered. For
example, if you want to assign your students a quiz, make sure to include instructions about
the quiz settings or restrictions, and how you want them to answer questions.
Site or course has all proper sequential heading structures.
Heading styles are used in online content creation to create structure to a document for
someone using a screen reader. Headers are essential to the format of any online web page,
document, or resource, and are a method of styling text using listings h1- h6.
Headers are built hierarchical based on content, and include document titles, page sections,
marking images as titles, and provide the opportunity for users using assistive technologies to
navigate among pages and sections.
11
By styling your document with a heading structure you are allowing screen reader users to
easily access the intended information. Common mistakes are using visual styling elements
such as bold, italic, underline or color to create an emphasis. This only changes the content
for visual users, not for people using assistive technologies.
Imagine having read a 200-page book without chapters and an instructor asked you to find
information from a specific section in the book. You would have to guess at where the
information might be and start reading various pages and sections to try and guess where the
information might be located. Now imagine you have chapters in the book and the instructor
has asked you to go to chapter 9 and find some information. You will be able to quickly locate
the chapter and track down the info based on how the text was sectioned out by chapters. It
may help to think of headers as web content chapters.
How to use Headers:
Header one is the title to the page or the main subject of the content, header two is the first
level of sub headings, followed by level three and so on.
Example:
Heading 1 (only one per page) (This should be the page/document title)
Heading 2 (as many as needed) (sub-section of document)
Heading 3 (as many as needed) (sub-section of heading 2)
Heading 4 (as many as needed) (sub-section of heading 3)
Heading 5 (as many as needed) (sub-section of heading 4)
Heading 6 (as many as needed) (sub-section of heading 5)
All lists are formatted structurally, not manually and use the bullet or numbering
button.
All lists should be formatted structurally with bullets or numbers using the list control key. This
action is a structural style choice meaning a screen reader is notified there is a list of
information and how many items are in the list. This is extremely beneficial for jumping to
sections and deciding whether or not to keep reading when accessing content from a screen
reader. An example of a list control key may have bullets (unordered list) or numbers (ordered
list). A common mistake when creating a list is to type numbers or use a dashed line.
Unfortunately this method is not a structural change, only a visual change and will not alert a
screen reader that a list is being used. Using the list control key will ensure structural and
visual styling.
12
Lists can be made using bullet points, numbers, or letters, and are an efficient method for styling lists
within your content.
All tables must include heading structures.
Table headings prevent content from losing its meaning and association when the content is
delivered to a non-visual user. For instance, if a table is marked up correctly, a screen-reader
user will be able to hear the column and/or row heading of each table cell when he or she
navigates through the table. To create accessible tables, it is essential that:
● Column and/or row headers are identified
● Header and non-header cells are properly associated
● Complex tables include a caption to describe the included information.
Complex tables, diagrams, timelines, or other complex images include all proper
heading structures, captions and tags.
Complex tables, data sets, diagrams, timelines, or images should include proper x axis and yaxis heading structures. This will alert a screen reader as to the relationship between
information, include descriptive tags if hyperlinked, and include a caption or explanatory
paragraph describing an overview of what the audience is seeing. By providing a caption or
explanatory paragraph a user is able to identify the relevance of pertinent information before
being alerted to the first cell of a large table.
My headings describe topic or purpose.
For a definition and more information on heading structure, see Section 3E.
Headings provide structure to a document or web page when working in an online
environment. It is important to create descriptive headings so users understand what the
information in that particular section is about. For example, you may have a section of your
syllabus with a header of “weekly assignments” that describes the assignments for each week
throughout the semester.
There is no flashing, blinking, or moving content in my course or site.
Flashing, blinking, or moving content has the potential to cause seizures and may be
distracting for people with a cognitive disability. A best practice is to avoid using animated gifs
to highlight content, and to limit any flashing in videos to be less than 3 seconds.
13
Multi Media
An alternative format is provided for time-based media.
Examples of alternative formats for time-based media are transcripts, captions, and audio
descriptions, and are intended for people with disabilities who may not be able to adequately
interpret information in a given format. Alternative formats benefit users with a disability, but
can also benefit users who can not situationally participate in a given medium, such as, you
may not be able to listen to an audio file out loud in a quiet area, but you can read a transcript
of the file, or follow along with captions while a video plays on silent.
There are two types of time-based media: pre-recorded and live. Pre-recorded media requires
captions and audio descriptions for video, and transcripts are required for audio-only files. Live
audio content requires captions to be provided, for example, if you had a visiting guest speaker
in your classroom, you would need to hire a person to transcribe their speech to a screen, or if
hosting a web conference, a section would need to be provided with some format of text-tospeech software that would turn someone’s words into text on the screen. By providing
alternative formats to time-based media, you are ensuring all users can easily access the
intended information.
Videos have easy to understand closed captions and users can turn captions on
and off.
Captions are intended for the deaf and hard of hearing (abbreviated as CC). Closed
Captioning is a text-based method of describing the audio in a video based format and is used
to display information being communicated through conversation on the screen. Sounds,
dialog, and intention are written into the captioning; if a dog barks and the sound has an
intended or significant meaning, captions will note a dog barking to the viewer, or note when
music is being played.
The objective of a separate captioned file that can be turned on and off is to provide a way for
people who have hearing impairments or otherwise have trouble hearing the dialogue in
synchronized media material to be able to view the material and see the dialogue and sounds without requiring people who are not deaf or hard of hearing to watch the captions.
Note: Captions should not be confused with subtitles. Subtitles provide text of only the
dialogue and do not include important sounds, meaning, or actions.
14
Audio-only and video-only files provide an alternative form of media that present
all equivalent information.
This line item assists people who have difficulty perceiving visual or auditory content.
Audio-only files such as a podcast, radio show, mp3 song, or sound bite will require an
additional transcript of all dialog, actions, and intended information so users with disabilities
have access to the information.
Video-only files do not have sound and are commonly used as plain video and screen casting.
These types of video files will require an additional transcript of all dialog, actions, and
intended information so users with disabilities have access to the information.
Audio only files such as podcasts, radio broadcasts, or music files should have a transcript of
the information being conveyed including verbal and nonverbal communication. This could be
written text of what is being said, along with descriptions of all essential sounds including
sounds, cues, and actions. It could also be captions (text on screen) that follow along with the
dialog.
Videos are audio described.
Audio descriptions are intended for people who are blind or visually impaired to describe what
is happening in a video. Audio descriptions provide on-screen information in a video such as
actions, scene changes or visually communicated information that is not spoken on screen.
Where closed captioning is used as text on screen to communicate sound to the deaf and hard
of hearing, an audio description is an audio file that accompanies a video and is intended for
someone who is blind or visually impaired and can not see the actions being played out on
screen including hidden signals, actions or cues. An audio description file is offered during
breaks or pauses in dialogue during the video or as a separate audio file. Note if audio is
included in the video file, this may require two separate videos, one with audio description, and
one without.
In my course or site, users have the ability to pause/stop/hide video.
The line item assists people with a visual, auditory, or cognitive disability and allows for control
of video on a page. Video that automatically plays when you arrive on a page can be
distracting to someone with a learning disability. By allowing for controls within the video
player you are allowing your users to start a video when they are ready to participate with the
content or stop/pause the video when needed.
Low or no background audio in media.
15
Audio that disrupts from the message or dialogue of media can be a harmful distraction for
people using synthesizers to better understand text, people using translation software, or those
struggling to understand acronyms and abbreviations. By using little to no audio or
background music, you are ensuring access to the information being provided.
I do not use sound to communicate meaning.
This line item assists people who have difficulty perceiving auditory content.
One example of using sound to communicate meaning is to indicate the beginning or end of a
session with a bell or a ding. For example, you instruct your students to “Move on to the next
page when you hear a ding”. This method can prevent assistive technologies from accessing
all of the intended information for your course. Instead of using sound to communicate
meaning, it is good practice to provide text for all indicated meaning, such as, “After 3 minutes
move on to the next page”. If necessary to use sound to communicate meaning, create an
alternative to all audio-only files in your course through transcripts or closed captioning and a
descriptive introductory paragraph to alert the user to the upcoming media.
Word and text based documents are provided as an alternative to time based
media, interactive media, and web applications.
Examples of alternative formats for time-based and interactive media elements are transcripts,
captions, and audio descriptions, and are intended for people with disabilities who may not be
able to adequately interpret information in a given format. Alternative formats benefit users
with a disability, but also benefit users who cannot situationally participate in a given medium.
For example, you may not be able to listen to an audio file out loud in a quiet area, but you can
read a transcript of the file, or follow along with captions while a video plays on silent.
Closed Captioning
Captions are intended for the deaf and hard of hearing (abbreviated as CC). Closed
Captioning is a text-based method of describing the audio in a video based format and is used
to display information being communicated through conversation on the screen. Sounds,
dialog, and intention are written into the captioning; if a dog barks and the sound has an
intended or significant meaning, captions will note a dog barking to the viewer, or note when
music is being played.
Transcripts
Transcripts are intended for use by all audiences, and are an accessibility requirement for
video or audio files, allowing access to people with disabilities. A transcript is text that gives an
overview of video or audio based media. Added benefits for creating a transcript including
allowing for searchable text by search engines and screen reader users can increase the
reading volume for the text that is read back to them. More advanced screen reader users will
increase the speed at which the text is read back to many times faster than a human can
speak, allowing for quick and easy access to the intended information.
16
Audio Description
Audio descriptions are intended for people who are blind or visually impaired to describe what
is happening in a video. Audio descriptions provide on-screen information in a video such as
actions, scene changes or visually communicated information that is not spoken on screen.
There are two types of time-based media: pre-recorded and live. Pre-recorded media
accessible alternatives include captions and audio descriptions for video, and transcripts are
required for audio-only files and video files. Live audio content requires a transcript to be
provided. For example, if you had a visiting guest speaker in your classroom you would need
to provide a person to transcribe their speech to text, or if hosting a web conference, a section
would need to be provided with some format of text-to-speech software that would turn
someone’s words into text on the screen. By providing alternative formats to time-based
media, you are ensuring all users can easily access the intended information.
Required class software is accessible.
Software needs to be accessible for students with disabilities so they may contribute equally to
the course. Check the company that makes the product’s policy on accessibility to verify the
software is being developed and produced accessibly. Another option is to look for a VPAT
(volunteer product accessibility template), a form that many companies will fill out with
information about the accessibility of the device.
iClicker format has been tested for accessibility.
iClickers need to be accessible for students with disabilities so they may contribute equally to
the course. Check the company that makes the product’s policy on accessibility to verify the
iclickers is being developed and produced accessibly. Another option is to look for a VPAT
(volunteer product accessibility template) that many companies will fill out with information
about the accessibility of the device.
Links
All images that are links have title descriptions.
A title description is a line of text associated with a hyperlink that describes where the link will
lead. For example, if you are using an image as a button, such as a small house, which is
commonly used to indicate returning to the main page after clicking, you will need to add a line
of text such as “home, home page, or main page”. Note that different software platforms will
have different names and methods for accomplishing this.
Alt Text vs. Title Descriptions
Title Descriptions are not to be confused with alt text, which describe the purpose of the
image, as title descriptions can be accessed when using the hyperlink option and should
17
describe where the link will take the user. So alt text describes the purpose of the image,
and title descriptions describe where the hyperlinks is directing the user.
In many software platforms title descriptions will also provide “hover text” for when the mouse
remains over an image. “Hover text” is a line of text that pops up with where the user will go if
they click on the button. *Note that different software will have different options and settings,
and may only have the option for alt text, not both alt text and title description. In this case,
such as in D2L, the alt text should be the title description. When building content and
navigational items such as images as links, make sure you understand the software’s options
for alt text and title descriptions.
All hyperlinks use self-describing links and do not use URL’s.
Hyperlinks are text, images, or web objects that include a URL, so when a user clicks on the
item they are taken to the embedded web address or link. Hyperlinks should be selfdescribing for text items, such as Portland State University Website. Remember to avoid the
common mistake of using a “click here”, or, “For the Portland State University Website click
here”. Screen reader users can utilize a pre-determined key on their keyboard to quickly find
all the links in a document or on a page, however this function will only list the hyperlinked text.
When you create self-describing links, a user knows where they will go when they click on a
hyperlinked text item, and all users will benefit from being able to quickly find and navigate the
information provided.
Site or course uses new page for linking external websites and same page for
linking internal pages.
When you are building a site or course for the first time, it is good practice to link external
pages (links/pages/resources that go outside of the site itself) to a new page option and link
internal pages (pages within the site) to a same page option. A new page will open a new tab
in your computer browser and will allow you to jump back and forth between the content. A
same page option moves you forward within the current website, where you can access the
previous page by pressing the back button in your browser. By properly linking external and
internal pages, you allow a screen reader to understand that an external link is a new or
outside source of information and an internal link is a sub-category of the information for your
site or course. Note that all building platforms such as D2L, and Google Sites will have a
different look, feel, and placement of linking options.
When creating a hyperlink in D2L, it will prompt you to select Same Frame, or New Window.
18
http://webaim.org/techniques/tables/
Pages and external media have titles that describe topic or purpose.
Each page title should describe purpose or intent of the page. Descriptive page titles assist
screen reader users in quickly identifying content information.
Hyperlinks have been tested and are active, working links.
Before publishing a website or course to a live format, double check all hyperlinks to ensure
they are directing the user to valid content. Remember that sometimes links break or users
remove content from websites like YouTube where you may be featuring someone else’s
material.
Links are visually apparent and are all the same color.
When building a website, certain software may let you control the color of hyperlinked text.
Common practice dictates active links to be one color and previously visited links to be
another. If links are all different colors it may confuse a user, so if the software you are using
allows you to control the color, choose only one or two link colors. Some platforms like
Desire2Learn will have this feature built into the software and you will not need to worry about
how to change or select link colors. If the platform you are using does not display hyperlinked
text with any type of visual indicator, you may have to manually change the color, make it bold,
or add an underline to the text to indicate a link is present to a visual audience.
19
External web applications
External web applications have been tested for accessibility.
It is important to create equal learning experiences for your students by making it easy for
them to find information and by ensuring linked materials in the form of PDF, HTML, or a
website are accessible. It may be difficult to test and ensure accessibility from outside sources
and websites, and it is recommended to contact the provider about their accessibility
development and implementation policy.
Linked external websites have been tested for accessibility.
It is important to create equal learning experiences for your students by making it easy for
them to find information, and by ensuring external websites are accessible. It may be difficult to
test and ensure accessibility from outside sources and websites, and it is recommended to
contact the provider about their accessibility development and implementation policy.
The following resources may be helpful in testing the accessibility of your site.
Web conferences are managed in an accessible format.
When hosting a live web conference, it is important to check accessibility features for all users
in a specific platform. Common platforms used at PSU include Blackboard Collaborate,
Google Plus, and Cisco WebEx (free), and Aver Conference Room Video.
Interactive media has an alternative format for content that presents equivalent
information.
Interactive media is anything that asks the user to interact with content and it produces a
response. For example, this could be an embedded quiz, zooming into a highlighted section of
text, pressing pause/play on a video. All interactive elements should include an alternative
format to the information being communicated, especially, if the interactive element requires
the use of a mouse. Many users with a cognitive disability may find clicking a mouse difficult,
or people who utilize a screen reader, may not be able to see in order to click a mouse. By
providing an alternative format to the information in a transcript or descriptive caption, you are
creating an equal opportunity for all users to be able to interact with and understand the
intended information.
No authentication verification pop ups are used.
Authentication pop-ups are often referred to as CAPTCHAs (Completely Automated Public
Turing Test to Tell Computer and Humans Apart). Designed to prevent robots and automated
systems from filling out forms, these types of verification methods can include distorted text
and audio, as well as cause a number of issues with access to the intended information.
20
Self Testing Resources:
WebAIM’s WAVE tool is an online accessibility checker that does not require you to download
the software in order to use it, and can be accessed from any internet browser. WAVE
provides a full site/page accessibility summary, highlights inaccessible elements, and provides
documentation for fixing errors. If you begin to use this testing software more frequently, you
may download the toolbar option developed as an add-on for the Firefox browser called the
WAVE toolbar. The settings for the toolbar download are the same as the website, however,
may have a slightly different look and feel and will have settings options available from your
top Firefox browser toolbar.
Use WAVE:
By typing the url into the search bar at WebAIM’s WAVE tool website, you will get a summary report of
the accessibility errors or flags within the entered url. By selecting the Details section, or red flag, each
error is visually outlined on the site. An information button, or Documentation section, is provided for
what the error means, why it matters, how to fix it, and the section of the law it complies with. The
WAVE website allows for visual compatibility with the site you are working on, meaning, if you select
the error, it will highlight the section on the site.
Check out more information on using WebAIM WAVE.
21
Course Materials
I have an accessible electronic syllabus.
It is important to include an accessible version of your syllabus so that all students will have
access to the information for your class. This is most easily accomplished by developing an
electronic version in a text document such as word doc or rtf and can be made available to
students through the Desire2Learn platform or another online format. An accessible online
syllabus will follow Accessibility Best Practices such as proper heading structure, including alt
text for all images, and includes properly hyperlinked text. By creating an accessible syllabus
you are allowing all of your students to access information about your course.
My syllabus includes the PSU disability statement.
By including the PSU disability statement in your syllabus, you are providing information for
your students about Portland State’s policy regarding students with disabilities. The statement
you should include states:
“It is the University's goal that learning experiences be as accessible as possible. If you
anticipate or experience physical or academic barriers based on disability, please
register with the Disability Resource Center (DRC) (503-725-4150 or drc@pdx.edu) in
order to establish reasonable accommodations. Once you have registered with the
DRC, please schedule a time to talk to me so that we can discuss your needs for the
term”.
My PDF’s are accessible.
PDF’s (portable file document) are a format for saving text and content-based documents.
There are a variety of software platforms that will allow you to select PDF when saving such as
Microsoft Word, and PowerPoint, however the only software that will allow you to edit a PDF is
Adobe Acrobat. Since the majority of users utilize Microsoft Word and Adobe Acrobat, this
information is geared towards these two software platforms.
To create an accessible PDF you may build your document in Microsoft Word (for PC only),
however you will have to finish the process in Acrobat if using Microsoft for Mac. Microsoft
Word for PC allows you to build and save accessibly, where Microsoft Word for Mac allows
you to build, but not to save accessibly. This means saving as PDF in Microsoft Word for Mac
will not be accessible and you will need to edit your document in Adobe Acrobat.
22
*Remember when you are creating an accessible PDF, the more accessible properties you have built
into the document from your source application, like Microsoft Word, the less editing you will have in
Adobe Acrobat. Both Microsoft Word (PC & Mac) versions may need to utilize Adobe Acrobat for
editing to be fully accessible.
Properties of an accessible PDF document must include:
● A set language of English: this is an accessibility requirement that talks to the screen
reader to let it know what language the document text is written in.
● Document title
● Document author
● Document subject
● Document keywords
● The document title setting instead of file name setting for the initial view settings.
Accessible PDF’s will include:
●
●
●
●
●
Tags
A set reading order
Alternative text for images
Proper hyperlinks (if applicable)
Bookmarks (if applicable)
Adobe Acrobat X and XI, and Microsoft Word for PC provide a document accessibility checker.
It will perform a report and alert you to fixes that should be made.
*Note: Adobe Acrobat and Microsoft Word are not free software platforms and you will need to have a
purchased license in order to use either platform.
The following resources may be helpful in using the Accessibility Checkers:
● Using the Adobe Acrobat Pro Accessibility Checker version X
● Using the Adobe Acrobat Pro Accessibility Checker version XI
● Microsoft Accessibility Checker 2013
PowerPoint’s or Keynote slideshows are accessible.
Microsoft PowerPoint, or Apple Keynote software is used to present information often in the
classroom in the form of slides. When you are creating a presentation, it is important to design
slides that provide easy access to the intended information by following best practices of
accessibility. This will include, but is not limited to:
● Descriptive page titles
23
●
●
●
●
●
●
Logical reading order
Heading structure
Alternative text for images
Self Describing links
Descriptive paragraphs for interactive components
Captions or transcripts for any video or audio files
*Note: Accessibility features vary from platform to platform and are device specific, meaning features
available on a PC platform will be different on an Apple computer or device.
Course readers have been checked for accessibility.
Course readers are publications for use in the classroom and may include a collection of
articles, text, or images. They may be authored by the instructor or an education based
company and may come in many formats. If you are creating your own reader, remember that
all accessibility best practices should apply to the content of the document. If your course
reader is from an outside source, it will be beneficial to contact the company about the
accessibility of their products.
To see an example of a company’s accessibility policy regarding their products, check out:
● Pearson
● Coursesmart
Both sources clearly state their commitment to follow guidelines of Section 508 of the
Rehabilitation Act, the law regarding web accessibility in higher education, and to develop
accessible text, materials, and products.
I have selected an accessible textbook, ebook product or any additional add-ons.
Class materials often call for the use of a textbook, eBook, or lab component. To create an
equal platform for learning, it is important to make these materials and activities accessible.
You may want to verify with the company or producer of your text or course component on
their accessibility policies and procedures.
To see an example of a company’s accessibility policy regarding their products, check out:
● Pearson
● Coursesmart
Both sources clearly state their commitment to follow guidelines of Section 508 of the
Rehabilitation Act, the law regarding web accessibility in higher education, and to develop
accessible text, materials, and products.
24
Note*: The .epub extension is the accessible version for all eBooks. Epub, short for electronic
publication, is the file type that is most compatible with screen readers. If you are looking for resources
on accessibility for your course text, check to see if an epub version is included. Although the most
compatible for accessible web content, epub formats of text do not guarantee a fully accessible version
of text. Always double check with the company providing the materials on their accessibility policies
and development principles.
All course handouts are available in an additional accessible format.
It is important that all class documents that are offered in an electronic format are built and
designed following best practices of accessibility including proper heading structure and alt text
for images. Examples of course handouts may be PowerPoint, Word or text doc, even paper
copies. Remember that paper is not an accessible format, and you will need to provide an
additional accessible online version of the handout. An additional version may include a
transcript or an identical but electronic version of the information.
Course materials from the Portland State University’s Reserve Materials or
Library are in an accessible format.
If you are using materials from PSU’s reserve materials or from the Library in your course, the
materials will need to be checked for accessibility to offer all of your student’s access to the
information. Resource types will vary including documents, PDFs, scans, maps, or journals
and will need to follow best practices of accessibility. An alternative format to some media can
include a transcript or description of all important and conveyed information.
Portland State University, Accessibility. Retrieved from:
http://library.pdx.edu/services/accessibility/
References
● W3 Consortium (world wide web), WCAG (Web Content Accessibility Guidelines) 2.0
● WebAIM (web accessibility in mind)http://webaim.org/standards/508/checklist
● Desire2Learn Resource Center - Accessibilityhttps://d2l.mnsu.edu/pdfs/Desire2Learn WCAG
Checklist.pdf
● CAST (center for applied special technologies), National Center on UDL (Universal Design for
Learning)
● National Center on Universal Design for Learning
W3 Consortium (world wide web), Web Content Accessibility Guidelines (WCAG) 2.0, Copyright ©
2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C, Retrieved from:
http://www.w3.org/TR/WCAG20/
25
W3 Consortium (world wide web), Authoring Tool Accessibility Guidelines (ATAG) 2.0, Copyright ©
2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C, Retrieved from:
http://www.w3.org/TR/ATAG20/
W3 Consortium (world wide web), Guidance on Applying WCAG 2.0 to Non-Web Information and
Communications Technologies, Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights
Reserved. W3C, Retrieved from: http://www.w3.org/TR/wcag2ict/
W3 Consortium (world wide web), User Agent Accessibility Guidelines (UAAG) 2.0, Copyright © 2014
W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C, Retrieved from:
http://www.w3.org/TR/UAAG20/
WebAIM, Cognitive and Learning Disabilities Literature Review, Projects - Steppingstones Literature
Review Detailed Results, Copyright © 1999-2015 WebAIM (Web Accessibility in Mind). All rights
reserved. Retrieved from: http://webaim.org/projects/steppingstones/litreviewdata
Desire2Learn, Learning Environment WCAG 2.o Checklist, 11, March, 2008, © 1999-2015 D2L
Corporation, Retrieved from: https://d2l.mnsu.edu/pdfs/Desire2Learn%20WCAG%20Checklist.pdf
National Center on Universal Design for Learning, © Copyright CAST, Inc. 2012, Retrieved from:
http://www.udlcenter.org/
CAST, (center for applied special technologies) © CAST, Inc. 2015, Retrieved from:
http://www.cast.org/
Resolution Agreement between the University of Montana and the U.S. Department of Education,
Office for Civil Rights, Retrieved from:
https://www.umt.edu/accessibility/docs/AgreementResolution_March_7_2014.pdf
Settlement between the Regents of the University of California on behalf of University of California,
Berkeley campus, and Disability Rights Advocates, Retrieved from:
http://dralegal.org/sites/dralegal.org/files/casefiles/settlement-ucb.pdf
Settlement Agreement between the United Stated of America and EDX INC., Retrieved from:
http://www.justice.gov/sites/default/files/opa/pressreleases/attachments/2015/04/02/edx_settlement_agreement.pdf
University of Montana, Instructional Materials Checklist, Retrieved from:
http://umonline.umt.edu/accessibility/instructional-materials-checklist.php
26
27