Screen shot of a navigation menu for a blog where the text “link” appear at the end of each link.
have been working in accessibility for nearly a decade at this point and one of the things I still struggle with is explaining to a sighted user what it is like to use a screen reader is like. It’s one thing to explain how screen readers present images, text, and all the associated metadata with it but that’s not really the same.
What I’m Trying to Do
Hide the metadata indicators from screen readers but not sighted users.
It’s not hard to do with JavaScript using the insertAdjacentHTML() method. I say “not hard” deliberately because for a JS developer, it’s easy. For me, someone with very limited JS experience? Much harder.
What I’ve Done so Far
Links all have “[link]” appended to them. The header avatar has “[logo]” appended to it.
Conceptually, it’s not hard to do with straight CSS, which I have as an active experiment on my live page right now, but that’s not actually accessible.
Css vs JavaScript
So the pseudo selectors “::before” and “::after” can place text adjacent to any element you can find through a selection string. The live site currently does this for:
- Headings
- Links
- Images
- Captions
The problem is that CSS injects literal text and can’t do HTML. What that means is that screen readers read that text too. So a screen reader user on my live site will hear:
“Link [text in the <a> tag]. Link.”Link gets said twice - once at the start because of the pseudo selector I’m using and once for the screen reader metadata reading ability.
That’s lame at best and confusing at worst.
The Script
In load, I’ve got a function that loops over the elements in questions and adds something like this at the end of the element:
<div class=“visualOnly”>[link]</div>And results in something like this:
Close up of navigation bar with link text appended to each link.
So far I have element insertion working for links and the logo image though without the proper labeling needed to hide that text from screen readers.
Fun aside. I have the JS run on body load. I was trying to select the logo using a child class identifier on the image element itself. It wasn’t working at all until I created a container for it and appended the DIV there. I think it was a race condition where the image wasn’t loaded when the JS executed which, i had assumed, wouldn’t matter. The IMG tag should be there and findable in the DOM, yeah? I guess not?
If any developer friends know why that was, I’d like to know why as I continue my JS adventure.
What’s Next?
There are X number of things I want to do next, roughly in priority order:
- Hide from screen readers
- Apply labeling to images, block quotes, and any other major element I use on my blog.
- Remove all visual styling
Hiding From Screen Readers
This is easy. There is a layer of coding that exists entirely for assistive technology called ARIA - Accessible Rich Internet Application - that allows me to supply instructions or contextual info for screen reader users alone. Typically, this is to provide things like image descriptions, contextual descriptions, or other non-obvious stuff otherwise not inherent in the HTML itself.
So, here, all I need to do is turn the DIV from what I have now to:
<div class=“visualOnly” aria-hidden=“true”>blah</div>This tells assistive technology that it can ignore the thing in this DIV.
Applying to X Element
This shouldn’t be hard but my foray into images suggests that this will be much harder than I expect. :). But it is mostly a matter of reusing the code I have and running over other elements and slap on the right postfix text.
Block quotes are harder than you think. If you can’t see the visual styling they typically have, how do you know when they start and end? So I’ll need to add some sort of text-based bookends for it.
Remove All Visual Styling
So screen reader users don’t all have access to the visuals. Why should we?
The whole idea is to trying to introduce to non-screen reader users what it is like to interact with a web page and that means no link color, not indenting quotes, and the like. If the particular thing can’t be supplied aurally, then I don’t want to supply it.
And Then What?
Well, who knows? It is partially an exercise in better understanding the screen reader experience myself through deconstruction of HTML and CSS elements Nd it is partially a way to learn JS for myself.
Once more comfortable with the basics I’m trying to accomplish, I want to provide “difficulty switches” to add back certain levels of visual styling to make the experience more tolerable to the less… adventurous person. People aren’t going to learn anything if my site completely turns them off.
I have a sense of how I could do it - like buttons that enable certain styles by toggling classes on the HTML elements. Which, again, is probably not hard for a developer (and I know there are methods designed to do this) but I’ve not done this but once before to hide and unhindered a single, well-contained, element for a menu when you clicked on a button.
It’s different when you want either multiple buttons that do one thong each or a single button that does progressive things as you click it. So, I absolutely know it CAN be done. But can I do it??
I mean… yes, I can but how long will it take me