Tips to Provide Students

There are various things that students themselves can do to enhance the accessibility of not only eCollege and WebCT, but also the Web in general. The next two techniques work together in Microsoft Internet Explorer.

Override specified formatting of Web pages

Generally, Web developers specify how they want a page to look by controlling background and text colors, font styles, and font sizes. In an accessible webpage or website, developers allow users to control these elements without users having to make changes to how Internet Explorer interprets the look of web pages. Since accessible websites are few and far between, Internet Explorer does provide a way to put the user back in control of how pages are displayed.

From the Tools menu, select Internet Options, then click the "Accessibility" button in the lower right hand corner. In the diagram below, the button has an arrow pointing to it.

 

In the Accessibility dialog box, check the boxes that pertain to the element to be controlled. In the example, the user has checked "Ignore colors specified on Web pages", and "Ignore font sizes specified on Web pages". This combination will allow the user to view webpages in a desired background and text color, as well as to specify text size.

Adjust text size within Internet Explorer

Instructors should tell their students at the beginning of the course how to adjust text size within web browsers. This is useful for people with low vision, and for others who prefer a larger or smaller text size. Smaller text sizes allow more text to be displayed on the screen at one time, thus reducing the amount of scrolling. Larger text sizes may be welcomed not only by those with low vision, but also people who are reading late at night, when they may have eyestrain.

From the View menu, select Text Size, then choose one of the options from the submenu, (Largest, Larger, Normal, Smaller, Smallest), as pictured below.

Back to top

---

Simple HTML Tags

You can copy and paste from Word into eCollege's Editor (the window you see when you're in "Author" mode), any student's browser can change the text size. For an even cleaner result, paste directly into the HTML portion of the editor. Paragraph tags, header tags and any text emphasis tags would then be inserted by the instructor, but there isn't stray code to mess up the visual aspect of text display, or to confuse a screen reader.

These are presented to enable instructors to create their own accessible content pages. Oftentimes, an instructor will have an introductory page at the start of a unit, these can be written using these simple tags. It is also hoped that by presenting these tags, HTML will begin to be demystified.

• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor

HTML Tags

• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <strong> means the same as <STRONG>

W3Schools
http://www.w3schools.com/html/default.asp

The paragraph tag separates one paragraph from another.
<p>

The horizontal rule tag creates a straight line that runs across a web page. It is useful for separating sections of the page.
<hr>

---

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. These are only examples designed to show the relative sizes of headings.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

HTML automatically adds an extra blank line before and after a heading.

Back to top

---

Using Microsoft Word

It is understandable that instructors may not want to learn FrontPage, or HTML, unless the subject they're teaching happens to be related to web pages or HTML. Given that, a sensible approach is to use a tool that nearly everyone is familiar with. Since it is fairly safe to say that Microsoft Word fits that description, it's logical to use it.

There are techniques to use within Microsoft Word to create more accessible content pages. While the level of access probably won't meet all Section 508 guidelines (see appendix), it is better than not using these techniques at all. The most crucial aspects of accessing a content page are headings, and alt tags for images.

Structured documents provide headings

Most people don't take full advantage of word processors. Generally, when a person wants a particular piece of text to be visually different, such as the start of a topic, subtopics, and lists, they merely enlarge the font, and make it bold. The problem with this approach is that the document has no real structure. When such a document is converted to a web document, a person using a screen reader cannot tell that there is a different font size, and thus may not catch that the topic has changed.

Example

Let's use an example of a topic heading of Helvetica, size 14, bold, italicized
Visually, this looks like a header
This text here does not, so this text must be starting the new topic under the header.

A screen reader would read all the text the same, so it would come across as:

"Visually, this looks like a header and this text here does not, so this text must be starting the new topic under the header."

Another problem is that every time the same style is wanted �� the author has to go through four steps involved in making that change:

1. Apply a font
2. Apply a size
3. Apply Bold
4. Apply Italics

Providing structure - Headings

To provide structure within documents, use "Styles", or "Styles and Formatting", depending on the version of Word in use. The Styles feature is accessed two ways, from the dropdown box, or from a side menu. It contains not only Heading styles, but also List styles, Bullet styles and a lot more. Take a look around in a version of Word to see what is available.

• To access the dropdown box, just click on the down arrow next to the word "Normal" on the Toolbar.
• To access the side menu, open the Format menu, and click on "Styles and Formatting"

Going back to the previous example, applying a heading to our text would still look like:

Visually, this looks like a header

this text here does not, so this text must be starting the new topic under the header.

However a screen reader would render this as:

"Heading Level Two: Visually this looks like a header this text here does not, so this text must be a new topic."

Headings must be used logically, in sequence. For instance, Heading 1 is usually reserved for the title of a document. Heading 2 is then used to denote major topics, and Headings 3, 4, 5 and 6 is used for successive subtopics. It is unwise to have headings past 6, as HTML supports six heading levels.

Throughout a content page, headings would then be used like this:

Title � Categories of Vegetables (Heading 1)

Eat a variety of fruits and vegetables, try to eat at least one serving from each of the following categories daily

Topic One - High in Vitamin A (Heading 2)

The following vegetables are in this category

Subtopic One - Apricots (Heading 3)

Apricots are also high in Vitamin C

Subtopic Two - Sweet Potatoes (Heading 3)

Text

Sub-subtopic One about Sweet Potatoes (Heading 4)

Text

Sub-subtopic Two about Sweet Potatoes (Heading 4)

Text

Carrots (Heading 3)

Etc�

Please remember that the preceding is an example. In actual content pages, the text of the headings would not contain "sub-topic X" nor "Heading X". Individual instructors will use the headings as their content dictates.

Changing the look of headings

When the default heading style isn't desirable, it is possible to change the look of headings. For example, if your main headings are 14 pt Arial, flush left, and bold, and you later decide you want your headings to be 16 pt, Arial Narrow, and centered, you don't have to reformat every main heading in your document. Instead, just change the properties of that style. Note that when you change a formatting element of the base style in a document, all styles that originate from the base style in that document will also reflect the change.

If the Styles and Formatting task pane is not open, click Styles and Formatting on the Formatting toolbar. Right-click the style you want to modify, and then click Modify. Select any options you want. To see more options, click Format, and then click the attribute � such as Font or Numbering � you want to change. Click OK after you've changed each attribute, and then repeat for any additional attributes you want to change

Lists

Lists are often important elements of a content page. When lists are constructed by using indentations with the tab key and carriage returns, the white space that is created visibly communicates the organization of the information listed to the sighted user. The organizational use of white space, however, does not get communicated to the user with a disability who requires assistive technology, and the organization of information is lost in a lengthy, unbroken ribbon of words.

However, using Styles and Formatting creates lists that can be rendered by screen readers in a sensible fashion. Using Microsoft Word's numerically-ordered and bulleted pre-formatted lists is an additional tool we can use to make our Word documents accessible when they're converted to PDFs and Web pages. In addition, it is easier to use these tools than to manually create lists.

An Example list - Some Vegetables High in Vitamin C*

1. apricots
2. broccoli
3. brussels sprouts
4. cabbage
5. cantaloupe

The above list was created with "List Number 2" style.

Adding Alt text to images in Microsoft Word

As stated previously, the second crucial aspect of creating accessible documents is making sure that images have Alt (or Alternate) text (the first aspect is providing structure to a document). This is text that describes an image � it takes the place of an image for blind users. To quickly see examples of Alt text, go to any web page, and let your mouse cursor "hover" over an image. If the web developer provided Alt text, it will appear in a box near your mouse cursor. In the example to the right, with the Google logo, the Alt text reads simply, "Google".

First, insert a picture

1. Click where you want to insert the picture.
2. On the Insert menu, point to Picture, and then click From File.
3. Locate the picture you want to insert.
4. Double-click the picture you want to insert.

Specify alternate text for graphics

1. Click the picture or shape.
2. On the Format menu, click AutoShape or Picture and then click the Web tab.
3. In the Alternative text box, type the text you want. The text should describe the graphic in a maximum of about 50 characters.

A Final Note about Images

Position images on the left side of your document. This is the default placement for images that are converted to HTML. In fact, an image placed elsewhere will automatically end up on the left side after conversion.

Save the Word document

Save the document as you would any other file. When the file is uploaded into eCollege, it will then be converted into HTML. The structure and alt text will be retained in the final document. WebCT will allow learners to download the Word document, without converting it to HTML

Back to top

---

Uploading Word documents into eCollege

Although it is possible to provide written material in the form of plain text, MS Word, HTML, PowerPoint, PDF, and other document types, this section will focus on MS Word documents. This task has three parts:

1. Creating a content item
2. Adding the content item to a unit
3. Adding content to the content item.

A content item can appear in more than one unit.

But first, since content items belong in course units, use "Add Unit" if necessary, entering a title and introductory matter for the students to read.

To Add a New Unit

Starting at Course Home under Author view
Click "Add New Unit" � see the top and second images on this page

1. Enter Title, and check "Use title as navigation bar text"
2. Add introductory text
3. Click "Save Changes"
4. Now open the unit, by clicking on its bar, to add content items.

To Add a New Content Item

In the unit where you want the item, under Author view:
Click "Add Content Item" located near the top part of the screen

1. Name it
2. Choose type from drop down menu � in this case, choose MS Word
3. Click Create

Add Content Item to Unit (middle part of screen)

1. Select the item from list by highlighting it
2. Add to Unit

Add content to the Content Item

Click on the new content item from the left side menu under the unit bar

Switch to Author view to edit

1. Click on the Browse button
2. The "Choose File" dialog box like the one to the right will appear
3. Select your MS Word document and choose "Open"
4. After a pause while the file is being converted to HTML, the Edit Content Item box will return with your filename
5. Click "Save Changes"
6. Click on the "Course" tab (in the upper left hand corner) to leave Author mode.

Your document will appear in the course content window. Placing Word documents in Doc Sharing will simplify access for all students. Everyone can then download course content to read at their leisure and people who use assistive technologies will be better able to do so.

Back to top

---

Uploading Word documents into WebCT

This task has two parts. This example will follow the order below, but for future uploads, the steps can be done in a different order.

A. Create an icon on the course page

• Click "Add Page or Tool" from the Designer Links section of the Course Menu (upper left corner of the screen � see the top image on this page)
  
  The "Add Page or Tool" menu comes up.
  
  
• Click "Content Module"

The "Add Content Module" dialog box appears, as shown in this image to the right

1. Enter title of icon that will appear on the course homepage
2. Choose "Homepage," then the icon defaults
3. Click "Add"

The "Course Homepage" then appears with the new icon.

B. Link the icon to a file

Click on the new icon to bring up the Table of Contents for that new item. The Table of Contents will be empty. Remember that "Designer Options" must be selected at the top.

1. On the right-hand side of the Table of Contents, find the section titled "Options: Title of Contents"
2. Click on "Add Files", which is within the "Options" section, as shown here.
3. The "Add Files" screen comes up
   • Since the file to be uploaded is a Word document, click on "Show all files�"
   • Choose "Browse" (which switches you to the File Browser) and upload by typing or browsing for the name of the desired Word document on your local computer. Directions are supplied at the bottom of the dialog box � in the "Upload file" section. See the image below.
   • The "Add files" dialog box reappears. Now find the name of the file you just uploaded in the list of files and highlight it.
   • Click the "Add" button.
   • The Table of Contents screen comes up, with your file presented as a Content Item.
   • Click "Edit Titles" in the "Options: Table of Contents" menu, on the right hand side of the screen. Edit the title and click "Update".
     
     Whenever you change a Content Module, be sure to "Update Student View" (the button on the top right).
     
     
   • Click on the View tab, at the top of the frame.
   • Your students will be presented with a Table of Contents. When they click on a content item, they will be presented with a dialog box asking if they want to open or save the file. Choosing "Open" will cause the document to open in the WebCT window. Choosing "Save" will save the file to the student's computer. Remind students to turn off pop-up blocking software.

---

Back to top