HomeTN eCampus FacultyAccessibilityTips for Accessible Online Content

10.3. Tips for Accessible Online Content

Basic Tips for Accessibility

Everyone learns and engages with course materials differently. Following UDL principles and access guidelines promote a universally designed environment facilitating opportunities for student success no matter the student's abilities. However, there are some common things to consider in developing accessible course content and improving usability for all students.

Accessibility Specialist

If you need assistance in developing/selecting accessible materials, please contact your TN eCampus Accessibility Specialist:

Alice Wershing—Accessibility Specialist

Or check with your eLearning office for assistance. The World Wide Web Consortium (W3C) has developed Web Content Accessibility Guidelines (WCAG) that are the TBR standards for web content. More information about the Web Accessibility Initiative can be found at the W3C’s Web Accessibility Initiative site (new window)

Creating Web Content

Brightspace allows the creation of HTML content pages within your course. This is often done with a text editor that includes HTML editing tools. This is also known as a WYSIWYG editor, or “what you see is what you get.” It is possible to copy some content directly into the editor, but it is also possible to add unexpected formatting code that does not appear on the screen but potentially confuses screen readers. If you want to copy and paste text change it to plain text first using TextEdit or Notepad and then paste it into the text editor. Format the content using the tools in the Brightspace text editor.

We strongly recommend that you use Browse for Template to take advantage of the pre-formatted Brightspace pages available to you.

Refer to the tutorial for Document Templates and Headings (Knowledge Books).

Basic Content Structure

Course Templates

A key aspect to accessibility and creating a clean consistent look in a course is to use document templates. Templates define fonts, styles, and other aspects behind the scene. When done correctly, screen readers and other assistive technologies will respond more accurately to users.

Refer to the tutorial for Document Templates and Headings (Knowledge Books).

Navigation

Not everyone can use a mouse. As much as possible, make sure that students can use applications or navigate through pages using a keyboard or assistive navigation device. Keep navigation simple with as few buttons as possible. Avoid activities that require the use of a mouse, such as drag and drop activities. An assistive technology specialist can provide guidance if needed.

Refer to the reference page, Keyboard Navigation (WebAIM) for more information.

Headings

Good heading structure helps readers to understand how the document is organized. Assistive technology users can move between headings, which makes navigation usable and more efficient than without headings. Headings and subheadings should be identified as such using the built-in heading features of the authoring tool. Headings should form an outline of the page and be used in the table of contents (TOC) for long documents:

Refer to the tutorial for Document Templates and Headings (Knowledge Books) for more information.

Lists

Lists are an excellent way to convey potentially complex information. Even accessible tables can be challenging to users. Consider lists over tables for simplicity where it is appropriate and effective.

Lists can be inaccessible if they are not created properly. Typing stars and hyphens to make lists by hand is a common mistake. Use the tools of the editor in your application. Use lists for the purpose for which they are intended. Numbered/Ordered lists convey sequence and Bulleted/Unordered lists can be reordered and not change the meaning of the listed items.  

Refer to the tutorial for Tips for Accessible Online Content (Knowledge Books) for more information.

Links

Make sure that linked text is descriptive of the target location or site and could point the user to the target. Links should make sense out of context. Avoid using links that say, “click here” or “more.”

Refer to the reference document, Accessible Hyperlinks (download) for more information.

Audio, Image, and Video Description

Images

When inserting images into your course, be sure to include an “alt text,” or alternative description, that is descriptive of the image. Alt text descriptions help students use screen reader software to know what is displayed on the screen. There is usually a space for you to add this when you are uploading the image. Make sure your alt tag clearly describes what is in the image, such as “photo of a group of young children playing in a dusty street with a soccer ball” or “portrait of George Washington standing in a boat, surrounded by other soldiers holding up a flag as they cross the Delaware river” as opposed to “image” or “children.”

Refer to the reference document, Alternative and Descriptive Text (download) for more information.

Refer to the tutorial for Decorative Images in Brightspace  for more information.

Video

All video material should be captioned and include video description or descriptive transcripts. Captioning benefits many different learners and environmental disabilities (watching video in a library quiet area) including cognitive disabilities and English Language Learners (ELLs). YouTube tools for adding or editing captions (new window). More information about captioning and transcripts can be found on WebAIM’s Captioning Techniques [new window]  page.

Refer to the reference document, Captioning Video (download) for more information.

 

Audio

Transcripts also allow anyone that cannot access content from either web audio or video (or both) to read a text transcript instead. For content that is audio-only, a transcript will usually suffice.

Read more at WebAIM: Captions, Transcripts, and Audio Descriptions (new window) 

 

Flash

Using content created using Flash is not permitted. HTML5 is a good alternative to Flash.

Color and Fonts for Readability

Colors

Students with cognitive or visual disabilities and others without disabilities may have difficulty reading text that is against a patterned/colored background. Provide good color contrast; black text on a white or light background is the most readable. Do not use color alone to convey meaning or emphasis as some students may not be able to see them.

Refer to the reference document Color and Contrast (download) for more information.

 

Fonts

Keep the use of fonts in materials consistent. Sans serif fonts such as Arial or Helvetica are easier for many people to read on-screen. To maintain consistency, we strongly recommend the use of the pre-designed page templates available for your use.

Read more at WebAIM: Typefaces and Fonts (new window) for more information.

Forms and Tables for All

Tables

Screen reading software reads tables by going across cells top-to-bottom, left-to-right, and by using keystroke commands. It is essential tables have consistent even rows and columns. You should avoid:

Refer to the reference document, Accessible Tables (download) for more information.

Forms

If you have forms for students to download and fill out, make sure they are in an accessible format and clear directions are given for submitting them. Some students may not be able to complete a form that must be filled out in writing. 

Refer to the reference document, Accessible Forms (download) for more information.

Accessible File Types

This section adds some insight to 3 of the most commonly used files. While each of these can be made more accessible using built-in tools you are encouraged to consider transferring content to HTML through the Brightspace Editor. The Editor is simpler to use and is more likely to provide accessible results. In addition to the Brightspace accessibility checker, TN eCampus has added Blackboard Ally to all eCampus courses.

PowerPoint

is perhaps the most popular tool for creating slideshow presentations or online lectures, but PowerPoint files may have many accessibility problems and it can be tedious to catch and correct problems. It is also important to consider the right tool for the job. PowerPoint was designed to be a presentation tool for face-to-face presentations, not a tool for developing multimedia web content. The use of PowerPoint is strongly discouraged. If you feel that PowerPoint is essential to your course, review WebAIM PowerPoint Accessibility (new window) tips.

Refer to the reference document, PowerPoint Accessibility (download) for more information.

Contact your instructional designer or accessibility specialist if you need further assistance.

PDF Files

are typically created from other files such as Word and PowerPoint. Converted PDF files are only as accessible as the document they are based on. In some cases they may lose accessibility improvements in the way the file was converted. Be aware that PDF files created as a scan of an original document are actually images, which are not accessible to screen reader technology. To be fully compliant, convert a PDF file to HTML, if possible. Tools such as Equidox [new window] can help you to translate PDFs to accessible HTML that meets WCAG standards. 

Refer to the reference document  Acrobat PDF Files (download).

Word Files

Word documents are widely used and synonymous with text documents. The built-in accessibility features are fairly easy to use. Word documents are easily recreated or transferred to HTML pages, which can be even more accessible and do not require special software or conversion. Consider if separate files are needed. Moving content directly to HTML adds to ease of use for all students. Use the built-in accessibility and formatting tools if you do need a separate document.

Refer to the reference document, Making Word Files Accessible (download) for more information.

Accessibility Checkers

There are many types of accessibility tools to help improve web pages and files. This is important because most people are not accessibility experts and many compliance issues are not easy to see or catch by simply looking at your content. These tools are an important help and assistance, but they cannot replace content created as accessible as possible from the start. In fact, checkers may report a false positive for content that is poorly created.

In Brightspace, you will find an accessibility checker in the text editor. It is quick and easy to use. Blackboard Ally is also integrated with the TN eCampus Brightspace instance. The Ally Course Report is located under the More button on the NavBar. You will also notice small speedometer icons on course pages. You can open these icons (red, yellow, and green) to see the status of individual pages.

Refer to the tutorial for Brightspace Accessibility Checker (Knowledge Books) for more information.

Refer to the tutorial for Ally Instructor Overview (Knowledge Books) for more information.

Knowledge Tags

This page was: Helpful | Not Helpful