As with many projects, we began with the end in mind. We wanted web pages
that were accessible to the visually impaired. We wanted readers with visual
impairments to be able to access the information as easily as a sighted person.
We wanted to present information in a visually appealing and structured format
that would facilitate the use of assistive technologies like screen readers.
Toward these ends, we first had to have a way of navigating to each topic
in the article. This is accomplished by having the navigation menu. We placed
it consistently on the left and we stacked it vertically since monitors usually
have more width than height. This allows sighted readers to quickly use the
navigation menu when needed and to easily ignore it when they did not need
it. For the visually impaired, navigation needed to be accessible, but an
additional need was the option to ignore the menu. (Screen readers like JAWS
would repeat the menu on each node as low vision or blind users moved through
the site.) To accomplish this, the navigation menu was put at the top of the
page so that it is the first thing read when the page is accessed. However,
above the navigation, is a "skip navigation" link so that if the
reader/listener does not want to hear the navigation, yet again, they can
skip it and go directly to the main information of the page. If the page is
viewed using the Cascading Style Sheet (CSS), sighted users will not see the
“skip navigation” link. It is still there (highlight the area
in the upper left hand corner to see it), but it is colored the same as the
background because a sighted person does not need it. When the page is viewed
without the CSS, the "skip navigation" link is the very first thing presented.
You might be thinking that we have described two fundamentally different page
layouts, one with navigation on the left and one with navigation at the top.
This is where the power of CSS comes into play. While navigation does physically
appear in the html file before the main text of the page, it is divided into
a section called "menu" like this <div id="Menu">.
The style sheet “knows to” put the menu section into a box on
the left side of the page. If the style sheet is on, it will appear on the
left. If it is off, it will ignore the divisions and just show the text in
the order that it appears in the file. This is how we achieve two different
page layout styles without having to create a separate html file for each.
(This could be a catchy mantra: We like styles, not files.) The CSS for all
the pages of this article can be viewed here. Notice
you can define the text type, size and color for each of the divisions. By
using one style sheet for an entire website, you can make each page have the
same layout and style elements. And, if you need to change something like
making the main text of the article larger, you can change it in the CSS and
all the web pages will now display the main test in the new larger font.