Accessible Annotation

Owned by Lisa Liskovoi
Last updated: Jun 16, 2015
2 min read

The Problem

A number of e-learning platforms and web-based word processors offer users the ability to highlight and annotate sections of text. Currently, this functionality is not accessible to screen reader users. 


Screen reader users should be able to:
  1. Differentiate between highlighted and non-highlighted sections.
    The HTML5 <mark> tag can be used in combination with hidden text that identifies text as highlighted. 

  Note: The HTML5 <mark> tag is not currently registered by screen readers.

  1. Be made aware of where highlights start and end.
    Hidden text should be inserted in the beginning as well as the end of each highlighted section.

  2. Highlight text.
    It’s not clear what the interaction for highlighting using a screen reader would be like. Existing articles that touch on making annotations accessible (such as the Microsoft Position Paper on Annotations) discuss it from the p.o.v. of the reader, but what about screen reader users making the annotations themselves?

  3. Comment on highlighted sections.
    Same issue as with highlighting, how can screen reader users select text and then choose an 'insert comment' option?

  4. Turn highlights on and off.
    Could “turn on highlighting” trigger some js that adds a tabindex attribute to each mark tag so they become easily reach-able via keyboard?

  5. Go to a comment when there is one and return to the main text after reading it.
    The HTML5 <mark> tag could be used in combination with a hidden link that becomes visible when it receives focus (similar to a Skip to Content link) that would take screen reader and keyboard users directly to the comment, and a similar ‘back to content’ link at the end of each comment.

 

Example Solutions

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }
</style>
</head>

<body>
<p>The
  <mark><a id="highlight1" href="#comment1" class="visuallyhidden">Start of highlighting. Follow link to comment.</a>quick brown fox<a href="#comment1" class="visuallyhidden">End of highlighting</a></mark>
jumped over the lazy dog.</p>
<p>Paragraph two blah blah</p>
<p>Paragraph three blah blah</p>
<p><a id="comment1"></a>Comment by Jan: Most foxes are red. [<a href="#highlight1" aria-label="Return to highlighted text">Back</a>]</p>
<p>&nbsp;</p>
</body>
</html>