Show notes
Recording date: 2018-11-13 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Jen Luker https://twitter.com/knitcodemonkey Resources: section 508 https://webaim.org/standards/508/checklist The a11y project https://a11yproject.com/ Jaws https://www.freedomscientific.com/Products/Blindness/JAWS ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA The https://www.starbucks.com/careers/ Starbucks career site WCAG https://www.w3.org/TR/WCAG20/ Jen helped author https://www.npmjs.com/package/eslint-plugin-jsx-a11y Husky https://www.npmjs.com/package/husky Google A11y https://developers.google.com/web/fundamentals/accessibility/ Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en Azure text to speech https://azure.microsoft.com/en-us/services/cognitive-services/text-to-speech/ amazon polly https://aws.amazon.com/polly/ Amazon Polly on Dan's blog: https://blog.codewithdan.com/8-tips-for-maximizing-your-productivity/ *Someone to follow * Gleb Bahmutov https://twitter.com/bahmutov Tejas Kumar https://twitter.com/TejasKumar_ Rick Strahl https://twitter.com/RickStrahl Transcript{ credit to Jen Luker } (Intro Music) 0:00:06.6 Voiceover Welcome to Real Talk JavaScript, the weekly talk show with advice and insight into the technologies and practices currently being used to build web applications in the real world. Each week John Papa and Ward Bell talk to industry experts about their experiences writing, deploying and maintaining web applications in HTML, CSS and JavaScript. And now, here are your hosts, John and Ward. 0:00:40.0 John Papa Welcome back to Real Talk JavaScript, this is Episode 11: Accessibility in JavaScript Apps and this week I’ve got my co-host, Dan Wahlin. How’s it going, Dan? 0:00:48.8 Dan Wahlin Going great, John. 0:00:49.9 John Papa And Dan, today we have a special guest of Jen Luker. How’re you doing, Jen? 0:00:54.6 Jen Luker Doing pretty well today. How are you? 0:00:56.0 John Papa We’re doing pretty good, thank you very much. Jen is a Senior Software Engineer at Formidable, BookBytes Podcast co-host, RxJS Learning Team member, and eslint-plugin-react-native-a11y core contributor. Jen has spent a majority of her career as a full stack developer but has a particular fondness for frontend technologies, thus why she’s here today. And she trains others in ReactJS and Accessibility, and enjoys removing obstacles that slow down productivity and loves optimizing webpack builds. When she’s not finding solutions or mentoring others, her spare time is spent spinning yarn from raw wool and knitting. She’s even better known to 3D print her own tools for the job. 0:01:33.3 Dan Wahlin Nice! 0:01:34.0 John Papa Welcome to the show, Jen. 0:01:35.2 Jen Luker Thank you! 0:01:36.0 John Papa There’s a lot in there. I mean, you’re not- 0:01:37.9 Jen Luker Yeah… 0:01:37.9 John Papa Just a JavaScript coder with ReactJS. It looks like you do a lot of teaching, and knitting! That’s pretty cool. 0:01:44.1 Jen Luker Haha, it’s… I like to say that I’m a knitter first and then a programmer second. So, it’s definitely a large part of my life. 0:01:53.3 John Papa You mean you do something besides coding all day? 0:01:56.1 Jen Luker It happens. 0:01:56.9 John Papa & Dan Wahlin (laughing) 0:01:58.9 Dan Wahlin You know, I have heard more and more people with knitting now. I, like, I hear that, I also do a lot of training, and I hear that all the time now, so it must be a big upcoming... trend I guess, I don’t know. 0:02:11.5 Jen Luker I think it has a little more to do with the fact that what we do as developers is often fleeting. It’s something that exists online, it’s not something tangible. Knitting is a programming language that sticks around long enough for you to wear it. So it’s- 0:02:28.9 John Papa I see. 0:02:30.4 Jen Luker Definitely caters to those that need that tangible aspect in their lives. But one of the coolest things I’ve seen knitting be used for, not just, you know, cryptography World War II, but also things like using it as a programming simulator for people that don’t have access to computers, such as people in Third World countries. So it’s definitely something that caters to the mind of programmers. 0:02:56.6 Dan Wahlin Interesting. Yeah, I’ve… Some of the people, too, have also mentioned it just helps them, it’s very relaxing they said. I don’t know how to knit, I haven’t tried it, but it looks fun. 0:03:04.3 John Papa So now, when we see Dan at his next conference, right before his talk, with a ball of yarn and some needles, we’ll know exactly why that happened. 0:03:10.7 Dan Wahlin Yeah. I’ll say, “Jen inspired me!” 0:03:13.0 John Papa & Dan Wahlin (laughing) 0:03:14.1 Jen Luker Well, you do know that at React Conf they actually had a fiberarts circle that I ran, so I ended up teaching quite a few people to knit, and crochet, and spin at that conference. So- 0:03:24.2 Dan Wahlin That’s so cool! 0:03:25.2 Jen Luker It is a possibility. 0:03:26.3 John Papa Huh! 0:03:26.8 Dan Wahlin There you go. 0:03:27.4 John Papa That is so cool. Yeah, I think we all have different ways of dealing with non programming mindsets. Like, what do you do when you’re not coding? And some people exercise, some people meditate, some people draw, some people play music, some people knit! So, I think it’s great to have something to kind of work different parts of your brain. 0:03:47.0 Jen Luker Definitely. 0:03:47.7 John Papa Hey, Dan! You had a question for us to kick things off about accessibility. 0:03:50.7 Dan Wahlin Yeah! So, I think we hear a lot… I used to work, one of my first jobs out of college was at a government agency and so there it was kind of required to learn about section 508 and things. But with corporations and with a lot of the developers I work with, I’ll have to admit I think we’re a little more in the dark on… 0:04:11.2 What are some of the ways, like, if I were to say, “Hey Jen, what are the key ways from a high level that I could add some accessibility things and like, who can I help with that?” Because I think a lot of us, we think, “Oh, well I just add a title to an image and call it a day.” 0:04:28.0 Jen Luker Mm-hmm (affirmative). 0:04:28.5 Dan Wahlin And I suspect there’s a lot more to it than that. 0:04:30.6 Jen Luker There is a lot more to it but there’s different ways of approaching accessibility on the web. One of the ways is technologically, which is oftentimes what developers deal with, but that’s only 30-50% of the problems you’re going to find in accessibility issues. The other half is going to be content and context and verbiage and language and ways that you say things that make it easier for people that have different disabilities, like neurological issues, or language barriers from interacting with the content on the site. 0:05:08.5 To deal with the technological side though, I tend to point people towards the aXe, Chrome, and Firefox extensions to begin with because it not only runs like, a technological audit on your site, but it also gives you more information. There’s always links that explain why there’s a problem, why the types of people that you’re focusing when you fix an issue, and different ways that you can fix an issue. So it’s a really great educational tool for just getting started. 0:05:43.6 John Papa Excellent. 0:05:44.2 Dan Wahlin Yeah, see, you already hit on a couple things like, you mentioned neurologically how maybe people interpret or have the context for different text. And I actually have a son with some disabilities so I’m very sensitive to this whole, you know, concept. It’s amazing how when you’re not around it, you just don’t think about it. But when you’re around it, it becomes, you know, your whole world. A big deal. So, you know, that’s when I hadn’t ever heard of- Can you tell me a little bit more about that? Is that related to the context you put into, like, the site, then, that helps them understand it better? Or how’s that work? 0:06:18.5 Jen Luker It is. Something that they recommend, or things that I’ve seen regarding recommendations for the level of content does vary depending on who your audience is. If you are a technical journal then chances are you’re going to be catering to a much more technical audience. However, if you’re a generic website you may want to keep your verbiage as low-level as possible, like anything between a third grade level to a high school level education, to allow for people to better understand the words that you’re actually putting on a page, and what the words are trying to tell you. 0:07:00.0 Like, you’ve got one side where you have people with ADHD that is not going to make it to the end of a 6-paragraph description of what it is you’re supposed to do. And then you have people on the other side of the spectrum that really need step-by-step instructions of what it is they need to do to get through your form. So trying to find that happy medium, or trying to find a way of giving a TLDR and then a longer context for different sides of that issue, is also something you may want to look at. 0:07:31.1 Dan Wahlin Interesting, yeah. I’ll have to admit that’s something that I haven’t really, you know, you mentioned third grade through, maybe, high school level and I think, as developers, we, especially if we’re in charge of putting some of the content, you know, out there ourselves, that’s something that I don’t think I’ve really thought through as to, you know, who’s my target that’s going to be reading this? As far as, you know, you think of, “I know these words and I’m sure everyone else will know these words.” But it sounds like you’re a lot better off if you can kind of reign that in a little bit, make it more focused. 0:08:02.3 Jen Luker Something that I’ve found that’s extremely different for even a dev when they’re onboarding into a new company is learning the names of things, and learning the acronyms for things. So if you’re using customized names for your products or your processes or you’re using acronyms, then you’re already losing part of your audience who just doesn’t understand what those things mean. 0:08:28.6 John Papa So, I think that’s a great point. This isn’t just for accessibility for, even for people like, let’s just say vision-impaired on one side. This is for anybody who doesn’t necessarily know your vernacular. 0:08:38.8 Jen Luker Exactly. 0:08:39.8 John Papa You go to a new company, what’s the first thing they do? “Hey, today we’re going to use the TLC with the EBY and then we’re going to talk with the XJ Bots.” And you’re like, “...What does any of that actually mean?” 0:08:49.4 Jen Luker I recently onboarded with a company and someone was very nice enough to put together a cheat sheet of acronyms for me and it was five pages long. 0:08:57.5 John Papa (laughs) 0:08:58.0 Dan Wahlin Wow! (laughs) 0:08:59.0 John Papa When I went to Disney one of my first things they did, like my first week there, was I got a book like that, too. 0:09:05.3 Jen Luker Mm-hmm (affirmative). 0:09:05.8 John Papa And the funny thing at Disney was the every TLA, which is a three-letter acronym which is kind of funny, the first letter of all of them begin with D for "Disney". Which really- 0:09:14.3 Jen Luker Yeah. 0:09:13.8 John Papa Only left two letters for all the rest. (laughs) 0:09:16.8 ALL (laughing) 0:09:17.9 John Papa I don't know if it's changed since then though. (laughs) But let's, let's start back. So on that same note, there's something I've seen a lot of over the years, and when I first encountered this, it's not an acronym but it's an abbreviation, I didn't know what the heck it meant. But, and maybe there's other people in the same boat so I wanted to talk about it with you. A-11-Y. 0:09:39.1 Jen Luker Yes. 0:09:40.0 John Papa Can you explain what that is and why people see that? 0:09:42.6 Jen Luker So back in the days of Twitter when there were only 140 characters, writing out a really long word like "accessibility" which is 13 letter long, took up a lot of space. So due to Twitter and their awesome audience, they shortened it to A11Y which is A-, the first letter in "accessibility", 11 letters, and then Y-, the last letter in "accessibility." You see the same thing with "Kubernetes" with K8S, or "internationalization" which is I18N. So any of those really long words end up getting shortened to first letter, number of characters in between first and last letter, and last letter. 0:10:26.0 John Papa Yeah, that's... that's kind of funny, you know? Once I realized that, I started going, "You know, I've been using I18N for years and I didn't know why it was called that." 0:10:33.1 Jen Luker Mm-hmm (affirmative). 0:10:33.2 John Papa Until I discovered it through A11Y, 'cause we, our nickname for it when we were talking about it was "ally". 0:10:39.0 Jen Luker Which I think is highly appropriate. 0:10:40.7 John Papa Yeah, yep. It kind of is a... 0:10:42.8 Dan Wahlin It fits it. 0:10:43.6 John Papa It kinda worked for us, too. 0:10:44.8 Dan Wahlin Yeah. 0:10:45.3 John Papa So, Dan, you're really D1N and Jen, you're J1n. It doesn't really work for our short first names, does it? 0:10:50.8 Dan Wahlin & Jen Luker (laughing) 0:10:52.0 Jen Luker Well, Jen is already shortened. 0:10:53.9 John Papa Yeah, yeah. It doesn't really help. What if your name is Al? What do you do? You only have two letters. 0:10:58.4 Dan Wahlin Yeah, there you're out of luck. 0:10:59.3 Jen Luker First and last. 0:11:01.0 John Papa A0L I guess? AOL! There you go! That's what AOL stood for. 0:11:05.4 Dan Wahlin Al. 0:11:06.4 John Papa The secret has been revealed, right here. 0:11:07.5 Dan Wahlin Who knew? 0:11:08.3 Jen Luker (laughs) 0:11:09.0 John Papa (laughs) So accessibility. One of the things I think that was really eye-opening to me was understanding how many people this actually affects. When I first started getting into it many years ago on some large projects the things that were introduced to me were,"Well, we're doing this because there are, you know, millions of people who are affected by this and we're really trying to make the web more accessible." You know, it sounds like a grandiose thing, but that was true. We were trying to make our websites more accessible to all these people who either couldn't use our websites, or they could but with much difficulty. 0:11:43.0 Jen Luker Right. 0:11:43.6 John Papa Now, what kind of scale is this really at? Is it just one guy down the street? Or is it, you know? How big is this? 0:11:48.8 Jen Luker Well the World Health Organization estimates that about 15% of the entire world has some sort of disability. This is a highly conservative number. Not everyone wants to identify with the fact that they have a disability. There's definitely a level of taboo that comes with the word "disability." So- 0:12:13.3 Dan Wahlin Yep, I can vouch for that. 0:12:15.6 Jen Luker Right? So there's a lot of people that will not identify with that label and therefore the 15% is, in fact, a very limited number. You know, if you're looking just in the U.S. they estimate, as of the 2012 census so it's been a while, 19% of people, so almost 1 in 5. If you're looking at other numbers we're looking at 8% of you men who are colorblind of some fashion, and it's not an on and off switch, there's a varying degree. There's also people with multiple versions of color blindness. There are people with very slight color blindness so it's almost unnoticeable. The range is quite large and about 1% of women also are colorblind. So you're looking at about 4.5% of the population as a whole just for one type…
Full show notes at the publisher 
Our TOPPODCAST Picks 
Stay Connected
