(Intro music: Electric guitar)

Welcome to Web of Tomorrow, a show about the web and people who build it. I’m Adam Garrett-Harris and this time my guest is Jen Luker.

Hello.

Jen is a lead software engineer at Formidable Labs and a host on BookBytes Podcast, and also The Modern Web Podcast. So, she’s going to be talking about accessibility today, something that you’ve talked a lot about before. So, welcome to the show.

Thank you.

So, first off, I’m going to say I don’t know a lot about accessibility, but I think it’s really important and I want to learn more about it. So, that’s one of the reasons that I want to talk to you about it.

Fantastic. My favorite subject.

So, actually a while back I had been seeing A-1-1-Y, all over the place and I actually thought it was A-L-L-Y, I thought it was Ally.

Mm-hmm (affirmative).

Like, I thought Ally was some sort of library that helped to help you with accessibility, and I didn’t realize what that stood for, at all. Can you explain that?

Yes, it’s actually A-11-Y, and it’s because you start with A and then there’s 11 letters, and then there’s a Y in “Accessibility”. So, you know, it’s similar to other ones like Kubernetes, which is K8S.

Oh, okay.

The reduction is mostly due to Twitter, back when we only had 140 characters, spending 11 characters where you could just spend 2 was really important.

Yeah, the only other one I think I’ve seen which is internationalization, as I18n.

Mm-hmm (affirmative).

I guess there’s also localization, I forget the number on that one.

I think it’s 13.

Yeah. Anyway, it’s interesting. So, what is accessibility?

Accessibility is actually a really, really broad topic. So, I believe what you’re asking me about today is more closely related to web accessibility, but I will give you a little bit more of that generic definition. Accessibility in the sense that I appreciate it, is technology and tools, assistive technologies that allow you to access and interact with the web in the same way as everyone else, or as close to the same way as everyone else can.

Okay. So, it’s kind of enabling everyone to be on an even playing field?

Yes!.

Cool.

And then something that I found really interesting, if you think about it this way, many people have contacts or glasses and it’s no longer considered a disability to have vision that’s correctable by contacts or glasses because of the fact that the use of that assistive technology is so common, so accepted, and so widely available, that there’s really no way to call it a disability anymore.

Yeah, I mean I guess you would be temporarily disabled if you lost your glasses.

Right.

But…

But at that point, the assistive technology makes it normal. So, the interesting thing that I took from that is that accessibility has less to do with the disability, and more to do with the tools that make you disabled. So, for instance, if you’re in a wheelchair and you go into a building that does not have an elevator, but does have stairs, you are very clearly disabled in this building; but, if you go into that same building and it now has an elevator, you can get to the 3rd floor, then you are no longer disabled.

Oh, yeah. That’s interesting. So, the wheelchair’s enabling you, but then the building is disabling you.

Yes.

Awesome.

So, when it comes to the web, we have the same-

Yeah, that’s an interesting way to think about it.

Yeah. So, when it comes to the web you have a lot of the same technologies, the same assistive technologies, more specifically. Things like screen readers, you know, JAWS is a very common one that allows people with like, visual acuity issues or mental or interactive issues to be able to work with the web, and access the web, and interact with the web in the same capacity as the rest of us.

Yeah, can you explain JAWS a little bit? I just looked it up to see what it was like.

Hmm! Jaws is the Windows screen reader. It’s used a lot for the web, there are multiple screen readers that are all used and it’s kind of like browsers in that none of them are exactly the same. The technologies that are implemented are also not exactly the same. So, we are kind of dealing with like, a browser conflict, just like we’re dealing with a screen reader conflict when we’re trying to code things for the web, but they are essentially screen readers.

Okay, so this runs instead of a browser?

No, it runs in addition to a browser. It reads what’s on the browser window.

Okay, have you ever used it?

Yes.

So, what is that experience like?

Depends on the website! (laughs).

Oh! (laughs)

The fascinating thing is trying to navigate through a website where you’ve turned down the brightness all the way to zero, or you’ve turned off the monitor, and you try to use the entire operating system and the website in conjunction with each other, with a screen reader trying to find out how to navigate, how to get to information that you want, how to… You know, just how to access and interact with that website, and you’ll find that some website are abominably bad. They’re so bad. (laughs) And then you have other ones that, you know, accessibility has been taken into account but they’re not quite perfect, and you can pretty much do what you want. It can be a little awkward and it can be a little janky, but it still works. And then you’ve got other ones that have really spent the time, and invested in taking that into consideration, how you move around a website, whether you use only a keyboard, whether you use a mouse, you can still use a mouse with a screen reader just fine, but it changes how you can interact with the web, by a lot.

How does a mouse work when you’re using a screen reader?

When you hover, it reads.

Okay.

When you click it lets you know that it’s an active element. It’s usually easier to use a keyboard, but a mouse does work.

So, what are some other conditions to think about besides just blindness when it comes to the web?

Ooh, all sorts. So, I like to say that there’s 3 different major types of conditions. You’ve got your permanent disabilities, you have your temporary disabilities, and you have your circumstantial disabilities. So, the permanent disabilities are the things like, you know, vision acuity issues. Not just blindness, but poor vision, or cataracts, or color blindness of one sense or another. There’s a lot of different types of visual issues. You also have audio issues where, you know, you’re deaf, or hard of hearing. You have limb issues, broken or missing limbs. So, if you don’t have an arm, then it makes using a mouse much more difficult, or even a keyboard much more difficult. If you are, you know, paralyzed you have the same issues. So, there’s those to take into account, and then you have temporary disabilities where you have some sort of disability, but you’ll heal from it. It’s not a long-term condition. A broken arm, for instance, or your eyes have been dilated, or you lost your glasses, you know? Something to that effect, and then you also have circumstantial disabilities, such as deafness because you’re in a loud room, or you’re holding a sleeping infant.

Hmm.

Those prevent you from using both hands to use a keyboard and a mouse, and if you’re holding that baby, you’re going to move as little as possible, you don’t want to wake that baby up, but what happens if that baby’s in your mouse hand? You know? You’re going to either, figure out how to use your other hand to use your mouse, or you’re going to use only a keyboard; and that type of limited disability, regardless of whether it’s permanent, temporary, or circumstantial, is going to affect your ability to interact with the web based on how good of a job that website did on working with accessibility options.

What about if you’re on an older device or browser? Is that also considered an accessibility issue?

Yeah. Access due to speed is definitely an issue.

Ah.

Same thing with language barriers.

Yeah. Interesting. I’m just trying to think of more. I just think the… All of the different types of conditions that I don’t think of as accessibility issues are just really fascinating.

So, if you only have one arm and you’re trying to use that keyboard, because that baby’s sleeping, that’s definitely one thing you need to consider, but another thing that you may need to consider is if you’re in a loud room and you’re watching a video, you’re not going to be able to hear that video.

Mm-hmm (affirmative).

You’re going to have to rely on subtitles, or transcripts. And I just shared a video on Twitter of a man who is legally deaf, and blind. He uses sign language to interact, he can see you, but it’s very fuzzy, so he’s trying to watch a conference talk and everyone’s clapping and cheering, but there were no subtitles so he couldn’t read them, and then there was another one that had them, but the subtitles were very, very small and he couldn’t read those, and then they had subtitles that were the right size, but they blended into the background.

Mm-hmm (affirmative).

So, then there was another that had the correct amount of contrast between the background and the text, and it was the right size, but it was an incorrect translation. So, the words themselves weren’t accurate, which meant that he would get confused what they were talking about at different times.

Yeah, I see that problem all the time on YouTube because YouTube does its best to automatically transcribe it, but it doesn’t do such a great job.

Hmm, AI is very difficult when it comes to speech recognition. Not only that, but you know, (mumbling) if you mumble it can be really hard to figure out what they’re saying.

Right.

So, speaking clearly when you’re trying to record something, such as a podcast, really helps the screen readers be able to translate. So, those are some of the problems that are going on with… Like, video and audio transcripts and subtitles there.

Yeah, and I guess another temporary condition is you’re in bed, and your partner is asleep and you don’t want to wake them up with audio.

Uh-huh (affirmative), same deal.

Yeah.

Another thing that you need to think about is not just audio and visual, but also mental capacity.

Oh, okay.

So, if you’re dealing with a child they’re not going to be able to understand things as complex as someone who’s much older, or if you’re dealing with someone who has seizures you’re going to have to take that into account when you’re talking about things that are flashing on the screen. You know, there’s also other things like ADHD. If it’s really large blocks of text, the chances of someone hanging on that long is very, very unlikely. So, keeping things brief and to the point can be extremely helpful for everyone. Also, the more difficult words you use, the higher barrier it is to people that are learning a new language.

Yeah, and I assume even if you try to translate, it would be harder to translate.

Mm-hmm (affirmative).

Hmm.

Even if you are using Google Translate, which is, as we all know, not the best yet.

(laughs) No. Okay, so what’s the best thing to do to evaluate how well you’re doing? How well your website or app is accessible?

Well, there are a few different tools that can help you. For instance, there is Lighthouse which is built into Chrome at this point, it’s contained within your dev tools on the audit tab; and then you also have Axe-core, or aXe, that is a Chrome and Firefox plugin that you can utilize. These test for ARIA labels and they test for like, alt tags, and various other technological ways in which you can try to encourage screen readers to be able to navigate through your site, but this is only about, approximately, an average of 30% of the problems that you can find on the web, but those are a lot of the low-hanging fruit. That will cover a lot of your use cases. After that, you actually have to audit your site and learn as much as you can. The very, very best way is to have someone with those inherent disabilities test your site.

Okay, yeah. Yeah, because I could try using a screen reader but I’m not proficient at it.

Not yet.

So- Yeah, that’s true.

(laughs).

I definitely do want to become proficient at it, and I’ve tried using the one built into macOS.

Mm-hmm (affirmative).

It’s pretty difficult for me, as a sighted person, to even go through the tutorial. I think part of it is it’s really slow, and I know you can speed it up, but I didn’t get to that part where I could speed it up, or I can’t really listen to it that fast, yet.

It takes time to adapt just like it does take time to adapt to a new language. It’s a new way of interacting, something that you’ve never needed to do or have done before; and the more you use it the easier it gets, the quicker you can move around and understand what’s happening.

So, are you pretty good at using a screen reader?

On and off. I try to test it as often as possible, I don’t say that I’m an expert, but I do use it as often as possible. Something else as a sighted person is that when you’re using it with your monitor visible…

Mm-hmm (affirmative).

It’s not a true test.

Right.

So, it does help you when you’re trying to navigate and you expect something and you don't see what happens, or you don’t see that it does happen, but at some point you do have to turn off your monitor to do an actual test. The questions that you ask yourself are then, “Can I find the information that I’m looking for here? How long does it take me to get there? Is that average?” But the more you use it the easier it gets. It is a little bit difficult to get started, just turning it on and getting through that tutorial, but once you do it gets easier.

So, I just ran an accessibility audit with Chrome dev tools on orbit.fm

Mm-hmm?

And it got a 68. I’m assuming that is out of 100?

Yes, out of 100.

Is that, is that pretty bad?

Yeah, that’s not awesome.

(laughs)

It should give you a fair amount of data regarding what’s missing that would help you get to 100. The other thing that I like about the aXe plugins, or the aXe extensions, is that it gives you much more detailed information and a link to find out more.

Oh, okay.

So, I like to use aXe as an accessibility educational tool and not just as-

Sorry, I’m not sure about that.

Yeah. Not just as an audit tool.

Did you just ask Siri a question?

No, but said “aXe” and then something that sounded a lot like it.

(laughing)

So…

How does that trigger Siri?

It’s not Siri, it was Alexa.

Oh! Alexa, okay.

And now she’s on again. (laughing)

(laughing) You can’t talk… First rule about Alexa is don’t talk about Alexa.

Exactly. Speaking of accessibility tools… (laughs).

Yeah, what are some issues around smart speakers and assistants?

Besides the fact that people think they’re creepy? (laughs)

Yeah. Besides that.

I would like to say that the Echo is actually a lot better than some of the other tools that are out there, primarily because it detects my voice, most of the time. I have a lot of problems with, when the Kinect first came out where I had to speak in a much lower voice-

Hmm.

To get it to recognize that I was talking to it.

It’s like a bunch of guys tested it.

It’s amazing, isn’t it? Not only that, but those lower registers travel farther.

Hmm.

So, the higher the frequency, the shorter the distance that it travels, which means that women and children have to be closer in order to be detected at the same rate that a man can from farther behind, and the lower the man’s voice, the farther away he can be.

Wow, that’s fascinating.

So-

So, but-

There’s a certain amount of physics involved as well.

But the Amazon Echo, I guess, just put in better speakers?

It seems so. It does quite a good job.

Wait, microphones is what I meant.

Yes. Although the speakers are nice, too.

Yeah. I guess there’s a problem with people with accents, various kinds of accents and dialects, and vocal cord issues. Like, if you can’t speak at a very high volume.

Mm-hmm (affirmative).

Yeah.

With the vocal cord issues that does go back to distance, that you unfortunately have to be practically on top of it. And when you’re talking about accents and dialects, again you’re dealing with an AI that’s been trained on a particular dialect in the most unaccented form, because it’s what’s most common. So, the deeper you get into rural areas the less likely it is that the AI itself will have recorded your particular dialect.

Yeah.

So, it does take a lot more training, it takes a lot more testing, a lot broader and more diverse testing in order to get the AI trained in that sense.

Hmm. So, what about mobile? How do you use, I’m really curious how you use a phone when you’re blind for instance.

Phones have screen readers, too.

So, how does that work?

The same way as it would with a computer. So, as you are interacting with the phone you press on the screen, for instance, and it will read you whatever it is that you’re pressing on. So, when you’re writing applications for the mobile app you need to make sure that titles read appropriately or that forms tell you that they’re forms and that you’re about to fill something out. It is a lot more interactive because of the fact that you are forced to use your fingers as opposed to a keyboard to interact with it, but it also means that everything requires almost a double-click to do anything, because you have to click once and hold to have it read, and then click as you move as you actually select it. It makes it-

Okay. So, how do you know where to tap?

Mostly that is standardization. For instance, you know that back is either in the bottom left or the top left corner of your screen. You know that cancel is usually to the right of a submit. You know that titles tend to be at the top.

Okay, so are you just kind of holding your finger on the screen and moving it around as it reads the things? As…

Mm-hmm (affirmative).

Okay. So you have constant contact with the phone until you know you’re on the right spot, then you can lift up and tap?

Essentially, yes.

Okay, what about keyboard entry?

You end up-

That’s the same thing?

Well, keyboard entry you’re not just tapping and typing with your hands, you’re usually relying on your voice to do a lot more of that interaction.

Okay, yeah.

So, it’ll read you the options, you say the one back that you want. Some phones allow you to actually have almost a braille response based on the feedback, the vibrating feedback.

A braille response?

Mm-hmm (affirmative).

To....

To where your fingers are moving.

Oh! Okay. So, some sort of code just based on where… Obviously, and that can’t actually be braille, but maybe something more similar to morse code?

Hmm, not necessarily. Certain phones actually have the ability to provide multiple interactions based on a vibration. So, as you’re moving across the screen you can in fact feel those bumps where they’re supposed to be.

Oh! Interesting.

Digital braille.

Yeah. Yeah, so I saw a new system, I think there’s a kickstarter for it, that’s very similar to braille, but easier to learn.

That’s interesting.

Where it has like, circles and squares, and inside of the circles and squares it has different things that you can feel, and even a visual person, even someone who can see, you can recognize the letters, because braille is really hard to see by sight, you pretty much have to feel it and it’s very hard to learn.

I think the “very hard to learn” part does, in fact, rely on, you know, language differences. It’s… Anything is easy with familiarity. So, I think that saying that one thing is easier to learn than another just has to do with familiarity. Like, if you were raised on braille you are going to know it much easier than you’re going to learn the new system-

Yeah.

Of triangles and circles.

Yeah, you would just have to compare 2 people trying to learn it, or one person trying to learn one and then try to learn the other and then see which one they learn faster, or something like that. I do think some things are easier to learn than others.

Yeah. I’m not against any new technologies that would allow us to interact on a more common level, I think that those would be very awesome. I think that it can be prohibitive to tell someone who is blind and has been using braille that their language is too difficult to learn.

Oh, yeah. No.

And so in that case, we’re coming up with our own because it’s easier for us. So, I mean some of that, it’s still accessibility related. I mean at that point you’re just telling them that they’re not important enough to learn their language to be able to interact with them in a way that they know.

Right. Yeah. Yeah, I think it seems like a really cool, it’s called ELIA.

I would definitely like to see it.

It seems like a good alternative, not that we have to force people who use braille to switch. (laughs)

(laughs) No, but it would be, it’s still interesting, it’s still a cool idea. I’d like to see it.

Cool. So, at this point I’m kind of out of questions.

(laughing)

What else would you like to talk about.

I think I’m going to go on kind of a fun monologue here.

Okay.

Something that I’ve been really kind of passionate about lately and has been pretty much integrated in most of my talks lately is the issues that we have with beginning our accessibility journey, and it feels that a lot of the times we’ll dabble as developers in different languages, or different tools, but unless we actually need to use them for a job, or for a major project, we don’t dive too deeply into them. So, when it comes to accessibility, that means that we are looking to convince our companies to utilize those technologies as well. Some of the complaints against using them is that, “Well, you know, it takes a lot of time” or, “We don't really know where to get started” or, “There’s just too much and we can’t deal with it right now when we have all of these other features that are client facing and financially profitable; where accessibility seems like a whole lot of tech debt that doesn’t bring in any money.” And when you’re talking to a person you can generate that empathy and you can say it’s not just for people that have permanent disabilities, it’s for you. It’s for you when you’re in that noisy bar, it’s for you when you are holding that baby, it’s for you when you have had your eyes dilated after, you know, a doctor’s exam. You know, it’s for you if you’ve broken your arm, it’s not for other people, it’s for you and it’s for your family. But when you're talking about a business and you’re talking about the financial sides it can be really difficult to generate that empathy, because a business isn’t a feeling thing. So, how do you convince the business that accessibility is actually worthwhile?

Hmm.

And this is where I pull out statistics, because businesses understand numbers, and both the World Health Organization, and the United States Census says approximately 1 in 5 people, it’s about 19%, have some sort of permanent disability, and that does not take into account anything that’s temporary, or circumstantial. That’s just permanent disabilities. So, say for a moment, that you do have all of the accessibility features available, or at least, you’ve made it good enough that a lot of the accessibility conditions are covered. That means that your website is now accessible to 19-20% more people than you had before. If this is the type of website that generates revenue through their website, you’re looking at possibly up to 20% more revenue, just by incorporating accessibility features, you know? When was the last time that you set up software that added 20% to your revenue? If you have a $10 Million company, that makes it instantly a $12 Million company.

Hmm.

So, that’s a lot of money. And then-

Yeah.

You need to keep in mind that it’s not just the permanent disabilities, or even the temporary ones, or even the circumstantial ones. By making your website easier to use for people that require assistive technologies, you’re actually making it easier for everyone to use. So, a quote that I really loved, that I don’t have in front of me now, but it says something along the lines of “We have wheelchair ramps in front of our libraries, and these ramps are not just good for those that have wheelchairs, they’re also good for the parents with a stroller, the teenager riding with his bike, and the delivery driver with a dolly.” So, these accessibility features that you’ve added have, in fact, improved and increased access to the library by installing something that was an assistive technology. Same thing goes for the websites, by making them easier for people to use, making them clearer to navigate, being more clean and concise when you’re talking about text on the website, you’re making it easier for everyone to use at that point, under any circumstance.

Mm-hmm (affirmative).

So, then you’re looking at adding even more revenue based on the fact that fewer people will get frustrated, more people will stay on the pipeline. So, when you’re talking about numbers, and you’re talking about revenue, and you’re talking about a business, that is 20%, maybe 30%. That’s a lot more money than you’d make off of adding that extra little feature that you could do with the same amount of time.

Yeah, or switching to new framework.

Mm-hmm (affirmative).

Yeah, I mean, sometimes I try to use a website with a keyboard just because I prefer a keyboard.

Mm-hmm (affirmative).

And I’ve just pretty much given up on trying to use keyboards on websites except for a few, like I know shortcuts. There’s some shortcuts in Gmail that I like, but yeah. It’s just most… I’ve just learned most websites don’t work well with a keyboard so I can’t do that.

And that is sad. That is something that we should actually be able to do, simple keyboard navigation. There’s so many more uses for keyboard navigation than just accessibility features.

Yeah, so how should normal keyboard navigation work, screen readers aside, on a website? Like how would you expect that to work?

That’s a complicated question. Are you talking about…

I’m assuming like, you would hit tab-

Ah.

To go around the page and like, hit enter on links or something like that.

Well, you have tab which moves you forward, you have shift+tab that moves you backward. Esc usually closes things. Enter+Space usually enter them.

Okay.

You have… There’s a whole host of keyboard shortcuts that allow you to do certain things. Additional features that would be nice is if you add shortcut links that take you from the beginning of the navigation straight down to the content so you can skip your entire navbar altogether.

So, that would be like a hidden item in the menu? That you could go to.

Yeah, that you only can access through a keyboard or screen reader navigation.

And then, so if you get to it through the keyboard would it show up visibly at that point?

Not necessarily, it depends on where it’s positioned.

Okay, so if you’re tabbing through the menu and you get to that one, you just may not know it’s selected if you’re just looking at the site, and then hit tab again and then it’ll go somewhere else?

Mm-hmm (affirmative). It would go to the-

Okay.

Next item on the list.

Okay. Yeah, so, okay, so Space+Enter, that would work on links and buttons and…

Mm-hmm (affirmative).

Drop down menus and that kind of thing.

Which are just a collection of links and buttons. ‘Cause you’re not using-

Yep.

Divs for these things, unh-uh (negative).

If you’re inside of a submenu and you’re tabbing through, do you stay in that submenu or when you get to the end would you go to the next item?

That depends on your particular use case, there’s an entire collection on the WAI-ARIA website of recommended ways of utilizing the website, and I’ll give you that link after this.

Okay.

But, it does give you some guidelines. Now, those guidelines aren’t always exact, but they do give you a lot of options and they give you code examples that allow you to at least derive your own ideal interaction from that.

I’m guessing a lot of this is built in, right? If you’re using native components and things.

Well, if you’re using native components then we’re talking basic HTML, then there’s a lot of interactivity built into the basic HTML, yes. However, it depends on how you combine that HTML, and the JavaScript, and the CSS that allows you to really determine whether that’s going to be an accessible element. So, we don’t have an inherently built navigation system within HTML alone. There is no menu element which means we’re going to have to build it ourselves.

Right.

And with that, we’re also looking at incorporating CSS, we’re looking at tabindexes, and is it hidden? Is it expanded? You know, there's a lot to take into account when you’re looking and navigating through the website. For instance, if you’re going through a menu with submenus, do you want to tab through the main menu items and then open them and go into the submenu just by tabbing? Do you want to have to select it and click on it? Or hit enter or space to open it before you can tab into it?

Hmm.

Do you want to tab to the next item when you hit? Or do you want to restart over? Or do you just want to do nothing and just hit the end? And so-

And how do you let the user know that it has submenus within it?

Exactly. And that comes down to ARIA roles.

Okay.

So, there are.... ARIA expanded is one, it’s a true or false value. So, if you get to one that says “ARIA Expanded False” the screen reader reads it in a particular way and lets you know that this is an item that can be expanded, and whether it is expanded already.

Oh, okay.

You know, so-

So, go ahead.

So, there’s just a lot of ARIA rules that you can use, and though the first rule of ARIA is we don’t use ARIA, we still need it when it comes time to utilize a bunch of HTML elements together that aren’t necessarily built into the native format.

So, you try not to use it unless you need to?

It’s almost a smell, if you have to use ARIA, make sure that you really should be using it before you use it. So, for instance, if you need ARIA to tell your div that it’s a button, maybe you should just use a button. Why are using a div for that? Whereas-

Can you explain what ARIA means?

Ooh, ARIA. Oh goodness. You’re going to ask me that, aren’t you?

Yes, I am. ‘Cause I’ve heard it all the time and I’ve never even asked, “What does that mean?”

You are going to make me look it up. Goodness, ‘cause it does stand for something. Ah, there it is. So, ARIA is an Accessible Rich Internet Applications (ARIA).

Okay.

It “is a set of attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities.” So, this is straight off of the MDN Web Docs.

And so, do all of these attributes have ARIA in the name? Or…

Many of them do, but not all of them.

Okay.

There’s a role, ARIA-

So, is tabindex one of them?

No, tabindex is just an element that you’d add to a button or a link. That would-

Okay.

Tell the keyboard where to tab in which order.

‘Cause I’ve heard that’s kind of a code smell, too. You shouldn’t, you should rely more on the order that they’re in the document and not try to change the tabindex too much.

True, however if you opened up a submenu you may need a tabindex so that it skips those submenu items when you’re not looking at them directly.

Oh, okay.

So, in that case, you’ll have a tabindex of -1 on those items until they open.

And -1 just…

Says skip.

Skips it, okay. Yeah, so -1 makes a lot of sense, but if you’re putting positive numbers on there then that can get…

It can-

Complicated, hard to maintain.

Absolutely, and in that case you really need to rely on that layout. That was something that I found recently. There was a website that when the website was in a desktop view it had the content in one order, but when you reduced it down to a mobile view the content was rearranged and it read it in a completely different order.

Hmm.

And the tabindexes changed accordingly, but it made it much more difficult to navigate based on those 2 different formats. So, if you went from your phone to your computer, or vice versa from your computer to your phone, navigation was completely different.

Hmm. Or if you-

Layout was different.

Resized your window, even, probably.

Yeah, but you’ll often hear people argue, “Well, why would someone who’s blind resize their window?” (laughs)

(laughs) But they’re not necessarily blind, right?

Correct.

They may just not see as well.

Exactly, and in fact, they be making it larger so they can see better.

Oh, right! So, they’re just increasing the font and that kind of makes it, everything on the page shift around? Resize?

Well, they might make the screen itself bigger, but then yes. The font itself can change as well.

Gotcha. What about websites where you can hit a question mark (?), like on YouTube or Gmail you can hit question mark (?) and then it brings up a whole list of shortcuts.

Isn’t that nice?

Do you… It’s nice, I don’t know if it works well with a screen reader.

That depends on where you focus. I mean, it is yet another shortcut that you have available to you, so you press the question mark and then you've got focus placed in that location so that it can read.

Okay. How do you place focus?

Usually through JavaScript.

Okay. What is that? How do you do that exactly? I’m not sure what…

It should be an element.focus method.

Okay, ‘cause I’m used to elements like inputs and buttons having focus, but not necessarily a div or a popup or something.

Oh, you can absolutely move focus from a div to a div in a popup.

Oh, nice. So that just, that wouldn’t do anything if you’re not using a screen reader, right? Well, I guess it would if you’re navigating with your keyboard.

Right.

Okay, these are things I don’t think about, this is good to know.

(laughs) Lot to think about, lot to think about, and beyond that there are often times conflicting information. For instance, if you are working with an autistic person, or a person with autism, then you are wanting to make the contrast of text lower, but if you’re dealing with someone with visual disabilities you’re going to want to increase that contrast.

Whoa.

So, the question then becomes how do you cater to both? And I know that some tools are starting to get built into browsers themselves. I believe Firefox is actually working on the ability to increase and decrease contrast built into the browser, like we can zoom.

Hmm.

It would be interesting to observe that and see how that develops over time, to see how those tools start adapting to that contrast and accessibility requirements.

Yeah, and it would be nice if you could, and I think macOS might be working on this, but set a dark mode on your computer or on your browser and then just websites would know automatically to be in dark mode or light mode.

Mm-hmm (affirmative).

Do you know if they’re working on that? Or…

I don’t know. I’m…

Okay.

That gets a little bit more complicated in that you’re having to pass more information into a browser.

Right.

The problem in like, the reason why you can’t identify screen readers when you’re in a browser, or whether someone is using a screen reader is because it’s a privacy invasion.

Oh, yeah.

And when you’re dealing with a screen reader, specifically in the U.S. you’re looking at HIPAA law violations. Often times the reason you’re using a screen reader is because of a medical condition and by sharing that definition or that information you’re actually sharing that they have a medical condition, which is against HIPAA.

Yeah. Interesting. So, I’m sure you’ve encountered some circumstantial stuff with when you’re knitting for instance.

(laughs) Oh, yes. Having to let to go of my knitting so I can turn a page is always fun. (laughing)

(laughing) Do you have any personal stories about why accessibility is important to you?

Ah, yes! So, one of the reasons that I care so much about it is because I was raised in a household where my mother was deaf and my sister, prior to her death, was deaf, blind, and in a wheelchair.

Hmm.

So, I’ve had firsthand knowledge regarding how accessibility affects not just the person with the disability, but also the family of the person with the disability, everyone who’s with them. So, it may be simple to just step up on a curb, but then that leaves the one person in your family wandering around trying to find a ramp.

Hmm.

Or, everyone laughing at a movie except one person is having difficulty hearing it and doesn’t understand what’s going on, and is constantly asking, “Well, what just happened? Why was that funny?” Interacts… You know what I mean? It’s the little things like that-

Yeah.

That means that everyone has to stop, and we spend more time pausing a movie and trying to explain.

Is there anything at movie theaters to help deaf or hard of hearing people?

Other than the fact that it’s very, very loud in a movie theater? I don’t think so.

Yeah, ‘cause I like to watch movies with the captions on just because then we can talk, we can ask questions.

Mm-hmm (affirmative).

And I don’t miss anything, because I don’t have to hear it, I can see it.

I like-

And sometimes that would be nice to have that at the theater, but it seems like it would be weird, not everyone wants that.

That’s true. I like leaving it on because of the fact that movies so often go from very, very quiet to very, very loud. So, you turn it down for the loud parts and then you don’t hear it for the quiet parts, you have to go back, or vice versa.

Yeah.

So, it can be nice-

Yeah, or sometimes people mumble, even in movies.

Yes! So it can be nice to not have to go back and catch those things later. But it is more-

Yeah.

More to think about. More beyond the web.

Where should be go to learn more?

There are many places to learn more. You can absolutely check out the web accessibility on Mozilla’s developer page, you can check out the WAI-ARIA within W3, you can also go look at the deque tools that include everything from the aXe extensions to the axe-core automated testing methods. Mostly, just look. Search. Think about it. Talk to people. Ask questions, and you can always contact me on Twitter @KnitCodeMonkey and I would be more than happy to ask any questions or at least help direct you to people that can.

Cool, and we’ll have all those links in the show notes, as well as the transcript. I don’t always transcribe Web of Tomorrow, but I definitely want to transcribe this one. And you can follow BookBytes, uh, you CAN follow BookBytes!

(laughing)

That’s the other podcast where you can hear both of us, and you can follow this show on Twitter @WebOfTomorrowFM So, thanks!

Thank you.

And thanks for being on the show.

My pleasure.

(Exit music: Electric guitar)