MC Specific Standards
 

>>Back to Top

>>Back to Top

A. Official Documents:

The college has published legal disclaimers to the effect that the most authoritative and up-to-date source for certain types of information will be found on the web (see, for example, the title page in the print catalog). To this end, there is one "Official Documents" button on the home page, through which all "verified" documents are linked http://www.montgomerycollege.edu/verified/. The most important consequence for design of individual pages is an urgency to begin now to do all links to catalog information -- course descriptions, curriculum sequences, etc. -- via the specific pathways described immediately below, so that these will always access the most up-to-date versions currently available.

B. Course Descriptions:

The practice of "copying" Catalog course description information onto departmental pages, while moderately widespread, has always been strongly discouraged because of the danger that the person who originally creates these pages may move on to other things, or simply fall behind in maintenance. The data thus drifts out of agreement with official documents. We also encounter situations where links are still pointing to an archived online listing from some earlier academic year.

There is only one source on the MC website for accurate, current semester, catalog description language. This is the database search link at: http://webdb.montgomerycollege.edu/Internet/courses/SubjectSelect.cfm. ALL links for formal Course Descriptions must be directed to this URL, which loads the most up-to-date information directly from the master database as each request is processed. This requirement will increasingly be enforced now.

This is not meant to discourage the publishing by Departments of course information that goes beyond the catalog description as long as this is properly maintained, and as long as it is labeled in such a way that the visitor will not mistake it for "official" catalog language. On the positive side -- a keyword search feature has been added to the SubjectSelect page which allows the visitor to locate courses of interest without needing to know anything about MC course titles or catalog numbers.

Single-Discipline access to master course-description database:

The following href= format will provide access to all course descriptions for a single discipline, pulled directly from the most up-to-date official database in real-time whenever this link is selected.

href="http://webdb.montgomerycollege.edu/Internet/courses/
CourseSearch.cfm?subject=Student+Development&courses=all"

The examples given on this page access the Student Development course descriptions. To choose a different discipline, it is only necessary to change the subject= field (shown in RED above) to one of the options in the table immediately following these examples. These are the names of the disciplines exactly as they appear on the pulldown menu on the main Course Descriptions page, but with spaces replaced by the + sign.

• Here is an example of usage to link from a text element..

<a href="http://webdb.montgomerycollege.edu/Internet/courses/
CourseSearch.cfm?subject=Student+Development&courses=all">
View Student Development Courses</a>

...which looks like this on the displayed web page.

View Student Development Courses (Actual text to be linked on your own page is of course entirely under your control.)

• Here is an example that links from a graphic, with appropriate ALT= label to meet access standards..

<a href="http://webdb.montgomerycollege.edu/Internet/courses/
CourseSearch.cfm?subject=Student+Development&courses=all"><img
SRC="/images/coursebutton.jpg" ALT="Show Student Development
Courses" BORDER="0" height="22" width="40"></a>

...which looks like this on the displayed web page.

(Here again, choice of ALT text is entirely yours, and with your own graphic file name inserted into the img SRC= field.)

C. The Curricula (Programs of Study)

Main link is at http://www.montgomerycollege.edu/curricula/summary.htm. If you navigate into this menu to locate your own courses, you WILL be able to embed those specific URL's onto your Department page so that your visitors can link directly to individual programs. Again, for those who already have such links on their websites, it is important to double check that they are indeed going to this specific set of pages, and not to some archived version from an earlier semester.

D. The Schedule of Classes

Link to the main menu at http://www.montgomerycollege.edu/credit/ starts with selection of the desired semester, so you don't need to update the link every semester. It is still not possible to search for individual disciplines -- so there is no way for Departmental sites to link directly to their own courses.

E. The Academic Year Calendar and Detailed Semester Calendar

Link to the main menu at http://www.montgomerycollege.edu/dates/ starts with selection of the desired semester, so you don't need to update the link every semester.

>>Back to Top

>>Back to Top

Template for a page with both header and footer already installed is available at...http://www.montgomerycollege.edu/template.htm. The footer is an optional element for the College's Web Pages.

>>Back to Top

>>Back to Top

>>Back to Top

>>Back to Top

• This is the name the page will be indexed under when book-marked by a viewer and is what appears in the title bar of the browser. For home pages, this should be a short form of the name of the unit or activity owning the page.
• NOTE: The <TITLE> tag is placed between the opening and closing HEAD tags. The HEAD section is where you define the title of your document.

<HTML>
<HEAD>
     <TITLE>Class Schedule - Montgomery County, MD</TITLE>
</HEAD>
<body>

</body>
</HTML>

>>Back to Top

Use relative links when linking to documents within the College's Web site (www.montgomerycollege.edu). Relative links do not include the full path or URL (web address of the page). Use document-relative links (../) when linking to documents within your own directory(ies), and site-root relative links ( /) when linking to documents in directories that you don't own.

A.  Document-relative links (../) (link starts with dot-dot-slashes)

Document-relative links use directions from the source page to the destination page, sort of like saying "Start here then follow this path until you reach the destination".

There are three ways to do this - the method you use will depend on the location of the source and destination pages in relation to each other. We will use the example on the right and create hyperlinks from the page called sourcepage.html to other pages in the site.

1. If the destination page is in the same directory as the source page.
All you need to specify is the source file name:

<a href="page1.html">Go To Page 1</a>

2. If the destination page is in a folder inside the source page's folder.
Specify the folder name and then the file name:

<a href="directory2/page2.html">Go To Page 2</a>

3. If the destination page is in a folder outside the source page's folder.
Use the special instruction ../ which signifies "one directory higher".

The following link means "Go up one directory level, then go to a folder called directory3, then to a file called page3.html":

<a href="../directory3/page3.html">Go To Page 3</a>

You can repeat the ../ to make the link more than one level higher, for example, "Go up two levels, to a file called index.html":

<a href="../../index.html">Go To The Index Page</a>

Important Note: For relative links to work, you must keep the file structure intact. For example, if you moved the sourcepage.html file down into the directory2 folder, the relative links would no longer work. In this case you would need to add another (../) to point the links to the correct level. For example:

<a href="../../../index.html">Go To The Index Page</a>

B.   Site-root relative links ( / ) (link starts with slashes)

Site-root-relative links use a single forward-slash (/) to signify the instruction: "Start at the document root of the site (montgomerycollege.edu) and go down the directory path from there." The format is:

<a href="/departments/directory4/page4.html">Go To Page 4</a>

Despite the cumbersome name, this method is quite simple. The link begins at the same level as your domain and works down from there. The link above is the same as:

<a href = "http://www.montgomerycollege.edu/departments/directory4/page4.html"> Go To Page 4 </a>

This method has the significant advantage of staying intact if you move the source page. The exact same link will work from any page anywhere in the site.

Important Note:  This method will not work on files on your own hard drive unless you run them through a personal web server. However once you upload the pages to your server they will work.

>>Back to Top

>>Back to Top

>>Back to Top

>>Back to Top

You may also increase accessibility by using the title attribute on the link element to provide even more information, e.g.:
<a href="next.htm" title="More information about Montgomery College.">Go to the next page. </a>

>>Back to Top

>>Back to Top

Section 508 Implementation Guidelines for Text Tags

"What is meant by a text equivalent?
A text equivalent means adding words to represent the purpose of a non-text element. This provision requires that when an image indicates a navigational action such as "move to the next screen" or "go back to the top of the page," the image must be accompanied by actual text that states the purpose of the image. This provision also requires that when an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image."

Example 1:
<a href="/index.html"><img src="/images/MC_logotest2.gif" alt="Montgomery College Endless Possibilities" border="0"></a>

Example 2:
<a href="appropri.htm"><img SRC="blue2forwardarrow.gif" alt="Go to the Next Page" border="0" width="40" height="30"></a>

"How should audio presentations be treated?
This requires that when audio presentations are available on a multimedia web page, the audio portion must be captioned. Audio is a non-textual element, so a text equivalent of the audio must be provided if the audio is part of a multimedia presentation, Multimedia includes both audio and video. If the presentation is audio only, a text transcript would meet this requirement."

"What are ways of assigning text to elements?
There are several ways of providing textual information so that assistive technology devices can recognize it.

• The <IMG> tag can accept an "alt" attribute that will enable a web designer to include text that describes the picture directly in the <IMG> tag.
  Example (see screenshot above):
  <a href="http://www.montgomerycollege.edu/"><img SRC="/images/banner.gif" alt="Montgomery College Banner" border="0" height="51" width="552"></a>
  
• The <APPLET> tag for Java applets also accepts an "alt" attribute, but it only works for browsers that provide support for Java. Often, users with slower internet connections will turn support for Java applets off. A better alternative for providing textual descriptions is to simply include the alternative text between opening and closing <APPLET> or <OBJECT> tags. For instance, if a web designer wanted to include an applet called MyCoolApplet in a web page, and also include a description that the applet shows a stock ticker displaying the current price of various stocks, the designer would use the following HTML coding as illustrated below:
  Example:
  <APPLET CODE="MyCoolApplet.class" WIDTH="200", HEIGHT="100">
  This applet displays current stock prices for many popular stocks.
  </APPLET>
  
• Another way of providing a textual description is to include it in the page in the surrounding context.
  Example:
  <center>
  <b>Below is a picture of Dr. Nunley - President of Montgomery College</b>
  <img src="images/nunley.jpg" alt="Dr. Nunley's picture">
  </center>

>>Back to Top

>>Back to Top

Section 508 Implementation Guidelines for Color

"Why is this provision necessary?
When colors are used as the sole method for identifying screen elements or controls, persons who are color blind as well as those people who are blind or have low vision may find the web page unusable." Color-dependent references and functions based on color may not convey any meaning to color blind or visually impaired individuals.

"Does this mean that all pages have to be displayed in black and white?
No, this provision does not prohibit the use of color to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, must be combined with the use of color. This provision addresses not only the problem of using color to indicate emphasized text, but also the use of color to indicate an action. For example, a web page that directs a user to "press the green button to start" should also identify the green button in some other fashion than simply by color."

Example:

should be replaced with

Accessible HTML
<p>Press the Start button to start: </p>
<p>Press the Cancel button to cancel:</p>

<p>
<a href="start.htm"><img border="0" src="images/green.jpg" alt="Green Button - Press to Start" width="50" height="53" border="0"></a>

<a href="end.htm"><img border="0" src="images/red.jpg" alt="Red Button - Press to Cancel" width="50" height="53" border="0"></a>
</p>

"Is there any way a page can be quickly checked to ensure compliance with this provision?"

• "There are two simple ways of testing a web page to determine if this requirement is being met: by either viewing the page on a black and white monitor, or by printing it out on a black and white printer. Both methods will quickly show if the removal of color affects the usability of the page."
• To test how your site will appear to users with different types of color-blindness, you can use the online tool at http://www.vischeck.com . Right now, this tool works best with screen shots and images, rather than whole sites.

>>Back to Top

Section 508 Implementation Guidelines for Readability (Style Sheets)

>>Back to Top

>>Back to Top

>>Back to Top

Section 508 Implementation Guidelines for Data Tables

>>Back to Top

Section 508 Implementation Guidelines for Frames

One of the most important things you can do to increase the accessibility of frames is to give each frame a title.

• When a screen reader user hears a list of frames, it is helpful to know the purpose of each one. Frame titles allow web developers to communicate the purpose of each frame to users of screen readers.
• When frame titles are not present, screen readers look for other sources of information, such as the frame's "name" attribute or file name. Sometimes these other sources of information are not very helpful at all. If a frame is given a name or filename of "default3" (or something equally nondescript), there is really no way to know what the frame contains, other than by trial and error.
• The best titles for frames are brief and descriptive. Appropriate titles for the frames in a two-frame frameset might be "navigational frame" and "main content."

>>Back to Top

>>Back to Top

Section 508 Implementation Guidelines for Text-Only Alternative

Example:
MC Auxiliary Services site at has a introduction splash page designed with Macromedia Flash. They also provided a link to skip the "Intro", a link to install Flash Player, as well as a link for a text-only version of their site.

>>Back to Top

Section 508 Implementation Guidelines for Scripts

The example below demonstrates the implementation of <noscript> options to ensure that pages are useable when javascript is turned off or not supported.

Example:

The slide show images on MC home page was created using JavaScript. These images change randomly each time the page is loaded.

The script code for the slide show is:

<script language="JavaScript">
document.write('<img src="news/images/today/' + y + '.jpg" NAME="center" BORDER="0" height="206" width="215" alt="Photos Slide Show">');
</script>

<noscript>
The photos slide show that normally appears here cannot be displayed unless JavaScript is enabled in your browser.
</noscript>

NOTE: The noscript is the functional text that identifies the purpose of the slide show.

Script Enabled:



Script Disabled:

>>Back to Top

Section 508 Implementation Guidelines for Applets and Plug-Ins

"Why is this provision necessary?
While most web browsers can easily read HTML and display it to the user, several private companies have developed proprietary file formats for transmitting and displaying special content, such as multimedia or very precisely defined documents. Because these file formats are proprietary, web browsers cannot ordinarily display them. To make it possible for these files to be viewed by web browsers, add-on programs or "plug-ins" can be downloaded and installed on the user's computer that will make it possible for their web browsers to display or play the content of the files. This provision requires that web pages that provide content such as Real Audio or PDF (Adobe Acrobat's Portable Document Format) files also provide a link to a plug-in that will meet the software provisions. It is very common for a web page to provide links to needed plug-ins. For example, web pages containing Real Audio almost always have a link to a source for the necessary player. This provision places a responsibility on the web page author to know that a compliant application exists, before requiring a plug-in."

Examples:

1. "These forms are also available in MS Word (.doc) and Adobe Acrobat Reader (.pdf) format. You may download a free copy of Adobe Acrobat Reader at Adobe's Web site at http://www.adobe.com/products/acrobat/readstep2.html."
   
   
2. <a href="http://www.adobe.com/products/acrobat/readstep.html">Adobe Acrobat Reader</a>

For detail of how to create accessible Adobe PDF documents, please visit the Adobe website at http://www.adobe.com/enterprise/accessibility/creating.html .

>>Back to Top

Section 508 Implementation Guidelines for Electronic Forms

"Why do electronic forms present difficulties to screen readers?
Currently, the interaction between form controls and screen readers can be unpredictable, depending upon the design of the page containing these controls. HTML forms pose accessibility problems when web developers separate a form element from its associated label or title. For instance, if an input box is intended for receiving a user's last name, the web developer must be careful that the words "last name" (or some similar text) appear near that input box or are somehow associated with it. Although this may seem like an obvious requirement, it is extremely easy to violate because the visual proximity of a form element and its title offers no guarantee that a screen reader will associate the two or that this association will be obvious to a user of assistive technology."

Example:
The following form demonstrates these problems. Visually, this form is part of a table and each field is carefully placed in table cells adjacent to their corresponding labels.

"While the relationship between the titles "First Name" or "Last Name" and their respective input boxes may be obvious from visual inspection, the relationship is not obvious to a screen reader. Instead, a screen reader may simply announce "input box" when encountering each input box. The reason for these difficulties is revealed from inspecting the HTML source for this table. The following code is a simplified version of the above table."

<FORM>
<TABLE>
<TR>
<TD><B>FIRST NAME: </B></TD>
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"></TD>
</TR>
<TR>
<TD><B>LAST NAME: </B></TD>
<TD><INPUT TYPE="TEXT" NAME="LASTNAME"></TD></TR>
</TABLE>
<P>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
</FORM>

"The two pairs of form elements are indicated in bold above. The problem created by laying out form elements inside of this table is now clear - the form elements are separated from their labels by the formatting instructions for the table."

"How can developers provide accessible HTML forms?
The first rule of thumb is to place labels adjacent to input fields, not in separate cells of a table. For the web developer who does not wish to place form elements immediately adjacent to their corresponding titles, the HTML 4.0 specification includes the <LABEL> tag that lets web developers mark specific elements as "labels" and then associate a form element with that label. There are generally two ways to use the label tag: explicit labels and implicit labels."

"'Explicit Labels' Work Well
Experience has shown that explicit labeling works extremely well with all popular assistive technology and are recommended in all but the very simplest of tables. Using "explicit" labels involves two distinct steps:

1. Use the <LABEL> Tag and Associated "FOR" Attribute to Tag Labels. In other words, identify the exact words that you want to use as the label for the form element and enclose those words in a <LABEL> tag. Use the "FOR" attribute to uniquely identify that element.
2. Use the "ID" Attribute in the Associated Form Element. Every form element supports the "ID" attribute. By setting this attribute to the identifier used in the "FOR" attribute of the associated <LABEL> tag, you "tie" that form element to its associated label. For instance, we have rewritten the HTML code for our simple form-inside-a-table to include explicit labels below.

The new HTML code for the explicit labels is indicated in bold:

<FORM>
<TABLE>
<TR>
<TD><B><LABEL FOR="first"> FIRST NAME:</LABEL> </B></TD>
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME" ID="first"></TD>
</TR>
<TR>
<TD><B><LABEL FOR="last"> LAST NAME:</LABEL> </B></TD>
<TD><INPUT TYPE="TEXT" NAME="LASTNAME" ID="last" ></TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
</FORM>

That's all there is to making HTML form elements accessible to assistive technology. Experience has shown that this technique works extremely well in much more complicated and convoluted forms and it should work well in all college HTML forms."

Avoid Using Implicit Labels"

"In "implicit" labels, the form element and its associated label are contained within an opening <LABEL> tag and a closing </LABEL> tag. For instance, in the table above, an implicit label to associate the words "First Name" with its associated input cell, we could use an implicit label as follows:

<LABEL>
<TR>
<TD><B>FIRST NAME:</B></TD>
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"></TD>
</TR>
</LABEL>

Experience has shown that implicit labeling should be avoided for two reasons. First, implicit labeling is not reliably supported by many screen readers and, in particular, does not work well if explicit labels are simultaneously used anywhere on the same web page. Often, the output can be wildly inaccurate and confusing. Second, if any text separates a label from its associated form element, an implicit label becomes impractical and confusing because the label itself is no longer easily identified with the form element."

>>Back to Top

Section 508 Implementation Guidelines for Navigation Links

Why do navigational links present impediments to screen readers and other types of assistive technologies?
This provision provides a method to facilitate the easy tracking of page content that provides users of assistive technology the option to skip repetitive navigation links. Web developers routinely place a host of routine navigational links at a standard location – often across the top, bottom, or side of a page. If a non disabled user returns to a web page and knows that he or she wants to view the contents of that particular page instead of selecting a navigation link to go to another page, he or she may simply look past the links and begin reading wherever the desired text is located. For those who use screen readers or other types of assistive technologies, however, it can be a tedious and time-consuming chore to wait for the assistive technology to work through and announce each of the standard navigational links before getting to the intended location. In order to alleviate this problem, the section 508 rule requires that when repetitive navigational links are used, there must be a mechanism for users to skip repetitive navigational links.

Example: http://www.montgomerycollege.edu/webinfo/standards/edu_examples.php

In the current document, "Skip Navigation" is implemented with the below HTML. Since the link text is defined the same as the background color, the link is only visible to the screenreader, or to the user who "rolls over" the link, thus showing the ALT tag, "Skip Navigation Links."

<A href="#skipnav" title="Skip Navigation Links"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Skip Nav Links</font></a>

<a name="skipnav"></a>

>>Back to Top

Section 508 Implementation Guidelines for Time Delays

"Why do timed responses present problems to web users with disabilities?
Web pages can be designed with scripts so that the web page disappears or "expires" if a response is not received within a specified amount of time. Sometimes, this technique is used for security reasons or to reduce the demands on the computer serving the web pages. A disability can have a direct impact on the speed with which he or she can read, move around, or fill in a web form. For instance, someone with extremely low vision may be a slower-than-average reader. A page may "time out" before he is able to finish reading it. Many forms, when they "time out" automatically, also delete whatever data has been entered. The result is that someone with a disability who is slow to enter data cannot complete the form. For this reason, when a timed response is required, the user shall be alerted via a prompt and given sufficient time to indicate whether additional time is needed."

Many sites have user log-in sessions that automatically log a user out after a period of inactivity, for purposes of security. There are several ways to handle this security need in an accessible way.

• Program an alert message that informs users that their session will time out soon and gives them the option of asking for more time.
• Establish a lengthy standard timeout period, tell users how long it will be, and let them know what action they need to take to avoid being automatically logged out.

Example: