So yesterday I was looking at the spec (not literally, if you must know ), and noticed my screen reader was reading lots of
·s. So I dug through the repo and understood the reason for that.
I propose these to be hidden for screen readers, as they are too verbose. Instead of, for example, “4 spaces”, I hear “middle dot middle dot middle dot middle dot” (they aren’t together but separated by one space, so my screen reader for Windows, NVDA, doesn’t join them as it does for the spaces). VoiceOver in iOS reads each · separately (i. e. I have to move past each · symbol), I believe because of the colour changes between the text and the marker.
A solution for this would be: instead of using pseudo-elements for the marker, create a span with
aria-hidden="true" for each ·. That is to say, move the marker creation from the template to the lua file, to when the special unicode character is replaced, and keep the position and color stuff in the csss. The line of the lua file would be something like:
contents = contents:gsub('␣', '<span class="space"> </span> <span class = "space-marker" aria-hidden="true">·</span>')
I suggest this approach because it appears that unfortunately the :after pseudo element cannot be hidden. There was a question in Stack Overflow and the answer suggested using Media queries to do it, but these media types or features don’t appear in MDN. So this (dirty, I’ll admit) option is the only thing I can think of.