A11Y — Making web accessibility easier

Podcast Transcript

Neal Ford:

Welcome, everyone, to the podcast. I'm one of your regular hosts, Neal 00:00:13 Ford, and our other regular host that's here this morning is ...

Rebecca Parsons:

Rebecca Parsons.

Neal Ford:

One of the things that we talk about on our podcast are things that come up on the Technology Radar, but we also talk to thought workers who have a particular passion about a certain subject. And the intersection of that this morning lies with our colleague and my longtime friend, Scott Davis, who's joining us this morning to talk about this mysterious thing called A11Y. Good morning, Scott.

Scott Davis:

Hey, good morning Rebecca. Good morning, Neal. How are you doing?

Neal Ford:

Good. So tell me why it is that you are so lazy that you spell the word accessibility with A11Y instead.

Scott Davis:

Well, when we're talking about internationalization, all the cool kids have way too much time to be investing in their programming to actually say internationalization. So we say I18. A word that begins with I and ends with ED and has 18 letters in between. So with accessibility, we took that same shortcut and said accessibility begins with an A, ends with a Y. 11 letters in between. Now you have time to actually start implementing your accessibility.

Neal Ford:

That sounds like a pretty good trade-off. So tell us why you've gotten so interested in accessibility over the last few years or so. I know it's become a big passion area for you.

Scott Davis:

Absolutely. I've been doing web development for essentially the whole of my career, and so I got really excited about conversational UIs. Gardner says by this year, about 30% of our interactions are happening over voice, and if you think about it, we're talking to our phones. Not to humans, but agents on our phones. We're talking to our watch. We're talking to our Smart TVs and things like that. And I noticed when I was talking to clients, clients are very excited about this "Hey, Alexa. Hey, Cortana. Hey, Google." This kind of thing. And I'd say, "Oh, and you're also really excited about accessibility, right?" And they said, "No, we're really just kind of excited about the Hey, Alexa and Hey, Google, and Hey, Cortana."

Neal Ford:

So you realize you're triggering devices everywhere. You're getting them to talk to one another now.

Scott Davis:

I'm trying to. I'm trying to be equal opportunity out of this.

Neal Ford:

So that sounds interesting. So tell me about ... So web development, as long as you fill in the alt tag, you're good to go, right? Are we done there?

Scott Davis:

You know, this is a great example of do as I say, not as I do. I think we're all guilty of like, "Oh, you know, I'll get around to putting that alt tag on the image." And if you think about what that really is for, the semantics behind that is that it's alternate text. This really benefits so many people, beyond just people who have low vision. But imagine having a website read to you. If you don't have good alt tags on your images, there is no way that one of these agents are going to read back the content.

Scott Davis:

What I like saying is, as a web developer, we really should be trying to delight all the senses. Really, what that means is you should be targeting at least two different ways to get your information across. We're recording audio right now, and I would assume that we're going to have a written transcript. There we go. Problem solved. We delighted the senses, and now I can have someone read this transcript back or I could listen to Neal's wonderful vocal tones on this audio recording.

Rebecca Parsons:

You guys have known each other too long.

Neal Ford:

So the state-of-the-art now in building accessibility for web applications?

Scott Davis:

Well, I hate to sound like a grumpy old man, so settle in. I'm going to sound like a grumpy old man.

Neal Ford:

Hold on. There may be some kids on your lawn.

Scott Davis:

You kids! Get off my lawn! It's not hard, and that's what's so heartbreaking about this. When it comes to web development, if you use good semantic HTML elements, your path towards accessibility, you're about 80% of the way there. Where we run into problems is where we have frameworks that are not taking advantage of the native HTML elements and trying to recreate the wheel on top of it. One of the first things that happens is when you use Java script to solve a problem that HTML could solve well. Java script solves 20% of that problem, and that 80% that they don't solve tends to be accessibility and ways of interacting with the keyboard or through voice or ways other than the way the JavaScript designer thought about how to re-implement that existing feature.

Rebecca Parsons:

So outside of frameworks, what are the big unsolved problems in accessibility?

Scott Davis:

So I'm focusing quite a bit on voice. My daughter Libby has Down Syndrome, and it affects her speech, yet she loves Alexa. She loves coming down in the morning and say, "Hey Alexa, play me some Elizabeth Mitchell," or "Play me the Moana soundtrack," or things like that. But due to her speech, Alexa doesn't understand her. I like saying she doesn't speak Libbanese, but what Libby has done is she's a tech-savvy young lass. She has an iPad, and so she's able to type in, "Hey Alexa, play Moana," drag down with two fingers and then quite literally has Siri talk Alexa to get the music playing.

Scott Davis:

So this kind of thing is what excites me about technology. We don't have to write new APIs. We need to take advantage of the tools we already have, and we're just missing so many opportunities.

Neal Ford:

I think she has a great future as an integration architect.

Scott Davis:

Absolutely!

Neal Ford:

And that brings us back to the intersection of our radar. One of the things that popped up on our radar recently is tooling in the space that makes it easy to do the right thing, which is PA11Y.org, P-A-11-Y.org, which is a framework that you can use that will scan your web application and make sure that you have all the good accessibility bits turned on.

Scott Davis:

Absolutely. And you can do these common sense things, like putting alt tags in, providing transcripts for audio, providing closed captioning for video. These are the obvious things, but so many times, we don't know what we don't know, and so these tools do a great job of surfacing these things that you might not think about. I've got another tool that has the A11Y in the middle of it. TOTA11Y. T-O-T-A-11-Y. What I love about that, that's a browser plugin. And so on any website that I happen to be on right now, I can just run that little scriplet. It also runs as browser extensions, but it will do just the top five or six things that you should look for. We don't need to be exhaustive about this. We can just take the top couple of really obvious things.

Scott Davis:

One really obvious thing is using headers. We have H1s and H2s and H3s, and I know this isn't revolutionary, but if we keep our documents semantically organized ... If you think about it, we visually scan webpages that way. We look for headlines and we know that bigger headlines are more important than smaller headlines. Well, if you were scanning a webpage through an audio interface, it does the same things, and you can actually have it just read the headers for you. Once you find the section that you're looking for, "All right, here's my new project. Here's the history of the project. Here's how I install it. Ah! Here's how I install it!"

Scott Davis:

Having well-organized pages allows a user with low vision to dial directly to the section that they're looking for and have them read just the information they're looking for.

Neal Ford:

I think that's a really good point, because HTML is a visual markup, but it also has semantics behind it, and that outline semantics really makes a big difference in terms of how a reader understands how things are organized on the page. A lot of developers get really lazy and say, "Well, I have a heading one. Heading two, it looks too big, so I'll just use the heading three here instead." Instead of actually changing the style in CSS or something like you really should do. But it's really important to maintain the semantics of what those headings mean, as well as the visual aspect of those things.

Scott Davis:

Exactly. Let me give you another really trivial example that really pays huge, huge dividends. It's using the label element with a corresponding input element. If you just are looking at your webpage visually, you can slap any old free range text on the page, next to any old input element, and you visually make that association that, "Oh, these words, First Name, are right next to this empty block that they want me to type in." So we can visually take that leap that that label corresponds to that text element.

Scott Davis:

But without using the actual label element that says it's for a particular input, users with low vision can't dial through form fields. And if you're filling in a form field and you've mistyped, say, a credit card number, you need to dial in directly to that credit card number field, read the error and be able to correct those things. Without that really low-level, bone-simple semantics of labels associated with inputs, we are cutting off an entire set of constituency, and 20% of the people worldwide have some form of disability. And so we really are not talking about small numbers. We're talking about considerable numbers.

Scott Davis:

Here's how to make it very personal. If you live in a country like the United States that has a life expectancy beyond 70 years, you should expect to live about 12% of your life with a disability. And we all know that vision and hearing are the things that go. We are actually now ... Scott is trying to help future Scott out by talking about these things, because I want to be able to use these technologies when I'm too old and feeble to reach for my iPhone 27.

Neal Ford:

Well, I hope that some innovation you come up with now ends up being a useful thing for you in the future. But this is a really good point that with not too much effort, you're not only doing the right thing, but you're opening up a much bigger audience. You can go to your business and say, "Hey, there's a 10 or 20% bigger audience out there just waiting, if we just take a little bit of effort." And it also happens to be the right thing to do.

Scott Davis:

Here's another statistic that just blew me away when I read it. I couldn't believe it. 14% of the US population can't read. That's cutting off an entire segment of the population that could conceivably use these applications through a voice interface. We all can talk and talk our way through, but not being able to type or have these technologies. We also are looking at things for the future, as well. We are an aging population, and instead of being able to say, "Hey Alexa, play me some Bob Marley," it would really be nice to be able to say, "Hey, Alexa, read me this kidney dialysis report, and can you explain it to me? And maybe can you hook me up to the doctor so we could go through this together?" All without a keyboard. All without a device. All with just some kind of intelligent agent sitting in the corner of your kitchen.

Neal Ford:

I think that's all we have time for this morning. Thanks a lot, Scott, for chatting with us and sharing your passion. We're starting to see why. It sounds like there's some pretty good actual advice coming out of this podcast.

Scott Davis:

Oh, I hope so. Learn your HTML elements, kids.

Neal Ford:

All right. Words of advice. Now Scott's got to go and yell at some kids on his lawn, so thanks a lot, Scott, and we'll see you soon.

Rebecca Parsons:

Thank you, Scott.