Horizontal rules

Let me try to put some order regarding the usage of 
horizontal rules, both "normal" and graphical.

1. General purpose of horizontal rules:

horizontal rules are used as dividers withing a document.
The concept originates from print medium.
In visual media the exact meaning of the rule is understood 
by the surrounding blocks of text, as well as the width of the rule
and possibly other visual features such as color or style
(dotted, inset etc.)

2. Horizontal rules in HTML documents:

2.1 The HR element.

In the strict version of HTML 4.0 its appearance in visual and other
media can be affected by stylesheets.
HR accepts the title attribute, that allows authors to associate  text 
to the rule.

HTML 4 transitional allows to effect the visual presentation of a rule 
by choosing its width (relative to window's width), size (thickness), 
alignment (relative to window).

Some user agents suport a color attribute (that does not exist in
 any spec that I know of)

2.2 Graphical and "styled" rules.  

Stylesheets can be used to add style to 
the rule (using border properties) its width (using margins 
and text alignment) etc. Also by defining padding and a 
background image to a HR element one can create a graphical rule.
(in this regard there is an interesting article by Flavell, 
excuse me for not mentioning the exact reference)
An advantage of this method is that the width of the rule
is detrmined by the window's width, and is not fixed in pixels like 
when using IMG.

Another way is not to use the HR element, but to insert a 
graphical rule using the IMG element.

Some authors use a TABLE and color the (textless) cells
in order to create a multicolor rule.

3. Problems with non-visual media:

Users of non-visual media cannot understand the the 
meaning of the rule via its visual aspects.

Thus we ask:
What method (HR or IMG) is preferable?
How to associate text with a rule (title, alt etc)
What text makes sense.

4. My opinion for accessibility guidelines: 

4.1. Using the HR element is preferrable to using IMG or 
other elements. 
Stylesheets may be used to create a large 
variety of colors, styles, and background images, for 
the visual media.

4.2. The title attribute is the only way to associate text 
 to the HR element. The text should generate the function of the rule.
E.g., <HR title="Footnotes:"> or <HR title="End of example">

"Deprecated" methods:
4.3. In case one uses the IMG element the alt attribute should be used for 
 generating the function of the rule.
e.g.: <DIV align=center><IMG src="rule.gif" alt="Footnotes:"></DIV>

4.4. In case one uses a  TABLE and coloring the cells.
In this case, it seems the best is to use the title 
of the table for providing text and put nbsp characters in all cells.

Note: I am very much against drawing the rule (in the alt) even in 
addition to text. This method is very much platform dependent and 
relies on the appearance of rules in visual non graphical user agents
(notably Lynx), but doesn't make much sense otherwise.

5. Misuse of the HR element.
Some authors use the HR element to create decoration to headings etc.
This usage of HR should be deprected in favor of stylesheets.

Regards,
Nir Dagan.

Received on Saturday, 28 March 1998 15:05:13 UTC