Speaker - Parker McLean

Transcript

Hello, that's quite the introduction. I have so much to live up to as far as being engaging but this will be in 3 dimensions so that's a start.

Hi. So it's been an amazing morning for filling up our hearts and talking about self-confidence and working together and not getting eaten by bears, and that's all been really, really impactful. And a really good thing to listen to, as well: when you're nervous in the audience and Denise Jacobs is telling you that you're your own worst critic and you can do anything, the sky’s really the limit so thank you for that Denise.

We've all had the situation where our sites break– this can happen for whatever reason, right: shit just goes wrong; it's not exactly what you thought it was going to be. It can really look like anything.

This is my personal website which is, you know, how I designed it. This is what I wanted it to look like. But there are those times when maybe there's a CSS error and this happens– this is parallax 4.0. Maybe the images don't load. For those of you who are astute in the audience you'll notice that the fonts didn't load, either, but I didn't think that deserved its own slide because that is only a problem for some of us. And then going further than that, this is just the worst, right?

Like this is lonely, I feel sad. A few iterations back I had my big sort of freelance launch and told my family about it. My dad told my Nana and I was over at my Nana's house just this past year and she had printed out and framed my website, which is very sweet but of course nobody designs print.css anymore so it looked something like this, which I loved. I loved that her friends would have come over and been like your grandson's a web developer! Clearly.

But this isn't the way we mean things to be consumed, right? We rely on visual media because it sucks, I was inspired by Sara's underlines, it sucks to look at websites as just content. We design them to be part of a larger family of design elements and it kind of makes us shit our pants when you have to look at things like this, right?

This isn't what I designed. This is. And so we really need to be cognizant that when we design websites we're designing them for people who can't necessarily consume visual media. There might be a technological error, maybe they're on the subway in New York and they go into a tunnel and the reception drops. I know some of you are New Yorkers and know that your iPhone turns into a waffle iron when you go underground– it's just like I can't handle anything.

But there are some users who can't see, right? I mean this guy quite literally cannot see, but there are many users out, there 6.6 million people in North America, who have zero vision. There are many, many, many more who are somewhere on the spectrum between full vision, low vision and blindness. This is what I'm going to talk to you about today. How can we craft content and user experiences that can speak to those users?

We think about accessibility, which is a terribly long word– I'm sorry, Norma– the…

Well, as an aside, Norma’s software picks up patterns, so as the words get longer, the software makes suggestions so the words become easier for her to type, which I think is an amazing user experience. So applause for Norma's software.

But how can we do this? What does this look like? Unfortunately, we as an industry aren’t all on the same page. What page am I on? This is my Schnauzer. This is Edie. She's pretty adorable, in this case purple but she's actually black. I work as a Digital Producer at Skyrocket Digital, as Steve mentioned. I come from a lumber family which is fairly working class, but in a bougie way. It was sort of a mashup: piles of lumber in the entry of our very suburban home. And this is me at three-and-a-half. This is before I went to the eye doctor for the first time.

When you're three and you go to an eye doctor, they don't make you look at letters on a chart because you're still sort of mastering letters. They hold Oscar the Grouch up and you have to say who it is, and they hold, I don't know, Hercules or Belle up and you have to be like that's Belle, duh! Which is great.

This three-and-a-half year-old is about to get his first pair of glasses and when I was that age I was probably getting new prescriptions maybe once every two years, not very quick but ten years after that I got my first corneal ulcer and I've been getting these every couple of years for the fifteen years since then which means that for about two or three days at a time I go blind. I just can't see, it's very, very difficult to open my eyes, there's just too much oxygen in there, there's white blood cells I could go into this.

But this kid is killing it as far as not wearing glasses and since then it's gotten much worse and vision has become more of an issue for me. My prescription changes every six months and it's quite serious every time. So that's something that is kind of sad-sounding so don't worry about it. We'll get to solutions in a second. But who here, other than me, who else designs or works with low vision users as the demographic that they build things for?

OK, that's great. About 6 or 7, maybe which is a good number. I saw Marcie Sutton ask this at Smashing Conference last year and they were like two or three developer-designer types who put up their hands and she said, “Guys. Guys. News flash: you all do.”

There is a whole spectrum of blindness and visual disabilities. It was kind of a tricky question because I kind of baited you into not putting up your hand, but the truth is that we don't often think about that being who we design for. We stereotype blind people as a demographic that, I don't know, watches the Oprah's Network at home and that's all they do.

But the truth is that you all do, and there's something to be said for accepting that blind people are going to kind of fuck your shit up as far as building user experiences and interfaces that can be used effectively. As our parents get older, my parents are getting to the age, they're in their mid 60s, where they don't even hold the greeting card at arm’s length when you give it to them– they just see that there's a message and put it down– it's this gray homogenous mass of I love you and Happy Birthday to them and that's all that they need to know, right?

But there's a reason that none of us know a ton about accessibility. I was sitting in the middle of the audience and my friend Stevie was talking with her friend about how when you design things to be accessible, you have to make design sacrifices: the more accessible, the less designed. She didn't know I was hearing this. We weren't friends at the time, that's how she didn't know. It's not that I was hiding under a chair or anything.

But this is a huge misconception stemming from that fact that devs get all the nice things. Are there any developers in the room? Yeah. Feeling it. Good. So they know what angular.js is, and that's good, but for everybody else, it basically helps them do a bunch of things I don't know about. It helps them build user interfaces that visually impaired and blind people can use, in that they're able to tag elements in a way that focuses on interaction.

Virgin America did a great job with this on their recent site redesign. When Voiceover goes through the site it's actually able to tell a user what a button click is going to do for them. Imagine the stress of having to buy airplane tickets for thousands of dollars while sort of guessing that when you click Order it's going to do the right thing. We as designers assume you’ll click the right button because we focus on layout and colour and hierarchy and balance to make those connections, but low-vision users don’t have all that to rely on.

So that kind of leaves us in this place where angular.js is something that they've been using. ARIA labels, while sounding like a Stark sister, help visually impaired user navigate through apps, and also Alt-Text is a thing.

I know, I know. You’re all like, “Accessibility? Alt-Text.” That's something I get a lot. It amazes me, even my friends who know that this is what I'm interested in, I read about it, I study it, I talk about it, they're like yeah, alt text. I like to think of myself as a nice person. I turn off other people's bike lights when they leave them on, which drives my husband crazy. He's like, people are going to think you're stealing the bike. I'm like Baby, I'm 160 pounds and nobody will ever have trouble taking me down. But I have to tell you, I feel responsible to tell you how I feel about alt text, and I don't really want to skirt around the issue.

Fuck Alt Text. Alt text is important, it is so crucial in very narrow circumstances. When you are including a graph or a table that is flattened into a .jpg or .png, when you're including a diagram in your content, alt text is will great because you need to communicate the value of that diagram to the user and it has some sort of semantic meaning beyond being just a visual device. That is where alt text is great, but for the most part it is not important. Accessibility is not just alt text. I'm going to go through a few things today with you, but can't really get too deep into the specifics of accessible design. It's a huge field and it's changing all the time. But there are a few things that we can talk about as starting points. How did we actually get to where we are? How did we get to this position where we're not designing things accessibly? Why should we be designing things accessibly in the first place? We’ll then talk a little about developing accessibility strategies which will help you take this back to your teams so you can start implementing some of these concepts today.

So how did we get here? Well, the truth is: Frank Chimero– he's just truth. No, but something that he's been talking about recently is The Web’s Grain. When a sculptor or carver starts a project, he says, they need to focus on the material. A sculptor studies the marble, a carver the wood. They need to focus on the material to find its grain before they begin working. If they don't, it's just going to break. It's going to be a sloppy spatula are whatever. Wood spatulas, guys. Get into it.

Similarly when we're designing for the web we need to be focused on what the material actually is. When Tim Berners-Lee first developed the idea of the internet– in collaboration with other people, Becca. He had co-workers for sure– When he first started working on this project called the internet, he had this idea that it was text, right? You could make a document that linked and interacted with other documents! You could include images and table of contents could do stuff! But since then we've had these huge fancy ideas about navigation, hamburger icons, drop-downs, modals, all sorts of things that are breaking that pure experience of the plain text website because it's not very pretty. But plain text is very effective. So that goes back to why should we design accessibly in the first place? Why, when we have all of these tools, when we have all of these things that make the web prettier and maybe aren't accessible, why would we sacrifice that? I mean it's an easy question to answer, because if you say that you don't want to design for blind people you're Voldemort. But he died. Spoiler alert: he died. And that's fine. I can't even make a joke about that right now. It's just too sad. But why design accessibly? I'm going to talk about this a little bit.

I know. The lace. That's what you were groaning about right? The lace band in the middle? It's the worst. Looking at this, we have this dress that was very contentious last summer. I think we all already know about this and we're tired of talking about it and that's fine, but there’s something interesting about this dress that Wired Magazine put together. They tried to understand why this was such a hiccup for everybody.

We're all sort of acquainted with Photoshop in this room, I imagine. We do a thing where we balance colours, right, or we take photos and we look at them and we say how can we make this more life-like and we adjust levels to make it more representative of the actual object. When our eyes see this we see both outside light and inside light. You have a sense that you're inside here, and when your eyes do their natural white balancing for inside light, we see this. And when our eyes do the natural light balancing for outdoor light, we see this. So it's up to you and your eyes and your brain and that whole technology loop to decide if this is outdoor or indoor and you decide that all in just an instant. As soon as you see it one way, that's the only way you can see it. This all goes back to why we’re all here.

We all understand that design is empathy. Derek Featherstone does a great job of explaining that when we're designing for a low-vision audience it's not the viewpoint that's important, it's not the browser. We have to take those extra 45cm to the user’s eyes: that is the limiting factor. When we're looking at that dress, it’s the technology of our eyes that shape our perception of its colour. When low-vision users are looking at the internet– perhaps hearing or feeling it in some cases– that's how they absorb that information.

There's a huge element of social responsibility with accessibility, as well. Starbucks.com is this love letter to style guides where you you can just feel that there is this staff of 200 who are like links are green, headings are that size and that's all the imagination that's on. There's really not a lot happening, visually. But they've done a great job on making this an accessible user-experience because they know that their demographic is in that baby-boomer-going-blind place.

Really though: one in three North Americans over the age of 65 have some form of eye disease. And 45 of those percent have some form of macular degeneration, which means they have this gap in the center of their vision. They can only see a donut. Coffee break is coming up, guys, but when you view their web site in plain text it looks something like this. Everyone likes to get Starbucks. Giving a Starbucks is something something something, important, a thoughtful gesture. Their calls to action are very descriptive. The links themselves are invitation to my Starbucks reward trademark so you know exactly what that link is, registering is a link, start shopping now is a link, join my Starbucks rewards is a link. The things that voiceover would land on on this page are the relevant bits of information.

Unfortunately, before this, there's this He-Man-of-the-Universe navigation. That's real! Before you get to the content there’s this nav that's longer than grey's anatomy. It goes forever. But Starbucks has done this really interesting thing: they put skip links, which are kind of an old school way to get people around a page. So Skip to main content, Skip to footer, (who in the world?). But if you click Skip to main content, it takes you directly to “Everyone likes to get Starbucks.” Really amazing. They know that there are low vision users using their site and they need to get to the good content. This is great content-mapping, and great accessibility. There's a few areas where we tend to fall off with design accessibility. This is the guilty habits section of my talk. Are there an agile workplaces in the audiences? And I suppose waterfall is like everybody else?

In a waterfall context, you have strategy: the strategy team gets out the kickoff meeting like, I'm doing it, I'm doing it and then at some point they pass the baton to design and that's good, and then eventually the actual build happens. So we have these three main sections of– man, I'm not even looking at Rebekah right now but I know that she's like, QA man. So we have these four main sections of any web design build and this is how we structure things, this is how we think about the phases or the seasons, if you're particularly poetic, of a project, and it starts here, it goes there, it goes there, it goes there.

The time when the content people get involved is about here where design starts doing a thing and the time when art direction gets involved is at about the same time. Often they're sharing a desk: maybe Pete is over here and Angie is over here and there's probably a guy named Brodie over here who's like I don't know. But these two people are working beside each other, they're both creatives, they're going to share ideas, they're going to do the collaborative bit and that's awesome. With that you're going to come up with things like this: the Volkswagen bug and the word lemon. Together the word and the car form a cohesive picture. It becomes a joke because the image and the text work together to accomplish that end.

In the digital context how often do we see something like this? Right? Good morning, debt-free living. This is pretty awesome, it's a queer couple which is rad. I'm stoked on this ad because of that, but what is cool is the text and the image speak together to evoke whatever is being said here. In this particular case it's escaping student debts through a subsidized program. If you remove the soft handshake from that slide you're left with just this content: Good morning debt-free living with nothing else, and it's sort of creepy. It has an Ashley Madison feel, like you have found someone to have an affair with that has lots of money. The point of this is that this content really relies on the image to sort of seal the deal. It gives this content a heartbeat and without it we're left with very little.

If this were a website, which I have taken the liberty of mocking up in the most basic way ever, we would have something up here that's like a header and then some sort of blip and then a call to act and then there's more content down here that is doing something else.

Something we often gripe about as content professionals, is that people are really only going to see this, right? There's a big logo up there, there's this huge banner and then this image down here that is some sort of graphic, right? But when you're looking at the site as a visually impaired person it's actually just this, right? Which is nothing: you have so little to work with as far as getting a sense of the emotional appeal, as far as getting a sense of what is being offered to you.

Writing a value proposition that doesn't rely on happy families is really hard– that's a huge generalization, so really insert any emotional story there, but the point is: we really rely on images and photography to wrap our content in this warm hug and creates a bit of a challenge. So we need to be writing content that can stand on its own in this context and then we can enhance it progressively. Progressive enhancement is something we already kind of know about. You start with core functionality, and then you layer on fancy bit after fancy bit and that's great. We need to start thinking about the visuals on our sites as fancy bits, because if we're not making those superfluous, if we're not thinking of the visual images as a bonus and instead relying on them to be the most important we're going to end up with a problem. So layering media on top is paramount.

I've talked about Voiceover. Blind people just love it. This is a real photo! I didn't even comp this. They're all just stoked on their iPhones and this guy is stoked on the Metallica -- I don't see James here today, but I imagine he would have something to say about that guy for sure. But these people are stoked on Voiceover, and with good reason. Before voiceover, people were using Braille monitors. They still do sometimes– screen readers were also quite popular where a robot just reads you the whole thing which isn't a very positive experience. Now, though, there's a tiny robot that reads you part of the thing.

Back to this module, the voice-over console is not visual obviously. I mean, it can be if you're looking at it with well operating eyes, but basically the user rotates a dial that chooses how they navigate. So if they had turned the little dial to headings, this is all they would see. There's the H1 or whatever is the title of the page and there's this H1 here, so this tiny British robot in my context will read them the top thing and then it will read them this thing and that's all the user is it going to get. That's the whole page. Maybe there's more headings down below. H4s, H6s, guys, right?

So like maybe that happens, but the user is able to get a sense of the website very, very quickly. In other contexts, maybe they want to navigate by links so they turn this little dial to links and they swipe to get through each link. This is how they would navigate something like the New York Times where everything is a link and it's sort of a directory to further material.

So Voiceover is going to navigate to the links and that's all it does. It goes through and when a user hears a link they want to go through, they just double tap. It is nothing fancy. It is just this tiny woman saying words funny if it's British but that's how they're able to get through material . In some contexts, for the very dedicated user, they can go through all the elements, all the things. So the title, the nav, the text and then it would actually read alt text down here, which is great! So if it got to this image, if the user had gotten that far, it would read them what that represented and that is the only time that alt text will ever be used by Voiceover.

So how can you do this? How can you take what I've told you back to your teams? Designing accessibly is something that can take a lot of budget. I see some knowing nods happening right now. I'm sorry. But accessibility is something we really need to put our weight behind, and so I'm going to go through three points about how we can do that.

Involving stakeholders early is hugely important. A friend of mine was working on the Compass website, which in Vancouver is like the fast transit fare card. I can’t even think of an adjective for that: it has been launching for three years. Their website was this huge build and then Translink was like “Guys, accessibility is a thing.” My friend got hired onto that project to retrofit this site for accessibility. And it took 12 months to do. The original website only took 10 months to build. So it's not something you want to do. Ever. Include the stakeholders early.

This is also a great calling-card to fight clients on the idea of Carousels. Sara Wachter-Boettcher said last year at a conference that “carousels are the best invention to prevent clients from beating the shit out of each other.” Sara thinks that's a fair paraphrase. [Editor’s note: This was, in fact, initially mused by Brad Frost. Good catch Sara!] Anyway, the client typically gets this idea that they can solve content problems by just making the banner into a carousel. If Voiceover were reading this, though it's like That 70s Show. Fez is talking about sex and Ashton Kutcher is talking about whatever. They get put together in this weird surreal mashup of calls to action and if you have stakeholders invested in accessibility from the get-go, you can be like man, that's not accessible. And they'll be like OK, let's move speedily past that.

The next thing you can do to create more accessible digital platforms is involving the whole team. We can't create accessible czars in the workplace. Tt can't be one person's job to be like, ‘Hey, man that's not accessible.’ You can't have one person just sort of allocating resources in this willy-nilly way and telling people to do these things. It has to be a team effort. If the site is going to live for a long time as an accessible website, there needs to be more people in the room that understand how that was done and why it was done.

So set best practices for everybody. Create an accessibility strategy. So that we can make the content accessible in the first place, but then also the maintenance of that content is taken care of. Accessibility strategies can keep us in line. So often we do our best to make things accessible up front, but down the line somebody neglects best-practices and starts writing “Click Here” calls to act. To avoid all that, we can create rules or guidelines that will help every team-member design things accessibly and with confidence.

It's hugely important that everybody gets behind this and an accessibility strategy can help you do that. I don't know how to tell you to write one because it's different for every project so I can't give you six steps to do it, but I’ll tell you this: you need to be talking to your stakeholders, you need to be finding out what technologies you are going to be supporting. Much like the browser-stack situation where we have that conversation with clients very early on, we need to think about what technologies are we going to be supporting, where are we throwing our weight?

Lastly, as a bonus tip, we need to be talking about accessibility all the time. So that instead it of being the kind of thing where you show up expecting me to talk about alt text for 45 minutes, which I think would have been a very different talk, we all have an understanding of what accessibility truly means to be a user.

Thank you very much.