• 49:58

Episode number: 49

Accessibility 101

with Greg Tarnoff


​Accessibility allows more people to use the web, and yet there is still resistance in applying its principles to all web work. Accessibility advocate and developer Greg Tarnoff stops by the show to break down this resistance, explaining accessibility myths and benefits, while outlining the consequences of ignoring a large swath of the population. We also talk about how accessibility affects the entire workflow through development, design ​and​ leadership, and share resources that will help you create a more inclusive web.


Sponsored by

  • EllisLab
  • Your ad here (dimensions: 520 pixels wide and 60 pixels tall)

Episode Transcript

CTRL+CLICK CAST is proud to provide transcripts for our audience members who prefer text-based content. However, our episodes are designed for an audio experience, which includes emotion and emphasis that don't always translate to our transcripts. Additionally, our transcripts are generated by human transcribers and may contain errors. If you require clarification, please listen to the audio.


Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today we are talking about accessibility with special guest, Greg Tarnoff. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:

Emily Lewis: Emily Lewis!

Lea Alcantara: Today’s episode is sponsored by EllisLab. The ExpressionEngine community is busy this summer. The developer preview of Version 3.0 had been released.

Emily Lewis: Wow!

Lea Alcantara: A new focus group program is underway and preparations are being made for a special edition of the ExpressionEngine Conference. Follow it all on the EllisLab.com blog or sign up to the newsletter at expressionengine.com/newsletter.

Emily Lewis: That was the first I actually saw or heard that sponsor message, and it’s so exciting they’re in Version 3. [Laughs]

Lea Alcantara: I know. I know.

Emily Lewis: That’s very exciting.

Lea Alcantara: I know.

Emily Lewis: Oh, all right. Well, before we get to today’s episode, Lea and I wanted to once again thank all our listeners and supporters for nominating us for The Net Awards. Sadly, we didn’t make the shortlist. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: But the nomination alone really means so much to us.

Lea Alcantara: Absolutely, especially when we get such amazing feedback from new and long-time listeners in our reviews and on Twitter every single week actually.

Emily Lewis: [Agrees]

Lea Alcantara: So hearing first hand from people we make this podcast for, that’s really all we want, so thank you so much for the nomination, thank you for the reviews and thank you for all the support.

Emily Lewis: Ditto. So, now to today’s topic, accessibility, which it comes up several times over the course of this podcast, but we’ve never embarrassingly had an episode dedicated entirely to it.

Lea Alcantara: [Agrees]

Emily Lewis: So today we’re changing that. We have special guest, Greg Tarnoff, who will be helping us understand the basics of accessibility including the benefits, the challenges and the ways we as designers and developers can help create a web for everyone. Greg is an accessibility and user experience consultant and developer with a passion for building products that work for all users. Welcome to the show, Greg.

Greg Tarnoff: Thanks for having me on.

Lea Alcantara: So Greg, can you tell our listeners a bit more about yourself?

Greg Tarnoff: I love scotch.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Greg Tarnoff: [Laughs]

Lea Alcantara: You and my husband will get along.

Greg Tarnoff: Yeah, I got into drinking scotch about two years ago, maybe it was three years ago. I don’t even remember at this point, and so I don’t drink very much anymore because going out to bars has gotten very, very expensive. [Laughs]

Lea Alcantara: Yeah, yeah. [Laughs]

Greg Tarnoff: I’m also a single father to teenagers who are getting ready to kick out of the house in the next couple of years.

Emily Lewis: Yeah.

Greg Tarnoff: I’m very excited about that.

Lea Alcantara: [Laughs] Countdown. [Laughs]

Greg Tarnoff: Exactly. It is like, “I can get a one-bedroom apartment, huh?

Emily Lewis: [Laughs]

Greg Tarnoff: I’m in the photography campaign art, hanging out, overall geek, comics, movies, that kind of stuff.

Lea Alcantara: Oh, so fun, so fun.

Emily Lewis: So how did you get into the web to start with? Did you go to school for that, or you just started teaching yourself?

Greg Tarnoff: Sort of. Actually, I hit a point. I was in sales for a long time, and I hit a point where it was just like I did not want to go to work and so I was like, “Okay, well, what do I want to do?” Well, I really like photography, I really like computers and I really like teaching. So I was like I was going to do one of these three things, but the time investment it took to get into photography or teaching and going back into school and everything like that was quite long, so I explored being assistant administrator and I was taking courses on how to do that and discovered the wonderful world of web development in the meantime, and I ended up doing that instead.

Lea Alcantara: Yeah, I feel like so many in our industry, they kind of just start dabbling and then it’s like now it’s a full-time job. [Laughs]

Greg Tarnoff: Yeah, it was one of those things where I was figuring that out, “Oh, you know, I’ll put my photography up on a website. Maybe I can sell some of it that way.” I was highly delusional I think at that time, but nonetheless I put it up there and built my first website with Adobe GoLive and then a few weeks later, somebody introduced me to Dreamweaver and here I’m doing WYSIWYG and I’m thinking I’m really cool. About a month in the Dreamweaver, I stopped looking at the WYSIWYG side and just looking at the side and here I am ten years or eleven years or twelve years down the road. I don’t even remember at this point. I work in Vim.

Lea Alcantara: [Laughs]

Emily Lewis: Oh nice.

Lea Alcantara: Right.

Emily Lewis: So basically, in my mind, this is our first accessibility episode and we’re going to…

Greg Tarnoff: Congratulations.

Emily Lewis: Yeah, expand our content over this, but today is going to be the basics, and so how would you define accessibility?

Greg Tarnoff: Accessibility really is just good user experience. If you really spend the time to focus on the user experience and think of all the ways something could be done and improve, it’s going to work for everybody, and that’s really what it comes down to, that it’s a really good user experience that works for everybody.

Emily Lewis: How did you start focusing in accessibility?

Greg Tarnoff: So I got my taste of it when I was trying to learn to be an assistant admin. I kind of shifted gears and learned how to build websites, and one of the courses to get the certification, which is completely useless at this point, requires going through a Section 508 class.

Emily Lewis: [Laughs]

Greg Tarnoff: And so I did this online course on Section 508 and it just sort of stuck with me from the very beginning, and then about 2-1/2 years ago, just being involved and aware of it, I actually developed a disability myself and now it’s kind of renewed my focus and pushed me a little bit further into making sure that we build a really accessible web.

Emily Lewis: For our listeners, can you explain a little bit about what Section 508 is?

Greg Tarnoff: So Section 508 is a portion of law regarding government contracts and electronic systems, and the idea is that the government wants to make sure that they have accessible systems. They passed this law in 1996 and it was designed to make sure that they were bringing in computer systems and software that anybody could use without any discrimination. It only really applies to government work though, and that does include state and local levels and anybody that would be a subcontractor to the government.

Emily Lewis: Yeah, I think, gosh, it’s long before I moved out here to New Mexico, so it’s at least ten or eleven years ago, I worked as a subcontractor for a government agency for the Department of Housing and Urban Development, and that’s what I did. I did all their 508 testing, making sure that all the different sites that they had internally and externally tested and then validated, and if it didn’t, I went in and fixed it. The really funny thing is I had to fix it in (Microsoft) FrontPage because that’s what they had bought. That’s what the software was. [Laughs]

Greg Tarnoff: The interesting thing about 508 is it really hasn’t been updated since the nineties, and if you’re to follow it to the letter at this point, we wouldn’t be having any JavaScript in our applications, and that’s one of the things that not a lot of people realize. The good thing is that it’s up for review, and they’re trying to make amends and they’re trying to make it better, so hopefully it will be matching the WCAG 2.0 Standards pretty soon.

Emily Lewis: Well, I hope I’m not putting you on the spot on this, but who reviews this stuff? Do you know, the Section 508 specifically?

Greg Tarnoff: I actually don’t know who specifically reviews it. I do know that they put the stuff out there for public comments a little while back and they were getting some really good feedback on it. It’s one of the congressional organizations that put this stuff together though.

Emily Lewis: And you also mentioned WCAG, can you sort of define that for our listeners as well?

Greg Tarnoff: Web Content Accessibility Guidelines. So this is a sub-group out of the W3C that puts together a bunch of guidelines, not really rules, but they put together a spec on how to actually make things robust and accessible, and they are on their second version and there are three levels, A, AA, AAA, and most government agencies at this point and laws being requiring people to adhere to accessibility standards are hitting that AA level.

Emily Lewis: Excellent. I love talking about this stuff. I’m seriously opening up link after link of sites you’re opening just to make sure I’ve got this stuff bookmarked. All right, so let’s talk about why accessibility is important. I mean, you explained in your definition earlier about making sure that systems and that the user experience works for everybody, but why is it specifically important with a website? How does that benefit users? How do different users with different disabilities experience the web that isn’t accessible?

Greg Tarnoff: Yeah, well, about 20% of the people that are on the internet right now actually struggle to use it in one fashion or another, and it’s a wide variety of things. There are neurological issues. People that are dyslexic, for example, have a hard time reading some of the fonts that we put out there. People with low vision, they may not be able to see the small fonts and the people that are completely blind obviously can’t even see the screen. But then we also get into video, and all of our video has audio in it that people who are deaf can’t hear what’s being said in there. So accessibility really focuses in on making an equal user experience across the board and getting that 20% of the population that’s been struggling to be able to use the sites and do more with it at an equal level.

Timestamp: 00:09:51

Emily Lewis: What do you think the benefit also for like a front-end developer is to follow – you see, I hate to phrase it because in my mind, you don’t really build accessibility. You follow good standards-based development and you test for accessibility. So how does it benefit a developer from taking that kind of approach?

Greg Tarnoff: Well, if they’re doing it, if they’re building accessibly and they’re building quality code, they’re going to build long-lasting future friendly code, things that they’re not going to have to come back and repair six months, eight months, a year and a half down the line because it broke because some browser out there all of a sudden added this new feature that we haven’t thought of when we originally built the code. So it becomes really future-friendly.

The idea of progressive enhancement is really, really key with accessibility, right semantic HTML, and then add your CSS to make sure the contrast and the colors are going to be strong enough and then add your behavior through JavaScript on top of that and then go one step further and even add in ARIA stuff. The reality of it is if everything but the HTML fails, the site is still accessible and it’s still usable, and no matter what the future brings, as long as we support HTML, which HTML5 is the new standard and it is backwards-compatible, we will be able to make sure that that site is usable.

Lea Alcantara: So would you say, and this might be like overlapping a little bit about benefits to clients, developing with accessibility in mind, that improves search engine optimization simply because all the information, like you said, if you strip down JavaScript, you strip down everything and if the code and the content is written down properly, that the computer/Google/robot can still read all the content that’s available on the site, right?

Greg Tarnoff: Exactly, and the search engines have gotten really good at being able to read single-page applications and Angular style dynamically-loaded things, but if you can get it down to what it was originally designed, and that is the HTML document, that’s where the content is, if it’s there, it’s definitely going to help with your search engine optimization.

Emily Lewis: Right.

Greg Tarnoff: With video.

Emily Lewis: Right.

Greg Tarnoff: Video has great content, but there are still struggles with being able to really pull out the SEO value of video, but if you have a transcript which allows you to then also do captioning, and the transcript is on your page below the video or next to the video, not only is it accessible, but it’s also giving you the SEO value.

Emily Lewis: Yeah, I feel like accessibility, it’s accessible to everything, everyone, every device, whatever machine is going to consume the content or human.

Greg Tarnoff: Yeah, it doesn’t matter if it’s a watch or a Braille display or a television, anything can use it. Your refrigerator will be spitting out the HTML pages before you know it, and if we don’t stick to those standards, we don’t know how we’re going to actually accomplish that.

Lea Alcantara: So how else would developing with accessibility in mind and promoting accessibility benefit clients?

Greg Tarnoff: Well, like I said before there are one in twenty who struggle to use the web and if you go to your client and say, “Hey, I’m going to spend about 10% extra time to do this little work over here, but I’m going to increase your user base by 20%.”

Lea Alcantara: Right.

Greg Tarnoff: I don’t know any client that would say, “Please don’t do that.”

Lea Alcantara: [Laughs]

Greg Tarnoff: So that’s the big thing. On the flip side of it, you hopefully will avoid lawsuits.

Lea Alcantara: Right. Do you think that is an actual motivating factor for a lot of clients? I mean, sometimes we hear like the stories of someone suing someone because a major website or a major corporation company didn’t make their site accessible, but for a “regular” small business or a smaller organization, do you believe lawsuits, they even understand that exists?

Greg Tarnoff: I guess I hope that they understand that it exists, and as professionals, it’s our job to be able to convey that message that, “Look, we’re going to do this right for you, and if we don’t do it right, here are the consequences that you can face, and we’re not going to be held viable if you make us do it wrong, but we want to do it right so that you can then go on and say, “Hey, I did it right, and then you can spread the word that we helped you get there.” So I think it’s important for us to do it as professionals, but I don’t think that they truly understand.

People are like, “Well, that big store with the red logo on it, they got sued because they’re a Fortune 500 company, a multinational conglomerate, and I own one shop in the middle of nowhere USA, nobody is going to sue me.” Well, eventually someone is going to sue you.

Emily Lewis: I really do think that it is our job as web professionals to educate our clients about the role of accessibility and how it’s really setting them up for not just avoiding a lawsuit or increasing that 20% potential of their audience, but it’s just good fundamental web development, like that is the kind of foundation from which they can scale in the future, and we don’t emphasize accessibility when we sell our projects to a client.

We aren’t an accessibility shop like Simply Accessible is or something like that. If we have a client that had those needs, we would refer them to a shop that really focuses in on it, but we do follow standards-based development. We do minimal testing for accessibility. I have ARIA roles and I have different ARIA attributes in place where I think it makes the most sense for what we’re building, and I don’t go into those specific details with the client, but they do know that those things are in place and that it’s something that I remember we had a client who in the estimate he’s like, “Well, I don’t really want all that stuff,” and I told him, “Well, that’s how I build it so that’s what you’re getting.” [Laughs]

Lea Alcantara: Yeah, exactly, exactly. [Laughs]

Greg Tarnoff: When you got a customer like that, the way I would turn it is when you buy a car, you may not know how the brakes work, but you know that they work and know that they’re there, and that’s the same kind of thing, “Well, this is what happens underneath the hood. You don’t need to know all the details about it, but just know that it needs to be there so that you can accomplish what you’re trying to do here.”

Lea Alcantara: I feel like though that this is touching on the challenges and hurdles to accessibility. I feel like a lot of clients don’t know what they don’t know, so for example, the one that Emily mentioned, he’s like, “Oh, I don’t need that.” “Well, you kind of do, you know?” So Greg, what do you think then are the misperceptions about accessibility and the biggest challenges to it?

Greg Tarnoff: So I think there are really two. The big one is that it costs a lot of money to make something accessible, and really it only costs a lot a lot of money to make something accessible if you’ve already spent a lot of money to build it and didn’t think about accessibility at the beginning. Do it at the beginning and you’re building solid HTML and standards-based, you’re getting a lot of stuff for free, and then if you do a little bit of work and add in the ARIA roles and make sure that anything that you’re doing is readable by a simple screen reader and accessible via keyboard, all of the things which are relatively easy to get your hands on.

Because if you’re doing Windows development, you can run NVDA with Firefox to test for screen reader, everybody can throw away their mouse for a minute and try to access everything on the site just using the keyboard without taking their hands off of it. If you’re on a Mac, you could have voiceover built in, and Android devices has talkback, and iOS have voiceover, so these are tools that you have to go out and spend a lot of money for if you’re already spending money on equipment and they can get expensive to a web developer.

They’re there and if you do this solid work upfront, you’re going to get a lot of that for free. The second biggest thing is that when it comes to accessibility, the biggest misconception is like, “Oh, well, if it works for a screen reader, it’s accessible.”

Lea Alcantara: Right.

Greg Tarnoff: No. It’s not. There is so much more to it. I mentioned neurodiversity, people with cognitive issues. You also have mobility issues, people with Parkinson’s disease and trying to hit a target that’s just a couple of pixels high because it’s just an icon or as well as vision and hearing. I have a vestibular disorder. Animation drives me insane because it makes me feel like I’m falling off the planet. So there is a lot of different ways accessibility comes into play, and if we really take our time and we think about that, then we can actually build some tools that are fun and dynamic, but we want to give the user a little bit of control so that they can have that experience the way they need to have it.

Emily Lewis: And I think also, at least in my experience, it helps. Because to talk to someone who may not have firsthand experience with a disability or a challenge that makes technology in particular challenging for them, but it helps to sort of bring it down to something that they can relate to. For example, all of us have ageing parents, perhaps grandparents, they have their own issues utilizing technology because of age-related challenges or even something as simple you break your own arm, like you have a broken arm and you can’t use that arm for two months while it heals, like all of a sudden, the fact that you can’t buy something off of target.com becomes an issue.

Greg Tarnoff: Well, it gets even simpler than that. Take your contacts out or take your glasses off.

Lea Alcantara: Right.

Emily Lewis: Right.

Lea Alcantara: I’m a blind as a bat without my contacts or glasses.

Timestamp: 00:19:53

Greg Tarnoff: I’ve got about 12 inches that I can see, and that’s about it. So the thing is with accessibility, we have it all around us when we’re using accessible tools to enhance our experience all the time. It’s just we keep forgetting about it when we start building the web.

Emily Lewis: So we asked a little bit about what the benefits are to clients and developers and even users. I’m curious we haven’t really talked about the role of designers yet with accessibility. Me as the front-end developer, I’m building this stuff, but are there things that designers can do to take into account accessibility when they’re coming up with those concepts?

Greg Tarnoff: The biggest one is to focus on contrast, so under WCAG, there are rules about how much contrast foreground and background have, and we want to make sure that we are hitting those targets on the contrast so that things are going to stand out and be readable, and that’s going to help people with low vision. But on the flip side, we don’t want to go too far, solid black lettering on a whitened background or the reverse of that can be very difficult for people to read. So if you just tone back your black from #000 to #333 and take your white from #fff to something like #efefef, then most people, 90% of the population out there won’t be able to tell the difference. But that little bit of change can actually prevent physical pain in somebody who is autistic or who has issues with their vision, so there are little things like that that we want to consider and making sure that we’ve got enough contrast, but not too much, and that’s one of the big things. The other thing is when we’re doing a design, not everybody understands icons.

Emily Lewis: [Agrees]

Lea Alcantara: Oh, interesting, yeah.

Greg Tarnoff: So using icons and texts together make things work a lot better. So again, with the autism, a great example is a lot of autistic people don’t actually get the social constructs around our icons. We joke about the floppy disk as being a save icon and kids these days don’t know what a floppy disk is or “Dad, you 3D-printed the save icon?” Well, they actually know what it is, but they don’t have the social construct on it.

Lea Alcantara: Right.

Greg Tarnoff: So people who have difficulty dealing in social situations are going to have a much harder time with that, or if you go international, here in the United States, we’ve got shopping carts, these are wheeled carts we pushed around the grocery stores. Well, the idea of a shopping cart is not so well known in the UK. It’s a shopping trolley, but then you move into a developing world and they don’t have these wheeled behemoths that they push around the markets. They have bags, and so seeing the shopping cart icon in a developing nation is going to confuse the user. But if we said shopping bag or have a bag icon that was a little bit more internationalized, then they’d be less confused.

So if we’re making sure that you’re considering those kinds of things, it becomes really important, and then with animation, I don’t want to say don’t use the animation, but don’t overuse animation. Don’t animate just to animate. Animate because it’s going to make things a little bit easier for the customer and the user to understand what the process is and make sure that if you are doing bigger animations, you give the user control. Let them know with a clue of some sort, “Play this animation, or click this to do this,” or some way to just give them a little clue what’s going to happen next so that they’re not going to be shocked by it when it happens.

Emily Lewis: It goes back to the very first thing you said, that it’s just good user experience. You’re thinking about different users and trying to make it as easy for them as possible to interact with your site.

Lea Alcantara: Yeah, absolutely, and I think what people don’t seem to understand is that we actually know a lot of people with some sort of disability. It’s just not maybe overt, so sometimes people think about accessibility as like, “Oh, we’re trying to fix overt situations where this person is completely blind,” as opposed to just slightly visually impaired, but improving things overall will help all those types of people. For example, one of our clients is actually color blind, and on occasion I forget. So for example, he’d ask me like, “So what is the HEX of this?” He doesn’t even know it was yellow because the yellow looks like gray to him, and for me, sometimes when you ask me, I’m like, “Oh yeah, it’s the yellow. It’s the yellow.” He’s like, “Well, could you just give me the HEX code because I have no idea what that actually is.” [Laughs]

Greg Tarnoff: Yeah, well, another one is the content that we write. So the average reading level for people globally is around the 13- to 14-year-old marker, about 8th grade, and so when we’re writing content, if we’re not considering that or considering our audience, then we’re developing things that they’re not going to be able to understand.

I mean, if you happen to be writing a doctoral thesis on quantum engineering, you don’t have to write it to the 8th grade level because your audience is very specific, but if you don’t know who your audience is because you’re building an e-commerce site or you’re building a blogging platform, then making sure that you’re writing to that level is going to make sure that you reach the largest audience possible.

Emily Lewis: I mean, even that ties back to our recent episode we had with Steph Hay about content-first design and it’s using the language of your audience. You’re not trying to be with the smartest people on the web, but you’re trying to connect with people and so using language that’s going to connect is really critical.

Greg Tarnoff: Yes, getting your content first, I reject all things that people want me to design if they don’t have the content ready.

Emily Lewis: So let’s talk a little bit about what some foundational things that developers should do to support accessibility, like let’s say someone is not sure and they haven’t really thought about accessibility, so they’re not really sure where to kind of start embracing it.

Greg Tarnoff: A start would be to just have the mindset that there are people out there that are not like you, and you need to ask people that are different than you what is problematic for them to use on the internet. As long as we can keep that open mind that we are unique in the way we do things and we need to talk to other people, we’re going to really far. On top of that, once you actually get into building the code and building the site and building the project with semantic HTML, don’t reinvent the wheel.

If you are going to be having something that when you click on it, it’s going to take an action on the page, don’t throw Angular’s ng-click on there then have to go back and return that into something else through a bunch of ARIA roles and extra JavaScript when all you need to do is throw a button on it. The buttons are already built in. It has all those features for the accessibility that we are in need or if it’s going to be navigating to another portion of the site, make it an a tag. You don’t need to go and reinvent the wheel there.

So I think if we keep that in mind, we get a lot for free. I like saying that because it really is free, and then from there, it’s just building things up, making sure that we’re doing solid progressive enhancement and that we can always fall back to that just HTML document. So those are the big things. I mean, if you want to get a little bit more specific, again having user control of animation, sound, audio, anything really kind of unique and special going on in the site, scrolljacking, try to avoid that. Parallax can cause a lot of motion sickness with people. If we’ve got any audio or video, making sure that we’ve got captions and transcripts. Some people just want to read it. Some people want them real time.

You could even go one step farther and do American sign-language and do a sign interpretation of it and have that video run simultaneously. A lot of people don’t think about that one. Avoiding things like Flash. I mean, most of our Flash is dead, but if you’re using Flash for video, which still seems to be the legacy there, there really is no need anymore, we can do it with an HTML5 and we can make it more accessible.

Emily Lewis: You mentioned ARIA a couple of times. For me, basically I’ve always been a huge fan of semantic HTML, which really got me into having a little love affair with structured data, specifically microformats because it’s sort of building off of what’s already there, describing the content just a little further, and I felt like ARIA when I saw ARIA roles, that was just another step to sort of describe what I’m building to make it a little more accessible, and it was an easy way for me to sort of make the jump into understanding even more about ARIA. So could you talk a little bit about ARIA, what it is, and maybe explaining the roles that I just mentioned?

Greg Tarnoff: So ARIA is again out of the W3C. It is a spec that they’re working on constantly, and ARIA stands for Accessible Rich Internet Applications. It really came out of the world of Java applets and Flash and things like that. When we were starting, it really kind of moved away from static document and trying to provide ways to communicate through the screen readers and other accessible technology what was going on the screen. The main areas are ARIA roles. These are landmarks that we can put into our code so that a person can say that this chunk of content is my navigation, this one is complementary information or an aside or if we can do a figure, the main content of the website versus a footer or a header.

Timestamp: 00:29:54

Sponsored by

  • EllisLab
  • Your ad here (dimensions: 520 pixels wide and 60 pixels tall)

With HTML5, we have a lot of these new tags and the new tag is sort of duplicating what the roles were doing, but older screen readers and assistive technology aren’t caught up to HTML5, so we still need those ARIA roles in there. The other thing that we have are states, so we might have a tab panel that may be selected or an accordion, is it expanded, is it collapsed, ARIA will communicate that back to the user through their assistive technology. We can tell it that this particular label that is on the left hand side of the screen is associated with this piece of content that’s on the right hand side of the screen, and even though there is a visual disparity there, the person who can’t see that and make that connection will be able to have that communicated to them through the technology as well, and then I think one of the areas that really needs more time invested with it is the ARIA live region concept.

Because having dynamic single-page applications with JavaScript will go in and fetch a piece of data and it will change just a portion of the page as opposed to doing a refresh, we need to communicate to the user that that part of the page has made the change, and that’s where a live region comes in and we can tell the live region to be polite, which means that when I stop reading this particular thing, to stop doing this particular thing on this area of the site. It will say, “Hey, I’ve got a new content for you. Here is what it is.” Or we can make it assertive where it will actually interrupt you, and so if you’ve got filling in a form and you’ve got an error message that comes through in a live region, that’s the kind of thing you want to be assertive, whereas “Hey, you’ve got new tweets” is something you want to wait until a person pauses.

Lea Alcantara: Right, right. Wow! Greg, I’m learning a lot because when I first started thinking about accessibility, yes, I was thinking about making the web available for everyone, but I didn’t even think about the fact that these live regions, just things that I take for granted as someone who just interacts with the web without much issue that people might not be able to access that information because it’s too fancy with the show/hide or AJAX or whatever else is happening in the background.

Greg Tarnoff: Yeah, I get really excited about all the new things that we can do and moving away from the fact that this was just static document and it’s so much more alive. It’s more interesting than video games because it’s not this guided concept, and it’s more interesting than television or even reading a book because we can do all these fun things, but not everybody appreciates them, or worse, they make people physically ill, and we never want to do that. You don’t want to screw somebody up just because we got the latest trick that we want to show off.

Lea Alcantara: So I’m curious, say you are a designer and developer and you are starting or trying to apply accessibility concepts in your workflow, what do you think is the biggest mistake that somebody who is well intentioned, who is somebody who’s trying to apply this, what do you think is a very common mistake that designer or a developer does?

Greg Tarnoff: I think it’s the concept that, “Well, maybe they don’t really need this,” and it’s one of those things where you come up with an idea, you think that it’s going to work, and then you try to think of it and look at it from different angles and different user mindsets, and if you can’t get into that mindset, it becomes easier to dismiss it.

Actually, it’s very difficult to get into somebody else’s perspective and see how the world is from their angle, and that empathy that is needed is super, super important for a designer. If we can’t get into that, then we have a tendency to blow it off. I actually had a client who complained about the application that we have available. He didn’t want to purchase it. It was a proprietary CMS for building out websites for small engine makers. They didn’t want to purchase it because it wasn’t accessible to the blind, and we’re like, “You sell lawnmowers. How many people do you have that are blind using a lawnmower?” And he’s like, “Well, I have one, but he does his own repairs. He buys his own parts.” This is his thing. This is what the guy does, and he doesn’t want to lose this customer because nobody else is going to help this customer and he wanted to take care of that. He wasn’t willing to invest in our product because of that, and so there may only be one person, but that one person may be very important.

Emily Lewis: Absolutely. So do you think there’s anything that leadership managers can do to support accessibility? We talked about some things developers can do in coding, in testing things designers can do when creating. What about managing and leading?

Greg Tarnoff: Hey, it has to start there. As coders and developers, we can do everything we want, but if our manager finds out that we are spending 5% or 10% or 20% of our time making this thing accessible and they didn’t approve it, they’re going to come down on us and they’re going to say, “Well, why are you bothering to do that? You’re wasting my time. You’re wasting my money.” So we need to have the management supportive. If we can get the management on board, the only way we’re going to get them on board is if we can show them the ROI or show them that this is a very small investment, but yet here is what we’re going to get in return from us or what we’re going to avoid through legal scenarios, then they’ll get on board and when they’re on board, they’re going to insist on it and then that’s going to make it happen all the way throughout the organization.

Emily Lewis: I guess I’m a manager because I own my own business. I think it’s also something that I have a responsibility as well to highlight it for customers, that it’s not necessarily me as the developer communicating to a client about the importance of accessibility, but me as a business owner conveying it to a client, looking for clients who want to support that. I think that probably has some sort of role as well.

Greg Tarnoff: Yeah, definitely.

Emily Lewis: So let’s talk a little bit about what you just mentioned, the cost of accessibility. You said earlier on, and I couldn’t agree with you more, that if you build right from the start, accessibility is not a costly endeavor. What is costly is remediation going back and fixing something after the fact, and so I was wondering, can you talk a little bit about that sort of after the fact fixing and the kind of the impact that that can have on a business on how it has to respond to making those changes cost-wise as well as legal-wise?

Greg Tarnoff: Yeah, well, it’s hard to put numbers on these things because every project is going to be a little bit different, the size of it and the scope of it. But when it comes down to doing it, if we do it beforehand, the cost of doing an accessible platform at the beginning is actually going to be less than supporting legacy browsers.

Emily Lewis: Oh wow! That’s a good analogy to draw it to.

Greg Tarnoff: If you have to support IE 9 and below, you are going to spend more money and more time getting those to work than you would in making an accessible site.

Emily Lewis: [Agrees]

Greg Tarnoff: That being said, there were some numbers that were being tossed around. I know that my quotes for things when I had to support IE 6, well, that was a 50% increase in the cost of doing things just for supporting IE 6. IE 8 was maybe a little bit less and IE 9 maybe a little less than that, but we put in this sort of astronomical numbers because it did take so much more work to actually get those done because they weren’t built off of the semantic standards that would apply everywhere else, and that sort of the same thing that comes in now is if you build an application, I would say that you’re going to spend between one-third or one-half of the cost to rebuild that application if you’re going to have to do all that rework and retrofit it, and it’s going to be higher the more if you’re doing more of a single-page application and you’re using sort of the standard build practice of applying these click and hover events to all these different things that don’t normally have them.

So if we consider that in the beginning, we can cut a lot of that cost out, and yeah, I think that’s really probably the areas that you’re going to spend that kind of money and there are lawsuits too. The DOJ is stating that you have to have accessible websites. So they’re going to start suing people that aren’t accessible. Even the ADA doesn’t say anything right now, the DOJ is going to be going after it.

Emily Lewis: Yeah, that was just – what was it – June 29th I saw, or I guess at the end of June, this sort of announcement from the Justice Department came out, and I think it’s really exciting. I mean, it basically says that if you have a public accommodation, a public business, a public service, then your website has to be accessible.

Greg Tarnoff: I’m all for that.

Emily Lewis: Yeah, and I also feel like I’ve noticed, I know I enjoy a special place getting to talk to people on this podcast who are really invested in our industry, but it feels like there seems to be a shift towards accessibility amongst web pros. It seems to be a hot topic all of a sudden. People are really talking about it a lot more frequently than they had before.

Timestamp: 00:39:47

Greg Tarnoff: They definitely are, and I think a big piece of that is because there is this sub-culture in web that has emerged called user experience. It’s no longer about design. It’s no longer the web designer. It’s no longer the UI guy. It is user experience. It’s who talks to the customer and what is that conversation like, and it’s the entire thing, and as people get into that and they start looking at how we’re doing things, accessibility starts standing out as this big red thumb and they’re taking it into consideration and they’re building for it, factoring it in at the beginning, and if you’re doing good user experience and so many companies are now pushing that model, that we’re going to get better just by following that.

Emily Lewis: So as we near the end of the episode, let’s talk about some of your favorite resources and things like that. So what would be some of your top recommendations for learning about accessibility?

Greg Tarnoff: Well, there’s a hashtag on Twitter #a11y and the 11 is eleven because there are eleven characters in accessibility, and that is really good hashtag to follow. If you’re looking for a variety of conversations or learnings, things to pick up on job resources, good articles, that’s one of the best things you can probably do out there. There’s a lot of good writing from Paciello Group and Simply Accessible and the Ally Project.

Those are some really good resources along with WAVE of webaim.org to have out there, and then you can get in with that little bit more nichey stuff that doesn’t focus on the web, but it focuses on the actual issues that people deal with. So for instance, vestibular.org is a website that I visit on a regular basis. It’s about vestibular disorders, and I will read some of the stories that are on there and figure out how those apply to what I’m doing.

Emily Lewis: Oh, that’s such a great suggestion. It’s one of the things Lea and I are learning in our own business, and it amazes me that it has taken us this long to learn it, but we have to go where the people we are working for are. We need to meet them. We need to get outside of our little web bubble where we geek out about standards and things like that and talk to the people, engage with the people, meet the people that we’re building websites for, and that’s a perfect example of that being extremely practical, especially from an accessibility standpoint. So let’s talk about resources for validating or testing accessibility.

Greg Tarnoff: Sure. There’s a lot of stuff out there. Some of them are good, some of them are great, and some of them are getting better. Wave is a tool by Web AIM that you could drop a URL in and do a test on it and get some results back in a nice fashion. There are also some tools that you can plug in too, some extensions, for your browser.

One of those is FireEyes by Deque. They actually will do some of that. It runs with Firebug on Firefox and it will give you an idea of what you need to do in order to make your site more accessible. Khan Academy recently released a tool, accessibility for testing and developing that, and then another one that’s really great is Tenon.io. That was one that recently emerged I think two or three months ago. I find that that one is really, really effective.

Lea Alcantara: Excellent. So finally, what are your top three suggestions for web professionals who want to get more involved and to advocate for accessibility?

Greg Tarnoff: Find the channels where people are talking, so the #a11y on Twitter. There’s also a Slack channel out there.

Emily Lewis: Oh, Slack.

Greg Tarnoff: Yeah. There’s a web accessibility Slack channel, and there are actually some user experience Slack channels that have web accessibility rooms in them, and get out there and ask questions. The one really cool thing about the accessibility people that are out there is they want to help people learn. Most of us are there to teach, and it’s not just to do, but we want to teach and want to expand it, and so they’re happy to answer questions no matter how stuck you may be because the more people we get doing it, the better off we’re all going to be. Then the other thing that I personally condone and it doesn’t work for everyone so your mileage may vary, when it gets right down to it, just do it, be subversive and do the right thing. In the long run people are going to thank you for it. It may take a long time, but that’s just kind of how I roll. I’ve gotten into a lot of trouble in the past for it, but eventually, they always thank me.

Emily Lewis: You do the work that reflects what you believe in, absolutely. I love this episode. [Laughs]

Lea Alcantara: Yeah, right. I’m just like, “This is amazing.”

Greg Tarnoff: Well, I’m so happy that I can be here.

Lea Alcantara: Well, before we finish up, we do have our Rapid Fire 10 Questions, so our listeners can get to know you a bit better.

Greg Tarnoff: All right.

Lea Alcantara: Are you ready? [Laughs]

Greg Tarnoff: Yeah, I think so.

Lea Alcantara: All right, first question, Android or iOS?

Greg Tarnoff: It’s iOS.

Emily Lewis: If you are stranded on a desert island and can only bring three things, what would you bring?

Greg Tarnoff: Oh wow! Water, because you can’t drink the sea water and I don’t want to drink any other liquid that would be available.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]<

Greg Tarnoff: This is PG show, right? [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Greg Tarnoff: A knife and probably a good comic book.

Emily Lewis: [Agrees]

Lea Alcantara: Practicality and pleasure. What’s your favorite TV show?

Greg Tarnoff: Right now, I’m really digging Orphan Black.

Lea Alcantara: Oh yes, Canadian show.

Greg Tarnoff: A Canadian show. I watched the first two seasons and I’m so happy that Tatiana Maslany got nominated for an Emmy for this year.

Lea Alcantara: Yeah, Maslany.

Greg Tarnoff: I think she got nominated for the Best Leading Actress in a Drama, but I don’t understand how she didn’t also get nominated five times for the Best Supporting Actress.

Lea Alcantara: Yeah, totally.

Emily Lewis: We’re just getting into that one, so I’m not a fan yet.

Greg Tarnoff: Oh, you’ll love it.

Emily Lewis: But Jason is very excited to watch it, so we’ve seen a couple of episodes.

Greg Tarnoff: Then Sense8.

Lea Alcantara: Oh.

Emily Lewis: I’ve seen that. I’ve heard a lot of people talking about that one. I’m afraid to add a new show to my list of shows. [Laughs]

Greg Tarnoff: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: That I still have to catch up on.

Greg Tarnoff: That’s the wonder of streaming media these days, you know?

Emily Lewis: Yeah. [Laughs]

Greg Tarnoff: Binge watching.

Emily Lewis: All right, so next question, what’s your favorite dessert?

Greg Tarnoff: Actually, I’ll probably say orange, an actual orange.

Lea Alcantara: What profession other than your own would you like to attempt?

Greg Tarnoff: Oh gosh, actually, I would really want to be the star artist, loft artist. I’m nowhere near good enough, but it would be really cool to just be able to create things unhindered.

Emily Lewis: What about a profession you would not like to try?

Greg Tarnoff: Sales.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: In which you did, right? [Laughs]

Greg Tarnoff: Exactly, yeah. [Laughs]

Lea Alcantara: What’s the latest article or blog post you read?

Greg Tarnoff: It’s something on Everyday Feminism yesterday about men and feelings. It was actually…

Emily Lewis: Oh, I read that same thing.

Greg Tarnoff: Yeah. I’m a man. I have feelings, and I talk about them openly on my website and on Twitter as well, and it was really good. It was really well-written article on how we’ve got such a double standard on feelings. Men aren’t supposed to feel.

Emily Lewis: So if you could have a super power, what would it be?

Greg Tarnoff: I am actually would go with speed.

Lea Alcantara: Oh.

Emily Lewis: Oh, like The Flash?

Greg Tarnoff: I love The Flash.

Emily Lewis: [Laughs]

Greg Tarnoff: He’s one of my favorite comic characters and the whole concept there is it’s not just speed, but he has to have a body with strength and bones that can actually handle it as well.

Emily Lewis: Right.

Lea Alcantara: What music do you like to work to?

Emily Lewis: It depends on my mood. I would say most of the time I’m listening to something chill or house music, but if I’m really frustrated and struggling with a problem, I will come to punk rock and all the angst in music from my youth.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Greg Tarnoff: And when I’m driving, I like to listen to the eighties.

Emily Lewis: All right, last question, cats or dogs?

Greg Tarnoff: Both. I’m not a cat person. Let me rephrase that. I was not a cat person. A little over a year ago, we adopted three kittens because my family wanted them.

Lea Alcantara: Oh.

Emily Lewis: Oh.

Greg Tarnoff: And the three kittens from the same litter, Chicken, Waffles and Gravy.

Lea Alcantara: Oh, I love it. I love it.

Emily Lewis: [Laughs]

Greg Tarnoff: And Gravy basically looked at me and said, “You were mine and you are going to cuddle with me and I’m going to cuddle with you and you’re going to do everything I tell you to do.”

Emily Lewis: [Laughs]

Greg Tarnoff: As annoying as these critters can be, when I am feeling blue, the first thing Gravy does is he comes up and either sits on my shoulder or sits in my lap and it always makes me feel a little bit better.

Lea Alcantara: Oh, great.

Greg Tarnoff: I don’t have any dogs, but I really want a dog.

Lea Alcantara: That’s awesome. Well, that’s all the time we have for today. Thanks for joining us.

Greg Tarnoff: Thank you for having me. It’s been a lot of fun.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Greg Tarnoff: Probably the easiest place is Twitter, which is just @gregtarnoff on Twitter, and also on Instagram, and you can also visit my website, which is tarnoff.info. You can contact me through there.

Emily Lewis: Excellent. Thanks again, Greg.

Greg Tarnoff: Thank you.

[Music starts]

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, EllisLab!

Emily Lewis: We’d also like to thank our partners: Arcustech, Devot:ee and EE Insider.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when we’re going to talk about professionalism and the softer skills necessary for success in our industry with Dan Mall. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 00:49:58

Love this Episode? Leave a Review!

Emily Lewis and Lea Alcantara

CTRL+CLICK CAST inspects the web for you!

Your hosts Emily Lewis and Lea Alcantara proudly feature diverse voices from the industry’s leaders and innovators. Our focused, topical discussions teach, inspire and waste no time getting to the heart of the matter.