A11YSD October 2023 Video Transcript
Expand Transcript
Speaker 1: Kevin’s going to tell us a little about lessons and challenges from his accessibility journey with Haiku. Kevin’s a client liaison for Notch 8, a local Ruby on Rails consultancy. One of their specialties is digital preservation solution used by libraries, universities, and museums.
Speaker 1: And he’s excited and challenged by the increased request for accessible design. Kevin.
Speaker 2: Hi everybody, I’m excited to be here. I go to a lot of meetups and a lot of developers talk about technical things and I feel like people get passionate about something very human at this meetup and that’s just refreshing.
Speaker 2: Yeah, handheld mics are my nemesis, so thank you. Thank you for taking care of that right up front. Do I have control over the slides with this? Awesome, and I don’t have speaker notes, which is probably good, because I need to make this shorter.
Speaker 2: Anyway, accessibility in Haiku. I’ll talk a little bit about what Haiku is in a second, but first, oh, thank you. First, I will talk about my company, which is Na ‘Chai. I feel like I’m skipping, oh, there we go.
Speaker 2: Technical difficulties, okay. Like Christopher said, Na ‘Chai is a Ruby on Rails consultancy, we’re located just a few blocks away in downtown San Diego. One of our specialties is a technology called San Vera, which is digital repositories.
Speaker 2: Universities, libraries, art museums, they need ways to host their collections online in a way that will have integrity. We just contracted with Trinity College and Dublin to help them on an application that will put the Book of Kells online and make it visible online.
Speaker 2: So it’s pretty exciting work. San Vera itself is a community and a set of guidelines around this particular technology. It’s a stack, but you don’t buy San Vera. If digital repositories are cars, San Vera is a sedan, but you don’t go to the store and say, give me a sedan.
Speaker 2: You would go and say, give me Haiku. So Haiku is what we actually present to a client. And Haiku itself is not even turnkey. It requires some development to customize it for an individual institution and its needs.
Speaker 2: And that’s what my company does a lot of. Haiku and San Vera both open source. One of the challenges and one of the great things about the community is that it’s all kind of guided on volunteer time by volunteers, by people interested in the community.
Speaker 2: It’s developed on volunteer time and project partners can pay for custom work which allow it to be shared back to the core code. So for instance, the ability to upload a whole collection of items to your application at once is a tricky customizable thing.
Speaker 2: And for University of Oregon, we’re in the process of building a bulk importer that can be used by a lot of people. And part of that deal is that University of Oregon is paying for it, but we are going to be able to contribute that to the core code so that anybody who uses a Haiku app later can benefit from that technology.
Speaker 2: What if you don’t have a sponsoring partner? You beg for one. This is where accessibility comes in. We have gotten people knocking on our doors. A lot of these folks are publicly funded institutions.
Speaker 2: They need to meet certain requirements and need to meet their users’ needs. And accessibility is a big part of that, but it really has not been factored into the development of these technologies so far.
Speaker 2: So in general, you probably get the gist if you’re at this meetup, but why accessibility? It’s socially responsible. It’s a good thing to do to make your applications available to everybody that can use them.
Speaker 2: It can increase and diversify your user base. That’s good for business or if you’re a university, it’s just good to serve your users. There can be SEO benefits and a lot of times it’s required for publicly funded projects.
Speaker 2: The navigation of what is required by who and when is very difficult to figure out and there is no rule of thumb that’s easy and I’m still working my way around that one. So why do people not implement accessible development?
Speaker 2: Longer development timelines, anytime you add something to a project, it’s more work to do, more work to manage and all of that means more money to spend. And to be cynical, a lot of times the needs of them, the many outweigh the needs of the few and if they can put that money and time into another showy feature that will add benefits to 90% of their users, something like accessibility just continues to get bumped down the roadmap as far as the budget’s concerned.
Speaker 2: So as I was going down this journey of figuring out, well, how can we make Haiku accessible to meet our client’s needs for their customers? I discovered a couple of acronyms, one is WCAG and one is VPAT.
Speaker 2: There are two different sets of, well, one’s a set of standards and one is a template. I’ll explain. WCAG stands for Web Content Accessibility Guidelines. And it’s a specific set of standards for accessibility.
Speaker 2: It has three different levels, A, AA, and AAA. And there’s no real concrete pass -fail to meeting one of these standards. You sort of audit it. You claim that you meet them. You can have certain bodies write letters of conformance.
Speaker 2: A VPAT stands for Voluntary Product Accessibility Template. And that’s a tool. It’s not a set of standards. It’s kind of a checklist of things that you are looking for in your application to see whether you grade them individually on how well your application supports each piece.
Speaker 2: I will breeze through this rather quickly. WCAG is founded on four basic principles of types of guidelines. Is your application perceivable? Is it operable? Is it understandable? And is it robust enough to be used by assistive technologies?
Speaker 2: And these are all things that are trying to speak to the needs of folks with visual impairments, motor skill impairments, and other disabilities that make regular web application usage more challenging.
Speaker 2: This is an example of what the WCAG looks like. It explains one guideline about text alternatives. And using non -text content. If you’re looking at a WCAG online, you can click in to kind of understand a little more deeply about each item that you’re trying to assess.
Speaker 2: And the VPAT is the template, the auditing checklist that you’re using to assess your product for accessibility. The appropriate answers for each thing would be that this feature is supported. This feature is partially supported, not supported at all, or it’s not applicable, or maybe not evaluated.
Speaker 2: And this is a sample of what that VPAT looks like just the beginning. This is pages and pages. But the first six items here you can see, for instance, non -text content. That would be something like image alt text.
Speaker 2: Will a screen reader be able to tell what is on the screen, even if somebody can’t see it? And in this case, this is partially supported. And then you would explain your rationale for filling that answer.
Speaker 2: Another useful tool, there are a lot of these online. The one I looked at most deeply was accessibility insights for web. It’s a plug -in. And you can run this on your web page, and it will shout out accessibility issues.
Speaker 2: A lot of limitations there. But it’s an easy first pass to see some things that need to be fixed. So looking at these things in haiku, the cats, by the way, are just because this was a really visually boring presentation.
Speaker 2: So why not cats, right? This is an example of what a user side might see. It’s a dashboard showing the collections of digital items. These are just test items. I made it deliberately ugly. And if you run the accessibility insights on it, it shows up.
Speaker 2: Everything there is an error. And the one thing that I did want my notes for is this page is showing 26 accessibility issues. This is the administrative dashboard, so maybe the librarian that’s actually going in there and taking care of the content.
Speaker 2: This page here shows 18 issues. If you click on one of those issues, any one of those little red boxes, it tells you a little more about it. Elephants, wow. Elements must have sufficient color contrast.
Speaker 2: Elephants don’t. They’re very gray. It points to the place in the WCAG that will explain the success criterion there. It tells you exactly what to fix. Like if you remember that page, it’s telling me here that the text and the background color are not sufficiently, don’t have sufficient contrast to be perceivable.
Speaker 2: Another one that’s a little more difficult to see immediately is list tags. Elements have to be tagged appropriately for screen readers to make sense of them and other assistive technologies. This application does a very poor job of tagging lists, which can confuse those tools.
Speaker 2: I’ve got a quick video here that we need permission to view, so maybe we’ll skip it. And this is too long anyway. I’m supposed to do this in 10 minutes. A little disappointed, though, because one thing it shows you that’s built into Haiku is users who have Haiku can go in and change colors very quickly.
Speaker 2: The video would show you I went in and just changed a couple settings. All of the text colors got a lot lighter. I think I turned them to white. I ran the web accessibility insights for web against it again and brought those errors down considerably.
Speaker 2: It was just that one change. The 18 errors from the admin dashboard went down to nine and the 26 errors from the user homepage went down to 14. That’s kind of a cheat. It’s a flashy thing I like to show off about Haiku.
Speaker 2: It’s kind of a cheat because you’re just going in and changing some colors that’s helping like that’s maybe 10% of what you need to do for this application. But it’s fun to see the tool show that change in real time.
Speaker 2: I did try to make my way through a VPAT for Haiku myself with my limited knowledge, but I thought it would be a good learning experience. My determination, non -text content is not supported. None of the non -text content like images have alt text.
Speaker 2: This is actually very tricky with digital repository where people are uploading content. There’s no way to force the people that are submitting works to create alt text for the items. But I think even for the kind of interface that we’re building, there should be or could potentially be a field where people have to enter alt text when they upload an item.
Speaker 2: There is no substitute for manual testing. These kind of tools like accessibility insights are pretty nifty. They’re very useful actually, but they’re only the tip of the iceberg until you can sit down and go through some of the user experience that folks with motor skill limitations have to go through.
Speaker 2: That’s nothing that any quick app audit tool is going to be able to tell you. Clicking from one thing to the next. Logical order of information on a page. Those are all really important things, not just to everybody, but to assistive technologies.
Speaker 2: If I had an accessibility wish list, I would say the low hanging fruit, the really things that need to be fixed are some solution for alt text. There either needs to be default alt text, at least identifying something as an image, depending on what people import, or there needs to be the creation of some kind of tool that allows people to add alt text to their collections.
Speaker 2: We need to clean up organizational tags. List elements is what kept being yelled at me by accessibility insights. We also need the time and money to conduct a thorough audit and implement upgrades. A lot of times these institutions require accessibility, but it’s difficult for them to spell out that they’re willing to pay for it.
Speaker 2: References and resources. I’ll point some things out here. Code for Lib is a very interesting conference. It’s for digital librarians. I didn’t know there would be a conference for something like digital librarians, but I went to one in February and accessibility is a hot topic there.
Speaker 2: There’s a couple talks. They have those presentations aggregated on their accessibility page on their Wiki. A lot of other interesting stuff to poke around on. They have a list of different universities and links to all of universities and individual accessibility policies.
Speaker 2: There’s a really interesting web page linked there about how to write alt text for artwork. You’re used to very dry image descriptions, but how do you do alt text for something subjective like a work of art?
Speaker 2: W3 .org and section 508 .gov. A lot of information on the VPAT, the WCAG, and other accessibility standards there. Naughty8 .com is my company. HaikuUp .com is a product, a Haiku product we’re putting together so people can just sort of subscribe to the use of these repositories.
Speaker 2: It really, us launching that is really what’s burned this research project for me to figure out what we need to do to make it accessible. And Sanvera .org explains this kind of whole world of digital repositories a little better.
Speaker 2: A couple references there. And I want to say thank you. Any questions? Yes. Thanks, everyone.
Speaker 3: If you think of questions, just go up and talk to him after this. So next up, we have Mr. Dave Woods. And he’s going to be talking about the critical but often overlooked role that content creators and marketers play in accessibility.
Speaker 3: Dave is the founder of his own company, D -Dub, Incorporated, I believe. And he’s working on a cool thing called web accessibility love, but I think you’re going to talk about it, so I’m not going to steal your thunder.
Speaker 3: There you go.
Speaker 4: There we go. All right, everybody. As Harris said, my name is Dave Woods. I’m the founder of Dita Bank, which is, oops, which button do we push here? There we go. Little behind, there we go. Dita Bank, which is my San Diego area customer experience consultancy.
Speaker 4: And I’m also really excited about Web Accessibility Love, which is a new training service. I’m gonna be launching soon through Dita Bank to make web accessibility more accessible, easier to learn and easier to implement.
Speaker 4: But I’m not here to talk about me. I’m here to talk about something that I think is really important, and that’s the relationship between content and accessibility. As I said, this is a really important, really critical relationship.
Speaker 4: But I think if we’re honest with ourselves, it’s a relationship that’s on the rocks because it’s often overlooked. We don’t often talk about the role of content, content creators, content strategists, and marketers in accessibility.
Speaker 4: And I think we just need to be honest about that and find out why and fix that. So that’s what tonight’s talk is. It’s an honest look, some call to action kind of stuff that hopefully inspires you to maybe take a little different look at content and accessibility.
Speaker 4: So a lot to cover, let’s just get started. And I think it’s best to kind of look at this problem with having two sides. On the marketing and content side, and this is not meant as a slight or any disrespect, it’s just an observation I’ve had that many of you may have seen too.
Speaker 4: In my experience, a lot of marketing and content professionals don’t necessarily see content, I’m don’t necessarily see accessibility as their responsibility. And there’s two big reasons for this, one of which I’ll talk about in a couple minutes, but the other reason has to do with the way the rest of us all talk about accessibility.
Speaker 4: Think about the conferences we go to, think about the articles we see online. It always is framed in terms of design and code, design and code, inclusive design, and assistive technology, but we never hear about content very often.
Speaker 4: And it’s kind of reinforced by what we see in the media. This is on September 3rd from the San Francisco Chronicle, big headline with all the lawsuits, there’s a lot of stories in the media about all the inaccessible websites out there, and this was the headline across the top, Court of Appeals rules, many websites must be coded to let blind people use them.
Speaker 4: So it makes it sound like it’s just about the code, nothing else, but of course, we know there’s more to it than that. On the other side of the line, meaning design and development professionals don’t necessarily see content as their responsibility.
Speaker 4: And again, no slight intended here, it’s just an observation that many of you may have noticed as well. We see this all the time, we still see UI concepts mocked up using lower MIPSM text, rather than real content for the actual client or project.
Speaker 4: We also see it in UX job descriptions. I’ve seen this for a long time, I just looked again last week, randomly selected 20 here in San Diego, only two of them legitimately included mentions of content related responsibilities.
Speaker 4: The rest either didn’t mention content at all or hardly at all in kind of an irrelevant way. So can you see the disconnect here? When you put two and two together, who exactly is minding the content store as it relates to accessibility?
Speaker 4: Nobody in most cases. And I think that’s really sad because in my experience, which is kind of multidisciplinary, I’ve done a little bit in every area, content is responsible for some huge accessibility gains.
Speaker 4: It’s one of the most important aspects of accessibility. In fact, it’s so important, they put it right in the name, it’s the C and the WCAG. Yet here we are with all this accessibility discontent, all because we chose to discontent.
Speaker 4: See what I did there, like that, funny, I know, isn’t that great? So I wanna try and maybe solve this tonight or at least set us down the path to solving it by looking at three things. One, for those of you who are marketing and content pros, I wanna try and convince you and inspire you to take accessibility more seriously.
Speaker 4: If you’re on the design and development side, I want you to try and learn, inspire you to take content more seriously. And I’m gonna finish with some really quick, really quick demo that shows how some small content changes can make some huge difference to people who use screen readers.
Speaker 4: So let’s get started with those marketing and content pros. This show of hands, how many of you would say that’s your primary job responsibility or skill area? Okay, two or three, good, all right. So please share this with other marketing content pros, not in the room too if you know any.
Speaker 4: But I think that other factor that I was talking about a minute ago besides the fact that we all talk about accessibility, the rest of us without mentioning content, that other factor is ROI, return on investment.
Speaker 4: For those of you who have not worked in marketing, marketers and content creators are under constant pressure to deliver ROI, new subscribers, new customers, new sales, new revenue. And if they don’t, their job security’s on the line.
Speaker 4: No one wants to lose their job because they didn’t deliver. But, you know, Oops, I’m gonna go back one slide, sorry. And in the name of ROI, we will do all kinds of things because our job security is on the line to make sure that we’re as accessible as we can be.
Speaker 4: Remember the old days, the days of internet Explorer 6 where we would bend over backwards to make our websites compatible with IE6 so that we wouldn’t lose out on that like 2% of sales out there from the people who haven’t upgraded yet?
Speaker 4: We’ll do things like that in the name of ROI. We’ll also chase what I will call shiny objects, and I don’t mean that in a pejorative way. Things like a hot new social network like Snapchat. We’ll go after it because quote, everybody’s doing it, and if we don’t do it too, we’re not gonna reach the ROI goals that we want.
Speaker 4: But yet, when we go to these conferences and hear marketing thought leaders talk about hot new social networks, we never really hear them talk about accessibility as an opportunity. Accessibility in the marketing realm seems to kind of be seen not as an ROI gain, but an ROI drain.
Speaker 4: And I think it’s because, it’s just a practical matter. Nobody has any mallet symbol. Nobody wishes harm on people with disabilities, but if you’re a marketer with only so many hours in the day, and you’ve got all these things to accomplish that marketing thought leaders and your bosses at your company are telling you you need to do to make money, you’re gonna set something else aside, especially if you mistakenly think, ah, it’s only one or 2% of people.
Speaker 4: It’s a compliance thing. I don’t wanna have to do that. That attitude is wrong, and I’m not saying it’s morally wrong. I’m not judging you. I’m saying it’s statistically wrong, and I’m gonna prove it here through some math.
Speaker 4: That idea that marketing is just people who are blind or just two or 3% of the population, some of you may have heard this stat from a lot of different sources. It’s more like 20% of people who are living with disabilities, a great variety of disabilities.
Speaker 4: And not all of those disabilities face obstacles in the digital realm, some are in the real world, but a huge chunk of that 20% does face obstacles in the digital realm because of how we’ve created our user experiences.
Speaker 4: Well, let’s do the math. 20% of the global population of 7 .73 billion. That means there are 1 .55 billion people worldwide living with disabilities. That’s a big number, so big in fact that if it were the monthly active user base of a social network, it would be the fourth biggest social network on earth behind only Facebook, YouTube, and WhatsApp.
Speaker 4: Would you ignore a social network with 1 .5 plus billion users? I don’t think so. But let’s look at some of those other ones that are the shiny objects that we chase sometimes. I’m not picking on Snapchat, but accessibility blows them out of the water.
Speaker 4: Look, it trounces them. Look at the numbers. The big ones we always hear about, Twitter’s always on the news, LinkedIn, Snapchat, they’re all around 300 million. Again, if this is accessibility audience, if we wanna call it that, is 5 .3 times bigger than the user base of Snapchat.
Speaker 4: I wanna be clear, I’m not knocking marketing, I’m also not knocking Snapchat. If Snapchat works for your audience, use it. But understand you’ve gotta weave accessibility into that and all your other marketing channels as well.
Speaker 4: And can you see the scales kinda tipping here, where we need to maybe spend, not saying spend less time on the audience of 200 or 300 million, but let’s definitely spend more time than we are on the audience of 1 .5 billion.
Speaker 4: Can we agree with that? So let’s, well, before we move on to designers and developers, let me sweep in the ROI pod a little bit. First of all, money saved is money earned. And if you get out ahead of this as a marketing department and you make your websites and your email marketing, your social media posts and everything more accessible, you’re gonna most likely prevent your organization from getting sued and your bosses will be really happy because money saved is money earned and money earned is ROI gain.
Speaker 4: So that’s another way where the ROI is even bigger than we thought. Plus that accessibility audience is actually all 7 .73 billion people on earth, why? Because many of you know that the things we do to make digital experiences more accessible almost universally make life better for the rest of us too.
Speaker 4: Closed captioning is a perfect example. It’s not just for people living with hearing impairments, although that’s the primary benefit, but the rest of us who are say, watching a video in a quiet library or a noisy subway, we’ll be able to hear or see your marketing message that we would otherwise hear.
Speaker 4: So can you see when you factor all these things together that accessibility is actually big time ROI? I know this is kind of maybe crass to talk about it that way because we wanna focus mainly on the social good aspect and the good we’re doing for people with disabilities.
Speaker 4: But if you have a hard time convincing your marketing folks or their bosses to embrace accessibility, I hope that these stats have shown you why we need to because the ROI is huge. Next, let’s move on to design and development.
Speaker 4: So having done design and development work, I get it. There is a lot of craftsmanship involved in it. We care very deeply about what we do. We want well -formed code. We wanna be keeping up with the latest technologies, the latest user interface trends, color theory, et cetera.
Speaker 4: But sometimes we get so in the weeds with this craftsmanship, we worry too much about a specific feature of the product and not about what our actual users really need and what they’re gonna do with that product.
Speaker 4: And so to illustrate what I mean by this, I’m going to show you a screenshot of my own soon to be launched in about a week new DDA bank homepage. Some things may change between now and then, but I’m just using the screenshot as an example.
Speaker 4: What happens when people come to a website like this? What are they there to do? Are they there to right click and admire the HTML code? No, they’re not there to do that. Are they there to stare for hours on end at the pretty colors in the buttons?
Speaker 4: No, they’re not there to do that. They’re there to advance their lives in some way. They want to learn something new or get something done. And you know how a minute ago I said that my opinion that content is one of the most important things in accessibility?
Speaker 4: I’ll even expand that further to UX in general. I think content is the most important element of any digital experience bar none. You can disagree with me if you want, and that’s fine. But I’m going to illustrate that by doing this.
Speaker 4: Poof. Let’s get rid of all the content on the page. How useful is this? It’s not very useful at all. Now you may be saying, wait a minute, that’s not so true in the world of apps. It’s true in the content -driven web, but not apps.
Speaker 4: Well, let’s look at a consumer app, a popular ride -sharing app. And let’s do the same thing. Boom, content gone. Who’s my driver? What time do I get there? I know this is an extreme way to present it.
Speaker 4: It’s kind of funny, but it just shows in a very extreme way how important content is to UX. I’m going to drive the point home with one other new type of user experience, the smart speaker. There’s no screen.
Speaker 4: There’s no visual user interface to mock up in an app like Sketch. It’s all words, all content. You know that old saying, content is king? I hope this is showing you tonight why that saying is so true.
Speaker 4: And here’s the deal. I want to be really clear. I said it at the beginning. I am not knocking designer code. I’m not knocking designers or developers. I’m not trying to elevate marketers or content. I’m not knocking or elevating anyone.
Speaker 4: I love all of you. I love all of these techniques. We all play a critical role in this. But what I think we need to do is put content at the center of it and try and break down those silos. I’m sure we’ve all seen it.
Speaker 4: Where sometimes there’s some infighting maybe between the design department and marketing and development. Let’s reach across the aisle. Have lunch with our marketing colleagues if we’re in design. And vice versa if you’re in marketing.
Speaker 4: Let’s reach across the aisle and have lunch with our developers. And vice versa, let’s get to know each other. Let’s cross train because the more we can seamlessly integrate content on a foundation of design and code I can guarantee you we’re gonna have quantum leaps forward in user experience.
Speaker 4: There’s gonna be better usability, better ROI and yes, better accessibility. And I’m gonna prove that point through that demo I promised where small content changes lead to major accessibility gains.
Speaker 4: May ask you a question. When you go to a website for the first time, do you read every single word on the page? No, no way. Or the links, because you wanna find out if the page is applicable to you and where you might go next.
Speaker 4: Well, guess what? Screen reader users do the same thing. In fact, they are trained by organizations that support people with disabilities to use their screen reader software through keyboard, key combinations on their keyboard to either view the heading tree or tab through the links on their website so they can skim as well.
Speaker 4: But here’s the problem. We kinda have an epidemic on the web of poorly conceived header and link text. I see it all the time. And I wanna quickly show you some bad examples and how we can quickly with small changes take it to good.
Speaker 4: Let’s start with headings. We often get the heading one at the top of the page, right? It’s kinda hard to get that one wrong. We write good headlines, but then a lot of times people just throw a bunch of, pardon the expression, but word vomit below it.
Speaker 4: It’s just sentences, paragraphs, all of that. Let’s break that up with the different having levels two through six. Give it some hierarchy. And then let’s write those heading level two as well. So instead of just saying step one, step two, you say what the step is.
Speaker 4: If you’re making lasagna, this is a lasagna recipe on a website, step one should be buy all the ingredients. Step two, brown the sausage and ground beef. Do you see how that helps? I know brevity is a virtue, but just small enhancements to the words on the page will do wonders for your screen reader users and the rest of us too.
Speaker 4: Jumping over to links really quickly. Common paradigm on agency websites is to have like clients and testimonials or clients and case studies page. They list the clients and then have a bunch of links at the end after each client says view case study.
Speaker 4: Same with companies selling products online. List the products, buy now link after each product. K -12 school districts, list the signature programs, learn more link after each signature program. You know what five to eight learn more links sounds like to a screen reader user if they’re tabbing through.
Speaker 4: Link, learn more. Link, learn more. Link, learn more. Link, learn more. Link, learn more. Have I annoyed you yet? I bet I have. It’s not only annoying, but it’s really poor accessibility. And the change is so easy.
Speaker 4: All we have to do is take a learn more link and just add the noun in there. Add what we’re learning more about. Put it within the A tag. Learn more about dual language. If it’s a buy now link, don’t just say buy now.
Speaker 4: Say buy now, series five sunglasses. And if it’s a VUK study, don’t just say VUK study, add the name of the client. VUK study. And the one more note I’ll make about this example, I wouldn’t use the word view.
Speaker 4: I would say either go to or read, because view kind of is, so to speak, ableist language. If you are vision impaired, if you’re living with a vision impairment, you literally can’t view it, but you can read it because your screen reader allows you to do that one word just makes it so much more inclusive and friendly to a person living with that disability.
Speaker 4: So you see how these are such small, small changes, but they’re just a huge gain for people using screen readers and the rest of us as well, because we can skim more easily as well. I could go through hundreds of these, but I think I’m already over my time.
Speaker 4: So I just wanna thank you so much for listening tonight. If you’d like to learn more or keep in touch, here’s my different websites. You can read, subscribe, follow me on LinkedIn, whatever you’d like to do.
Speaker 4: Thanks so much, I really appreciate it.
Speaker 1: Awesome, thank you, Dave. That was great. Yeah, something I would want to say on that is it’s important, and I’m probably preaching to the converted here. But accessibility can be pretty daunting when you get started.
Speaker 1: Oh, closer to the. Just getting started with some of the small things, especially for those of you approaching accessibility or carrying the message back home, it can be pretty daunting to try to, as they say, eat the whole elephant.
Speaker 1: It’s important to just get started, because some of the small things you can do to make your site more accessible will be appreciated by so many users. So I just wanted to add that. Our next speaker, the topic here, is going to be UX design, Colorblind Accessibility Solutions.
Speaker 1: John Moran is a UX designer and researcher with over five years experience with product development and design. He obtained his bachelor’s degree from Cornell University, School of Engineering. Welcome to the stage, John.
Speaker 5: Thanks for the introduction, Chris. Appreciate it. I will be using my notes for the presentation, unlike the last one. Let’s see. Thanks, thanks Brent. Hello everyone. I’m John Miron. I’m a UX designer and researcher.
Speaker 5: Most recently I was lead UX architect at a renewable energy software company in San Diego. And the rest of the introduction was true as well. So before I begin my talk today, I just wanna thank everyone for being here and just realize that we’re the ones who are gonna be making the changes with accessibility tools and accessible design and really these talks should be extending past the event today.
Speaker 5: And I should go into your work and even just regular lives. So creating accessibility solutions can be both rewarding and rewarding in knowing that you’re helping others, but also can be financially rewarding, especially with the more common disabilities, which is one of the ones I’m gonna be talking about today.
Speaker 5: And let’s see. So my talk today is on color accessibility in digital and in real life. And I’ll start off by giving a brief outline of my talk today. I’ll give a little background on color disabilities.
Speaker 5: Also talk about how to design for accessibility when it regards to data visualizations, product design and more. And also hopefully if I get to the end of it, I’ll talk about some of the future of color vision accessibility.
Speaker 5: So there are two main types of color deficiency. Difficulty seeing red and green and difficulty seeing blues and yellows. More than 99% of color impaired people are suffering from red, green color vision deficiency.
Speaker 5: So that’s what I’ll be focusing on today. This means not that people can’t see red or green, as many may know, but rather they see varying amounts of red and green when they look at colors. And so this condition presents some obvious challenges for people living with it, but it can also present advantages.
Speaker 5: Like when people with a red, green color deficiency look at camouflage scenes, they may be able to differentiate the contrast a little better because they’re not confused by the presence of all the colors.
Speaker 5: And there’s been some studies on that. So it also can be a good thing. And I’m gonna cross off red, green color blindness here because more accurate definition of it would be red, green color deficiency.
Speaker 5: Because as I was saying, it’s not a full blindness for red or color green, it’s actually just inability to perceive the full redness of a color or the full greenness of a color. It’s all a scale. So how common is it?
Speaker 5: It’s quite common. One out of 12 men have red, green color deficiency. And so that, if you do the math, that turns out to be about 15 million people in the United States. And what is it? 350 million people in the world.
Speaker 5: So it’s a pretty large group. And let’s see. Most of you have probably come across one of these already in your lives. But anyway, maybe you went to the school nurse when you’re in grade school or maybe you saw it from your eye doctor.
Speaker 5: Maybe just show of hands. Who’s seen one of these before? Okay, nice. So yeah, it’s called the Ishihara Color Vision Test. And as many of you know, an individual will be presented with a set of these painted circles.
Speaker 5: A test whether someone has color deficient vision. And it was created by a Japanese ophthalmologist during World War I. He designed the tests and hand -painted each of them. And so for people who have color -deficient vision, there should be number 74 in there.
Speaker 5: And those with normal color vision would already know that. As well as some with certain kinds of color deficiency you might see actually the number 21 there. And so depending on your color vision, you see all these different things.
Speaker 5: And I’ll demonstrate kind of how that looks with this nifty gif on the side, which I found on Wikipedia. That can show what it looks like if you see the number in the image or if you just don’t see anything, it would just be like that.
Speaker 5: So it’s important to know if you’re red -green color deficient, hopefully you know by now. But it’s a good start. Now that we kind of covered the background about what red -green color deficiency is, I’m going to go into how to design for accessibility around it.
Speaker 5: So color selection is all bit more nuanced than one might think. It’s not just red and green that create difficulty when selecting colors. It’s actually the full color spectrum. Because as you know, colors are made with shades of other colors and they combine together.
Speaker 5: So let’s say like looking at the color purple, purple would have hues of red inside of it and also blue. So if someone was red color deficient, they would see less of the red and it would look more something like a blue.
Speaker 5: If the two called, so they could get confused between those purple and blue. And let’s see. Next, I’m going to show a tool that, so this one actually I have to go to it. OK, so this is something that most people who design for accessibility have seen before.
Speaker 5: Raise your hand if you’ve seen a contrast checker. OK, yeah. Yes, so this is a good place to start with picking your colors to make sure that they’re accessible. There’s many tools out there on the web that you can use.
Speaker 5: This is just one that I found. It’s webaim .org. So yeah, that’s basically, as was mentioned before, it’ll check those WCAG and whatnot to tell you if you have enough contrast with your text on the background.
Speaker 5: So yeah, that’s good for that. Another one is a newer mask consumer available tool. It’s for color palette testing where you can just copy and paste all your hex code and put it into the tool. It’ll then build this set of examples of color, of data visualizations, to so you can see what your color palette will look like in use.
Speaker 5: And it’ll also give a determination if there are any color conflicts with the colors that you’ve selected for people that have color deficient vision. This was created by two data visualizations, specialists at Netflix.
Speaker 5: And so they put it on the web for free. And I’m still figuring out exactly how accurate it is. It seems to be, it was helpful for me in past projects, but I wouldn’t rely on it like 100% for your projects.
Speaker 5: Just use it in the mix. And maybe someone knows a tool that they can tell me about, too. That’s better. Yep, let’s see. So, believe it or not, continuing on the topic of data visualization and picking colors, believe it or not, this is a real data visualization that someone made to communicate how the market share of their education software technology in different countries.
Speaker 5: So yeah, it’s just like, way too many colors for even a normal color vision person to see. So if you’re doing data visualizations, I think that the good rule of thumb is maybe six colors at most. Generally is easily done if you need to differentiate colors.
Speaker 5: But if anything more than that, you might want to include something like patterns, which I’m because sometimes you just have to ask yourself, is color really the way to differentiate and communicate the information that you need to communicate?
Speaker 5: So yeah, another technique, besides depending on your color selection, is to add shapes and patterns. So the one on the left is an example from Google Material Design. They have different shapes there for their scatter plot.
Speaker 5: And then the one on the right is another one that I found from Zach Grusser guy. And that one really could help almost anyone. Should be able to see. So let’s see. Yeah, so like was said in one of the past presentations, even if you’ve done all the research and all the thinking, testing with tools to figure out what color palette to use, you’ll still want to test your designs out.
Speaker 5: And it seems like a good place to get that done here. So plug for a blink. And let’s see. Yeah, you’re all aware of the importance of this because half of you are working in this field. So test, test, test.
Speaker 5: And here we go. Some more tools. I’m not going to stay on the slide for long. This is their web browser and computer applications that you can use to simulate different forms of color deficiency. So this is one, no coffee vision simulator.
Speaker 5: Data visualization example. Oh boy, time. Time. Here’s an example of a data visualization that I worked on. I was presented with this. It’s a sand key. It’s really confusing. These arrows show the direction of flow of information or in this case, it’s energy.
Speaker 5: It’s an energy engineering company. So I redesigned it. And so I had to add another color to the color palette. So that started my exploration of what colors should I use. And I used that tool that I showed you earlier from those data visualization guys.
Speaker 5: And I also added patterns. Not only it serves two purposes, you can see the flow of information. You can see the flow of energy here. And you can also differentiate if someone’s color deficient. They’re different arrows.
Speaker 5: They’re not all the same. So that was one example. Here’s some real life examples. I rock climb. Anyone else here rock climb? Hey, cool. Maybe I’ll see you guys at Mesa Rim or wherever you are. And so rock climbing, quick story about what it is, basically, or how you do it.
Speaker 5: You set up, so you follow a specific path to get to the top of the wall. The paths are marked with color. And so you have to be able to differentiate your color path versus the other ones. And so many times it’s confusing as to which ones, which is the specified color route because there’s so many different color markers out there.
Speaker 5: As you can see, there’s a lot of different ones. And so that was a challenge that I faced in my own life. And I decided I’ll cope with the solution in distinguishable colors. Solution to the problem, quite simple, was I got some sticky tag stickers from Daiso and I talked to the, yes, spoke to the gym manager who oversees installation of the rock climbing holds.
Speaker 5: And we just came up with a plan that if there’s any two routes that are indistinguishable, that are close to each other, it’s usually there’s only like two that it, because they’re pretty good otherwise.
Speaker 5: They’ll just put the stickers to mark one route. They’re easy to peel off. They’re, you know, don’t resemble any route markers. They’re small, they’re cheap. So that was a good solution. Here’s another one real quick.
Speaker 5: Anyone seen these before? The curbs, parking curbs here in San Diego. So yeah, this is an issue. When they fade out, even people with good color vision can have a hard time seeing it. And so, yep, out, dang.
Speaker 5: Keep going? Okay. And so, yeah, so how can, the city earns a decent amount of money from these parking tickets, so I’m not sure if there’s a huge push to fixing this problem, I could be wrong. That’s maybe just being a little provocative, but basically how can we incentivize accessibility here?
Speaker 5: Obviously you could, you know, I’m sure people come up with different solutions, but you could repaint them, or just not rely on colors as they do. Maybe use patterns, but let me know if you work for the city and you wanna talk about that.
Speaker 5: And better, okay, so yeah, we should create more tools for people with color vision deficiency. There currently aren’t that many, there currently aren’t that many great tools out there that are widely available.
Speaker 5: You know, there’s apps for phone where you could take a picture of some color, deficient person could take a picture, and then they could use kind of like the eyedropper to check what colors are in the picture, and that kind of works, but not really, because it depends on the light that’s in the room.
Speaker 5: So, and there’s also like Chrome plugins and stuff where you basically just get an eyedropper for your whole computer, or for your Chrome browser. Here, quick thing on Enchroma. Sorry if anyone works here, works for them.
Speaker 5: I’m not sure where they’re based, but there was a lot of misleading product marketing information coming from places like this, not necessarily their direct fault, but just the hype that existed around it.
Speaker 5: So, they used to say like color for the colorblind, but now they’re rebranding to say it’s like, you can experience color, or all these kind of vague things about what they do with color. In reality, it doesn’t let you pass colorblind tests, so take that as what you will.
Speaker 5: Maybe for a very small percentage of colorblind people who could do something, but overall it just changes the way that you’re looking at the colors, could make it more vibrant or something, but it doesn’t make you have color vision.
Speaker 5: And these claims all went viral, which I thought was kind of funny. This guy got like 28 million views, and everyone in the videos are like crying and stuff, and it’s very convincing, but it’s not really true.
Speaker 5: Okay, so, future. Let’s talk about the future real quick with, let’s see. So, I don’t know if some of these things already exist, I’m just not aware of, or if they do, please come to me after the talk and tell me about it.
Speaker 5: Like some sort of Google Glass thing where you can, a color deficient person could identify colors. Just read out the color name after you look at something. And then another one is, we should do more with programming alternative color schemes into websites.
Speaker 5: So, if someone is using an accessibility screen reader or something, you could just have a backup color scheme that they could use. I haven’t heard anything about that, and it seems like kind of an obvious possible solution for it.
Speaker 5: And SVG, what do we do? Yeah, also change the name to color deficiency because it’s much more accurate of a term than color blindness. So, that’s it. Anyone have any questions? Sorry if we’re going long.
Speaker 5: SVG, a scalar vector graphic? Yeah. Yeah. Okay.
Speaker 3: Thank you, John. Last but certainly not least, we have Danielle Tobi. She’s going to be talking about accessibility for people who are blind, understanding who they are and how they interpret your design.
Speaker 3: She is a product designer leading UX Design at Ira, a San Diego startup that services people who are blind and low vision. Take it away, Danielle.
Speaker 6: Hi everyone, I know it’s a little past eight tonight, so I want to thank you for being here and don’t mind me talking a little louder, it’s gonna wake up your senses a little bit. We are gonna do a quick demo.
Speaker 6: How many of you have used voiceover or talk back before on your mobile apps? All right, good number of people. Well, for those of you who haven’t, I have a quick demo, and we’re gonna watch how I interacted with Facebook Messenger on voiceover.
Speaker 7: Messenger. Type a message. Text field. Is editing. Long press to set. Open media. Open camera. Play video. Button. Zero. Fourteen. Button. That’s your story. Open more options. Open camera. Open media.
Speaker 7: Long press. Type a message. Open stickers. Chips. Close stickers. Chips. In camera. Button. Sticker. Sticker. Sticker. Camera. Image. Chips. Tag. Text field. Is editing. Search Chips across apps. Sticker.
Speaker 7: Select emoji. Kavon. A. Prediction. Text field. Is editing. Close composer search. Give. Give. Give.
Speaker 6: voice over off. What do you guys think? Any comments? Would you love to use this, you know, if you were blind? Yeah. What’s something that you guys have noticed, particularly with where the stickers were showing up versus, you know, some of the other stickers, the GIFs versus stickers?
Speaker 6: Anyone? So they were showing up in different places, right? So if I’m like swiping right trying to find the content and suddenly I go to a different, you know, tab and it’s showing up on the top, that’s a little confusing.
Speaker 6: And the share button, you know, it just said button. I don’t know what to do with just the button, right? So I just want to illustrate that and how there was a simple tool that I did. I use Siri. Siri is many things, but at least you can do this, right?
Speaker 6: So click on Siri and you say voice over on, voice over off. If you’re using TalkBack on Google, just use Google Assistant, you know, tell her to turn it on and off. So that’s just an easy way that you can test your app to see if it’s accessible.
Speaker 6: Cool. So as the team has mentioned, my name is Danielle and tonight I’m going to talk a little bit about interaction design and particularly on mobile apps specifically for blind people. And our company is called Ira.
Speaker 6: We are a tech startup up in La Jolla. And what we do is we essentially provide people with who are blind or low vision with visual information and that means that they can open up our app and connect with a live agent.
Speaker 6: For anything like sorting mail or just identifying like medicine bottles or we’ve even had people describe their daughter’s wedding as they’re walking down the aisle. So many moments to capture. How many of you know that the unemployment rate among people who are blind is about 70 %?
Speaker 6: Can I just get a show of hands? All right, not many. So it’s good that I’m sharing this then. Now imagine if these people could not have access to a lot of the products and services that are out there.
Speaker 6: That means that they can’t properly apply for jobs. Let’s say they’re formatting a resume. That means running a business could be difficult without a lot of the tools being accessible. Maybe they can’t take that online class that they’ve always wanted to.
Speaker 6: I’m going to share a really special person to me. His name is Greg and he is our VP of product at Ira. He’s one of my favorite people, funny, intelligent and a mentor to me and he’s also blind. I’d like to share a quote and part of his experience with you.
Speaker 6: It says, for the longest time I’ve had to have a sighted person or Ira helped me deposit checks. It was the first time I’ve been able to do it myself through a banking app. It’s the smallest things that say slightly left, right, up, down to help you align the check.
Speaker 6: It might just be another feature for most others, but to me that meant a lot. We’re so used to not getting access to things that when someone does think of our access, the emotional connection and independence that’s gained is so much more impactful.
Speaker 6: He shared this with me just yesterday and yeah, I just want to share this as a quote. If you’re thinking of why should I care about accessibility? Make no mistake, though, even though he was able to do this and it was accessible enough, maybe it took him a long time.
Speaker 6: Maybe it took a lot of effort. Why is that? Because the first thing I’d like to share is that accessibility doesn’t mean, doesn’t equal to usability. It doesn’t mean that it could have been easier to use.
Speaker 6: And so I’d actually like to show this in a different visualization with accessibility being at the bottom of the pyramid and usability being on top. Why? Because I see accessibility as the basic access to your product or service or content, and it being like a pillar that we should all care about.
Speaker 6: And if you care just a little bit more beyond that about usability, then that’s next further. Something that is usable for my grandmother is not going to be the same as something usable for someone who is younger, blind, or super tech savvy.
Speaker 6: You’re right. The second principle I’d like to share is that accessibility is a very important part of is how people scan information. Now for someone who is cited like most people here in the room, we look at things from whole to part.
Speaker 6: And that means that if you’re on a website and something catches your attention, it’s because you’re able to see the entire page and hone in on something like a banner, that big red thing that says sale, and you’re able to scan from large to small.
Speaker 6: Now someone who’s blind primarily cannot do that. And so they view things as from part to whole. And that means more often than not, they will start at the very top, right? Either a mobile app or a website.
Speaker 6: And that’s why headings matter so much. Where are they starting? Your information architecture matters so much because it tells them exactly where they are and where they can go next. The third principle I’d like to share that I’ve learned is that a lot of people who are blind, they think in a linear sequence because a lot of, for example, voiceover that you saw in the demo is audible, right?
Speaker 6: So if you were to close your eyes and listen to voiceover speak to you, a lot of it is viewed linear. So A, then B, then C, right? And so I’d like to share a project that this is obviously our IR app, but where I failed miserably, so I had designed, redesigned something and I thought it was gonna work.
Speaker 6: I was like, this is it, this makes total sense. And then it kinda just fell flat in my face, which kinda shows why user testing is so important, right? So the feedback, so what I tried to do was I tried to repurpose a segmented control that we already had.
Speaker 6: And what you can see, there’s a segmented control at the top called glass and phone. And this was used in particular to allow you to call either with your phone or your glasses, but I had tried to repurpose it.
Speaker 6: And just so you know, on voiceover, when you listen to this, it says, glass, button, one of one. And then if you swipe over, it’ll say, selected phone, button, two of two. And the reason why it made absolutely no sense to our users was because they saw this as radio buttons.
Speaker 6: They can’t see that the entire screen is changing as you’re flipping through the tabs, right? And so it’s like radio buttons. And so when I tried to repurpose it, it didn’t make sense anymore. And so when you’re thinking of designing things, especially if you have tabs on the bottom, and then you have tabs and tabs, and then you’re having the user try and figure out where the heck you are, that’s something to consider, right?
Speaker 6: And it’s not really just for people who are blind, it’s for anyone who, especially if you can design your call to, main call to action, your main product as simple as possible so that your grandmother could use it, someone low tech could use it, like that’s probably the best rule of thumb.
Speaker 6: Like the main thing that your service is trying to offer. The fourth thing I’d like to share is to make your call to actions easily in reach. And so this was a feature that we had to share, to refer friends, so to sync your contacts and be able to select from multiple contacts and hit invite.
Speaker 6: As you can see, I had an invite button, not only on the bottom here, as a clear call to action for both people with low vision or sighted people, as most apps do, like Uber and Lyft. But I also have one on the top right corner because I don’t want someone who is totally blind to have to sip through hundreds and hundreds of contacts just to find invite friends.
Speaker 6: And not saying that you have to always think of these things, but I think that if you are a company, for example, like DexTom, who services people with diabetes and you’re in healthcare, you have to think of who your primary audience is, right?
Speaker 6: And if you can do it, why not, right? Unless you’re making a trade off for your primary users, let’s say you wanna focus on the millennials and the most tech savvy people without any disabilities. Okay, do that, but just be clear of the trade off that you’re making and be aware, right?
Speaker 6: Who your primary audience is and whether or not you can just make some things as simple as putting it right there on the top right corner so that people who are totally blind can just swipe right and hit that button.
Speaker 6: The fifth thing I’d like to share, this one is gonna get a little interactive. I won’t try and put you on the spot, but maybe I will. Hierarchy of Voice UI, and so this was a feature we had to allow users to search for free locations to use IRA at.
Speaker 6: And so anytime you walked into, for example, San Diego International Airport, you could use our service for free. And so I’m going to take one example. I zoomed in on one of them on the left -hand side there, and it reads from left to right, 10 miles, AT &T, the address, and then 20, meaning 20 locations.
Speaker 6: And so this was trying to solve the issue of having multiple locations with the same name. And so I was trying to group it under 20, for example. So can anyone in the audience tell me how you might order the information from visually and translating that to voiceover audibly?
Speaker 6: Now a hint is, can anyone tell me the most important thing that they would want to know when scanning? Destination, I heard. Destination and then distance you said? Okay, yeah, I think that’s close. This is like visual hierarchy too, right?
Speaker 6: You see that the name of the place is bolded. You’re looking for a place. You must probably want the name of the place first. So what I had here is AT &T, the name of the location, and then I wrote 20 nearby locations because it’s grouped together.
Speaker 6: And then you want to know that the nearest one is 10 miles away on 8657 Vila Jolla Drive. So you want to know how many miles away and then the address, and then the fact that it’s a button. So it says button.
Speaker 6: What do you do with the button? Double tap to see all 20 locations. And so, whether you’re a designer, developer, you can test this very easily and you can even just take your best guess if you don’t have time for user testing to even just think a little bit about how to make scanning easier for people who are blind.
Speaker 6: So we had saw a demo earlier, right, on how a lot of the swiping works on voiceover. And so a lot of it is just flicking, as you had seen, the way I was flicking from left to right. And you can do that easily yourself as well.
Speaker 6: And I would say that’s the most common form of, if someone’s just getting started on voiceover, like if I lost my vision tomorrow, like that’s probably what I would be doing. Obviously there are more advanced methods.
Speaker 6: There are also people who just simply touch the screen in order to find what they’re looking for. So sometimes they might skip through a couple things. So those two are probably the most common methods.
Speaker 6: And then I’ve also seen people read the screen via Siri because they just don’t wanna deal with the whole screen. Yeah, so, and yeah. So we’ve already watched a demo and I have, again, the call to action of just talking to your phone and saying, hey Siri or Google, turn on voiceover, turn on talk back, turn off, off, you know, and encourage you to test your products and services and even as simple as something as your mobile app.
Speaker 6: And I hope that anything I’ve shared tonight has been useful to you and that you could, it could carry forward in your work. Thank you.