Jay McKay:
All right. Hello, everyone. Good evening. Welcome to Knowbility's Be A Digital Ally. Today, we are going to be talking about descriptive links and plain language. If you're just joining us, we'll go ahead and put it in the chat again, but we have our slides available for you. They can be reached at our Bit.ly link. It's going to be B-I-T.L-Y/Links, with a capital L, and then capital A... or excuse me, capital B-A-D-A. So it's going to be bit.L-Y/Links, with a capital L, and then B-A-D-A, all capitalized. Then, Molly, if you can put that in the chat for us again.
Molly Moore:
Sure thing.
Jay:
We'll probably need to put that in there a couple more times as people start rolling in. But we're going to go ahead and get started because we've got a lot of info for you. We had a great time last month. I can't wait to get started for today's topic, so we're going to go ahead and dive right in.
So welcome, welcome, everyone. Thank you for letting us be a part of your journey. Hopefully we've retained quite a few of the people that joined us last month and hopefully we'll also get some new people that are starting their accessibility journey. So we want to say thank you and welcome, and as always, we strive to create inclusive and accessible spaces. We want people to feel welcome, eager to learn. We do that by trying to be kind and polite and respectful and we hope that you'll extend the same courtesy to all the participants here today. Then also we try to ensure accessibility.
When you registered, we asked if you needed any additional accessibility accommodations. The auto cap should be available. You'll just need to go and turn those on on your bottom control panel for your Zoom. Then also we have those slides available for you as well. If you run into any issues with those, if you're not able to access that format, sometimes when you try to share it with people things get a little skewed, so just let us know if you're having issues with those slides and we'll fix them up for you.
All right. We're going to go ahead and say welcome and introduce ourselves. I am Jay McKay. I am the director of community programs. I am a white female in about her 40s. I have short, brown hair and I have my big, huge gamer headphones on because I pretty much just live in these now. This is just kind of part of my hairstyle I've determined. All right. Molly?
Molly:
Hi, everybody. Glad to have y'all here. I'm Molly Moore. I'm a community engagement specialist at Knowbility. I'm a white woman with blonde hair in her 30s. I'm wearing a green shirt today to celebrate Saint Patrick's Day. Great. I will pass it on to Erica.
Erica Braverman:
Hi, everyone. I'm Erica Braverman. I am also a community engagement specialist here at Knowbility. I'm also a white woman in my 30s, but I have brown hair and I wear glasses. It's hard to see but I am wearing green. I have my big, giant green... I think these are monstera leaf earrings, to have some green on today. So happy Saint Patrick's Day.
Jay:
All right. I don't know if Cesca's been able to pop on just yet, but hopefully we'll see her in a little bit. Francesca Castleton, she is one of our accessibility analysts from our accessibility services team. She's our resident expert that we try to have on for these. So she'll probably pop in a little bit to help us as we progress forward. I do have green on, I promise, but I'm not going to try and... I have socks and leggings on that have shamrocks. But last time I tried to show that while on camera was very difficult with my desk arrangement. So we'll just move on.
We work for Knowbility and just a little bit of background on it. We were founded in 1999. It is a 501(c)(3) nonprofit. It is based locally in Austin, but really we operate globally. I'm in Alabama, Cesca of course is in California, and we have a smattering of us all over the place working for Knowbility and clients all over the world. But our mission is to create an inclusive digital world for people with disabilities. We do that several different ways.
Through community programs, we do that through a couple different programs such as our Accessibility Internet Rally, which is a competition pairing web development teams to create beautiful, accessible websites for nonprofits. AccessU, which is our annual web accessibility tech conference that's coming up in May. Our AccessWorks program is our usability testing program. Our K12 Digital Accessibility is our different programs that we have to help parents, staff, administrators, students ensure that students have digital accessibility to instruction to their classrooms, their environments, through a different couple of things there.
Then of course Be A Digital Ally, which is where you are today. So what is Be A Digital Ally? It is a monthly series. We started off in February with the goal to cover the basic skills and principles behind accessible digital design. We really wanted to create a good series that could help make digital content accessible to people with disabilities. Our audience actually spans a pretty big gamut. We were really looking at content creators of any skill, but maybe they were new to accessibility or maybe they're just starting out or they want a little bit more help.
So we really are looking at people that are just getting started. Maybe you are working for an organization or your church, or maybe you're running a small business and you're just getting your feet into web design or maybe content management for your social media accounts, or maybe you are a web professional but you just want to get some more information about web accessibility or digital accessibility and design. Our learning objectives for today. We're going to do just a brief overview of accessibility and assistive technology just to make sure everybody's on the same page.
Then we're going to go into the meat of what we're here for today, which is talking about accessible link language or descriptive links. We're going to also talk about plain language in our content, so the text that you put on the page. Then of course, we're going to take time for your questions and hopefully we'll all have a great time. To start off, for some of you that may have joined us in February, this content will be very familiar to you, but we do want to make sure that anybody that is new and joining us is at the same level as we all are in terms of understanding what accessibility means.
We really wanted to talk about this because you hear accessibility getting used more and more with different organizations and different fields of work, but it means different things to different people. So sometimes when I hear accessibility, they're meaning it's easy to get to something or it's accessible because it appeals to a particular audience or because it's something of interest to somebody so they feel it's accessible. Those are good definitions of accessibility, but not for the purposes of what we're talking about here today.
We want to define accessibility this way. What I've done here is I've taken two definitions, one from the w3.org Accessibility Intro page, and the aem.org page, their Designing for Accessibility with POUR. These two organizations talk about what accessibility means, and so I've fused them together into one definition that will be working from here today. For something to be accessible, people need to be able to perceive it. Can they hear and see the content? Understand. Do they know where to go? Do they know what to do or what to expect when they get there?
Navigate. Can they independently navigate using their preferred tools? Interact. Can they independently complete tasks and explore all the areas of the site or the content? Then lastly, can they contribute? To me, this is really the heart of the matter. Can they fully participate in an authentic manner? So if you have all of those other ones before it, really the ultimate goal is being able to participate, interact, and engage with that content, with that media in an authentic manner.
All right. So why is it important to design for it? 15% of the world's population lives with some form of disability. This is coming from the World Health Organization's report from 2011. In addition to that, there are several people that may not consider themselves to be disabled as defined by WHO. For those of you that joined us last month, we talked about sometimes people with hearing impairments or maybe they're just starting to use hearing aids, may not actually consider themselves to be disabled, but actually the WHO would define them that way.
Then of course, people without disabilities also benefit from accessibility. Think about things like closed captions. I know I use them all the time when I'm watching Netflix. Just clear, readable or easy to read font, right? We all benefit from those things regardless if we have a disability or not. All right. Next we want to talk about assistive technology and what that is. So again, we've taken two definitions. This first one, again, is from the World Health Organization. I'm sorry, the first one is from ATIA, which is the Assistive Technology Industry Association.
Here, what they're talking about is it's any item, piece of equipment, software program or product system that is used to increase, maintain, or improve functional capabilities of a person with disabilities. So it can be anything. It could be a slanted surface that you use to write with. It could be a cane that you use to assist when you're walking. It could be a different type of mouse. Some of us like the roller ball mouse or something like that. All of these things could be assistive technology. To something more complex like screen reader software or speech to text or voice dictation.
Then at the bottom, we have the definition from WHO, which says, "Assistive technology enables and promotes inclusion and participation, especially of persons with disabilities, aging populations, and people with non-communicable diseases. The primary purpose is to maintain or improve the individual's functioning and independence, thereby promoting their wellbeing." So again, really looking at it from that broader scope of why is it important to improve those functional capabilities. So it's really talking about wellbeing, quality of life that we're looking for in the end with assistive technology.
All right. We're just going to briefly talk about what types of assistive technology exist out there. Things like screen readers, right? We talked last month a little bit about JAWS or NVDA. Those are the ones that actually read everything on the computer. It's not just reading that sample of texts that you selected, right? This is how you're navigating. We talked a little about refreshable braille. Alternative navigation methods. For some people, using a mouse or a touch screen is not a possibility.
So they have to use just their keyboard, maybe using the arrow keys or shortcut keys, or some kind of switch use. So having an external device that looks almost like a button, sometimes it looks like a switch or like a lever, and they're using that as the way to navigate through. Closed captions, we talked about before. Transcripts. Even magnification. So when you need to zoom in, that can be assistive technology. As well as just dark mode or high contrast. Then of course we recommend you check out those examples listed in the WebAIM site that we've linked below.
All right. Before we get started, we just want to remind you, of course, accessibility is a journey. It is always changing, it's never ending. Even amongst us that we say we've been in the game for years, the bar always gets raised, it always gets moved over to the side because that's what it's supposed to do. We always want to do the best we can. So we love this quote from Maya Angelou. It says, "Do the best you can until you know better. Then when you know better, you can do better."
We're going to give you a lot of information today. Please don't feel like you have to incorporate it all at once into your website. That can be very, very overwhelming. Well, you just need to pick one little thing. That's what I always tell people when I'm training. Pick that one thing that you can do right now and put that into place. Once that's done, then you pick the next thing you can incorporate and then just keep ticking the boxes and going down the line. As you practice, it will start to be easier because it's part of your routine, it's part of your expectations. With that, I'm going to pass it along over to Erica. All right.
Erica:
Thank you, Jay. We're going to get started with our descriptive links portion of tonight's Be A Digital Ally presentation. The first thing we're we're going to do is... Oh, we need the next slide. Sorry. I got too excited. Very exciting topic. And it really is. Well, I mean, I'm nerding out, but I think this is exciting because this is something that you can change quickly and no coding is required. So this is very achievable way to increase the accessibility of your site. So it is very exciting.
We're going to start out with a definition of what it means to have a descriptive link. What makes a link descriptive? The answer to that is that descriptive links clearly indicate where they will take the user. And this could be where you're navigating to or what you're going to find when you get there. Depending on your site and content, this is going to look different, what it means to navigate around your site. We have some different examples here. We have some inline examples that are part of a larger sentence. This is one we've probably seen.
If you're ready to sign up for a class, visit our registration page. And that link is, visit our registration page. We have a wonderful group of instructors, and that word instructors is linked, who will be teaching our class. These are examples of descriptive links that would be inside a larger piece of text, but we also have some standalone examples too. So we have, Meet our Team. It's another really common one. Or Healthy Recipes, or Article: Why is my check engine light on?
That's also a nice touch if you're sorting out a lot of content, taking people to different places. People might benefit from knowing what kind of resource they're going to be looking at. Maybe if you have a big collection of academic resources, sometimes specifying the type of resource is going to be really helpful. Is it a video? Is it an article? Is it a podcast? All right. I think we can go to the next slide. Now that we've talked about how descriptive links inform the user by saying where they're going, what they're going to find when they get there, let's talk about some of the barriers that descriptive links can remove.
We're going to go right into our next slide, please. We're going to talk about specifically the barriers presented by links that say, "More", or sometimes this could be, "Read More", or, "Click Here". Things like that, we see them all the time, right? There are lots of websites. But they don't necessarily do a great job of description. Right here, we have an example, a webpage we might find. I'm sure a lot of us remember doing reports in school on animals and having to read lots of information about them. Here's a sample webpage all about orcas or killer whales.
We have a nice picture of an Orca. We have a paragraph about what they look like you and then we have a paragraph about their family structure. Each one of these paragraphs ends with a link that says "More". Okay? So we're going to be looking at this sample right here through a few different lenses, people with different disabilities using different assistive technologies as our examples to see what kind of barriers come up with these non-descriptive links. Let's move on to the next slide, please. All right. The first type of assistive technology we're going to be talking about is magnification, people who use magnification.
On this page, we have an image of the end of one of those paragraphs. It's zoomed way, way, way in. We can see a little bit of text around the link, but pretty much all we see is that link that says "More". This is a lot of magnification. Some people who have, for example, learning disability like dyslexia where larger print helps them, they might use a little bit of magnification. But someone who has low vision might actually be magnifying the text on the page up to this level. So there are people who are using that super high-level magnification and pretty much just zeroing in on this link that says "More".
The barrier that this presents is that when magnification users zoom in on a page, they might not be able to see that full paragraph for the context of the link. So they see "More", but more what? A more descriptive link talking about what's the content when they get there would help them out in this situation. We can move on to the next slide. We're going to talk about another piece of assistive technology. This will be review if you were here with us last month. But this is something that, like magnification, Jay mentioned when she talked about types of assistive technology.
We're going to talk about a screen reader, which is a tool that converts digital text to audio or braille. We have a couple different images on this page. The first one is a man using a laptop and he's using a screen reader on this laptop. It's a piece of software, so it's not visible if you're looking at the computer. But he is wearing some earbuds. What he's doing in this picture is he is navigating through a webpage with a screen reader. The screen reader is taking all the printed text on that page and making it audio and he's listening through those earbuds.
This guy is actually our coworker, Anthony, who is very supporting about us using his photo in all of our Be A Digital Ally presentations. He's being a really nice guy about it. So Anthony's using earbuds. But another way to get that information is to use something called a refreshable braille display. That's what's in the picture on the right. This is a piece of hardware that attaches to the computer. It's like a rectangular-shaped... Almost like a second keyboard, except instead of keys, there's a grid with dots that can be raised or lowered.
What happens is when you turn on that screen reader, the text, instead of transferring to audio, presents itself as braille. Those dots raise and lower, and as you move to a new line of text, those dots change so you can get the whole text description of what's on the page. Most people who use screen readers are blind. A few people use them if they have print disability like dyslexia, or anything where looking at a page presents a barrier or text presents a barrier. But far and away, most people who are screen reader users are either blind or they have very low vision to the point where they prefer a screen reader over magnification.
Then for our refreshable braille display users, some folks in that group are deaf, blind. So they're not listening to the audio, so they really do benefit from having braille output for all their interactions on the computer. We are going to move to the next slide and talk about, well, okay, a screen reader is important to know, but how does this connect to links? The answer is that screen readers have some tools to help users navigate a little faster. If you're cited and you're reading a long page, you can skim. You can't skim on a screen reader.
So there are a couple little tricks, techniques that screen reader users can apply to organize a page or visit a part of the page more quickly. The first is that they can navigate by headings within the page. The second is that they can navigate by link. The screen reader will take all the links on the page and create something that's called a link list. They collect all those links on the webpage and just display them as a list for quick and easy navigation. There's a screenshot of a link list. It's a window that has come up on the computer and the links are available in a scroll box.
So these links say, Skip to navigation, Jump to a sidebar, Home. I'm trying to read on my computer. Services, News, Resources, About, Contact, and Accessibility features. So all these links, you have a choice to where you're going to go on that page, quick and easy navigation. So what's the problem with that "More" link? Well, if that link only says "Read more" or "More" or "Click here" and it shows up in the link list, there's no context around it. The screen reader only displays the link text. It doesn't display the text in the sentence or the paragraph.
So if the link text says "Read more", that's what's going to show up on the link list, "Read more". You can imagine if you have five paragraphs on a page and each one finishes with "Read more" or "More", then you get more, more or more, more on your link list. It's not very helpful. Let's move on to our next slide. All right. We're also going to talk about people who use speech input. If you're wondering what speech input is, instead of a mouse or a keyboard, you give your computer voice commands, like "Click", or "Close window", or "Go to", and it will execute those commands for you.
If you're familiar with Dragon NaturallySpeaking, that is what speech input is. So you might be entering text, but you might also be giving commands. What speech input users do is that they read out the link text to tell their computer where to click. But if there are multiple links on the page with the same text, this will add some extra steps. We have a short demo here from our friends at TetraLogical showing what happens when someone is dealing with that situation, multiple links, and they're using speech input. So we can-
Speaker 4:
... a link labeled "Services".
Speaker 5:
Click services.
Speaker 4:
If you just say "Click link", the software will highlight a number or links in the current page. You then select the link you want by saying the number.
Speaker 5:
Click link, choose three.
Speaker 4:
In situations where a control lacks a visible text label or where the visible text doesn't match the actual accessible name of the control in the underlying markup-
Speaker 5:
We can stop this here.
Speaker 4:
... People using-
Erica:
Okay. So his description was not quite the same as "More", he was just saying-
Speaker 4:
... a link labeled "Services".
Erica:
Oops!
Speaker 5:
Click services.
Erica:
Thank you. Sorry about that. So what happens when the link is unclear, either you just say "Click link" or it says "More" and you have three mores on the page? It might have been a little bit difficult to see, but there were some green numbers that popped up near every link and then he had to select the number to click. Now, it adds an extra step, but it becomes even more arduous if you have, for example, a really long page. Maybe you have eight paragraphs and you have to scroll up and down and each one ends with "Click here" or "Read more".
Then depending on the size of your screen, you might not have access to all those numbers to make the correct selection. We're ready, move on to the next slide. Then we're going to talk also about people who have cognitive disabilities. I know we touched briefly that they might be using magnification, they might be using a screen reader depending, but in general, they might just be using the text on the page. They might not necessarily have assistive technology, but that type of link might still present a barrier.
The reason for that is that depending on your type of cognitive disability, you might not process all the texts in the paragraph, or by the time you get to the end, you might not remember what was in the paragraph. You might not process everything, you might not retain it, so by the time you get to that "Read more" or "Click here", you're not sure what you're clicking on. Or you might have to go back and reread the paragraph again to get an idea of what you're going to be doing.
This can affect people who have dyslexia and other print disabilities, or people who have ADHD or other disabilities that affect executive function, or people who have memory loss. All of these people can benefit from descriptive link text. To touch on Jay's point earlier about accessible design benefiting everyone, who here has been in a hurry and been trying to click through, find your Zoom link in an email, or click on the "Contact your doctor"? I'm driving around and I can't find your office, but my appointment's about to start.
So having a clear path of where you're going to go, what you're going to find when you get there really does help everyone. Ready to move on to the next slide. We're going to wrap up this section here with a remedy for these inaccessible links. We are going to get rid of that "Read more". So this first paragraph now says... It's what orcas look like. That first link now says, "More about how orcas look". Then that second one about orca family pods, the link has been changed to say, "More about orca pods". So it's not a bad thing to say "More", but you just need to tell people what the link is more of.
If you're thinking back to your site and you think, "Oh gosh! I have "More" here and "More" there," you can use that as a foundation to build out the link. You don't need to rewrite everything from scratch, just add more information. I think from here, it is time for us to move on to some concepts for writing accessible link text. I'm going to turn this over to Francesca who's going to talk about some pointers for writing out those links.
Francesca Castleton:
Hi, everybody. Sorry I missed introductions. But my name is Francesca. I'm Asian with long, brown hair. I'm in my mid-30s. Yes. So we're going to go into writing accessible link text. This piggybacks what Erica was talking about just a moment ago. When writing link text, what you want to do is replace the URL with a word or phrase. When you copy a URL, a lot of times it'll have the HTTPS, slash, slash. This example here, it says knowbility.org.
To make it more clear and easier to understand for everyone, for both site users and for screen reader users, we can cut it down by just highlighting the text and then adding the URL to that text. In this example, it says Knowbility website. A lot of times when I am auditing websites, I will see that they'll put a whole sentence that says like, "Click here for knowbility.org." For some people, that feels like the more natural thing to do, but to reduce the cognitive load, you can just cut it down to just that one phrase.
As a little tip, since Twitter doesn't allow hyperlinks, you can actually use a URL shortener, which I learned recently. And it's always good to let your users know exactly where that link is going to be going. Another important thing to do is to be as descriptive as possible. Accessible link text will let the user know exactly where the link is going to take them. In this example, "Read more", you want to add more context like, "Read more about our services". To go deeper into that... We can go to the next slide. You want to avoid vague phrasing.
Say, for example, if you had a website that had a bunch of different projects that you could volunteer for. If under each project, it said, "Sign up, sign up, sign up," you want to give more context to your users about what they're signing up for. In these examples below, like "Register Here", if you provide more texts, you could do "Register to Be A Digital Ally on Humanitix". That just lets your users know exactly where they're going to be going. A lot of times, the links will open in a new tab or new window. This could actually be pretty disorienting for users.
They might lose track of where they are. Before I was working at Knowbility, I was building websites. It's typically good SEO to have the link open in a new tab. That way, the original website that the user was browsing does not get lost. So if you must open in a new tab or new window, one option is to put it right in there to let the user know this link will open in a new tab. Or you might have seen one of those small icons that looks like a little browser window with an arrow pointing out. You could add alt text to that icon so that it will be announced to the screen reader, "Hey, this is going to be opening in a new tab or new window."
That wraps it up for writing accessible link text. Now we're going to go into link practice, so I'll pass it over back to Erica.
Erica:
Thank you, Cesca. All right. So we've talked about what is a descriptive link, we talked about how to write them. Now we're going to look at an example with some poorly written links and we're going to see what we can do to correct them. I'm back on the whales. When I first started putting all this material together, I had not long ago gone whale watching in the Bay Area. So I think that influenced me to talk about whale watching and whales. I have a sample page from a whale watching tour company with a picture of a tour boat and a whale leaping out of the water.
For those who would like an audio interpretation of what's on the page, I'm going to read out these paragraphs and the links. But what I would like you to do while I'm reading is to think about the links, which ones might be accessible, which ones might not be, and feel free to put your answers in the chat. Right. "Welcome to Oceanside Whale Watching Tours. We are ready to take you on the journey of a lifetime in one of," link, "our boats". "You can expect to see three different species of whales on our tours, as well as many other types of animals who make the ocean their home." Link, "Read more".
"View a map of our tour routes." The link is a Google Maps URL. "Are you ready to book a tour?" Link, "Click here". Let's give us another 30 seconds. If anyone's got any thoughts about which of these links might be accessible or not, feel free to pop those in chat. See how well did this page do? Right. Bill says, "Our boats." We got two, Bill and Marie. "Our boats" is possible, but lacks the ideal amount of context. "Read more", looks good. "Click here", nope. I like Marie's response. All right. So let's go to these answers.
So "our boats" is accessible. We thought it was clear and specific. Maybe this was my bias because Bill said, "That's really not enough context." But maybe because I was thinking about my tour, I had this vision in my mind of a boat. This is actually a really great example of one person finding good context in a link and then someone who maybe has had a different experience or hasn't encountered that product or program before saying, "You need more context." So I would say to improve this link further, we could even say "Our tour boats", or, "Our whale watching tour boats".
Add more context to that link. Not every boat is a whale watching tour boat. So bill, I am really glad that you brought that up. So it could be better, but it is accessible on the ground floor. Certainly, we are shooting for the rooftop though. "Read more" is not accessible. Read more what? It's too vague. That Google Maps link is not accessible and it's incomprehensible. It's just letter salad. Then "Click here" is not accessible because what will clicking here do? I pulled out those links and on the right I have them in a link list; our boats, read more, the Google link, click here.
So you could see how this would present to someone using a screen reader. Really, not a lot of context. "Our boats", maybe. Does an okay job, but maybe not the best. So let's fix all those links. Let's go to the first one. So while I'm reading this out, feel free to put your answers in the chat. I'm going to read the paragraph so everyone's got the context. But if you have an idea for how to fix the link, pop in the chat, please. "You can expect to see three different species of whales on our tours, as well as many other types of animals who make the ocean their home. Link says, "Read more."
So another few seconds to add your responses if you have a suggestion for how to fix this sad, little inaccessible link. "Read more about types of whales." Great. Excellent. "Read more about species of whales." Bill said the URL alone is brutal for a screen reader user. I agree. "Read more about animals who make the ocean their home." These are all great suggestions. Let's hop onto that next slide. Mine was actually a little bit different. I said, "Read more about wildlife on our tours." But all of those links were great be because they said what you're going to be reading more about. So we got the key point there. Excellent.
All right, we're going to go onto the brutal link. How would you fix this link? I'm going to read it out. "View a map of our tour routes." I'm not even going to try to read this Google link. It's starts out with HTTPS, but then it just... "17RMzqy... " So how could we fix that? "Hyperlink the text instead." Excellent. "Map of our tour routes." "Make the whole 'View a map of our tour routes,' a link." "View a Google Map of our tour routes." These are all great. "A link map of our tour routes." Excellent.
I think the general consensus was to make that whole sentence a link and then say where it's going to go, that you're going to be leaving the site and going to Google Maps. "View our tour routes on Google Maps." Guys are acing this. We have one more. "Are you ready to book a tour?" Link, "Click here." Who's got a suggestion for how we could fix this link? All right. Link, "Book a whale watching tour." "Make 'Book a tour,' a link." "We could link the sentence again." These are all good suggestions. All right. Let's see how we fixed it. "Click here to book your tour!" We did make that whole sentence a link.
I kept the "Click here", but I said what we're clicking into. I like Jackie's solution. Jackie said, "Book a tour on our reservation site." That's a good thought. Sometimes when people are using Humanitix or Eventbrite or something, you're going offsite to make a reservation. So that's a really, really good point that sometimes people might be using a third-party reservation tool. So yeah, definitely tell people where they're going if they're leaving your site. Mary asked, "Is 'Click here' non-standard for touch screen users?" Activating it, I assume.
That's a really excellent question. That one, I don't have the answer to, but I'm going to investigate that because especially as we get more involved with our phones, that's something to consider. All right. So we're going to wrap it up with the finished page before we move on to plain language. So we have fixed all of our links and our new paragraph reads out... Well, we kept "our boats", but we could make further changes there. In the interest of time, I'm going to read our new links.
"Marine wildlife. You can expect to see three different species of whales on our tours, as well as many other types of animals who make the ocean their home. Read more about wildlife on our tours. Viewer our tour routes on Google Maps. Click here to book your tour!" Our link list now reads; our boats, read more about wildlife on our tours, viewer our tour routes on Google Maps, and click here to book your tour. So much improved, much happier site. I would say we had some great comments and suggestions, so I think we are pretty solid on our descriptive links. I'm going to turn it over to Molly who will take us into plain language.
Molly:
All right. Thank you, Erica. So, yep, we're going to move on into plain language. Like descriptive links, it's not a web-based skill. So liberal arts majors you'll enjoy this one. It's very writing-based. So what is plain language? We'll start with that. The Plain Language Writing Act of 2010 defines plain language as writing that is clear, concise, well-organized, and follows other best practices appropriate to the subject or field of the intended audience.
Another way of saying that is material is in plain language if the intended audience can find what they need, understand the first time they read or hear it, and use what they find to meet their needs. Okay, we'll move on to why it's important. We'll start with, yeah, plain language benefits individuals who live with cognitive and learning disabilities, language impairments, memory impairments, and autism. But just like so many aspects of accessibility, like Jay mentioned, really plain language benefits everybody because simple tense, literal language, and active voice improve everyone's reading success and just allows for your broadest possible audience.
Really when you get down to it, plain language is just communicating well with your audience. Okay. So now we know broadly what plain language is and why it's important, but we can move on to how to write effective plain language. We're going to just talk about some guidelines, although first will just say, yep, the big, general rule, plain language often just means good writing. Yeah, if you're following good writing rules, chances are you're already writing in plain language. But we'll go into a few of those guidelines just to wrap your mind around it.
Today we'll be discussing five guidelines for plain language. We'll go deeper into each of these in a moment. But for now, they are, number one, write for your audience. Number two, organize information logically. Number three, write for action. Number four, use short words, sentences, and paragraphs. Number five, design for reading and scanning. You'll notice that last one is really more about the design of your page or newsletter, but it still has to do with this topic.
Okay. So let's hop into the first one, which is, write for your audience. If you remember earlier when we were talking about the Plain Language Act, the second half of that definition mentions writing well for your intended audience and using practices appropriate for that. A good thing to do before you start writing any new content is to sit down and really think about who you are writing to, who you want this information to reach, what you want to communicate to them, and maybe some strategies how you might best do that. But no matter who your audience is, you do want to make it as accessible to as many people as possible.
So avoiding technical jargon is a great practice, or if you are using it, to define it in the text so that your audience doesn't miss the meaning of what you're talking about. Another great strategy is to use "you" and other direct pronouns because this really engages your reader, like I'm doing right now to all of you. But we have this example here that we think is a good example. "When you use plain language, your audience can find and understand the information they need." So that is writing that's more conversational while still being clear and direct. It also just alerts the reader, "Oh, okay. They're talking to me. This has to do with me. I will pay attention."
Otherwise, you'd be just writing impersonally or abstractly. We have an example here. "Using plain language helps people find information." Not just more easily, goes in one ear and right out the other, or that you're scanning through and you're just maybe not going to latch onto it. Okay. So we'll move on the next one, which is, organize information logically. So again, this does have to do with your initial, who am I trying to reach? What do I want them to do after reading this particular information? Part of that is deciding when you're going to introduce information and if it's the right time to do it.
So you want to introduce information when the user needs it. Don't introduce it before they need it because they might forget it or lose it. You can ask yourself, would this information be more useful in a different place? And maybe organize your page that way. Second, you want to establish context and requirements. By establishing context, a good way to do that is at the beginning of the page. You can write out a little summary or a bulleted list or just even an opening sentence that tells you exactly what that page is covering. The requirements half is, do I have any action items that I want my audience to complete on this page?
Say I want them to sign up for my newsletter or I want them to fill out a survey, how am I going to get them to do that? How many steps are there? Am I clearly telling them each step that they need to complete and leading them in a way that makes sense through all of those steps? Finally, we have, include both an overview and details. That goes back to putting little summary at the beginning of the page so that the person can get a quick idea. It gives your audience options so they can either just get the information they very much need and go right to it or dig in deeper where they're interested in. So we could say, give them a bite, a snack, and a meal.
All right. We will move on to number three, which is, write for action. Especially when you're writing directly to an audience, a great way to think about what you're writing is to make it purposeful, direct, and goal-oriented, like we mentioned with the last one, thinking about what exactly you want your audience to get out of the page or what you want them to do. That's writing for action, writing for a purpose. On a more grammar-oriented note, we'll go back to school here, we want to write in simple tense, so using present, past, future. Sarah runs, Sarah ran, Sarah will run.
We want to avoid the dreaded passive voice. Now, I'm sure you had this nailed into you back in the day. But to remind you, a passive construction is when you make the object of an action into the subject of a sentence. Our example here is, Sarah ran, goes to, the run was taken by Sarah, which is much weaker, less direct, and harder to understand. Oh, another thing just to mention. You can see this in bad journalism sometimes where maybe what really happened is the mayor laundered some city funds for his own purposes, but the headline reads, "City funds were laundered."
We don't know that the mayor had anything to do with that at all. So it can disguise the actual subject of the sentence. Okay. So we'll move to number four, use short words, sentences, and paragraphs. So again, back to that use summaries for key points. That really just helps your audience, I mean, first find what they want to read and then get the information back. Use summaries for key points. So we also want to use common words. Instead of reaching for that $10 word every time, or really when you don't need to, just say it as simply and as clearly as you can.
Use literal language, so avoid metaphors and subtext. This will really help people who have trouble understanding implication or implied points or understanding that you are speaking in a metaphor. Actually, I did that earlier with the snack, a bite, and a meal. That might be confusing to somebody because it's not directly talking about the rules we're speaking about with language. And yes, I love that one. Omit needless words is great. Just reading through your sentences, sometimes reading them aloud and thinking, "Am I just making some words valid here? Can I say this in a simpler way?"
Then finally, write out abbreviations the first time you see it. We have here an example, National Aeronautics and Space Administration, which is NASA. But that might not be very familiar if you're just looking at it by itself. So then after you write that abbreviation out, you'll want to include the abbreviation right after it or the acronym you're going to use so your audience will know what you're talking about. So this does bring up the question, what about literature and poetry? Do we need to simplify that?
Now you're right. Some writing, particularly creative writing, doesn't lend itself well to plain language all the time. But artists do want their work to be enjoyed by as wide an audience as possible because most artists do. Here are a few strategies to address that. Say you're sharing a poem on your website. Think about adding some multimedia ways to experience that poem. You can post a video of somebody performing it or you can also post an audio option. Another good way is to support the work with information, context, and explanations.
I don't know, some of you might have used No Fear Shakespeare in high school. But I really enjoyed those because they provided definitions to words, explanations of historical context I might be missing, and other useful information right along with the text that made it a richer experience. Then finally, you can think about adding one of those introductory paragraphs that just gives the reader insight into what that piece is going to be about. Okay. Finally, we're at our last guideline for plain language, design for reading and scanning.
Yeah, I think we are pretty familiar that most people are more attuned to scanning these days. When they're going to a website, they're going to be reading rapidly to find specific facts or info, especially the facts or info that they need. A good way to address this and help that process is to break up the page. Use bullets and numbers whenever you can because this really clearly breaks up your text and lists as well. Similarly, just bring out those points clearly so people can see them. Use clear fonts. This will help just the reading experience.
You want to use good contrast. So don't put a light pink in the back with dark pink text. That might not read very well. But we have this dark purple with white and that has pretty strong contrast. Then you want to use large font, so above 14-point font size. That will just help your audience take things in. Finally, we have heading structure. Heading structure is another great way to break up your page. Instead of just having one long wall of text, you can break it up with little headlines that say what that next paragraph's going to be about and just keep that paragraph right to that heading and don't include anything that's not relevant to that.
Another great thing is that screen readers can navigate by heading. So they can also just scan through and find the section of the page that's most useful for them. All right. Great. So we wrapped that part up and now we're going to do some practice on it. For these examples, we're just going to have you read the sentence and then try to identify what guideline the sentence isn't following. I'll read it aloud. Okay. So this one is, "The tickets were collected by the president of the glee club." What is wrong with this sentence? We'll give you about 30 seconds or so to put it in the chat. But yeah.
Okay. Great. Okay. We even got some people rewriting it. That's awesome. Okay. So yes, you're all right. Passive voice. Instead of the tickets were collected... I think Bill and Bonnie both changed it for us. They said, "The president of the glee club collected the tickets." Yes, we changed the tickets were collected to the president collected. Great. Okay. Y'all nailed that one. We can go to the second one. Okay. For this one, the sentence is, "When you are baking bread, you need to proof the yeast in water. Check the water temperature before you add the yeast." Okay. We'll give you a few seconds to make a guess at what's wrong with that one. There's a couple things here.
Jay:
Yep. Looks like Steven got it.
Molly:
Yep. Great. Exactly. The information's in the wrong order. So yes, temporal order. He says, "Put checking temp first." So, yep, it's not organized logically. And this is a common problem with recipes or food blogs, that there's missing steps or things aren't defined well enough or directions are too vague. And that's true of all of these. We have the solution here. "When you bake bread, you need to proof the yeast." Then we went ahead and defined proof. "Proof means to soak the yeast in warm water until it's bubbly." Then we were broke it up into two steps using numbers.
That just helps get your mind into, "First I do this, second I do this." "Check the water temperature to make sure it's warm." Then we define warm as 110 degrees Fahrenheit, because warm is subjective. Then the second one, add the yeast to the water. That's just much clear, now you know what to do, and it gives you all the information you need. Okay. So what's wrong with this sentence? "High quality learning environments are a necessary precondition for facilitation and enhancement of the ongoing learning process." [inaudible] might give us a clue here. But yeah, we'll give you a few seconds. There's a few things wrong with this one. (silence) Yep, too wordy.
Jay:
I'm having flashbacks of my master's degree.
Molly:
Yeah. Got to get to that page count. Right. Okay. So yes, y'all got it. Bill said, "That's a really verbose way of saying it." "Jargon. What do they actually mean?" Marie asks. Exactly. Then Jackie said, "Too wordy." So yes, all of those are true. And it's not using common words. In this sentence, they did. They reached for the source and just made every word as complicated as possible. Instead, you could just say, "High quality schools help children succeed." You also get rid of the passive voice. Bonus.
Okay. Then finally, we have this last one. "Knowbility is part of a global effort to promote and advocate for accessible technology and websites for people with disabilities, based on recommendations from WCAG 2.1." This one's a little similar to the last one, but there's a few other things going on here. Yeah. It actually is just on a basic English language level. Steven says, "Almost a run-on." I think it is a run-on sentence. Bill says, "There are a lot of clauses. They should be broken up. Too long, too dense, too wordy, and WCAG isn't identified exactly." Okay, great.
So we can move on to the solution here. Yep. The first one we said not using short sentences. We could break this up into several sentences like Bill suggested. We didn't write out the abbreviation, and again, we're using passive voice. Our solution was just to say simply, "Knowbility advocates for digital inclusion, based on the Web Content Accessibility Guidelines 2.1." Then we put WCAG in parentheses behind that. So later, people will know what that WCAG is referring to. Okay. Great. All right. Y'all did wonderfully on that. Here are a few resources about these two topics so you can read a little further on any of them. Then I'll pass it back to Jay and we'll start taking some questions.
Jay:
Excellent. All right. It sounds like you were all amazing and probably pros at this already. But I know we had a question in the email, so I think Molly or Erica, you were going to pull that one up so we can review it. But if you have any questions, please feel free to put them in the chat. I will make sure that this chat is added because there was some great conversation again about using "Click here". But then also, we had some conversation about acronyms, if they are things that for most of us were already familiar with.
There was some good conversation about it could be familiar based on your region, but if you are presenting this information to people that maybe do not know those acronyms, you still want to have that information available for them as well. So if we have any other question... Erica, was it you that had the email question we received?
Erica:
I think we all got it, but I can pull that up. Then I see some other questions coming in.
Jay:
We have one that's talking about alt text and video clips. So I say let's hit that one at the very, very end since we're talking links and text right now. So Jack, we got you, but we'll hit yours at the end.
Erica:
So I'm pulling up this question. This was from Mary. She wanted to know, "Is there such a thing as a link that is too wordy?" I'm going to read the example she gave. Link text was, "March 2019 report from the National Transportation Safety Board." Report, that was your concern, would be not enough. It's better to go longer. But what I think is helpful is to look at the context of the page.
For example, if it was a list of all those reports by year, 2019, 2018, 2017, or reports from different organizations or different types of documents, if you had a lot to organize, sometimes it's good to air on the side of length just because you're differentiating between material. People without disabilities would be benefiting because they're trying to sort through, do I find the link that I want? But if it's an inline link and you're thinking that might be too much, you may be you're not even using all the text. You might just be saying, "2019 transportation report."
I think it's generally good to think about the context of the whole page because the link is really for context for everyone. So if you really want to define it down to that one thing, longer could be better. But if you can shorten it up and still give people the meaning and you're thinking, "Yeah, it's too wordy," you can do that. I realize this is not a black and white thing because it depends on the context of the page. But if you were going to be reading it for yourself, how much information would you need?
Or even better, how much information would your target audience need to figure out that was the link they wanted? We have a resource linked to the WebAIM descriptive link page. They talk about length too. So I highly recommend taking a look at that. Then it couldn't hurt to have someone take a look at those links and say, "Oh, you know what? This is too much." Or actually, "Yeah, I need to know this is the year, this is the report." So really that context doesn't matter.
Jay:
Yep. Bill was firing back about the acronyms saying that some acronyms really aren't going to have any other acronyms they could be confused with such as like the KGB or something like that. I think that is a good point. I think it's just one of those things where I would err on the side of caution and not assume, or making sure maybe if you... in looking at the rest of your text, that they could glean what you're referring to if there are multiple acronyms that could mean different things. But-
Erica:
Well, and I think that Bill actually handled it really well in his comment. He gave the abbreviation, but he also gave the definition even though the definition is not exactly the abbreviation because the acronym doesn't match with English text. So I think in that case, Bill, you answered your own question. You gave a little definition rather than doing the exact acronym. I think that was a great way to handle it.
Jay:
Oh, here's a good one.
Erica:
Give me another question.
Jay:
Should we ever use the links in the middle of sentences? It would probably break up the sentence for screen reader users and make it hard for people with minimal dexterity if there are multiple links in a paragraph.
Erica:
This is a good question. I'm happy to answer this one. So I would say yes, feel free to use links in the middle of sentences. When people are using a screen reader, the interruption is pretty minimal. It's not even really an interruption. It's more of a quick change. Sometimes people's settings will change in pitch, or they'll just be a brief notice. People who have gone through education to use a screen reader are actually looking for that cue that a link is there. So for example, for us, having capital letters guides us along the page. So screen reader users are used to those guides.
The link list certainly is link, link, link, link, link. But if someone's reading through a paragraph, the link in the middle is... It just fits in with the rest of the text. That's an excellent question. Then for people with minimal dexterity, people who might be tapping from link to link... When a word is a link that... Oh, a flyout. That's an excellent question. A flyout, having multiple flyouts. That's a very good question. For me right here, sitting here, just my initial, immediate reflection is I would be unsure in general if that flyout is accessible.
I am more in favor of avoiding flyouts and popups. If you can put the definition maybe as a note at the bottom or within the paragraph, someplace where it's on the page and not pulling up an external feature. Check your balance hidden definition popup on a regular basis. I mean, my initial reaction is to avoid the popup if you can. I hate it. Okay. Well, there you go. Yeah. And it's true. Sometimes having more than one popup in a paragraph or flyout, it can be hard to navigate. You're trying to click the exit button and then you end up clicking into another link or another flyout and then you're stuck.
Jay:
All right. We got a good question here from Steven. "Should links that are full sentences be punctuated?"
Molly:
I like that one. That's a very English-
Jay:
I was gonna say, "Molly?"
Molly:
Well, yeah. It's an interesting question. I think that it depends on where it is on the page. If it's part of a paragraph, you'd probably want to include the period and then you'd include it in the hyperlink. I was looking at something just to quickly to look at... I was curious about what people say on the internet about this. But it could be similar to when you have parentheses.
If the parentheses is a full sentence, then you'll include the period within the parentheses. So similarly, you'd include the period in the link. If it's just at the bottom of the page by itself, you could probably leave it without a period. But yep, I think traditionally if you're using a full sentence, you'll want to treat it like a full sentence and include the period. Cool.
Jay:
All right. Let's see if we've got any more questions.
Erica:
We've got some good comments from Cecilia. "Flyouts and popups can be visually distracting for people with low vision." Also people who have cognitive disabilities. If you're really trying to focus and read something in a paragraph, then all of a sudden there's a flyout or a popup, that can be really distracting. It pulls your focus away. Or sometimes I've seen popups that show up at the bottom of the page for screen reader users.
You have to go to the whole page, pass the terms and conditions, footer, and then you get to the popup. That doesn't really serve its purpose. Then Francesca had a great comment. Yes. It's also possible that it causes... Oh, keyboard-only users, so people who aren't using a mouse. That's an excellent point.
Francesca:
Yeah. There have been times where I've seen a popup will come out and the tab doesn't even go into the popup. So you're constantly scrolling through all of the links on the page, but you're just rotating around, but it can't get to that close button.
Erica:
So you wouldn't be able to remove that popup. That's excellent to know. Unfortunate, but it's good information to have. Yeah.
Jay:
All right. Let make sure we didn't miss anything else here.
Erica:
Does anyone have any questions? We did have that question for Jack. I think we can get to that now.
Jay:
Okay. Go for it.
Erica:
Jack, you wanted to know about alternative text. This goes back to a previous Be A Digital Ally. If you have a short video and-
Jay:
Wait, hold on. Just to clarify, so the question is-
Erica:
[crosstalk]
Jay:
"Should an all text be added to a 30-second video clip that is on a webpage? It would be a clickable image." It sounds like what you're doing is it's probably going to take them to the full video, but maybe this is just giving them a little taste of it. Is that what you're looking at, Jack? Okay. Just wanted to make sure we were treating your question to the full effect there. So, okay.
Erica:
[crosstalk] All right. So the image itself, it's really the thumbnail of the video and it's a link to the main video. So you could do that. I would say that in my mind... And Francesca might have a better information than me. My first thought would be to say... Your alt text could say, "Thumbnail of video links to YouTube," or, "Links to full video on YouTube," because it's not just a static image, it's going to take them somewhere. (silence) Any-
Speaker 7:
Can I talk? Should I talk?
Erica:
Sure. Go for it. Yeah.
Speaker 7:
I don't know. Is there such a thing as best practice for such a thing? I mean, from a accessibility standpoint, is that state of the art or is that... I don't really know. If I have an image, and it's a thumbnail, it's going to be a JPEG image, what is it going to be on the screen and what is it going to be... Is it going to be a link? I'm just confused what the image is going to be and what it's going to connect to, and then it'll connect to an image, to a video of... it's confusing.
Erica:
Right. Well, and that depends on the... is it going to be like one of those little tiny videos that you can click? If it is an embedded video on the page, it won't be tagged as an image. It will be a video in a player. So that will have its own information, and there, to define what it is, you're really looking to title the video. So something like a caption saying, "This is a video of our last performance." That would give information to people using a screen reader what was in the video and also cited users too, "Video of 2015 performance."
Then they can use that information to say, "Okay, I'm going to click on that arrow and watch the video. YouTube comes with its own controls. If people want to watch on YouTube, there will be a little link that says, "Watch on YouTube." But if you've stopped the video, taken a screenshot, and you want that image to be a link to the YouTube, then it would be an actual, genuine image that could have alt text. Then from there you could say, "Screenshot of," and then have it linked to YouTube.
But in that case, I would actually... For me, just thinking about it, if I was going to want to watch the video, it would be nice to have a text link to say, "Watch our performance on YouTube," because I wouldn't necessarily know to click that image and go to YouTube because I'm not using the alt text. So I think you would actually get the most benefit if you had the image, screenshot of or thumbnail of video, and then have a link as a caption to say, "Go here to watch our video." Because that way, cited users as well would have that direction to go watch a video.
Speaker 7:
Oh, okay. I wonder if there is a best practice or there's an example somewhere where somebody is done this.
Jay:
Sure. So-
Speaker 7:
Where on the internet will I go to find out this company or this entity or this camping catalog or mountain climbing shoes, this is where they've done it and they've done it right?
Jay:
I don't have any off the top of my head, but it looks like Adrian's given us a good link from WebAIM. I know they usually have some great examples in their website, so I would say start there. That's always a good place to go for me because that usually always has really good resources.
Erica:
I'm on WebAIM all the time. How do I solve-
Jay:
It's just bookmarked for us.
Erica:
Yeah. We had another question for Bill. There is a discussion about logos. For example, logos, what should the alt text say? Company name is sufficient. Thank you, Francesca. But then Bill had a question about, wouldn't that cause an issue if Amazon is part of a number of links? Amazon offers, Amazon Prime. That goes back to the question of how long does your link need to be to give information? A site like Amazon would have tons and tons and tons of links. I would say it's a combination. Francesca, feel free to correct me if I'm wrong.
There's two pieces coming in. I think it's two pieces of information. Make sure that the link is long enough to tell people what they're going to be going to because they're on Amazon. I guess the better thing to do would be... If they know they're already on Amazon, you can drop the Amazon from the link. Something like Amazon Prime where it's a patented service guide, keep it. But if it was Labor Day sales, people know they're on Amazon, so you can drop that from the link. But then make sure those links are long enough to be descriptive. If you have Labor Day sales and then weekly sales, differentiate those out.
Then I think also another piece for just general accessibility is making sure that those links are stored under the appropriate headings. So if you have Labor Day, maybe Labor Day sales, and then you have a blog post and then you have some pictures from like the company Labor Day party, amazon probably doesn't do that, then make sure that everything pertaining to that Labor Day sale is under that heading and that the headings are structured appropriately so people can find that very easily. Then your weekly sales would be stored somewhere else. So if you have lots of links, those headings can also come into play and help you get people to the right place.
Francesca:
I see what you said here, Bill, regarding the logos that are typically in the top navigation. When I do audits on websites, that can just say the company names. For example, on Knowbility's website, it will just say Knowbility. The alt text for that doesn't have to say, "Back to homepage", or something like that.
Jay:
All right. So I think we are going to go ahead and... If you still have questions, please feel free to type them in. But I want to make sure that we cover our last few slides. Thank you all. This has been great. I love doing these. These are becoming the highlight of my month now. I get so excited to geek out and talk about these kinds of things. I always learn so much not just from my colleagues, but of course from the participants too. So that peer learning and exchange is something I always look forward to.
So next month in April, it's also far away, I just can't wait, but we will be doing video and captioning. So we're going to up the ante and scale it up a little bit. So it will be on April 14th. Of course, same time. We'll be at 5:00 PM Central Time. We have our website. We changed ours to be nice and clean. So it is knowbility.org/digitalally. Molly, if you could just go ahead and put that up in the chat for us. Thank you. That will just take you straight to our website. People were asking about having these videos.
We do add them on YouTube. We usually put the links through our Be A Digital Ally page. If you've registered, we'll send them over to you so you have access as well and let you know when they're ready to go. Then of course, please, please join us for John Slatin's AccessU 2022. This is our annual training conference. It is May 9th through the 12th. We are ending our early bird sales, so we will be going full price after the 21st. So you have one more weekend to get those tickets in. It will be a hybrid event, so if you can, attend online or in person, whichever you prefer. We'll be in Austin, Texas.
For more information, that is knowbility.org/accessu. Then of course, stay connected. You can join our newsletter at bit.ly/knowbilitynews. Social is @knowbility. If you need to email us maybe more questions, want more information, you can email us events@knowbility.org
All right. Thank you again for participating. We love doing these. As you can tell, of course, I've put our tip jar there at the bottom, knowbility.org/donate. We do this free of charge because we want to make sure people have access to this and we are grateful for everybody who was able to put a little money in the tip jar. If you are not able to, we just appreciate that you're here. If you want to send your other friends that might be interested to these sessions as well, the more the merrier. So thank you all. Have a wonderful, wonderful evening and we'll see you next month.