Tweaking Text Level Styles
December 10, 2017; 7 Comments
This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog. In that post, Steve answers a very specific question about the <mark> and making it more accessible for screen readers.
I saw some follow-up questions on the Twitters related to language and Windows High Contrast Mode, as well as other elements. I wrote this post to deal with four elements that impart text-level semantics and come with default styles that could use a little help.
I am not a copywriter nor a copy editor, so the wording and styles I am proposing may not be ideal for that audience (where I think these elements would see the most use). Rather, consider these places to start, places from which you can tweak them to fit your audience.
As Steve’s example shows, you can use CSS generated content to wrap the highlighted text in a spoken declaration at the start and end of the chosen text while also visually hiding it. Each example in this post leans on the following block of CSS:
mark::before, mark::after, del::before, del::after, ins::before, ins::after, s::before, s::after {
clip-path: inset(100%);