Screen Reader Exercise

[00:00:00]
>> Speaker 1: With that, if nobody else has anything, we'll go into exercise one, which is screen readers. So I will open up and leave this repo on Learn ally here. And if you go ahead and pull that down, there's instructions to run it. And when you run it, you will get to this page here.

[00:00:16]
And from here we can go into exercise one, Screen Reader Accessibility. So there's instructions on here, essentially there's this little mini website that visually looks quite nice, if I say so myself. And yet at the other hand, if you turn on your screen reader and try navigating is very difficult to work with.

[00:00:33]
And so kind of the idea here would be to turn on your screen reader and try to move around the website and see how difficult it is. You can see it's just like I can't even get to these buttons here and all these inputs are edittext blank. And it is very unclear how to submit the form.

[00:00:50]
And so kind of go through on the other side of the source code itself, which is all HTML, and try to figure out some things that you could do to make this better. Again, this isn't like a binary fixed or broken as much as it is like how much can we gradually improve this experience?

[00:01:05]
So, yeah, let's take a little break here and work on that and then we'll meet back up after. Welcome back from the exercise, how did everybody find working on it? It was reasonable, got some good experiences. I think it's kind of interesting how difficult it is to navigate.

[00:01:26]
This thing looks really great. And then it's very easy with a mouse to figure out all these things. It's very difficult to navigate. Maybe what we could do as opposed to just going through everything is maybe talk about things that you all found and fixed and I could go through them together and anything that was interesting or notable that you all found, yeah.

[00:01:45]
>> The menu, home, about and contact, yeah.
>> You can't navigate.
>> Speaker 1: You can't navigate it at all. Right, so if we go over into the menu here, home, about and contact. There's quite a few different reasons that you can't navigate it. One of them is that these aren't anchors and so you could kind of, you could wrap these all in anchor tags.

[00:02:09]
I don't know, it could go to nowhere for now. But then you could have anchor your home, about and contact. And at the very least this would give you something to interact with. You could also help the screen reader out. Instead of a div class nav, you could actually use a nav element which would help the screen reader out quite a bit there.

[00:02:27]
And then I think one other thing, again, this is very granular. I didn't have necessarily something in mind. But another thing that you could do is you could. Instead of making these all divs, you can make these all list items or something like that. I've been using a different editor and now my VS code skills are not up to par.

[00:02:45]
But yeah, so you could kind of wrap all of these in some kind of list item or something like that and they would respond a lot better. Cool, and so now if we kind of go. We'd have to change our CSS as well. But at the very least, these are all you can kind of tab through.

[00:03:03]
And similarly, when we turn our screen reader on, I'm going to hide this message and we refresh the page. We can now tab immediately there and it says link home three items about contact. So, yeah, that's a great one. What else, anybody think of anything else that was nice to fix, yeah.

[00:03:20]
>> Speaker 1: Is using unordered lists like that for navigation bars. Is that kind of like the standard?
>> Speaker 1: I think so, I mean, you could do it in quite a few different ways. I think that for the accessibility section, it's nice to have some type of list so that I find it nice when it reads navigation list, 3 items just as an audio clue.

[00:03:41]
It being ordered or unordered doesn't matter. You could hide it with CSS or whatever, but I think that it provides a little bit of a better experience, but yeah, you could just do it with. Yeah, exactly, that's a great question. Cool, yeah, I think I had pointed out also at some point the span of title.

[00:03:59]
So I think that if we have the screen reader turned on and we refresh the page and then we go to our little rotor here and we go to headings that we don't get the actual. What is it? The My Website as a heading. And so we could kind of turn this off, go back into here, change the span into an H1, probably change this div into a header, refresh again.

[00:04:22]
Again, we'll have to go through and update the CSS, but that's not a big deal. Just instead of div class class, it would be header class. But yeah, so now if we open the rotor, we'll have my website as a selection, which is nice. And we could do similar things.

[00:04:35]
We could go through and we could add labels to all the forms. I think the submit button at the end is like a div. So we can again make that a button, different things like that. But yeah, I guess, how is everybody feeling? Was it kind of interesting to try using it with a screen reader and see how difficult it was and then kind of a lot of gain for a little bit of work?

[00:04:53]
I think the risk reward is like the work reward is very high for just switching a few tags and a little bit of styling, yeah.
>> Speaker 1: Another thing I noticed on the ROTOR menu, the numbers are like the type of heading nest.
>> Speaker 1: Sorry, can you say that again?

[00:05:10]
>> Speaker 1: Notice like the number before the heading.
>> Speaker 1: Yeah, it's a heading type, yeah. H1, H2, things like that, yeah, it's really nice. So you can do so on the rotor, I don't wanna make this like too much voiceover specific, but all the screen readers do have really similar things they can do.

[00:05:23]
But, yeah, so for the headings you could see which ones are the H1s, which are the ones preceded with the 1. You can also use your left and right arrows so you could see what form controls are there on this page. These, as you can see, are blank and an unchecked checkbox.

[00:05:36]
But as we were to add the labels, we would see those come up landmarks on the page. So you've got your main and your nav and all sorts of other stuff links on the page. You can kind of see these show up now that they're anchors. They didn't show up before.

[00:05:48]
Yeah, lots of control, again, one hope I have for the course is to. Because on my journey with accessibility, I went from thinking about making the minimum useful case into realizing how amazing these screen readers are and how with a little bit of markup or a little bit of labels, you can actually make it preferable to use a screen reader.

[00:06:09]
Moving around, let me check out all the forms, let me hop to the third form. It's really cool, you can go really fast with it. I'm a big fan of this stuff.