Screen Reader Only Content

[00:00:00]
>> Jon Kuperman: Another thing that's really important here is that sometimes you'll want screen reader only content. And this is like a question that I get asked a lot in workshops is like, can you detect screen readers? Is there any kind of way of doing that? And truthfully, there's not a way of doing that.

[00:00:14]
There's no way of detecting assistive technology. And I think the standards bodies have been pretty clear that they don't wanna go down that road, that you shouldn't be offering different experiences. For a while I think there was a pitch to have a minimal website for accessibility use cases and then the whole robust website for non accessibility use cases.

[00:00:30]
And I think that's like a really bad direction to head down. The tools are there to make the full robust website extremely accessible. And that's the direction we should be going in. So I agree with the standards on there. However, there are some really cool things you can do by communicating directly with screen readers.

[00:00:45]
And one way to do that is to make elements that you know the screen reader will read, but make them visually hidden, right? And so you say this is here, but it won't visually appear, but anyone using a screen reader to read the content will get to it.

[00:00:58]
So this kind of like CSS resets has had a lot of back and forth over the years of the best way to make a visually hidden class. I think a lot of people have settled on this little bit of CSS here. But I wanted to tell a cool story from when I was back at Twitter, and we'll get into this a little bit later.

[00:01:12]
But we built this really robust keyboard shortcut library within twitter.com, and a lot of social networks have this where you can go to Timeline, GT, or go to Messages, GM, things like that. And we wanted a way of advertising that particularly to screen reader users. Say, hey, we have got this really cool tool set.

[00:01:30]
And so we came up with this idea where after the website built, we prepended a header that said we have really cool keyboard shortcuts, hit shift question mark to see them and then we mark that header visually hidden. So visually it doesn't show up in the markup, but it is always there.

[00:01:45]
And so when you load the site for the first time with a screen reader, the first thing that it will read and we keep a little local storage detective, you've heard it before. Was this kind of announcement for screen readers that, hey, we've got this really cool shortcut library, check it out this way.

[00:01:58]
So you can kind of do some cool tricks with visually hiding things. But again, the philosophical point is we should not be moving in a direction of making a more limited. If anything, we should make the accessible experience more robust. And so yeah, this is a kind of cool way that you can sort of interact with screen reader users without displaying something like that.

[00:02:18]
There's caveats though, because if you were to print out the document, it would still print out all that markup. So be kind of aware that you're not hiding it, hiding it, you're just visually hiding it from the rendered process, yeah?
>> Speaker 2: So for an image that is not really useful for the screen readers, you can actually have the Arial hidden True, right?

[00:02:37]
>> Jon Kuperman: Yeah, yeah, you could hide it. I think also like if you just put the alt text blank on it, it'll just skip the image. The screen readers will just skip it. So yeah, lots of different ways that you can hide it.
>> Speaker 3: Is a visually hidden span preferable over an aria label for anchor tags that should only contain visible image?

[00:02:55]
>> Jon Kuperman: So if you have an anchor tag, okay, yes, you've got links and instead of text, the links have visible images in them. And you're wondering what the best way to handle that for accessibility is. I think the actual best way to do it would just be to have an empty alt string on the image itself because if you, you don't wanna visually hid in it because you need it visually to be there for sighted users to be able to see the anchor.

[00:03:21]
An empty alt would be great, an aria label would also be great. But I think probably the best solution would be the anchor and then an empty alt and then if you needed either a label or whatever you'd like for it. So yeah, I guess I think the best solution probably would be to combine them.

[00:03:37]
So empty alt on the image, ARIA label on the anchor and therefore when users tab over to it, it'll just read the label and it won't read the image but not visually hidden.
>> Speaker 3: Is there a specific reason it is a one by one pixel and not just zero?

[00:03:54]
>> Jon Kuperman: Yeah, that's a really good question. So that's referring to this visually hidden. This is like the CSS magicians that work on this stuff. So I think the thing is, and you see this quite a bit with like CSS hacks that if something is width 0 and height 0, there's like a more than decent chance that tools like assistive tools will, will skip it because it doesn't exist to them.

[00:04:14]
So you see this quite often where you make something one by one and then you absolutely position it way off the screen so it doesn't render, and yet its virtue of having width and height means that it won't be skipped by assistive technology. So I think there's a risk, I think that probably half the time visually hidden being zero and zero would work just great.

[00:04:33]
But then maybe half the time screen readers would neglect to read the item because they would think that it is not rendered.