Short note on making your mark (more accessible)

Is there a recommended ARIA pattern for making sure that <mark> is properly announced in screen readers?

— Šime Vidas (@simevidas) December 3, 2017

Short answer is no, but there are ways…

The HTML5 mark element provides a semantic way to highlight portions of text, much as you would using a highlighter on paper.

How does the semantic meaning of the mark element translate to informing users who cannot see the highlight? Currently it does not, as the accessibility layer implementation across browsers is incomplete, and in browsers where it is supported the assistive technology support is not present.

CSS to fill the gap

One possible method that could be used to provide an indication of the presence of marked text is to use the CSS :before and :after pseudo elements. Text indicating the start and end of the marked text is added and then hidden off screen (but still announced by screen readers).

Code example

HTML

<p>
  <mark>This text</mark>
  is marked as highlighted.
</p>

CSS

mark::before, mark::after {
  content:" [highlight start] ";
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

mark::after {
  content:" [highlight end] ";
}

Advantages and disadvantages

- It’s simple to implement
- It works well with modern screen readers and evergreen browsers
- it could also be used for other text level elements whose semantics are not exposed aurally, but it would be useful to do so; ins and del for example.
- This method does not work in IE11
- It blurs the line between CSS for presentation and HTML for content
- It could be overused and become an irritant rather than informative

Addendum

You can also make <mark> work better in Windows High Contrast Mode by leaning on system colors: https://t.co/uCBJ071ayp

— Adrian Roselli (@aardrian) December 5, 2017