Hidden in plain view: Bleeding edge accessibility so good you never noticed

Accessibility stifles design and harms creativity. That's what uncreative people say. During this presentation we'll look at the convergence of creativity and capability. Bleeding edge technology and design that is accessible.

Transcription

[Digital music]

[Applause]

Karl Groves: Before I get started, are there any people, visually impaired people, low vision, blind? Okay.

The reason I ask that before each talk is because I’m going to narrate my slides, so I just wanted to make sure before that.

You know, nobody has used this couch. It’s on here. I’ll just do my talk here. Is that okay?

Audience member: Whoo!

[Applause]

Karl: Now, you make me feel like I want to do it. But, actually, I really, really, really want to thank Marc for letting me come. This is me when he told me I could talk here.

Audience: [Laughter]

Karl: I put a wig on, so I look like Marc. [Laughter]

I’m really happy that Marc understood that my talk at Frontend Zurich was just a fluke [laughter] because what happened was never, ever, ever change a variable name in a live coding demo at a conference right before you go speak. The talk there at Frontend Zurich had a lot of demonstration in it, and I totally butchered the entire thing. Somehow, he had enough pity to let me come here.

Speaking of train wrecks, I’m so good at screwing up talks that I have a Web series on YouTube with another screwup named Billy Gregory. Our goal with accessibility is we want to try to make accessibility more accessible through the use of humor and stuff like that because, let’s face it, accessibility is not a really popular topic, right?

Audience: [Laughter]

Karl: It isn’t sexy. It’s not something like -- you know, it doesn’t get people excited like the latest Node 10 release with async and await or something like that or Flexbox or CSS grid or anything like that that’s really interesting. It’s just accessibility, and we really like to tell people all of the shit that they’ve done wrong. It’s easy, actually, because there are a lot of ways to get accessibility wrong.

Audience: [Laughter]

Karl: [Laughter] Yeah, I love this. This like, “Yeah, uh, you can park your scooter up there, maybe a bike or something.” We can see from this picture, there are a lot of ways that people get accessibility wrong.

I took this picture, actually, in Vienna. Honestly, I don’t know what the hell that’s for. I’m hoping it’s for a hand truck to go up the stairs, because if that’s a wheelchair ramp, that’s probably really fun to go down--

Audience: [Laughter]

Karl: --until your wheel comes off on the side and it’s like, bang-bang-bang-bang against the railing.

Audience member: For the buggy.

Karl: Huh?

Audience member: It’s for the buggy.

Karl: Buggy? Oh, for parents.

Audience member: (Indiscernible)

Karl: No, it’s for wheelchairs to go down. I’m telling you. It’s fun.

Audience: [Laughter]

Karl: I call this picture -- it’s artistic, and Vic is not the only artistic person in the room. This is my art representation called universal un-usability. I took this picture in Costa Rica. That’s literally the only way to get into that building. That’s like, “Here. You’ll have your equality. Everybody has a hard time.”

Audience: [Laughter]

Karl: Another artistic piece of mine.

Audience: [Laughter]

Karl: I call this one “Conformance.” The alternate title is, “You had one job.”

Audience: [Laughter]

Karl: I think this is located at a BART Station in California.

This one is great. This is really a highly specialized type of accessibility chair, and it’s for people who only have one leg.

Audience: [Laughter]

Karl: To be more accurate, really, it’s for people with only a left leg.

Audience: [Laughter]

Karl: The R&D is still ongoing right now for the right-legged version. This is just a field study.

This movie is a physical example of trying to fix all of your accessibility problems with WAI-ARIA. We have a perfectly accessible parking spot. We have a nice little ramp. The ramp has a perfect incline. I’ll talk about that later. We’ve got diamond plate, so you don’t split while it’s wet. You turn around to go in here. Elevator and stairs, so we go in here.

Audience: [Laughter]

Karl: Fuck it. I’ll just go down.

Audience: [Laughter]

Karl: I’ll take this moment to drink a little bit.

I really wish with all of my heart that everyone here experiences disability. I hope that you all live a happy, long, and rewarding life. My friend Jim Forrester, a good friend of mine--for any of you who were into stoner rock--he was the bass player of Sixty Watt Shaman. Jim was killed by gun violence in the city of Baltimore, Maryland, at 43. Jim will never have the happiness of becoming disabled. What I mean by this is, if we’re all lucky enough to live to old age, you will be disabled.

These are a series of slides I stole from the IRS. As Wesley mentioned, the IRS cannot hold intellectual property, so I greedily stole their shit. These are a series of slides discussing what our likelihood is of having a disability at some time. The hashmark example is somebody with a functional limitation that may require some sort of adaptive techniques or something like glasses, something simple like that, maybe. Then a severe functional limitation, this is what we often refer to as a disability.

What does that really look like? At the age range of 15 to 24 years, the functional limitation is about 6.3%. The severe functional limitation is at 2%; 2% of the population. At the age range of 35 to 44, that’s us. Actually, that’s not me anymore. Anyway, 3% have a severe functional limitation. At 45 to 54 -- who is that in here? I know some of you guys over there need to be raising your hands.

Audience: [Laughter]

Karl: Six percent. 55 to 64, 12%. 65 to 69, 18.5%. 70 to 74 years old, 22%. 75-plus, how many of us want to live beyond 75? For anyone else, please see me. We’ll talk about depression. I have some--

Audience: [Laughter]

Karl: I certainly want to live that long. 41% of people 75-plus have a severe functional limitation. I’m guessing that we should probably try to get this stuff right.

Now, there used to be a time when we defined accessibility in purely a physical context, that the context was, there was something wrong with this person. Now, the World Health Organization has sort of shifted their thinking on that. They talk about the social model of accessibility.

In the social model, disability happens at points of interaction between a person and their society when they’re denied access to something. When they’re denied access due to some sort of barrier, their impairment to their ability did not occur because of their body’s limitation. The defect occurred in the system that caused the inaccessibility, the technology in this case. The role of Web accessibility is going to be to provide the corrective course of action, to remediate the defects in the technology. I’ll say that again: the defects in the technology to allow for equal access of persons of all disabilities.

By the way, this picture is from The Ontario College of Art and Design. It’s really cool. Each picture in their museum has also a set of headphones next to it with--I think it’s--a Raspberry Pie thing that narrates the purpose and the content of the art.

Anybody ever see the movie Kindergarten Cop?

[Applause]

Karl: All right. This is Arnold. There’s a part in there where he gets the kids around. He goes, “We’re going to play a wonderful game.”

Audience: [Laughter]

Audience member: Whoo-hoo!

[Applause]

Karl: “Who is your daddy, and what does he do?” So, we’re going to play a game, okay? This game is going to be called, “Lazy ass person or a disability tool.”

This is an automatic can opener. It’s opening some pickles. They had a picture of olives or something like that, and I was like, “Eck, olives, gross,” so pickles. The little arms here go around. They hold the jar in place. The motorized piece grabs onto the lid; turns it.

Man, you are a lazy ass person if you have to use this, right? I don’t know. What if you have a palsy disorder. What if you have only one hand. What if you are lacking grip strength? This is great. This would be awesome for someone with ALS or a palsy disorder.

This is the boil buoy. This is an extremely simple contraption, right? You put it in the pot, turn the heat on, stick that in the water and, when the water starts boiling, it’s going to bob and weave like this. It’s also got a little teeny, tiny bell, just like a buoy, you know, outside in the sea or something like that. Is this a product for a lazy ass person, or is it a product for somebody who is blind and can’t notice the water boiling, who is deaf and can’t hear the water boiling, or is mobility impaired and can’t go back and forth to check whether the thing is moving around or not?

Who doesn’t love pancakes? In my house, I don’t really cook very much because my wife is such an awesome cook that my best day cooking is worse than her worse day cooking, but I’m awesome at breakfast.

Audience: [Laughter]

Karl: Awesome. But, when I create the pancake batter, and then I go to put it on the griddle, I just take the bowl. I’m just like, scoop, scoop, scoop, scoop with the spatula until I think I have enough.

if you’ve ever been to a place that does tons of pancakes, you’ve seen a big metal version of this. You’re just like [splat], and it’ squeezes the stuff out. I could do that again -- [splat] -- okay.

Audience: [Laughter]

Karl: It squeezes that out, and the perfect sized pancakes and all that sort of stuff. Is this a lazy ass person, or is it awesome for someone with only one arm who can’t do the scooping, something like that, or someone who is blind who doesn’t know if they have the right amount on there? You just go [splat], and it’s right there.

I’m going to do that throughout the presentation now, just like [splat]. Okay.

Audience member: [Laughter] It suits you.

Karl: [Laughter] He’s going to be (indiscernible) [several splats].

Audience: [Laughter]

[Applause]

Karl: A teapot. This is the ultimate in lazy contraptions, right? You’re just like, womp-womp, and you have your tea. But, think about it if you’re blind and you have to be like trying to aim. Now, I’m not saying blind people are incompetent. They manage perfectly fine with tea. But, it’s just so easy to stick it there. Womp-womp, and then you’re done.

Audience: [Laughter]

Karl: I actually don’t know what the hell these are.

Audience: [Laughter]

Karl: I was just like, “Whoa! What the fuck is that?” and I wanted to put it in the slides. Okay.

Audience: [Laughter]

Karl: This is a thing called a fold made. Have you ever seen this? There’s a rival to it. It’s called the Laundroid. These have been publicly promoted since 2015. They’ve had multiple rounds of social fundraising and all that sort of stuff.

It turns out that folding T-shirts and jeans is really easy. Folding underwear and hoodies, not so easy. But, the robots are coming, and this is a job I will gladly let the robots have.

Audience: [Laughter]

Karl: Really, having only one hand or heaving a tremor or chronic pain disorder, this is awesome.

Let’s level it up a little bit here. Who here uses Apple Pay?

Audience: [Murmurs]

Karl: Yeah.

Audience: [Laughter]

Audience member: Apple Short Pay.

Karl: [Laughter] I guess not. Well, Americans. Anybody use Apple? I can even use my watch. I can just be like, yant, and pay with my watch.

Now, what’s great about this type of payment, though, going back to the use case in the United States, it’s awesome for people who are blind because, for some dumb reason, all of our money is the exact same size and shape. It has the exact dimensions. The one dollar bill and a hundred dollar bill are exactly the same, so blind people get ripped off all the time. When they go to get change from the register, the person is like, “Yeah, here you go. Here’s your change, $75,” and it’s really like a bunch of ones. Whereas, with something like this, you know what you got paid because there’s voiceover on the iPhone or Talkback on the Android that gives them that information about what they paid and all that sort of stuff.

This is a screenshot of an app about a story in England. The Gatwick Airport has a series of beacons inside the airport, and you can use this app to figure out where you’ve got to go. If you need to find your airline, to go check your bags, if you need to go find security or whatever, you can use that.

Now, the implication for this kind of stuff is huge, for both privacy and accessibility. Mostly, I think, the benefits and the dangers are there and need to be weighed pretty heavily because this is where we can really track you to the literal footstep. But, for accessibility, this is really awesome. Imagine you go to a mall or you go to a very large indoor space, a sports complex, a stadium, or something like that. Then you can use an app to figure out where you are, and you don’t have to ask somebody.

If you know anybody who is blind, ask them how they get around in airports. Typically, somebody at the airport will be like, “Here. Get in this wheelchair. We’ll just take you where you’ve got to go,” and the blind person is like, “I’m not paralyzed. I’m blind. Just, let’s go.”

Where is the bathroom? I had to ask Marc where the bathroom was. He’s like, “Upstairs.” There’s a green room up there. I don’t think you know this. There’s a green room, people giving foot massages to the speakers. You didn’t know that?

Audience: [Laughter]

Karl: This is called a Viewbell. This is an actual camera doorbell that you can put on your house, and you can see who is at the door. Again, imagining if you are visually disabled. You don’t know who is at the door. This isn’t going to tell you. I don’t know where I was going there with that. [Laughter] That would be awesome, though, if it had AI and it’d be like, “That’s Joe.”

Or physically disabled, and you want to know who it is. Is it a delivery guy? Or, maybe you’re just like a sad neckbeard who really doesn’t expect anybody to come by except the pizza man.

Audience: [Laughter]

Karl: [Laughter] This is the Kwikset SmartScan. What’s really cool about that, and I really like this from a design perspective because, other than the teardrop sort of thing, it looks just like a normal lock, right? Not a big deal. It’s got the little biometric part you stick under there.

For anybody who works on the Web and is familiar with WCAG, this is what I would call multiple ways. There are multiple ways of doing this thing. We have both the traditional lock and the finger scan.

This is a Nest thermostat. Supposedly, this thing learns how to keep the proper temperature in your house, although I think my Nest thermostat at home has only learned how to do the exact opposite of whatever I want. But, it’s cool because I can’t really complain too much. If it gets it wrong, I just open the app, turn the thing, and it’s done. Again, not needing to get up, not needing to read the temperature, because I’m sure voiceover could handle this stuff on the app.

This is a Chrysler rotary shift. Again, imagine you have a motor impairment or something like that. Messing around with a shifter, even automatic shifter, is kind of a pain in the ass. You can just click the dial over to where you want to go.

Sadly, this has been discontinued. Chrysler is discontinuing it in 2019. BMW has these as well. I had one in a rental car one time. I think they’re probably going to go away because people find them confusing. Most people found them confusing.

I think it’s really awesome for accessibility because they require minimal movement. Has anybody used one? They require really minimal movement, coordination, and strength to mess with that thing, so I really like it.

But, I’ve got to tell you that they should have understood that this is a bad idea. This is an Edsel pushbutton shift from 1958, and people hated it then, so they should have probably understood the problem there, but I really like the concept. Let’s face it. It’s not like a shifter.

People find it confusing, but it’s not like the shifter these days is really doing much shifting. There are no cables under there like there were in old cars. There are electronics.

This is not a commentary on cops. The Segway is a revolutionary product. Various versions of the Segway have been used in law enforcement. They’ve been used for EMTs. They’ve been used for factories and all that sort of stuff. The common use case, really, is to increase speed without increasing the effort of the person. It also reduces fatigue over time. If you have to go places a lot, walking still is a little bit fatiguing when you do it all day.

But, what you probably don’t know is that the Segway had origins in accessibility. The Segway was actually what followed after it, a thing called the iBOT. The iBOT was created by a guy named Dean Kamen. His company, DEKA, also holds patents for a number of other medical things: blood transfusion pumps, insulin pumps, portable dialysis machines. All of this sort of stuff was invented by Dean.

Another really cool thing that Dean Kamen did is, he created a thing called FIRST, which stands for: For Inspiration and Recognition of Science and Technology. That’s been going on since 1989. The goal with FIRST is to get kids involved into science, technology, and engineering.

Yeah, I’ve actually seen one of these before. They’re a bit unnerving when you first see it. You’re like, “Dude, what? What are you doing?” because the cool thing about it is it brings the person eye-to-eye with the other person that they’re speaking with who is not also in a wheelchair, which is actually huge, huge socially for people who are in wheelchairs.

I purposefully oversold the title of this talk because often people think that accessibility requires you to make things ugly. I think that the lack of creativity makes accessible things ugly. People use accessibility as some sort of excuse like, “Oh, I can’t do that because it’s going to make it ugly.” I’m going to say no.

This is a picture of a postal service building. I believe this is in Washington, D.C. The not squished version of the picture is bigger. But, you’ll see here, there are obviously ramps there and hundreds and hundreds of people use those ramps every day without even thinking of the fact that they’re using a ramp. It has a perfect slope, as defined by the ADA as being no more than one inch per 12 inches of horizontal travel. I think it’s pretty attractive.

We can even go a little bit further from large public buildings to houses. You probably don’t notice this at first glance, but this is another view of accessibility hidden in plain view. This house has a zero step entryway. You probably don’t think about it a lot when you go into your own house or go into other buildings, but there’s almost always a step in the doorway, right? That step immediately becomes a barrier to anyone in a wheelchair or anyone who is in a walker or something like that. It couldn’t be more simple. They’re probably no more than eight inches high, and it becomes an immediate barrier.

What’s the solution to that? Put a ramp in there. Well, no, because that kind of sucks too because the ramp then becomes a barrier to whoever is trying to walk because it’s like, no, I just want to step in and go. The zero step entryway is perfect. It’s still attractive, and it’s universally usable for everybody who is coming in. There’s a zero step entryway here to this theater.

We need to recognize that none of this kind of stuff happens on accident. This is where people use the excuse, “Well, accessibility is hard, and it takes too long.” Does performance take too long? Is it hard? Probably, but we do it, right? Everybody is like, “Perf, whoo!” you know, and security. We don’t question security, do we? No, even though it adds extra time, it adds extra effort, and it requires specialized domain knowledge.

I love this because I love the idea of telling people that all it requires is purposeful design. Effective city planning is also user experience. In this case, the users here in this situation are the people using the walkways, the pedestrian zone here, the sidewalks, the roads, the parking areas, all that sort of stuff. Those are our users.

Each of those users has a specific context of use. The pedestrian wants to be able to walk down to the next place that they want to visit without getting hit by a car. The person parking or the person who is parked, they want a safe place to park so they can get out and start using this new context. The person driving needs to go somewhere else.

What’s cool here, the parking becomes a safety barrier for the people on the streets. If it’s wide enough, it means we can park without too much interference. But, we make it narrow enough so people don’t go too fast.

In this regard, accessibility is nothing more than a different context of use. It’s really it. The person on a screen reader is not any different than any other person other than the context of their use.

When it comes to designing for accessibility, you have to plan for it. This is actually a product I worked with for AOL and Verizon, and now I guess it’s Oath. I don’t know what they’re called now. They keep changing.

The bought a company called LQD WiFi, and they’re going to be putting these things on the streets in Manhattan. What’s cool about is, at the top, you’ll see in a second, there are a bunch of advertising on there. It’s got a touchscreen. As you can see, it’s localized a little bit. It’s a big ass, like 35-inch by 20-inch Android tablet behind all that sort of stuff. They have a Yelp-like app for exploring what’s going on in the area, subway schedules, all that sort of stuff.

It’s really, really tall. It’s about five meters tall. It’s got advertising at the top. It’s got a little scrolly thing there. There are actually ways for it to alert people of emergencies and all that.

This being on the streets in New York and having the overall unwashed masses poking at this thing requires a lot of planning, especially when it comes to accessibility. One of those concerns is color contrast.

That’s something I experienced a long time ago with a project I worked on for Sprint, Nextel, and NASCAR for a device that is used at NASCAR races. You may have seen it at football matches. It’s called the Fanview. I don’t know if anybody has ever seen that, but it was first deployed in the United States for races.

Anyway, color contrast; even if the user interface of this thing had a WCAG level A or even AAA contrast, you put that thing in the sun and you have extra problems. We had to think about that.

Now, because it has a user interface on it that we can touch and interact with, it needs to be accessible to non-visual users. As an Android tablet, we could just allow Talkback to turn on and use Talkback. But, actually, that requires access to the settings. Settings require a privileged access that we don’t want public people messing with because they could do all sorts of damage with it.

This is called the EZ Access Keypad, and we put one of these on there. They actually have an updated version that isn’t so ugly. It’s called the EZ Access Keypad, and it makes the app self-voicing. It has its own SDK, and you can program it so the app itself is self-voicing for people.

You have all the controls you need: up, down, left, right, back, next, info, all that sort of stuff. What’s cool about it, too, is it doesn’t announce anything out the speakers. As soon as you put your headphones in there, though, it’ll start announcing to you.

This was actually invented by the Trace Research Center. Anybody know who the Trace Research Center is? If you follow WCAG, you should know that the Trace Research Center is where a lot of the WCAG 1.0 guidelines came from, Greg Vanderheiden and a couple of other people at the Trace Research Center. Wendy Chisholm, who is now at Microsoft, was part of that group. They’re really pioneers in accessibility, and especially kiosk accessibility. But, a lot of the initial WCAG 1.0 guidelines were actually borrowed from the Trace Research Center and a couple of other places.

We also had physical concerns. For a person with a wheelchair, we needed to make sure that that person can reach to the touchscreen and touch all of the bits and pieces in the touchscreen. If you ever use an elevator, you might notice that there is about an 18-inch to 24-inch range from the floor to the bottom of the keypads on the elevator touchscreens. That’s not an accident. That’s part of building guidelines.

This has all been defined for us. All of these things have been defined for us. On the kiosk, we had to make sure that, when implemented, that there was at least a 30-inch clear area upfront for them to interact with it and a 48-inch area for them to be able to turn around and go away if the case was required. We had to make sure that, like I said, the person could reach it, all that sort of stuff.

These aren’t my diagrams. These are diagrams from various building requirements that are out there in ADA, Accessible Buildings Act, and all that sort of stuff. They definitely had that stuff in Europe as well.

Dumb shit happens when you don’t consider those established patterns and standards when doing design. This is my favorite one. I use this in almost every deck I can. It’s a cardboard Ferrari Testarossa on top of some little--I don’t know--European egg car, I guess.

Audience: [Laughter]

Karl: Yeah. For every gallon of gas you guys don’t burn, my big SVU burns two.

This is what I mean, though. Here’s a video of what happens when we don’t quite understand how things are supposed to work.

Screen reader: Popup button. Menu. 252 items. Checkmark. United States. United Kingdom. Afghanistan. Aland Islands. Afghanistan. United Kingdom. United States. Closing menu. United States. Popup button. Edit text. Blank.

[Pings]

Screen reader: You are currently on a text--

[Pings]

Karl: Yeah, so this is a jQuery plugin called Chosen. It’s from the folks at Harvest. I don’t mean to call Harvest out because I’m actually a very, very happy customer of them, but this is what happens. You heard it say, “You’re inside an edit box.” I wasn’t in an edit box, was I? Is that what it looked like? It didn’t look like an edit box.

And so, as it went down, you heard it go ping-ping, right? That’s like voiceover going, “No. No. No. No. You can’t choose this.” This is a case of not really understanding what this element is actually supposed to do.

This is what I refer to as the Principle of Least Astonishment. I stole this from guys named Cunningham & Cunningham. Anybody here know who Ward Cunningham is? Anybody big into Agile? Hey, one guy. If I said Ron Jefferies, you’d know that one too?

This is actually a quote about object-oriented programing. It says, “The result of performing some operation should be obvious, consistent, and predictable.” That was about object-oriented programming, and it was relating to the object’s interface, but I like this as a statement about the user interface and the way that a user interface behaves.

Going back to that example of the select element and what it’s supposed to do, let’s take a look at what other things do. Raise your hand if you think, “Oh, I’ve all got to do is click it, choose one, and I can go away”? Right, that’s what they thought.

HTML select element represents a control that presents a menu of options. The options within the menu are represented by option elements, which could be grouped by optgroup elements. Options can be preselected for the user.

Tab moves focus into the field. A second Tab key selects the current item on the list, updates the field’s value, closes the dropdown list, and moves focus to the next focusable item in the tab order.

Alt and Down Arrow and/or Space opens the dropdown list, moves focus to the selected option. If nothing is selected, then focus moves on to the first option in the list. If the combobox is not editable, then the spacebar may also be used to open the dropdown list.

Up and Down Arrow moves focus up and down the list. As focus moves inside the dropdown list, the edit field is updated.

Enter selects the current item on the list, updates the value, highlights the selected item in the dropdown list, closes the dropdown list and returns focus to the field.

Escape key just closes the dropdown list, returns focus to the field, and does not change the current selection.

Typing a letter or any printable character is going to move focus to the next instance of that visible node whose title begins with that printable letter, and it exposes these roles to assistive technologies.

That’s what a select element does.

Did you also notice, in the description of that, the way that the select element also behaves when you start typing? It inherently has autocomplete on it. Okay? The only difference, I suppose, between that and some other autocomplete is there is no XHTML HTTP request going on or anything like that.

But, we have all that other stuff for free. We have the autocomplete for free. We have the accessibility of that object for free. It exposes its name, state, role, and value to assistive technologies for free.

You may also not have known that autocomplete is an accessibility feature in the first place. It was meant to reduce the number of keystrokes required for completion or for selection of the item. Google said recently in a blog post that it reduces typing by about 25%. For Google, cumulatively, it reduces about 200 years of typing per day.

By the way, these are all the results for my name. Welcome to the gun show.

Audience: [Laughter]

Karl: No, that’s actually a guy in England. He is a legit bodybuilder. A fantastic body on this guy. I’m sure, considering the vanity of bodybuilders, it must piss him off that, like, typing his name in gets all this accessibility shit.

Audience: [Laughter]

Karl: And, he is from Swanage or however you pronounce that in the U.K. We have this dueling vanity surfing battles going on.

The iOS human interface guidelines say, “Consistency lets people transfer their knowledge and skills from one part of an app’s UI to another and from one app to another app. A consistent app isn’t a slavish copy of other apps, and it isn’t stylistically stagnant. Rather, it pays attention to the standards and paradigms people are comfortable with and it provides an internally consistent user interface.”

If you were to go and download the style guides, the OS style guides for any platform. Windows--actually, Windows has had an excellent human interface guide since all the way back in Windows 95--Apple, for a regular Mac OS, Android, even KDE all have a passage in their style guide that says exactly this: consistency, consistency.

In other words, you want to ask yourself one question. Ask yourself this question because the user is going to be asking that question when they experience your user interface. What is this thing and what does it do?

Can everybody say that for me? What is this thing and what does it do? Come on. It’s almost lunch. You’re going to get to eat after you listen to me. What is this thing and what does it do?

I refer to this as lesson zero. Lesson zero, obviously, the zero index is the first item in an array. This is the one thing that everybody must understand before they go learning anything else is that the user, when they experience the user interface, is going to go, “What is this thing and what does it do?” The more they have to ask that question, the harder it is for them to use it. Accessibility, again, is nothing more than a different context.

Okay. The user is going to be asking this question. Your user interface has to answer it.

Now, fortunately, outside of the plain Jane HTML stuff that’s out there, we have WAI-ARIA to help us bridge that gap between the other cool shit that we want to build: breadcrumbs, custom button elements, dialogs, disclosure widgets, tree menus, menu bars, menu controls. All that stuff exists now in ARIA. If you ever need to know how to use any of that stuff or if you ever need to know all that stuff that I said about the select element, but for something else, WAI-ARIA Authoring Practices guide is the bible for that.

The other cool thing about that is they also have examples for this stuff with all of the JavaScript, all the CSS, all the stuff you need to do to manage any of these custom controls. Now, it’s still a work in progress, so it’s not like every single thing is there, but it’s an awesome resource. If you’re ever like, “I don’t know how to do that,” bang.

Miriam had talked briefly. She mentioned the accessibility tree a couple of times. This is a picture from a presentation on the accessibility object model. I’ll talk a little bit about that in a minute. But, what I want to do is impress upon you why that, “What is this and what does it do?” stuff matters so much.

On the left-hand side, we see just a screenshot of HTML in the browser. That gets converted into when the page renders on the screen, it gets converted into a DOM. There’s a DOM tree. Our JavaScript can modify the DOM API. As all the JavaScript, HTML, CSS does its stuff; it’s going to get painted into the visual UI that everybody sees. That’s usually the stuff that most designers actually just care about is, does it look the way it’s supposed to?

It’s also transformed into an accessibility tree. That accessibility tree gets conveyed to assistive technologies through the use of an API. The accessibility API, you know if you’ve ever inspected an object or even just read out the constructor of an object, you see there are hundreds of different methods and properties on there that really, for the most part, an assistive technology doesn’t give a crap about. It cares about a couple of things: name, state, role, and value.

The name is, what do we call this object? Right? What’s the name for it? For form control, it typically is going to be the form label or something like that.

The state is, what’s it doing? Right? If it’s a checkbox, it could be checked or unchecked. It could be also read-only or disabled. But, that’s its state. Implicitly, it also says not just what it’s doing, but it can tell you what it also can do. If it’s checked, it could be unchecked, right? If it’s read-only, then you can’t do anything with it. If it’s disabled, you can’t do anything with it, but that stuff gets read out.

The role is, what is this thing? Right? Role of checkbox and the value is whatever the value of the thing would represent.

What’s cool about doing this properly is that now the user gets all the information they need to know in order to understand what they can do, what this thing is, and what I can do with it. Part of that also comes from the assistive technology itself. Depending on the settings of the screen reader, it can say something like, “Tab panel, use up and down arrows to navigate,” or something like that. It’ll give them those special hints. You don’t have to do all that stuff. You’ve already enabled the assistive technology to do that because you’ve done the other part right.

What does it look like when we get it right? As a consultant doing lots of accessibility consulting and stuff like that, I often have customers ask me, “What is accessible design? What does an accessible website look like?”

There are two answers. The snarky one is, “I don’t know,” [laughter] because there are so many websites that are inaccessible. But then, what I do is I change the topic to, “What does accessibility look like?” because no user interface is going to be perfect from an accessibility standpoint. Even my own product Tenon is not perfect from an accessibility standpoint.

But, we can talk about what does accessibility look like when we see it. Hopefully, it shouldn’t look like anything different than anything else. I have a couple of examples of that. This is a screen recording I took of the Schiphol website. Let’s take a look at this.

Screen reader: Schiphol. Vertical line. Travel your way. At Amsterdam airport. Schiphol. Web content. Visited link. Visited link. Home. Visited link. Link to donate. Travelers. List collapsed. Link. Open drop-down. Link. Nebulize. Visited link. Flight. Link. Link. Collapsed. Link. Expanded link. Transfers. Link. Baggage. Link. Pickup and drop off. Arrivals. Link. Non-visited links menu. Auto Web spots. Links menu. Headings menu. Form controls menu.

Karl: That’s a quick video. It doesn’t show anything special, does it? It doesn’t show anything too terribly interesting. It’s designed however whoever designed it wanted it to look like.

What I think is notable is that that menu that came down was perfectly keyboard accessible. I didn’t have to do anything special to use it with a keyboard. As you saw, as I went through the rotor there, you saw all the links had good labels on them. All the links had good wording on them. All the buttons had good names. The images had good alt text, I think. And, the heading order made sense. That’s really all you have to do. I mean, no, that’s not really all you have to do, but you have to just think about, how is this going to work and what sort of structure I need to put into place, and you keep whatever design you want.

Another, a little bit of a better example, pay attention to the carousel that I get to.

Screen reader: Welcome. Triodos Investment Management. Web content. You are currently on Web content. To enter the -- headings menu. Heading. Heading. Heading. Heading. Heading. Heading. Heading. Heading level one. Heading level one. Investing across -- complementary. List ten items. Link. From a credit only. Link. Cleaner taxis in Peru. Two of -- link. Marked. Three of ten. Link. EYE Film Museum. Link. Enabling Heineken to -- link. DO-IT. Link. Bima Artha. Link.

Karl: So, what happened is I clicked on the heading there. It took me right to that heading, and I could continue from there using the arrow keys. It said, “Complementary.” It had the ARIA role of complementary, telling the user that this isn’t really the main purpose of this page. It’s got complementary information, but that’s it.

But then, I could go through using the keyboard, each one of these, each one of these items in this carousel. Now, personally, I think carousels suck, but at least this one is done right because when I gain focus to something that’s not fully on screen, it pushes it on screen, and I didn’t have to use this little janky arrow affordance to do that. It was just because I got focus it moved where it needed to be.

And so, this is a great experience for somebody who might be low vision who is using a screen reader, or not, right? Somebody who is low vision might be using the keyboard, but not using voiceover, and the behavior would have still been the same. It would still move focus to where it had to go.

I’m running out of time.

The New York Times website, a great example.

Screen reader: New York Times. Breaking news. World news and multimedia. Sections. Navigation button. Banner. Visited link. Homepage. Link. World. Your current link. U.S. You are currently -- link. Politics. Link.

Karl: I’m going to skip that because it’s just more of the same. Going through, everything has got good labels. Everything has got really sensible order and all that sort of stuff.

Anybody know what this is? A Wankel rotary engine, invented by Felix Wankel. When he was 17, he invented the rotary engine. Anyway, what I really like about this is it’s sort of a metaphor for doing something that we’re already doing but doing it just a tad bit different.

Ultimately, the Wankel engine turned out to be not as fuel efficient and not as clean as gasoline engines, but it was great because Wankel set out to solve a problem that piston engines are really violent, right? Piston engines are often set off at--well, it depends on the type of engine it is--270 degrees of rotation, and it’s just shoving that piston back and forth. It’s very violent. It has a lot of vibration. Wankel said, “I’m going to solve this vibration problem,” and this was his idea.

Let’s look at some examples of what it looks like to try to solve existing problems. This is not a great design. I admit. But, it’s not my design, so I can at least mention that.

This is great because we had Wesley up here talking about DataVis, and one of the problems with DataVis is that all of us immediately can look at this and draw some sort of inference about what’s going on - immediately. If we are interested in it enough, we can further explore by shifting our focus to whatever we want to see, and we can inspect it even more.

People who are blind don’t have that ability, right? Even if we did something like a lot of people would say, “Well, we could put a redundant table back there,” and that’s what we do on Tenon for our reports. If we have a pie chart, we also have a hidden table somewhere that has the same exact data.

What if we could make it self-voicing?

Screen reader: Accessible SVG chart. Chart. Time spent on creating a presentation. Options. X-axis. Weekdays. Four items. Y-axis. Hours working on this presentation. Data point one of four. Saturday. Eight hours. Datapoint two of four. Sunday. Datapoint three of four. Mon -- datapoint four of four.

Karl: This is using ARIA. It’s using SVG. It’s using text to speech API to create an ability to provide an alternative.

Would this work on real-time stock market data? Probably not, but it’s an attempt at figuring out a new way to expose information to all users. It’s called Describler. I believe it’s open source. It’s made by a guy named Doug Schepers, who used to work for the W3C; a pretty awesome guy.

HTML5 video was awesome. With HTML5 video, we were able to get rid of all the stupid Flash players that are out there and all the inherent accessibility problems with Flash. Even the way you embed a Flash object in the screen can have impacts for accessibility. HTML5 video is just awesome. We now have a universal sort of way of putting video on there.

Unfortunately, most people don’t know this that all of the browser vendors currently who support HTML5 video are a cause of people failing accessibility and having legal problems for it. One of the requirements for video on the Web is captioning, and so all the browsers out there have a CC button. If you have captions, great.

Anybody know what audio description is? If you can’t hear, you get captions. If you can’t see, you should get audio description. But, there’s no AD button on here, is there? No video player on any browser does that, so I want to show you audio description.

Not -- that’s not it. Shit!

Audience: [Laughter]

Karl: I thought I was going to escape all that. I’ll just show you the code.

What’s cool about the HTML5 video API and the audio API is--

Nobody thought to tell me? You guys are just like -- [Laughter]

Audience: [Laughter]

Audience member: Background….

Karl: Can I drag it? Whoo, drag it. All right. Cool. Awesome.

What’s great is the audio element and the video element give us events, right? We have events that we can figure out. We can also have methods and properties to start something. This is really easy.

With audio description, you create another file. You see here at the top, video file. Then next is audio. Now, the audio is hidden, but it’s there. It’s HTML [stutters] -- MP3 file, MP4 for the video.

Now, it’s really cool. We just get a reference to the video and audio elements. We set the volume of the video 20% lower, so the audio description can be higher. We then add an event list to the video. When it’s playing -- when the video plays, the audio plays. When the video pauses, the audio pauses. When the video has ended, the audio and video pause. Then we had to do a little bit of a hack to query whether the time is all the same. Now, we can have a fully narrated external file that does exactly what we want it to do and have audio description support.

All right.

Audio read-along: In those days a decree went out from Caesar Augustus that all the world should be registered. This was the first registration when Quirinius was governor of Syria. And all went to be registered.

Karl: This is a really cool example. There’s a lot of cool apps out there for kids who have dyslexia or other learning disabilities. There are e-readers that you can have on your tablet or something like that, and they highlight the text as the narrator reads the book.

I decided to take a look around on the Web to see if there was anything out there that I could sort of play around with. Unfortunately, the text to speech API fires a done event when the whole thing has been shoved into the speech buffer, so it’s not giving you a done event for each bit because, why would it? It’s shoving a whole string into the speech buffer and then the done event is fired.

I saw this, and I was like, “Yay! This is awesome!” But then, what happened was I realized that what he had done, there’s some sort of Bible API that gets you all the words in the verse and all the timestamps and all that sort of stuff. It’s like, ouch; that’s really heavy lifting. Not only that, it’s just for the Bible, so I can’t just--

This is something my colleague Job, if you see him wearing the Tenon T-shirt, he just slapped this together in, like, a couple of minutes, which is awesome, which is why I hired Job. We wanted to say, “Let’s leverage WebVTT for this.”

Now, I would never propose that we do this for a video because that’s what captions are for. But, all we had that had audio and WebVTT was a video, so just imagine that.

Whoa! Where did that go? Please tell me there’s a video for this. Shit!

Well -- ooh, there it is. Look. Yay! It’s a live demo!

Audience member: (Indiscernible)

Audio read-alone: Wake up.

Karl: You don’t see it?

Audio read-alone: Click link.

Karl: Thankfully, someone actually said something. All right. Cool. Let’s start over.

Audio read-alone: Wake up. Wake up. Click link. Click link. Mouse grid. One. Five. Five. Click. Click okay. Go to sleep.

Karl: Isn’t that awesome? Just use WebVTT. Now, let’s take this one step further.

In the previous video, we had arbitrary text, right? Let’s take that arbitrary text and shoot that over to the Google text-to-speech API. The response from that API gives you an MP3 file. Then, we can send that to another API from a company like Rev.com or something like that to get it transformed, transcribed, transformed into WebVTT, and then we shoot it over there.

If anybody wants to work on that idea, let me know because we’ll -- yeah, so there’s the transcription API.

Anyway, the entire point of my talk, really, and, like I said, I purposefully oversold the talk by saying, “Bleeding edge design!” What I really want to tell you is there’s nothing that prevents you from doing all the coolest shit you ever thought about, doing it accessibly, as long as we think of one thing.

Audience member: (Indiscernible)

Karl: Yes! I like this guy. This is -- by the way, I love using this picture for that because this is the Louvre in France. What I loved about this when I went there was, this is the entranceway. Over here is, like, the entranceway.

You go down the stairs, and then there’s -- right next to where you go into the stairs, there’s an elevator entrance. An elevator entrance opens right next to you. Let’s say you’re with your disabled friend. You both go through the same entrance. You both enter the museum at the same spot next to Professor X. Yeah, so the elevator is right there. There’s no elevator on the other side of the building. It’s right there with everybody else.

Accessibility is not a design problem. It’s a challenge, and you can truly leverage your creativity to help other people.

Thank you very much.

[Applause]

Marc Thiele: Mr. Karl Groves.

Karl: Thank you.

[Applause]

Karl: Thank you.