Accessibility: How to mark up information conveyed only by colour accessibly?

Question

I am working on a web application that offers, essentially, Diff for legal documents. That is, it can show changes to legal documents over time in a similar way to a graphical Diff utility.

It uses a wide range of text styles, more than my example - at least 3 colours, and strikethrough - to convey meaning. I'd like advice about how to implement this as accessibly as possible. The markup will probably be fairly unsemantic, something like

<span class="col-repealed">The Commissioners before whom an appeal under this section is brought</span>  <span class="col-inserted">On an appeal that is notified to the tribunal</span>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

I will be testing with colour blindness simulators to ensure the colours are all adequately differentiatible. I am also planning to create a black-and-white print stylesheet (where I'd probably change colours to various underline or outline styles, and also print a key to the styles.)

I'm wondering about users of screen readers though. I believe this calls for an aural stylesheet, with different voices standing in for different colours. I've never done aural stylesheets before. Are they well enough supported to be worth the effort? Are there other things I could or should do? (E.g. title attributes on the spans)

Answer 1

Let me preface this with the fact that I am a long time Jaws user but do not have much web development experience. Currently no screen readers other than Emacspeak support Aural Style Sheets as far as I can tell based on some quick research. Since Emacspeak is written primarily by a blind programmer for other blind programmers I don’t think you would have success requiring blind users of your application to use it.

A possible solution may be to use images with alt tags. I’m not sure if you could create single pixel images that aren’t visible or if you would have to make the use of images a toggle in your application. I’m thinking of something like the following.

<begin replacement text alt tag>
This is some new replacement text
<end replacement text alt tag>
<begin original text alt tag>
This is the original text that will be replaced in the new version.
<end original text alt tag>
This is text that will not be changed by new versions.

Answer 2

You need two additional ways how to convey the meaning:

• another visual cue for users that can’t access the color
• semantic annotations for users that can’t access the visual design at all

Another visual cue

For repeals, strikethrough would be sufficient, as this is color-independent.

For insertions, you should add an additional cue (see WCAG 2.0: 1.4.1 Use of Color), for example a border, an underline, etc.

See "Ensuring that additional visual cues are available when text color differences are used to convey information" for some more examples.

Semantic annotation

with HTML

HTML(5) defines the elements del and ins for "edits to the document".

So your example markup should become:

<del>The Commissioners before whom an appeal under this section is brought</del>  <ins>On an appeal that is notified to the tribunal</ins>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

with natural language

If you can’t use it, you would have to provide the start and end of both, repeals and insertions, in the text. Which would get really messy.

<span>START REPEAL 1</span> <span class="col-repealed">The Commissioners before whom an appeal under this section is brought</span> <span>END REPEAL 1</span>  <span>START INSERTION 1</span> <span class="col-inserted">On an appeal that is notified to the tribunal</span> <span>END INSERTION 1</span>, the tribunal must consider whether the registration of the pension scheme ought to have been withdrawn.

Ugly, and very hard to grasp.

with characters

Similar would be the use of special characters (for example ISO 5776, correction/proofreading marks, …).

For insertions, for example, half brackets for English, i.e., ⌊ and ⌋:

Half brackets are used in English to mark added text, such as in translations:

"Bill saw ⸤her⸥".

And for repeals, for example, the deleatur, i.e. ₰ (has no clear start and end, though):

A dele or deleatur […] is a proofreading symbol used to mark something for deletion.

But I guess (though I don’t know) that most screen readers wouldn’t read them.

(Of course these could be used as visual cues instead, inserted via CSS.)

special markup language

http://criticmarkup.com/ is a project to provide a simple plain text markup language to "track changes to documents". Depending on your visitors, you could use this (or a similar) markup language to convey the edits.