Overview
When creating accessible content in ANGEL, specifically course page content, there are several factors to consider. This article provides faculty and others preparing ANGEL content with general guidelines for using text, images, and audio and video for course pages in ANGEL.Making Text Accessible
With text, it is important to keep the HTML code as clean as possible without extraneous HTML tags and unnecessary formatting. Screen readers for the visually impaired and other usability aides may find it difficult to decipher content from such formatting. There are three general methods to accomplish this in ANGEL:- Write the content directly into the ANGEL HTML editor.
- Create an external HTML file and import the code into ANGEL.
- Copy and paste text from an existing document (e.g., MS Word or .pdf).
Use the ANGEL HTML Editor
ANGEL's built-in HTML editor allows the person uploading content to easily add content to an ANGEL page in one of two different ways. The first method is to use the What You See is What You Get (WYSIWIG) editor (which is the default mode). To do this, type in the desired content and select any formatting options via the menu bar located at the top of the text field. From this menu, insert images (see section 2: Images for more details), hyperlinks, equations, and/or tables, in addition to defining text size, color, etc.
NOTE: For best accessibility, use the "FORMAT" and the "STYLE" options to note semantic differences. Screen readers cannot sufficiently distinguish the difference in text sizes and styles that result when the "FONT FACE" and/or the "FONT SIZE" options are used.
The second method is to use the source view mode from the menu bar. This option turns off all of the automatic formatting options in the WYSIWYG editor and allows the HTML code to be typed in by hand in the source editor. This option should be used by those with HTML coding experience or those who need to manually modify, add, or remove HTML formatting tags. This is a powerful option and generally requires more Web development experience than the default WYSIWYG editor.
NOTE: When authoring original content in the ANGEL environment, it is highly recommended that any content is backed up externally. Copy what was typed into the ANGEL HTML editor and save it to a word processing document. This ensures that your work is backed up outside of the ANGEL environment in case the content is ever accidentally lost or removed.
Create External HTML Files and Import the Code
An alternative to creating page content in ANGEL with the HTML editor is to create an external HTML file. When finished, import the HTML code to ANGEL. This option is used most by those who have Web publishing experience and do not need the assistance of the default ANGEL HTML editor. Page content may be created by any desired HTML authoring environment. When creating course page content in an external editor, it is important to create the content with accessibility in mind. This includes supplying any required image tags (see section 2: Images for details). Once the content is complete, copy the source code from the external HTML page into the source view mode of the ANGEL HTML editor. Any page styling that is created using an external cascading style sheet (CSS) requires that the CSS file is uploaded to that page's associated file manager and linked to the HTML code in the ANGEL source view editor.
Copy and Paste from a Word Processing Application
Another method to create page content in ANGEL is to use an existing document, such as a Microsoft Word document, and then copy and paste the text into the ANGEL HTML editor. This is an acceptable method for creating page content but there are several accessibility-related things to consider when using this process. Often, when text is copied and pasted from a word processing application, you may paste over both the text and embedded HTML formatting. It will be apparent that the text copied over was formatted, as the pasted text will retain the formatting due to the HTML tags. As a result, the displayed HTML code in ANGEL may have an undesired appearance. Not only does this cause undesired visual effects, it may also hamper accessibility, because the formatting may not comply with standards necessary for screen readers or other reading aides.
If the copy and paste method is used, verify that the copied text does not contain unwanted HTML tags. Use the "Copy Special" option to copy text without copying the formatting. Another option is to convert a proprietary document type (such as Microsoft's .doc) to a rich text format (.rtf) and then copy the text from the .rtf file into ANGEL.
Regardless of the method used to create content in ANGEL, it is important to also keep in mind that, in addition to text formatting, close attention should also be paid to other data forms, such as tables and lists. Tables are a valuable way to display information, but do not rely on only visual elements to differentiate the table headings from the content cells (e.g., colors). Display both tables and lists in an accessible form by using the correct HTML formatting tags. These display types offer attributes that can be used to identify table headings and names, and to correctly place the list structure scheme for any list created.
For more information on how to use these tags appropriately, please see http://www.webaim.org/techniques/semanticstructure.
Making Images Accessible
Using images in page content in ANGEL can be a powerful learning tool. Images can be used to illustrate a learning objective, support a concept, or simply add style and interest to the material. When using images in ANGEL it is important to ensure that the images are tagged correctly to allow them to be accessible to those who may not be able to actually see the images.It is particularly important that all images that convey meaningful content should be described in a way that conveys the meaning when read aloud by a screen reader for the visually impaired. Either enter the required information manually in the source view or, when using the default WYSIWYG editor, insert an image via the Insert/Edit Image button in the menu bar above the text box. A pop-up window then appears in which to enter the required information and applicable ANGEL tags for the image.
Regardless of which editing method is used, you must label each meaningful image using the alt attribute, which provides a brief description of what the image is (e.g., "logo Michigan State University").
The alt description should be short - about 150 characters or fewer. The longdesc attributes allow for a longer explanation of what the image is or what it is used for, for instance when describing the meaning of a complex chart. If the ANGEL built-in HTML editor and the Insert/Edit Image tool are used, there will be a field in the main dialog box entitled "Alternative Text". The corresponding alternate description is entered into this field. The longdesc attribute is included by selecting the advanced tab in the Insert/Edit Image dialog box and typing a description into the field entitled "Long Description URL."
For information on using the alt attribute, see The alt and title attributes by Richard Johannson.
Make Audio and Video Accessible
Transcripts and captions are the two main approaches to making audio or video content accessible on the Web. Both captions and a text transcript should accompany video content. A transcript will usually suffice for audio-only content.Transcripts are a verbatim text copy of the auditory content available in a separate document. In the case of video, transcripts may also contain an in-line description of the on-screen events. Transcripts also allow search engines to index the audio and video content. Some screen reader users may prefer to read the transcript instead of listening to the audio, since assistive technology may be set to read at a rate much faster than most humans speak. This allows the same content to be consumed in less time, as well as allowing users to print the transcript content in Braille.
Video requires captions because the text must be synchronized with the video to be effective, and transcripts are read separately. For Web video, captions can be open, closed, or both. A closed caption can be turned off, such as those available through television signals, whereas an open caption is always visible and cannot be disabled.
The most common way of captioning audio and video on the Web is to use proprietary closed captioning functionality within the multimedia players to display the captions along with or on top of the video or audio. This results in captions that can be turned on or off in the media player based on user preferences. This does have disadvantages, such as being locked into one media type, requiring special captioning software that can handle multiple media types, or having to synchronize video multiple times.
The other option, open captioning, adds the caption text directly to the video itself. This may be the best option if you are having a video professionally produced and are unsure which format to use for the Web version, or if you intend to offer multiple media formats on the Web. Remember, open captions are visible to everyone viewing the video clip and cannot be turned off. This gives total control over the appearance of the captions but may require video editing software or professional services to produce.
More information can be found at: http://www.webaim.org/techniques/captions.
