HomeTN eCampus FacultyBrightspace LMS ToolsAccessible 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 same frame, 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 new window and Way2Turorial.com new window. 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 same frame, start by using Create a New File in the module/submodule.

Create File highlighted from the Create/Upload menu.

 

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.

 

New file page with the title textbox highlighted. Document template menu expanded to display template options.

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.

Heading 1, horizontal rule and sample text highlighted.

 

Source Options


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.

HTML editor opened with sample text. Text menu expanded to H2 Heading 2.

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 new window website. Please see this website for even more detailed information on headings.

Outline of document heading starting with H1, H2 with H3s following under the appropriate subheadings.

 

Make style changes as needed. Typical tools are shown. Check the menus for more options.

Text selected in the HTML editor for style changes.

 

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.

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 press 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.

Cascading graphics of ordered lists created as described in the text.

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 same frame

 

HTML page in edit mode. Accessibility Check icon highlighted in the bottom tray.


 

The Other Stuff

Audio clips, images, videos, and other non-text artifacts must be uploaded to Managed Files.

Course Admin expanded to Managed Files with window expanded to tree list of course files. Upload icon highlighted.

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.

Insert Stuff menu expanded to My Computer.

 

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 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.

Pulse web page copied to HTML in Brightspace. H1 transfered, but bold text transferred as headings.

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.

 

7 numbered sentences highlighted with the numbers included--not an accessible ordered list.

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!

Knowledge Tags

This page was: Helpful | Not Helpful