WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best practices showing revisions (strikethroughs, etc.)

for

From: Jukka K. Korpela
Date: Jan 7, 2014 4:07PM

2014-01-07 22:51, Wyant, Jay (MNIT) wrote:

> We are concerned that there
> doesn't seem to be a standard for showing document revisions in html
> format. As an example, here's a typical page on the Revisor's Bill
> site: [...]
> Deletions are identified by the tag <s></s>, additions by the
> underline tag.

Both according to HTML 4 and to HTML5 CR, deletion is to be marked with
<del>, insertion with <ins>. In practice, their impact is simply that
<del> causes overstriking, <ins> causes underlining. I don't think there
is any browser, search engine, or other relevant program that cares
about the "semantics" of these elements.

> (A March 27 note in the WebAIM archives expressed
> concerns that this tag is deprecated.

The <s> and <u> elements are deprecated in HTML 4. In HTML5 CR, the
situation is in principle worse: they are conforming elements, but their
definitions are obscure and subject to varying interpretations. It's
really just a way of "saving" these presentational tags.

In practice, using <s> and <u> vs. <del> and <ins> does not really
matter. I suppose they use <s> and <u>, since they have longer history
in HTML: they are supported by all graphic browsers (though possibly not
all character cell browsers).

> Another note argued against
> using the <del> tag.)

I don't know why, but I can argue against the use of overstriking for
deletion and underlining for insertion, no matter how you achieve that.
Overstriking makes text more difficult to read. Underlining is easily
confused with links; it also breaks descenders of letters, somewhat
decreasing legibility.

> Is there any reference source for standards for such revision marks?

Regarding HTML, the "standards" we have tell you to use <del> and <ins>.

You can do so, of course. But I would then consider using style sheets
to make things more accessible to people using common graphic browsers
visually. For example,

/* remove overstriking on mouseover: */
del:hover { text-decoration: none }
/* replace underlining by dashed line under in different color: */
ins { text-decoration: none; border-bottom: dashed green 2px; }

For non-visual browsing, you would need something else.

Yucca