Technical Quality Checklist: More Detail

Copyright Clearance 

By and large, instructors who use copyrighted works for instructional purposes are protected under the "Fair Use" clause in Section 107 of the Copyright Law. According to this section of the law, four factors determine whether something is protected under "fair use": 

  1. The purpose and character of the use, including whether such use is of commercial nature or is for nonprofit educational purposes; 
  2. The nature of the copyrighted work; 
  3. Amount and substantiality of the portion used in relation to the copyrighted work as a whole; and 
  4. The effect of the use upon the potential market for or value of the copyrighted work. 

Although most media can be covered under Fair Use protection, lawsuits are still likely under two conditions:

  1. If the owner of the original loses money by your use of the media or content
  2. If the copyright owner is offended by your use of the content or media. For more details, visit Copyright – Fair Use.

If you are unsure about whether you should obtain copyright clearance, err on the side of caution. We've provided a sample Copyright Permission Letter (DOC 24KB) you can send to request usage permission from a copyright holder. 

Cross-browser Consistency

Resources

Accessible Documents

If you are providing documents for people to download, you should not limit them to downloading only Microsoft Word docs. With less complicated documents, you can make them available as rich text files (.RTF) which many free word processors can read. If the document has complicated formatting, make it available as a .pdf file which can be read with free Adobe Acrobat Reader or other applications.

Plug-Ins

The plug-ins required for web pages vary by course. However, all plug-ins are available on the internet for free. Though each plug-in differs, you will generally need to download and then install each plug-in before you can use it

Broken links

A broken link is when the address of a web site or a page has changed, or when it was setup incorrectly.  When you click on the link, one of three things happens:

  1. You get a message similar to "This page cannot be displayed" or "404 error".
  2. You go to the wrong place.
  3. You stay where you are.

It's a good idea to ask your students to notify you if there is a broken link. Otherwise, if you develop your pages in applications like Dreamweaver, they often have a link checker.

Minimum Scrolling

Screen display refers to the viewable real estate available for a user to view on their monitor. A screen length and width are measured in how many pixels extend across the screen. A pixel is one of the small units that make up an image on a computer screen. The computer screen display refers to the length and width dimensions of the computer monitor screen area. Typically screen display dimensions follow:

Older machines: 

or 

Newer machines:

Good web design does not require the user to have to use the horizontal scroll bar to view the entire page's contents. NAU requires that you design your web pages for newer machines because that is what is supported.

Download Speeds

Use the Download Speed Calculator to determine how long it may take for your students to download the files you make available to them. You might consider making several versions of a video or animation available to your students. A smaller screen size decreases file size tremendously. Consequently, you might consider delivering a video at 160 x 120 screen size for the slower connections and a 320 x 240 screen size for the faster connections. 

Image Distortion

Sometimes when you change the size of an image you do not select the constrain the proportions properly and the width and height of the original image becomes extremely distorted. The reason an image is blurry has to do with how you save your image for the web. You may over-compress you image file to decrease download time and at the same time you loose clarity and sharpness, like in the image below. 

"Alt" Tags 

Graphics encompass static images such as photos, drawings, charts, graphs, visual representations, etc. Use "alt" tags in your HTML pages for all graphics. They provide brief alternative descriptions for people who can't view the graphics. If, for example, you have a photo of the Grand Canyon in your course, the "alt" description for that photo will vary depending on its purpose in the course. Here are some examples:

In a tourism course
"Photo of the Grand Canyon in northern Arizona." 
In a geology course
"Photo of the Grand Canyon showing sedimentary layers."
In a photography course
"Black and white photo of the Grand Canyon showing a full range of grays." 

Keep in mind that the "alt" tag is intended for brief descriptions that convey the graphic's function to the visually impaired. Sometimes you need to convey more detailed information about a graphic, and in that case you should use the "longdesc" tag, which provides a link to a page containing a longer description. Long descriptions are especially necessary for charts and graphs that contain statistics and other numeric data. 

Here are some examples of longer descriptions for the Grand Canyon photo example:

In a tourism course
"Photo of the Grand Canyon in northern Arizona. Taken at the peak of the tourist season, the photo shows throngs of visitors crowded at a popular South Rim overlook. A typical summer thunderstorm approaches from the east and a plume of smoke from a wildfire is visible to the north." 
In a geology course
"Photo of an escarpment in the Grand Canyon showing layers of basalt sandwiched between layers of sandstone and lime. Significant wind and water erosion are visible."
In a photography course
"A silver halide photo of a Grand Canyon sunset, showing a full range of grays with adequate exposure in the shadows and no overexposure in the highlights."

Text Height

By default, web development tools like Dreamweaver use relative size for text height. The size attribute is set to "None" and the HTML code for defining a font does not include a font size attribute. Consequently, the paragraph tag defaults to a relative font size. The relative font size is dependent on, or interconnected with, the screen display, browser size display or the browser text font size. When the font height is relative, users have the option to change the size of the font as it is displayed through the browser. You are encouraged to use a relative font size to accommodate those individuals who need to control the size of the font from the browser controls. 

Tables 

Tables used for page layout or data arrangement present special problems to users of a screen reader especially if the content is in columns. Going from left to right, screen readers read across the columns, jumbling the order of the text. In addition, older browsers do not support certain table formats. Tables should mark up tabular information, also known as data tables. Each table should have clearly defined headers and make sense when read from left to right. You should avoid using tables for page layout, also known as layout tables. 

Cascading Style Sheets

Cascading Style Sheets are a great way to create consistent pages throughout your course. By using CSS, you can control the formatting for your pages in one place, which makes it much easier to manage and update your course. You can set the font style and font size for different headings. You can also customize the colors of your web links. If you would like to incorporate CSS in your web course, contact your e-Learning Center instructional technologist.

Color Accessibility 

To make your web pages accessible to colorblind people, you only have to do a few things: 

  1. Think about what color palette you decide to use for your course layout and design. 
  2. If you use color as a way to communicate difference, stay away from using the colors red and green. 
  3. Ensure that text and graphics are understandable when viewed without color. For example, do not use a red symbol to signify 'stop' and the same symbol but in green to denote go
  4. Ensure that all information conveyed with color is also available without color.

Alternative Web Page

Often it is extremely difficult to make the content accessible using many of the techniques described in this checklist. You may have made a concerted effort to provide an equal alternative for all the multimedia, interactive, and presentation features on a web page. Yet, some aspects of the page remain inaccessible or unusable. In these instances, you will want to create a plain text-based HTML page. The text will describe what the user would be viewing, listening to, or doing while visiting that web page. This solution should represent your last resort for creating an equal alternative, equivalent, and accessible web page. 

Fonts

The sans serif fonts have a more uniform weight in the lines that make up the letters (Arial is the most common example of this font type). The serif fonts have more contrast between the thick and thin parts of the letters, and they have "feet," called serifs, at the ends of some of the lines (Times New Roman is the most common example of this font type). 

Avoid using script or ornamental fonts on your web pages. They are less legible, and there's a good chance that people viewing your web pages won't have those fonts installed on their computers. In that case, the pages are displayed in the browser's default font, which brings us to an important point: the people viewing your web pages should ultimately control what your pages look like. Students can designate a preferred font for their web browsers to use and they can also designate style sheets to control how web pages look to them. The latter point is especially important from an accessibility standpoint. Students who have visual impairments can set their browsers to display large type in whatever font the students find most legible.

Backgrounds

Web page designers use background images for either a purely decorative purpose or to delineate page sections. We recommend you use caution when inserting a background image on your web page for the following reasons:

  1. A tiled image is distracting and not aesthetically pleasing to the user. 
  2. To avoid tiling, you may choose to enlarge the picture to encompass the entire background of the page. If the image is too large, it may take a long time to load in a browser. If the image is not big enough to fill the screen it will also tile across the screen.
  3. The text on a page must be readable when you decide to use a background image. More often than not, text is very difficult to read on a tiled background or on any sort of photographic or drawing type background.
  4. You may like an image and its colors and you may choose to insert that image in your web page. You could use some of the colors in the image to create a color palette, using one of the lightest colors for the background. However, you want to make ensure your background is a subtle color and contrasts enough with your text that the text is readable on any computer screen. 
  5. Typically, the background colors or image is set in a Cascading Style Sheet (CSS). 

Links

Active links are the words on a web page that are linked to another page. It is essential that you use color and underlining to delineate when a word is active. Visited links are the words on a web page that are linked to another page that you have already visited. Again, users are accustomed to knowing when they have visited a link. Typically, the link colors are set in a Cascading Style Sheet (CSS). The CSS is where you would define complementary or contrasting colors for your active and visited links. 

Navigation

A navigation bar is a group of graphical or textual hyperlink buttons that appear on the main pages of your content. Typically, a web page either has a vertical or horizontal navigation bar and sometimes it has both. 

Most of your course navigation will be controlled through the BbVista interface and for the most part you will not need to create custom navigation bars. However, you may face this challenge and you want to keep the following tips in mind:

  1. Use navigation to let the user know where they are
  2. Provide a way back to the Home Page
  3. Provide a way to the top of long pages
  4. Make sure navigation links look like navigation links (i.e., underlined text, borders, etc.)
  5. Create buttons or links that coordinate with the page
  6. Be sure graphic links have an alternative text equivalent

Internal navigation increases the likelihood that students will find the information on their first visit to the document as well as on return visits. Be sure to use headings, anchors, and information to assist students in finding the information. 

Headings

Headings refer to the internal organization of a document. The heading element represents the title of a section. Typically, web designers use the heading levels to define a table of contents for a document. There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones. 

Buried Information

Burying information refers to the number of clicks a user has to click in order to access information. You want to reduce the number of clicks to a reasonable number or else you increase the risk of students not finding the information or getting lost in the process.