Home → TN eCampus Faculty → Brightspace LMS Tools → Accessible HTML File Content
6.10. Accessible HTML File Content
Creating Accessible HTML File Content
Brightspace courses may contain many different types of sources for course content. Some of the most common include the following: web pages, document files, tables, audio clips, images, and video. Text content may be introduced by copying and pasting into course files. Plain text is preferred to avoid unexpected formating. Other sources should be imported into Managed Files (in an organized fashion) and inserted into the course files. Each type of content has its own accessibility component to be considered. In the tutorial, Creating Course Modules & Files , the steps to create content pages are outlined. This section will focus on making sure the content is accessible and Section 504 compliant.
Behind the Scene
Course files in Brightspace are referred to as HTML Files because HTML code is the structure behind the scene. The HTML code is hidden, but accessible in the edit mode through the code icon </> located on the bottom row of tools of the editor window. Some users may prefer to use create and edit content through the HTML code, but it is not necessary to be an HTML code expert to create and edit pages in Brightspace. If you are interested in learning more about HTML coding, there are numerous sites on the web designed to quick-start users with HTML. A couple of examples include w3schools.com and Way2Turorial.com
. Both sites have a similar approach to introducing and explaining the foundations.
Steps to Build Accessible Course Files
As also described in Creating Course Modules & Files , start by using Create a New File in the module/submodule.
Before entering any content, Select a Document Template for the document. Add a descriptive title for the file in Enter a Title.
*Please note, templates must be applied appropriately to all new files. Templates provided in the template menu are the only templates available. Browse for Template is on the menu, but you will not be able to use them.
Depending on the template chosen, sample headings and text will populate. Select and replace the text for the course.
*Please note, the sample text has the H1 followed by a horizontal rule. This is a part of the template design. If the content is pasted to the page has a defined H1 tagged, the heading will hold and the horizontal rule will remain in place. On the other hand, pasting plain text will appear without headings or rules. Once the headings are tagged, the horizontal rule will reappear. Continue to make updates.
Source Options
Brightspace will allow many kinds of content, but not all sources are optimal or even accessible to all users. Consider alternatives to just copying and pasting raw content into courses.
Plain Text Editor
The clearest and cleanest method is to copy text content into your course file is from a plain text editor, like Text Edit for Mac or Notepad for PC. In this example, a web page has been copied into Notepad. The plain text has no formatting, hyperlinks, or images. Everything beyond the text can be made accessible by using the page editing tools in Brightspace. It may seem faster and easier to paste content directly into the page, but it may require advanced skills and knowledge to recognize and repair the inaccessible issues.
It is possible to copy and paste images and insert files from your computer into the HTML Editor in Brightspace (and the process seems quite efficient), however, TN eCampus courses are set up on the Master Course model. To add files to course content, files must be uploaded to folders in Managed Files. This is the only way to successfully clone content from the Master Copy to section copies. Keeping modules and content organized in the Managed Files tool gives confidence all of the work is saved and easily edited if needed.
With the new text copied and pasted into the course file, select and set the headers for each section with the WYSIWYG (What You See Is What You Get) tools on the course page.
Headings must remain in a logical order to be accessible to everyone. The course page content typically will start with (H1). Major subheadings should be tagged with as (H2) and so on. Each may have detailed content or even deeper subheadings (H3-H6). The important thing is to keep them consistent with the layers of content as outlined in this image found on the W3C Web Accessibility Initiative website. Please see this website for even more detailed information on headings.
Make style changes as needed. Typical tools are shown. Check the menus for more options.
Lists
Lists are a very powerful way to convey information in a structured way. Such structural information allows assistive technologies to announce the number of items on the menu and provide corresponding navigation functionality.
- Use an Unordered list (bullets) when the menu items are not in a specific order.
- Use an Ordered list (numbered or lettered) when the sequence of the menu items is important. (Consider this optional carefully. An ordered list is the most often misused of the two types.)
Correct ordered lists in new content by selecting the list and choose Ordered or Unordered from the toolbar. (Unordered is the default button on tools the row. Expanding the menu gives the Ordered list option.) Initially, the list will start as one bullet or number. Carefully, add a line after each item by placing the mouse at the end and choose Enter/Return. Then, move the cursor to the blank line of the new list line and press Delete to bring the last line to that row.
Make any other edits with the tools and the Accessibility Checker to confirm the page is accessible. See the accompanying page in this chapter for more information on the Accessibility Checker
The Other Stuff
Audio clips, images, videos, and other non-text artifacts must be uploaded to Managed Files.
Insert Stuff is the first button on the toolbar. Use this option to import objects from Course Offering Files. There are other choices including, Enter Embed Code to embed video content from outside sources. The Camera icon adds images. Be sure to follow the same path of Course Offering Files. It is tempting to import from your computer or other sources, but this will not work in courses to be cloned. The third icon is the Link icon. Use this icon to add hyperlinks. Insert Stuff can also add hyperlinks.
Copy and Paste Source Document Content from Microsoft Word and Others
Brightspace has updated the way text from Microsoft Word content can be pasted to course pages. In most situations, the text and some formatting will carry over as seen in the original document. On the surface, this may seem to be easy and the content may look just the same as the source. In the previous process, each step was created correctly from the text content. Pasting content from Word, web pages, or other content sources will require a step-by-step check of each topic.
Copying from Word typically applies headings if they were applied from an accessible source document, but the headings may not be in the correct order. In some cases, headings may just be bold text. Look at this example of a web page copied to a course page.
Some portions are correct and there are others that "look okay" visually. Errors must be corrected to be accessible.
Lists may look like lists. This is easy to check. Try to select the bullet or number along with the text. In an actual list, the number or bullet cannot be selected. Delete the numbers or bullets and update the list as described previously.
Additionally, Hyperlinks may not remain linked after pasting into course files. Try each link and update it as needed.
Conclusion
Creating accessible documents in Brightspace can be tackled in different ways with varying skill levels, experience with accessibility development, and knowledge of HTML coding. It is important to recognize that copying content from many sources has improved, but still requires vigilance and a basic understanding of accessibility standards and content layout. The surest and simplest way to create clear and accessible content is to build it from plain text and format the content with the WYSIWYG tools. Copying directly from other sources will require the content to be checked to be sure it is more than just visually appealing. It must be Accessible!