|
Web pages shall be designed so that all information
conveyed with color is also available without color, for example from
context or markup.
Documents shall be organized so they are readable
without requiring an associated style sheet.
back to top
Explanation - Standard
(c) - Accessible Use of Color
The use of color to convey a meaning creates problems when those colors
cannot be displayed by a browser or seen by the user. A user may be using
a computer monitor with few colors, a text-only reader, or a handheld
device which renders information with no color context. In addition, many
people are color blind and may not be able to see the colors used to convey
meaning. And, of course, there may be users who cannot see the screen
at at. This priority specifies that information conveyed through the use
of color also be represented in a secondary manner. One example can clarify
this problem.
A fictional web site lists all of its departmental offerings for this
semester. A note above the list states that all new offerings are indicated
in red text. Offerings from prior semesters are in black text. Clearly,
this list relies upon color to mark new offerings.
Once again, a solution is to provide an alternative.
back to top
Techniques for Accessible Use
of Color
Understand that color can be used as a means of conveying meaning. An
alternative must also exist. Several suggestions:
- In an example such as the new offerings example presented earlier,
the color red can remain as an indicator. An alternative could be as
simple as an asterisk that precedes the offering or a graphic that is
accompanied by alt-text notifying the user the offering is new.
- If color is used to emphasize text, it may be prefaced by text such
as, Note:.
- If directions or a question is included that relate to images that
are colored, provide appropriate alt-text for those images. Look at
the following example. Note: The HTML code, including alt-text is included.
Question #1 -- Which of these colors does not appear in the
flag of the United States?
A) (img
src="images/red.gif" alt="red image")
B) (img
src="images/white.gif" alt="white image")
C) (img
src="images/blue.gif" alt="blue image")
D) (img
src="images/yellow.gif" alt="yellow image") |
back to top
Explanation - Standard
(d) - Use of Style Sheets
HTML was never intended to be a desktop publishing language. HTML is
a relational markup language which describes a hierarchy of information.
To control for placement and formatting of objects on the screen, Cascading
Style Sheets (CSS) were created. A style sheet defines how objects will
be presented. For example, a style sheet may specify the heading one (<H1>)
tag be displayed using the Arial font, at 18 point (font size), be blue,
with an indention of 80 pixels. CSS is a powerful way to control and manage
formatting of content on your web site. However, support for CSS is not
available for browsers under version 4.0 of Netscape and Internet Explorer,
is supported marginally by Netscape 4.x, and may not be supported at all
for some browsers.
Standard (d) doesn't encourage or discourage designers from using style
sheets. Rather it mandates that designers investigate the appearance and
usability of their web pages both with and without the style sheet. There
are several techniques that a designer can implement to complete this
test.
back to top
Technique for Proper Use and
Inspection of Style Sheets
Proper Use of HTML and Style Sheets
A style sheet can be properly used only if the HTML page it formats makes
proper use of HTML. This can be a daunting task for many designers. This
isn't the appropriate forum to discuss the do's and don'ts of HTML or
style sheets, but some ground rules can be presented.
Proper Use of HTML
- Use HTML headings to structure the web page. Format the appearance
of the headings from the style sheet.
- Use HTML tags correctly. For example: <blockquote> is an HTML
tag. When used, the text within the tag will display with an indent.
This is improper use of the blockquote tag. It is intended to be used
for quotations. The style sheet can be used to create a rule that will
indent text. This guideline may require you to learn more about HTML,
style sheets, or both.
- Don't place presentational formatting within the HTML code.
- Restrain from formatting text color, size, and font in the HTML.
All of these characteristics are better assigned from the style
sheet.
- Restrain from formatting page backgrounds and table backgrounds
from within the HTML. These are also correctly assigned from a style
sheet.
The separation of presentational formatting from the HTML code is key.
The example below illustrates this point.
In the following graphic you can see a page with
(top half) and without (bottom half) a style sheet. The dark blue background
is controlled in the style sheet rather than in the HTML background properties
of the document. This ensures that if style sheets are turned off and
thus, the style defining the white table cell is removed, we don't have
black text on a dark blue background. All presentation is controlled in
the style sheet and when it is removed or fails to load, the document
defaults to the browser's settings. The browser default settings are white
background with black text. The result of this setting is illustrated
in the bottom half of the image.
Compare the above situation to one where the presentational
elements are mixed between HTML and the style sheet. Let's say that the
HTML has been authored to have a dark blue background. The style sheet
has a rule that formats a table background to be white, and all text to
be either dark blue or black. The key to the readability of this page
is the style sheet rule that dictates a white table background. If this
style sheet is not correctly supported the result would be dark blue background
for the page with a dark blue table background, and blue or black text.
This is a possibility if presentational elements
are mixed between HTML and the style sheet. Keep the presentational elements
in the style sheet. If you are not yet up to creating and using style
sheets, make this a top priority for your learning.
Proper Use of Style Sheets
- Stive for a contrast between background and foreground colors.
- Use positioning elements with caution. The positioning capabilities
of style sheets may someday replace the need for using tables to control
page layout. Netscape 4.x doesn't provide an adequate level of support
for positioning. The UW does has enough Netscape 4.x users to make the
use of positioning a risky decision.
Inspection of Style Sheet Formatting
We know that browsers don't support style sheets equally. There are several
simple tests a designer can perform.
back to top
Other Considerations
Relative Sizing
Web browsers allow users to increase or decrease the size of the font
on a web page. (Internet Explorer - Menu Bar, View, Text Size. Netscape
- Menu Bar, View, Increase/Decrease Font) Style sheets can take advantage
of this function or eliminate it.
Style sheets provide the option for either absolute or relative font
sizing.
Absolute sizing locks the font into a size that a user can't modify from
their browser. Sizing units such as pixels and points are absolute.
Relative sizing allows the user to adjust the text to their comfort level.
The relative sizing units are ems and %.
Section 508 doesn't address font sizing. Nor does this University have
a directive in the policy. Looking at the issue from an accessibility
angle, there is an obvious advantage to allowing a user to change the
size of text to a level that they can read easily, even if it has an unsightly
effect on the aesthetic appearance of the web page.
Color Blindness
Always consider contrast when choosing colors. Individuals with color
blindness may not see the same color tones, but sufficient contrast correlates
to readable content.
Emphasizing Text
How does a screen reader or text browser know when text has been marked
in a manner that adds emphasis. For example, on the images
page of this course, we focused on the alt-text assignment within
HTML code by marking it as red. However, special attention was made
to the alt-text assignment through the word Note.
The HTML code below illustrates this usage of
alt-text. Note the alt-text assignment.
<img src="../images/header_nav.gif" alt="NMC
Main Menu (links of this image map are available at the bottom of the
page" ismap>
Obviously, one example doesn't cure all. There isn't one technique that
will always work, but being cognizant of this gap means that you might
be clever enough to devise alternatives when the time comes.
back to top
Validation Technique(s)
The testing measures that follow can be used to evaluate compliancy of
your web page(s) with the concepts presented for Standard (c) and Standard
(d
Standard (c)
- view your web page in a text based browser such as Lynx
- print the web page to a black and white printer
- listen to the web page using a screen reader or speech synthesizer
- observe page contrast - light characters on a dark background or dark
characters on a light background
Standard (d)
- view your web page in a text based browser such as Lynx
- listen to the web page using a screen reader or speech synthesizer
- view your web page using an old version of Netscape (4.x)
- disconnect your style sheet from the web page - view the page in your
browser
- attempt to enlarge the text size using your web browser
back to top
 complete
a self-assessment about formatting
|
