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] "; }See the Pen Using CSS to provide missing semantics for the mark element by steve faulkner (@stevef) on CodePen.
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