Home → TN eCampus Faculty → Accessibility → Tips for Accessible Online Content
8.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 Help
If you need assistance in developing/selecting accessible materials, please contact the TN eCampus Help Desk:
- E-Mail: tnecampus@helpspot.com
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:
- Heading 1 (H1) for the main heading (Page Title)
- Sub-Heading 2 (H2) (Main Idea)
- Sub-Heading 2 (H2) (Main Idea)
- Sub-Heading (H3), 4, 5, etc. (Supporting Idea/ Content Emphasis)
- Sub-Heading 2 (H2) (Main Idea)
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:
- splitting or merging cells that create uneven columns
- putting bullet points or numbered lists within cells. Lists should be used outside of a table.
- Using tables for layout. Tables should really only be used for tabular data. If you are using tables to display data, make sure that table headers are defined for all columns and rows, and a very short summary is provided in the Alt Text description field to identify what the table covers.
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.