Designing for Online Accessibility: Who, What, Why, and How [TRANSCRIPT]
GEORGIA MCGOLDRICK: All right. Thanks, everyone, for joining this webinar entitled “Designing for Online Accessibility– Who, What, Why, and How.” I’m Georgia McGoldrick from 3Play Media, and I’ll be moderating today. I’m joined today by Jamie Lin, an educational technology designer at Zovio. And with that, I’ll hand it off to Jamie, who has a wonderful presentation prepared for us today.
JAMIE LIN: Hi, everybody. And thank you so much for joining me today. And of course, thank you, especially to 3Play for inviting me to speak on this topic. Online accessibility is something that I find more and more interesting the more I learn about it, and I really hope that you will feel similarly after this talk.
So what you see on your screen right now is a link that– oh, sorry. It’s not a link, just the URL that will take you to the visual side of my presentation. And you can’t copy and paste it, unfortunately. Maybe somebody can type it into the chat box. But also, you know, we’re recording this webinar, so when you get the recording, that URL will be there again. It is https://tinyurl.com/JamieLin-accessibility. And in addition to what we’re going to talk about today, this course that this URL links to has a resources section that links out to all sorts of information from accessibility experts like 3Play, Level Access, WebAIM, and others.
So I’m going to start off just very briefly with a little bit about myself and how I’m approaching this topic. So I am an information professional, a librarian, and I’m also a multimedia designer in the world of online higher education. I make videos and images, interactive things– basically using technology to present learning concepts.
And I approach this from a user-design perspective. So who am I designing for? What do I need to do to make this kind of learning as easy and fun as possible? So I approach my work both as a researcher and a librarian, someone who’s motivated by wanting to understand things– like, why they are the way they are– to get information from lots of different sources and then create from that information a cohesive story.
I’m also, as an edtech designer, a practitioner. So I make products in the form of learning modules, and these need to be accessible. So over the past, you know, couple of years as I have been researching and practicing this, I started to understand that accessibility is something so much more than ensuring products and services meet the needs of those with disabilities.
So I talk about accessibility now from several different perspectives, which I’ll share with you today. And hopefully after this session, you will also feel that you can talk to anyone about this, from your neighbor or to your provost or your CEO, and be able to frame accessibility in a way that resonates with them and gets their attention. So let’s call this, you know, a user-centered understanding of accessibility.
So this course is who, what, why, and how about designing for online accessibility. We’re actually going to start with what, because it’s useful to begin with some definitions. So what is accessibility? You know, it means many different things in different contexts. And even when viewed solely from that lens of disability, it means anything from crosswalks that announce street names and count down time to what we’re talking about today, which is online accessibility– the accessible design of our computers and screens and internet, and how we interact with and use these tools.
So it’s 2019, and when we want to know something, we either Google it or we ask Siri. And I like to say, yes, I’m a librarian, and yes, I go to Google right away. And I also like to, you know, search Google using natural language queries like, what is accessibility? So if we examine some of the definitions, the first is Adobe’s– software and services. I use many of their products in my work.
So I’ll just read this definition for you. “Accessibility involves two key issues– how users with disabilities access electronic information and how web content designers and developers enable web pages to function with assistive devices used by individuals with disabilities.” So already, we’re seeing a definition about web pages and web access as defined by disability.
And it goes on to say, “For the user with a disability, the challenge is to identify tools that provide the most convenient access to web-based and other electronic information. And for the web content designer/developer, the challenge is to remove the obstacles that prevent accessibility tools from functioning effectively.” And I really love the language here– the challenge and the obstacle– because there are many challenges and many obstacles.
And you know, it really comes down to this. Much of the user interface side of the internet that we are familiar with today has not, until very recently, been designed with accessibility in mind. This means that our existing software and platforms have to retroactively be made accessible. The structure’s already been built. Accessibility is then added in usually because of requirements– so as an afterthought. And of course, these requirements themselves continue to evolve and change.
So let’s think a little bit about what’s involved in this at this retroactive design– the time, the effort, the attitude. I have an analogy, and unfortunately, it’s not a true story. But let’s just say I built my dream house. It’s done. It’s beautiful. It’s finished. Unfortunately, I just found out that my tub won’t fit through any of the doors, because it’s, in my fantasy, an antique clawfoot tub.
So now I need to go back and widen all the doorways so that I can get my tub in the door. So I probably could just do without the tub, except I consider it a requirement, and I have to have it. So yes, maybe I should have built the bathroom with the tub in mind from the beginning. And this is exactly the core principle of accessible design– building it in from the beginning.
OK. So let’s move on. The second definition from the IRS website is concerned with the law. And this one reads, “Section 508 of the Rehabilitation Act, as amended in 1998, is a Federal mandate that requires that all Federal agencies make information technology accessible to people with disabilities. It requires that we at the IRS develop, procure, and maintain electronic and information technology so that it is accessible to people with disabilities, including both our own employees and members of the public.”
So you can tell from the language here that this is legal stuff. You know, it requires this. It’s a mandate. This is a law. And we’ll talk– we won’t focus too much on this side, but there is more information on the legal side of this– of accessibility– in this course.
OK. So then the next definition is from the design world– the Interactive Design Foundation. And it’s a larger screenshot, so it’s a little harder to see. I’m going to control plus my screen– hang on– so that you can see that a little bit better. “Accessibility is the ability to access– that is, use and/or interact with– a product or service. In the design context, accessibility means that a product or service should be able to be used by everyone regardless of a person’s physical, economic, or cultural status. Studies have shown that accessible design benefits not only users with disabilities, but everyone.”
So this definition expands beyond the idea of a disability and brings in physical, conceptual, economic, and cultural elements, too. The idea that something should be able to be used by everyone is called universal design, of which accessible design is very closely related to. This definition goes on to differentiate between usability and accessibility.
It says here, like, “When a product has poor usability, the user will experience increased effort or encounter barriers during use.” So that’s usability issues. “However, when a product is inaccessible, people are excluded from using it altogether, because they cannot interact with it for various reasons.”
So you might even argue that if you design something that is not accessible, you are further disabling someone who may already have a disability. You’re perpetuating the problem of exclusion and lack of access. And you know, from a design standpoint, why would you do that? OK, control zero resets my screen.
I like this quote from an accessibility blog. “Accessibility is both a process and a philosophy. While our goal is ‘accessibility’– equivalence for end users– we do this by implementing ‘accessibility’– techniques and code. For those of us in the accessibility field, I think it’s important to consider these different meanings and to be careful with how we present them.” And that’s Jared Smith from the WebAIM blog.
So there’s the how. Accessibility is a process– how we create things that are accessible to all– and a philosophy– the why it’s important to do this. And I will talk quite a bit about the why and a little bit at the end about how. A note here just saying, so what we’re talking about today is about online accessibility and nothing related to physical space design, which I know absolutely nothing about.
One more thing. A prediction! So I think that you will be hearing, starting now, or probably before now, you’ll be hearing these terms– accessible, accessible design, accessibility. You’ll hear it a lot. And then one day, maybe 10 years from now, though it’s actually– I should say eight years from now, because I originally made this course about two years ago, and so that was 10 years ago. So eight years from now, you’ll stop hearing it. Why do I predict that? Think about that as we continue along.
OK. Why care about accessibility? So again, I’m a researcher. I look up things like statistics, reports, surveys, articles, census data. And I try and use that information to create a picture. There are other issues, such as cognitive or motor disabilities, to consider when thinking of accessibility and accessible design. But my examples today will be on hearing and vision.
So when talking about blindness or deafness, we see a lot of small numbers. According to the National Federation of the Blind, only 2.4% of US adults and 0.8% of children are blind or legally blind. And that legal definition is a vision of 20/200 or greater that cannot be corrected.
And as for hearing, you know, only 1 out of 1,000 babies are born completely deaf, but the percentage goes up a little bit when we expand that to functionally deaf, and that means hearing loss of greater than 40 decibels in the better performing ear. And a total of 3.8% of the entire US population is deaf or functionally deaf. And obviously, these numbers get higher the older that we get as well.
And so numbers sometimes don’t really mean anything. So I was thinking about these numbers earlier today and what I could compare it to just to give you an idea. So when you think about all the Asian people who live in the United States, that’s 5.5% of the US population. If you think about all the Muslim people in the United States, that’s 1.1% of the US population. So these are the numbers that we’re working with here.
So what these statistics don’t take into consideration are the numbers of people who struggle with vision or hearing loss to the point that it impacts their everyday lives. But they may not think of these struggles as a disability. Like we probably all know an older person who doesn’t hear very well and just sort of smiles and nods rather than admit that they can’t hear very well.
So what we see when we become more inclusive in our definitions is that the numbers become much higher. These figures are self-reported percentages from the 2016 National Health Interview Survey from the National Center for Health Statistics. 10% low vision or blindness, 14% hard of hearing or deaf. And you might be able to hear my cat. She likes to join me whenever she hears me talking. So that is the meowing, if you hear it in the background.
Anyway, so these numbers get higher the older a person gets. We will all grow old, and increasingly larger numbers. So according to census data, the 65 years old and older category will grow significantly from 2020 to 2060. This chart is from a website called agingstats.gov, and it depicts the shift in age of the country’s population.
So the point of all of this is to demonstrate that thinking of accessibility solely in terms of legal disability is very narrow. Accessible design is crucial to that small percentage who absolutely depend on it, but it’s incredibly useful for the 24% of the US population who indicate that they struggle with vision or hearing loss.
And you know, it’s also helpful for the rest of the population– for all of us. I’m sure many of you appreciate when the videos in your Facebook feed are captioned so that you don’t have to turn on the audio. So perhaps we can stop thinking about accessibility as something solely related to disability.
But who are we actually designing for? You know, these numbers represent actual people. And we think of us and them. It’s other people, nameless people, faceless people– no one we know or interact with daily. So I’d like to share a story here. This is Miranda. She’s the daughter of a friend of mine from college.
In this photo, she’s a happy and healthy 8-year-old, and she’s holding her new cane, which she has named Merida, which I think is a very clever name. And you can probably guess, based on the sign that says, “Caution– blind person in area,” that Miranda has a visual impairment. What I’m going to do now is play three short videos of Miranda and her mother, and have them share with you a little bit about their story. It’s a total of about three minutes long.
And if your internet is slow, you might experience a streaming issue. But remember, you can always revisit this course later and watch them again. One more thing I do want to say is that this was the first time I recorded and used Zoom– or, used video for Zoom. And I had my settings to record only the active speaker. So you can actually change those settings to record all participants.
Those of you who ever record Zoom meetings, please go to your settings and Record All Participants. Otherwise, your video becomes whoever is making the most noise on screen. So I did do some fancy editing to edit myself out, but I do end up appearing in this video for a little bit. OK. So at this point, I will play these videos for you.
MIRANDA: I’m Miranda. I’m seven. I don’t really know what I want to be when I grow up yet. I really like gym.
JAMIE LIN: What about gym?
MIRANDA: I get to do running and stuff, and that’s fun.
JAMIE LIN: Are you a good runner?
MIRANDA: Mm, kind of.
JAMIE LIN: Are you a fast runner, or somebody who can run for a very long time?
[? SARAH: ?] She’s gone. I’ll tell you. Cancer and blindness suck.
MIRANDA: When we’re doing math, I can’t really see the board. I’m kind of shy.
JAMIE LIN: So what do you do when you can’t see the board?
MIRANDA: Sometimes I– I just [INAUDIBLE]
[? SARAH: ?] What? You ask your friends for help?
MIRANDA: Yes, sometimes. Sometimes I can’t see things. They write it on a piece of paper. Then they give it to me.
JAMIE LIN: And then do you use your little mobile device–
JAMIE LIN: –to scan what they write to you? That’s very neat. Hopefully, in the future, maybe when you’re in high school, you know, there would be a way where you would be on your computer, and you could press a button and the computer would read you every single number so that you could hear it, and then write it down, and do it that way.
JAMIE LIN: As you get older, you’ll probably be learning different ways of doing that so that you’ll be taking all the same math classes and learning everything, even if you can’t see what’s being written on the board.
[? SARAH: ?] So everything was fine. Miranda was a happy little 3-year-old girl. One month after her third birthday, she started peeing blood. We took her for, you know, a kidney specialist. And they told us it was Wilms tumor kidney cancer. Five days later, she had one of her kidneys removed.
She had a medic port installed in her chest, which is like a button so they can plug in the chemo and the IV so they don’t have to do your arms, which is more painful. We had 10 in-patient hospitalizations, four surgeries, 36 rounds of chemotherapy, and then 10 bouts of radiation.
For a period of about two years, she probably was never more than 18 inches from one of her parents. She didn’t want to touch the ground. She didn’t want to talk to people. She never made eye contact. And we thought that was because she was afraid. But when we got her glasses, and we got her glasses, again, the glasses didn’t help her. We had to go for an MRI of her brain. And when they did the MRI, they discovered that her optic nerve was not getting enough blood.
And I was like, OK. Well, give it some blood! [LAUGHS] But apparently, that’s not how it works. Your optic nerve is at the base of your brain, and then it goes to both eyes. And once you don’t get enough blood, you can’t get it back. I cried like a big dog when we found out, but organs have gone missing, a lot of the other children died. We’re happy for what we can get, and we’re grateful.
JAMIE LIN: OK. So I find Miranda’s story incredibly moving, especially because of parallels to my own life. You know, you may remember this kid. The screen grab from the first video shows my son video bombing the interview. He is the same age as Miranda. These videos were recorded almost two years ago, so they were in first grade at the time. And they both just started third grade a few weeks ago.
They’re both vivacious kids. They’re both biracial. I already shared that [? Sara ?] and I went to college together. She’s a teacher. I’m a librarian. There are enough similarities here that I don’t even need to– you know, it’s very easy for me to imagine this scenario being mine. And perhaps you have children, or nieces or nephews, and it just– you know, this is something that could happen to anyone.
So I always assume– you know, my child did not suffer through cancer and cancer treatment. His vision’s fine. I always assume that he’s going to go and graduate from college, and perhaps even get an advanced degree. Will Miranda have the same access to educational and learning opportunities as my son? So in these pictures, Miranda is showing her binocular lenses that she uses to watch performances. And her CCTV, which she puts her homework under, and it magnifies it so she can see what she’s doing.
This is 2015 data that shows the percentage of US adults with bachelor’s degrees– 33% for those who indicate no disability. And the percentage drops by more than half for those with hearing or visual impairments– 18% for hearing impaired, 15% for visually impaired. And Miranda has a supportive family. They’re actively involved in making sure that she does have equal opportunities.
But she’ll also be receiving a lot of messages, both directly and indirectly, from society, relatives, teachers, peers, acquaintances, strangers, throughout her life about what she can and cannot do. So all of that is tough enough to navigate and build resilience to without having to struggle with inaccessible technology and inaccessible educational material.
So I mentioned previously that I work in online higher education. There’s a shift occurring also, you know, in how we are receiving our college education. So between 2016 and 2017, the percentage of students taking all or some online courses– that grew by 10 and 1/2%.
And in that same time period, the number of students taking only in-person courses shrank by 3.31%. So for me, this means it’s critical to ensure that online educational materials are fully accessible in order to provide that equal educational opportunity in our online world. So this is a world we do so much in already, and we’ll continue to do more.
I see it as my responsibility to make sure that Miranda doesn’t have to additionally struggle with, for instance, a silent video with lots of information that appears only through text, or a website that you have to hover your mouse over little sections in order to reveal more tiny text, or a poster with very similar colors in the text and the background. We call this a low color contrast ratio. So I’ll go over a little bit more about these things and offer a few tips for what you can do and consider when you create documents or send email in a few more minutes.
So how, then, should we talk about accessibility? I found that there are four compelling perspectives in which to frame this topic– compassionately, legally, technologically, and egocentrically. So compassionately is really what I’ve been highlighting so far. This is the right thing to do– argument. That emotional argument, the social justice perspective.
Unfortunately, it’s not the most effective position to take if you’re in the business world– the land of profit and ROIs, which, of course, is business speak for return on investment. So this compassionate perspective is about equal access to information, to education, to opportunity, and to inclusion in our increasingly digital society.
Another way to talk about this subject is within the legal sphere– that fear of lawsuits. Website accessibility falls under the Americans with Disabilities Act. That’s ADA of 1990, especially Title II, Public Entities, and Title III, Public Accommodation. There’s also something called Section 508, which dates from the civil rights era and requires accessible technology for individuals with disabilities.
There’s a section of this course that traces that legal landscape in education over the past few years. And so you can visit that later. But from this image that you can see, the number of Title III lawsuits from 2013 to 2018 has been a shockingly steep upward trend from 2,722 in 2013 to over 10,000 last year. And the numbers for the first half of this year, 2019, are even larger– 12% increase from the same time over last year.
So basically, a lot of lawsuits are occurring. In fact, you know, no one’s safe. Even Beyoncé was sued earlier this year by a blind fan who wanted to but could not interact with her website. Additionally, I came across this article really recently, and I’ve embedded– so these are embedded links, by the way, to the articles.
So this current controversy is whether audiobooks should be captioned. Audible wants to add captions, and their argument is that younger readers– if they have the option to view timed captions, it makes listening a literacy tool. And obviously, if you can imagine, some publishers really strongly disagree with this, and it will probably go to the courts. I am not a lawyer, but I do think that there is merit to this need for captions argument. So that is something that I am interested in seeing what will happen.
OK. My favorite way to frame accessibility is as part of 21st century technology. So there’s several things going on. Do you remember when the iPhone came out in 2007? It changed everything, including accessibility. In recent years, we’ve been witnessing a distinct shift in the way we interact with our smart devices. We’re talking to our machines, and they’re talking back.
Gartner is a well-known and respected research firm, and it predicts that 30% of all online searches in 2020– that’s next year– will use voice interactions. And in fact, when I was looking up these numbers, I found one that was even higher– 50% of all online searches. But I decided to go with Gartner.
Anyway, so basically, early text to speech software was accessibility software. JAWS was the leading desktop screen-reader. Now there’s open source NVDA, giving it some competition. This is something anyone can download and put onto their computer for free– not to be confused with Nvidia, the graphics processing unit company. But most notable is Apple VoiceOver, IPhone’s built-in screen-reader. It’s built into all Apple products.
This is a young woman named Molly Burke who has a very fun YouTube channel. She’s blind, and her videos are fascinating and entertaining. And if you watch a few, you’ll quickly realize that she’s more able than most people. And I’m doing air quotes over the word able, but of course, you can’t see me since I’m not on video.
But in this video, she’s demonstrating how she uses VoiceOver. We won’t watch it now, but I do highly recommend that you go back and watch it, especially if you’ve never heard what a screen-reader sounds like. If you’ve ever tried to use JAWS or NVDA, you will notice that the user experience leaves very much to be desired.
So Molly says at the end of this video, “What took me a year to learn on JAWS took me a weekend to learn on VoiceOver.” And I think that as adoption of text to speech and speech to text interactions becomes more popular and really leaves that realm of quote unquote, “disability,” we will find that the user experience becomes quite good.
And this is another example of how everyone benefits from accessible design. And also, once accessible design really becomes part of that status quo of design– or, it will become part of the status quo, because it’s just smart design. So what’s happening now with technology in our society is that we’re shifting from interacting with our machines through the use of a mouse, a keyboard, and a touch screen, to interacting with them more and more through voice commands.
This is just an app developed by Microsoft. I don’t want to seem like I’m plugging Apple, so Microsoft here. So this is a cool video you can look at later. It’s an app that audio describes everything the camera on your phone sees. So I think it’s just a very interesting example of what’s being developed.
By the way, this is one of the things that I really love about 3Play, too. You know, we know it as a captioning company. I like to think of it as a cutting edge speech recognition technology company. I think that we will see some very cool things coming out of 3Play’s research.
So I like to think, also, of the machine as another type of user. How does a machine read and understand a graphic image? The answer is alt-text, a common accessibility practice. And so how does a machine read, for instance, a poster like this? You know, it has images and text, but in a design with, you know, wavy lines, circle lines– in this case, 3D.
And the answer is a combination of reading order, which is another common accessibility practice, and alt-text. So if you want your online image or poster to be able to be understood by a machine so that it can be indexed, and therefore show up in searches, you had better make it accessible.
The big companies– the big tech companies– really understand now that accessibility is both good PR and provides the data needed for the future of machine learning. Some products, like Microsoft’s new Edge browser, have been designed with accessibility in mind from the beginning. So you’ll see here that it’s ranked 100% accessible compared to other browsers.
My dad, who is 70, was so excited when he discovered that the Edge browser would read web pages out loud to him. He doesn’t have a disability. He’s just getting older, and he loves new technologies that make his life easier. As a designer, I see accessibility as just good design practice to create products and services that make life easier for everyone.
So here’s a photo of Miranda’s grandfather, and he’s demonstrating her mobile magnification device that she uses at school. So we’re looking at a piece of technology designed for people with visual impairments, which might, in its next form, become something wearable, like this pair of smart glasses. This, in turn– the next iteration of it– may be further developed and marketed toward all users to help us manage our increasingly busy schedules. So this is what I love about accessibility framed in the technology perspective.
So finally, egocentrically, it’s really all about you, right? We will all grow old. Think about how you want technology to support you as your body begins to fail. So accessible design is about ease of use for everyone, but it is vitally important to some people. One day, you will be in that some category.
There is no other in that big picture of things. And so under egocentrically, I figured I’d put a quote from me. “Designing for accessibility does not mean designing for disability. It’s about inclusively– making it better for everyone. It’s just good design practice!” So that is how I view accessibility.
OK. So hopefully, by now, I hope you’re realizing this topic is really complex and interesting and important, and you’re on board, and you’re like, OK. Tell me what to do, Jamie. You know, I want to make everything I do accessible now. What do I do? So here are some quick tips for non-designers so that your communications and documents are accessible. And they’re not listed in any particular order, but I’m starting with this one.
Use a color contrast checker. Here’s a screenshot of a real email that I recently received. And I can’t read it at all, and I’m sure you can’t, either. And so what I actually think happened was that it was designed with a white background, and then at the very end, somebody probably said, oh, well, let’s just– let’s throw a blue background so it’ll stand out a little bit better, and then made it completely unreadable. So, yeah. So don’t do that.
And WebAIM’s contrast checker is really good. I’m going to actually demonstrate it real quickly to you. OK. So you’ll see here a foreground color and a background color. And I’m going to change the background color to the dark blue that I’ve used on this course. And so that is– what is it, 002C5F. All right. So that’s that dark blue from my course. And you’ll see immediately it says color contrast ratio 1.6:1– fail. According to WCAG, Web Content Accessibility Guidelines, fail, fail, fail, fail, fail.
And I can actually read it. But according to these accessibility guidelines, it needs to have a higher contrast ratio. So what I’m going to do then is play with the text color and see at what point do I get passes everywhere? OK. Here we go. So it’s sort of a light blue color. That’s where we finally see a good contrast ratio. And you know, in my mind, I’m like, well, you might as well just make it white. And it really stands out much better. So that’s an example of a contrast checker.
Next, use Microsoft Word’s Styles window to organize your documents. And that is this ribbon right here at the top of your document. And I do have an example here where what you could do is you take your top line– and that’s the title. We’ve got Star Wars here, and I’ll make that Heading 1.
And you can change the way this looks. You can always, you know, redesign– you can make it whatever you want it to look like. But what it has done when you use this window up here is it codes the back end of this document so that if you publish it as a web page or a PDF, it makes it more accessible to screen-readers, because it will identify these styles– these headings.
For instance, the Heading 1 is tappable. So somebody who is using their keyboard to navigate– I’m going to go back and also, you know, do Empire Strikes Back, and do this Heading 1– they can jump from– they don’t have to scan through all of this text. They can jump from one paragraph to the next using these styles, and using these headers. So this is something you can easily do. And again, remember, you don’t have to keep that default design that shows up. You can make it look like whatever you want it to.
And well, let’s stick with Microsoft Word for a bit. Run that Accessibility Checker in Microsoft products and Adobe products, and make all corrections as needed. And you can find that here in the Review tab, and check Accessibility. And I’m using Microsoft, I think, 2013. It’s going to be a little bit different depending on which version you have. But the accessibility feature will be there.
And for those of you who have tried using it, and you’ve looked at what it’s told you, and you’re like, OK. I can’t make heads or tails sense of this– you know, it isn’t easy. These are still the very early days of accessibility being integrated into the design of a product from the beginning. So each generation of software will improve and will get easier.
Right now, it can be a very manual, time intensive process. But you know what? Take that 10 minutes to Google it, to just do a little bit of– Microsoft’s Accessibility Checker is really good in providing you links to learn a little bit more. And just take a few minutes to learn and see what it is that it’s telling you it would like you to change.
OK. Alt-text your images. If they are decorative, mark them as such so they become invisible to screen-readers. Sometimes you’ll have a button that says, Mark as Decorative. Sometimes you’ll need to add the open quote end quote– the null quote– to have that skip over an image. But usually, if you right click on an image, you’ll be given an option to alt-text.
This is just a screenshot example. I right-clicked on a picture, and then that Format Picture option shows up, which opens the Format Picture menu on the right hand side. And the third icon in from the left that looks like a cross, kind of, has that text box and alt-text options. Also, by the way, so when you are alt-texting, only alt-text the meaning that you’re trying to get across.
For instance, this picture, the alt-text– and if I hover over this, it’ll show up– when right-clicking a picture, select Format Picture. This opens a window on the right. Select the third button to create alternate text. That’s what I said for this picture. And I don’t need to say, Microsoft Word appearing with blue top border and picture of cartoon lady saying, “Why can’t I just watch a video of this?” Because none of that is relevant information to the point that I’m trying to get across.
Think about how a screen-reader reads content– scanning from top left to bottom right really quickly. So put the important stuff first. And this is also just really good design practice. When I was writing this, I instantly thought about those infomercial websites that just do that endless scroll. And luckily, of course, I found one in my email box the next day.
So here’s an example of what not to do. And maybe this will look immediately familiar to you. Yeah, these are the website infomercials. And you see, it just scrolls on forever. Imagine trying to read this with a screen-reader and you’re just going and you’re going, and you don’t know when it’s going to end. Like, we don’t know when it’s going to end either, but you know, we can always just jump to the very end. And of course, oh, yeah. They want us to click and buy something.
But even to get there, there’s suddenly a page of references, which, you know, if you’re reading a screen-reader, you’d have to get through that as well. So putting the most important content that you want first is really great design practice, and in addition, you know, as I was mentioning before about those headers, adding headers to denote sections of your documents so that somebody can use the Tab key to actually navigate through and do that screen-reading equivalent of scanning.
Another example is you get an email that’s just full of text. And you’re scanning, and you’re like, this doesn’t make any sense to me. And you just keep reading, and you keep reading, and you keep reading. And then at the very end, you see, oh. This is text from forcemipsum.com, a Star Wars themed dummy-text generator.
Well, you could have told me that at the very beginning. You could have put that at the very beginning of the document so then I would know that the rest of it was dummy text. That’s one more example of what I mean by just put the most important information that you want people to know right away.
Hyperlinks are keyboard navigable. Make sure the link names are clear and provide context for someone who has tabbed to the link. So again, somebody who’s using their keyboard to navigate can jump through your text, through your headings, and also through links. And the screen-reader will announce that it is a link.
So here’s an example. My colleague Michelle made this for a training. I’ve actually included her entire PowerPoint in the resources section, because it’s quite good, and it goes into more detail of the whole, how I can do different things much more than I can cover right now. So that is available to you in the resources section.
But her example here is, click here to learn how to make a thesis statement. So if you’re using clear, contextual words for your links, you would change that to be, “Use the Thesis Generator.” If somebody’s tabbing through– you know, tab, tab, tab– and then they hear, “link here,” they don’t know what it is.
They’ll have to back up and figure out what they’re– you know, what is that link, anyway? If they’re clicking through, and it says, “link Thesis Generator,” immediately, they know, oh, this link is going to take me to the Thesis Generator so I can learn how to make a thesis statement.
Caption all videos and include a transcript. Now, YouTube– YouTube’s Creator Studio has an option to manually type in captions or upload a caption file. They’re in the process right now of creating the Beta Studio. It’s a little bit different, and I got quite lost trying to get to this part. So of course, I filled out their little form– like, what’s wrong? I said, I can’t get to the subtitles closed captioning section.
So for sure, the alpha version– or, the final version– of their new studio will have this feature as well. Right now, it’s in the Creator Studio. And what I mean by being able to manually type it in is that it very easily just gives you a timed sort of area where you type in whatever somebody’s saying and then move on to the next one.
OK. So don’t change or add important information in only a visual format. Do people listening receive the same information as those watching? And what I really mean by this is– this is also just a good design principle. You don’t want to add any information that somebody who’s looking at a video or an image is getting a totally different, you know, experience than somebody who’s only listening to this.
So if, by chance, you are listening to this talk right now on the phone, and you haven’t been looking at any of the visuals, on the screen is a Star Wars meme of when Darth Vader tells Luke that he’s his father, except it says, “But is it accessible?” “Noooooo!” And that is also– I don’t know. I guess I think it’s really funny just because I hear that a lot [LAUGHS] in my work.
OK. So it’s 11:45, and I have actually reached the end of the portion that I’ll share with you live today. Again, there’s this course here that I’ve made for you– definitions, resources, how to respond to some common excuses. There’s an accessibility in education legal timeline, some of the websites that I got my statistical data from, and a few articles that I’ve written that go into a little bit more depth. And so at this point, I think I’ll turn it back over to Georgia to start with the questions.
GEORGIA MCGOLDRICK: Perfect. Thanks so much, Jamie, for that presentation. Now, I’ll get ready to start the Q&A. I just want to give a moment or two for any more questions to come through.
JAMIE LIN: Cool. I also want to say, guys, that if you’re in the Boston area or the East Coast, next week, 3Play is having their conference called ACCESS. And I really wish I could be there. So if any of you are nearby, definitely check that out. And you guys might talk about that later, too, but–
GEORGIA MCGOLDRICK: Thanks, Jamie, for the shoutout. We appreciate it. We’ll type in the chat box here a registration link for ACCESS in case anyone happens to be in the area in Boston next week. It is next Thursday, October 3. We’ll have a bunch of different sessions and workshops. Also, we will have Lainey Feingold, CJ Jones, also some sessions on Adobe, HubSpot, Wistia, also networking opportunities as well as food, swag, and a happy hour. So we invite everyone to attend, if you can. We’d love to see you there.
JAMIE LIN: Sounds like a great party.
GEORGIA MCGOLDRICK: Yeah, it will be. [LAUGHS] All right. Just a few more questions coming in.
JAMIE LIN: I will do my best, guys.
GEORGIA MCGOLDRICK: All right. So we’ll get started. Someone asked if you could discuss your thoughts on the accessibility of Storyline and Rise for creating courses.
JAMIE LIN: Yes. And I do use Storyline a lot. This particular software is Rise, and I’m actually going to start with Rise, because this is a great question. Thank you. So this software is unfortunately– and it’s ironic, you know, that I’m giving this talk. It is not fully accessible. And the reason why I’m still using this particular software for this is– well, part of it is I didn’t really have time to redo the entire course.
But two years ago, which is when I started creating this course, I started experimenting with this particular software and really liked the way it looked, and then realized that it was not fully screen-reader compatible. It is keyboard navigable. They’re still working on the screen-reader side of it.
And I really think this demonstrates just where we are right now in terms of software accessibility. Every single iteration will improve. I have a feeling Rise is going to be the very last product that comes out from Articulate that is not fully accessible from the beginning. So this is just an example of where we’re at right now.
And I think if you’re scanning this note while I’m speaking, you know, there’s so much lost business when you think about any institution that follows Section 508. So that’s any Federal-funded entity. So all public schools cannot use this software, cannot use Articulate Rise until it is fully accessible.
So think about, from the company’s perspective, how much money they’re losing in terms of potential clients, how much they have to invest in terms of time and resources for their engineers to make this program retroactively accessible. And so that’s kind of my point for continuing to use it for this particular one. I think if I give this talk again, I will probably need to switch it to something else.
I did recently talk to an engineer there, and they said that they couldn’t give me a concrete date on when Rise would be fully accessible, but that it was a priority, and they were working on it. Storyline is another one of their products, which, starting with Storyline 3 and 360, is fully accessible. There are still a few things that manually need to happen in order to make it fully so. And those are– I mean, that’s another hour long talk in itself. Did I answer that question? If there’s a follow up, please type that in.
GEORGIA MCGOLDRICK: Yeah, we’ll make sure to track any follow ups on that. Thanks, Jamie. Another question here. I believe you touched on this a little bit with Word documents. But do you have any resources or know of any guidelines that outline how to make Word or PDF files accessible and ADA compliant?
JAMIE LIN: Yes. So– here, let me see where are my resources. In my resources section, there is a link to Microsoft’s Accessibility video training. So they do little videos that show different tips for all the different products. Adobe PDF is a little different. I think the last time I looked at their trainings, they were more text web pages– websites. And they didn’t really go through too much. For me, I learned how to make Adobe PDFs accessible through trial and error. And it does take some time. And again, you know, I could do a training on making an Adobe PDF accessible, and that would also take probably a full hour.
GEORGIA MCGOLDRICK: Great. Next question here– what are your tips if we’re just beginning to make our content accessible, and we have a backlog?
JAMIE LIN: Oh. [LAUGHS] Yeah. You know, I think the most common excuse is that we just don’t have time. We have so much going on. And for sure, I would say make sure videos are captioned, pictures are alt-texted. You know, I do have– let’s see, what is it– a few, like, top 10 tips on how to make something accessible. Where is it?
But these aren’t necessarily in order of, you know, if you only have a certain amount of time, what should you do? It really is just ensuring that when you’re designing something, that you’re thinking about it from a perspective of not just who’s looking at it, but think about how people are going to be interacting with it.
Think about all the different possible ways somebody’s going to be interacting with it. And if there’s something that jumps out at you as, like, oh, that might be a problem, then address that. So part of it, too, is just, like, you know, oh, well, there’s this picture here that says some information that we don’t talk about later. So maybe we should include that in the text or in the narration, or something like that.
GEORGIA MCGOLDRICK: All right. Do color contrast checkers take into account color blindness issues?
JAMIE LIN: They do. I think.
GEORGIA MCGOLDRICK: Awesome
JAMIE LIN: I don’t know. I think so. [LAUGHS]
GEORGIA MCGOLDRICK: Another question here– you mentioned the word “programmatically.” Could you speak to what that means?
JAMIE LIN: I don’t remember where I used the word “programmatically” and in what context.
GEORGIA MCGOLDRICK: OK. We can see if there’s any follow up on that specifically to what the context was there.
JAMIE LIN: Yeah, that’s not ringing a bell. I’m sorry.
GEORGIA MCGOLDRICK: No worries. If anyone has a follow up to that, feel free to post it in the Q&A section, and we will address it as it comes through. Do you have some recommendations or resources in how we can design art museums or public spaces in a more accessible way?
JAMIE LIN: Oh, I wish that I knew things about physical space design. [LAUGHS] That is really out of my area of expertise. Yeah, I’m stuck on the screen. [LAUGHS] It’s a different– that’s a different side of accessible design, and I would love to– you know, if I could find a webinar or some instruction about that, I would definitely love to join in on that, too.
GEORGIA MCGOLDRICK: Yeah, no worries. Another question here– in your example, how would you caption the picture of the woman on the couch?
JAMIE LIN: Oh, yeah. Let’s go back to this. So where was that? So if I was trying to alt-text this image of the woman on the couch saying, “Why can’t I watch a video of this?” I would first think about the context that I’m including this picture in. So this was actually created to announce that we had videos for counseling on the topic of counseling subjects.
And so I would probably alt-text it saying, you know, “Woman– why can’t I just watch a video of this?” And then the text that’s next to it would say, “We now have videos on the subject of counseling.” It’s not necessary to describe what we’re seeing, really, except for the message that we’re trying to get across. And so really, that picture probably wouldn’t need to be alt-texted, because it’s not really adding anything to that message of, we finally now have videos for counseling. So really, again, it depends on how you’re using that image.
GEORGIA MCGOLDRICK: Awesome. We probably have time for maybe one or two more questions. But next one here is, do you know if Chrome or Firefox have accessibility functions or standards?
JAMIE LIN: They do. I think that all the tech companies are paying a lot of attention to accessibility. Again, you know, they are adding accessibility into existing software that’s being developed and redeveloped. So that’s why Microsoft Edge has that advantage, because it was designed with accessibility from the beginning. So I’m not sure– I mean, I think that if you do a search for Chrome and accessibility, you’ll come up with a lot of information, and same Firefox and accessibility. Every single company will have some sort of accessibility statement about their products and services.
GEORGIA MCGOLDRICK: Awesome. OK. Last question here– how did you get into accessibility, and what drives your passion for it?
JAMIE LIN: Thank you for that. I got into it because I had to. I have to say, you know, I think a lot of the reason why I’m so interested in this is because I know how when I found out that I had to start making things accessible, my original reaction was like, really? Like, I don’t have time for this. And how many blind and deaf people do we really have anyway? And is this really the best use of my time, because, you know, I’ve got all these projects to do. So that’s a very common reaction.
And you know, because I’m a practitioner, because I’m doing this, and because then I’m learning more about it to figure out why I’m doing it and how to do it– or when I’m searching how to do things, I also start looking at things about why I’m doing it. And that’s really when I started thinking about how interesting this topic is and how it’s so much more than designing for, you know, people with certain disabilities. And that’s how I got interested in talking and sharing about the different ways that I view it.
GEORGIA MCGOLDRICK: Awesome. That’s great to hear. Thank you so much, Jamie, for your presentation and for answering our questions here. And thanks again for everyone joining the webinar today.