Accessibility Example: The CourseInfo GatewayAccessibility Example: The CourseInfo GatewayWe took the original CourseInfo Gateway and made an accessible version by implementing the following changes:
All example code is marked to show changes. Anything that was removed from the original code is shown in red text with a line through it. Anything that was added to create the accessible code is shown in bold, green text.
If you open the source code for the original page, you will see that it is actually made up of two frames. If you open the source of the first frame, title.html, you will see that it is simply a blank document. The source of the second frame, bin/gateway.pl, looks just like the original page. So what is the difference between the original page, which contains two frames, and the second frame, which contains all of the content?
Follow the link to the Blackboard home located at the bottom of the original page. Then look at the top of your browser. It still gives your current location as http://edtech2.scale.uiuc.edu, the CourseInfo Gateway. This is because you have changed the source of just the second frame. The first, empty, frame is still there, but you can't see it.
Now open just the second frame, and follow the link to the Blackboard home located at the bottom of the page. Look at the top of your browser again. It should list your current location as http://company.blackboard.com/, the Blackboard home page.
There is no difference between the two scenarios descibed above in terms of visually available page content. However, the second scenario makes more sense. You expect your browser to recognize the page you are currently seeing.
There is another problem with the use of frames on this page. If a user is accessing the page through a browser that does not support frames, she will see only the text: "Courses by CourseInfo v3.0 are best viewed with Netscape Navigator or Microsoft Internet Explorer. Please download one in order to continue." This does not help the visually impaired user who must use a special web browser, or the dedicated Unix user who prefers to view everything on Lynx. In fact, given that the frames serve no particular purpose on this page, users are being excluded for no reason.
There are ways to provide alternative access to frames, but in this case we chose simply to eliminate frames altogether, using the source code from the second frame as our starting point.
You may want to read more about alt text and why it is necessary before reading this section.
The Blackboard logo across the top of the page had appropriate alt text. We added alt text to the Submit button and Blackboard logo, as well as the image map.
In the original page, there was a single line of alt text replacing the entire image map. This means that someone viewing the page without images would not be able to identify the individual elements in the image map. We removed this alt text and added alt text to each element of the image map in the image map definition.
<MAP NAME="bb_gatewaymap">
<AREA SHAPE="RECT" COORDS="2,3,144,15"
HREF="http://www.blackboard.com/company">
<AREA SHAPE="RECT" COORDS="338,1,404,15"
HREF="/">
<AREA SHAPE="RECT" COORDS="600,3,698,15"
HREF="http://support.blackboard.net">
</MAP>
<MAP NAME="bb_gatewaymap">
<AREA SHAPE="RECT" COORDS="2,3,144,15"
HREF="http://www.blackboard.com/company" ALT="Blackboard Homepage">
<AREA SHAPE="RECT" COORDS="338,1,404,15"
HREF="/" ALT="Top Level">
<AREA SHAPE="RECT" COORDS="600,3,698,15"
HREF="http://support.blackboard.net" ALT="Online Support">
</MAP>
<img ALT="[ Blackboard CourseInfo
Gateway]" SRC='/common/images/categorized_gateway_navigation.gif'
border='0' USEMAP='#bb_gatewaymap'>
<IMG
SRC="/common/images/categorized_gateway_navigation.gif"
BORDER="0" USEMAP="#bb_gatewaymap">
You may want to read more about layout tables and why they should be avoided before reading this section.
Most of the original page layout was accomplished using tables. There were a total of five layout tables on the page. The accessible version uses only one layout table, to arrange the links in the central portion of the page. The other tables were eliminated and their effects, mainly centering, recreated using style sheets.
<TABLE ALIGN="center"
WIDTH="600" BORDER="0">
<TR>
<TD> <HR> </TD>
</TR>
<TR> <TD ALIGN="center"> <A
HREF="http://www.blackboard.com/company"> <IMG
BORDER="0" SRC="/common/images/powered_by_bb.gif">
</A><BR> <FONT FACE="arial,helv"
SIZE="-2">Copyright © 1999, Blackboard Inc.
</FONT> </TD>
</TR>
</TABLE>
.centered {text-align:center;}
.teensy {font-size:60%;}
HR.narrow {width:70%; align:center;}
<HR CLASS="narrow">
<P CLASS="centered">
<A HREF="http://www.blackboard.com/company"><IMG
BORDER="0" SRC="/common/images/powered_by_bb.gif"
ALT="Blackboard Homepage"
></A><BR>
<SPAN CLASS="teensy"> Copyright
© 1999, Blackboard Inc. </SPAN>
</P>
You may want to read the full W3C Web Content Accessibility guidelines and on explicity associated labels and implicity associated labels before reading this section.
The text input box on this page does not have an explicitly associated
label, defined using the HTML LABEL tag. It does have an
implicitly associated label: the text underneath the input box. However, since
this label is after the text input box, users of text-only browsers will see
the input box without knowing what they should type in it. To correct these
problems, we replaced the implicit label with an explicit label, and moved it
in front of the text input.
<FORM ACTION="/bin/gateway.pl"
METHOD="POST">
<TABLE ALIGN="center" BORDER="0"
WIDTH="600" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="center"><FONT SIZE="2">
<INPUT TYPE="text" SIZE="25"
NAME="searchstring"><INPUT TYPE="image"
SRC="/common/images/categorized_gateway_search.gif">
</FONT></TD>
</TR>
<TR>
<TD ALIGN="center"> <FONT SIZE="-2"
FACE="arial,helv">Search for a Course Name, ID, or
Description</FONT></TD>
</TR>
</TABLE>
</FORM>
<FORM ACTION="/bin/gateway.pl"
METHOD="POST">
<DIV CLASS="teensy"><LABEL
FOR="search">Search for a Course Name,ID, or Description:
</LABEL></DIV>
<INPUT TYPE="text" SIZE="25"
NAME="searchstring" ID="search"
><INPUT TYPE="image"
SRC="/common/images/categorized_gateway_search.gif" ALT="Search button" BORDER="0">
</FORM>
You may want to read more about physical styles and why they should be avoided before reading this section.
The original page set the margins and the background, text, and link colors
within the BODY tag. Throughout the page, font family, size, and
style were controlled using the FONTtag. In the accessible
version, we defined all of these characteristics using a
cascading style sheet. Although we
wanted to keep all of the values as they were in the original page, we did
change the left margin because once we removed the layout
tables, the left margin did not look right.
BODY tag:<BODY TOPMARGIN='20' LEFTMARGIN='0'
BGCOLOR='#ffffff' TEXT='#000000' VLINK='#003366' LINK='#003366'
>
BODY definitions:BODY {font-family:Arial helvetica; margin-top:20;
margin-left:10; background-color:#ffffff; color:#000000;}
A {color:#003366;}
BODY tag:<BODY>
<font size='-1'
face='Arial,Helvetica'><b><A
href="gateway.pl?parent_id=c6e1e9a87q6ja04pqfen1zz3tvusd9m1">Fall
1999 Classes</b></font>
</a>
.mybold {font-size:80%; font-weight:bold;}
<A CLASS="mybold"
HREF="gateway.pl?parent_id=c6e1e9a87q6ja04pqfen1zz3tvusd9m1">Fall
1999 Classes</A>
See our entire cascading style sheet.
Contact us at infotechaccess@server.rehab.uiuic.edu
Go to Accessibility Examples Main Page
