Beyond-Impact Website Accessibility WCAG 2.1

Hi, everybody. I'm Tara Cunningham, the founding CEO of Beyond Impact, and I'm here with my Chief Accessibility Officer, Joel Isaac. Joel, do you want to tell everybody about yourself?

 

Sure. Hi, there. I'm Joel Isaac. I am an accessibility specialist and I've held a lot of different hats in the past, including full stack developer and accessibility product owner on large site. And I have been losing eyesight for a couple of years. I'm to the point that I only see blurs all can't visually see anything and recognize it. I use something called a screen reader to make sense of digital things, including websites and apps. And that's how I pretty much understand things.

 

As an accessibility specialist, though, I not just focused on blindness, even though that's my day to day. I tend to think in terms of inclusion of everybody. So I really want to think of things in terms of all the symptoms and all the experiences one could have. I think of things in terms of how is this website perceived? What are you trying to say? What are you trying to communicate? How do you communicate that to people on all levels? If I can't see, how do you communicate it to me so that I understand what you're trying to say if I'm deaf, how do I communicate it to you in a way that you still understand? Or if I'm losing my eyesight and I have problems like, Claire, how can I still make my website resonate to? Those are just some of the types of cases that I think about when I'm making sure that digital properties are inclusive.

 

Right. And I spent 20 years in disability inclusion and I thought that I built a site that was disability friendly. I did everything I checked off on the WCAG. I made sure everything was good. I use Wix, which gave me a compliance thumbs up and to be extra short, I went and purchased a product that would allow people with disabilities to choose the way they wanted to see the site. And then I met Joel and then I learned I have no idea, no idea how difficult it is to really make an accessible website. And so I decided to throw myself under the bus this disability inclusion specialist to show that even with the best of intentions and ticking off every box, you can still fail. And we can still learn from each other. And we could still become more inclusive. So Joel is going to go through one of our pages. We're going to hear what it's like to go through a site using a free screen reader, because a lot of the screen readers can cost over $1,000. And who's got that? And then also looking, look at images, how we're supposed to not just alt tag, not to say what the image is, but why is that image there? And to make sure that that image isn't harmful. And we got some really interesting things that we think that you'll find really enjoyable. So I'm going to be quiet for once and just move over to Joe.

 

So the goal today is, Tara said, is really to show you that you don't need a lot of expensive tools and a lot of advanced techniques to be able to make your site communicate properly. So we're going to run through the site with a free screen reader called NVDA that even you can get that for free from www.nvaccess.org. And it's comparable to the expensive screen readers and some of the ones that are built into your tools. In addition, we're going to we're going to run through the digestive with the screen on her regular site, but then we're going to invoke the tool that she purchased. That's supposed to make it more accessible. And what we're going to learn today, hopefully, is that as long as you think about what you're trying to communicate, it's not that difficult and you don't need anything to invest, you can do with it. And there are a couple you just need to use your common sense, so let's get into it. Alright.

​

So I am going to show you what a screen reader, user experiences, when they just go through a standard webpage, we're going to be using Tara's advisory page on the beyond dash impact site. And what I'll do is I'll just go from top to bottom. And I may jump around a little bit because you really don't want to have to listen to the whole content, but you want to get the high, high points.

 

So I'm going to start here. Button use website in a screen dash reader mode, skip links, region link, skip to content link, skip to menu link, skip to foot or out of region. Top of page region out of region button. Skip to main content banner landmark visited link graphic beyond impact disability inclusion, blue site navigation landmark list with six items visited link home link about us visited link advisory link U dot.

 

Sustainable development goals, link research, link contact out of list. Mainland mark clickable, heading level one advisory graphic, happy comma, diverse comma millennial work team with wheelchair user in the front heading level two, true diversity and inclusion. Diversity and inclusion has never been so front and center of every business decision dot from the number of me too movement to the murder of George Floyd comma.

 

The whole community is questioning the preconceived notions about comma and subconscious bias against common. Yeah about karma. So you get a sense that, like, we hear everything that's written there and then the images are described. So what you may not, what you mean, just pass over with your eyes. It becomes glaringly clear when you have to listen to.

 

And things like content and meaning, uh, become really important if you're not seeing the screen and that parallels, uh, to other disabilities and just other experiences people have day to day, maybe one day, you're not feeling good. So you're not seeing as well, maybe like there's too much glare on the screen or maybe you're neuro-diverse and there are certain triggers that bother you.

 

There there's things like that. That. I didn't have to be aware of in our content that we're not, I'm going to keep going down this page. And I'll, I'll tell you generally, a screen reader user they will use the structure is on the page to be able to navigate in. Tara has done a really good job of laying the structure of this page out.

 

Like you have the top where there's a header and it gives you some options to be able to jump to different places on the screen. That's really there. If you are a keyboard, only user say somebody who can't use a mouse because you have mobility problems with your hands and it hurts to hold onto our mouse.

 

Uh, being able to use the keyboard can be a real advantage. So you need these things like skip links to be able to jump up and down through the page, to the important pieces. Uh, screening of your users. They use a lot of times they'll go to the main content and navigate by headings because headings are supposed to give you a summary of the main ideas on the page and they're hierarchical.

 

So you have like a heading level one, which is supposed to be the main topic. And then it goes down in number. And then you can discern like relationships between the content that way. For instance, like a heading level two is related to having level one at a heading level three, maybe specific to that specific heading level two.

 

So then you could organize the content that's on the page without having to look at it. So it gives you a really strong understanding of what the site is about and what the site is trying to tell you. That's important. Uh, and that just takes for granted that the headings are concise and that tell you everything.

 

And the other structures also support that.

 

 

So let me just run through the, you just jump in real quick, Joe. I, so there's a couple of things that you're saying there that's really helpful to a marketing person or a person who's a small, medium enterprise. That's trying to build their business. You're describing what we learn in school by build an outline, right?

 

The key pieces that are important, make sure that it follows a very logical path, And that the information that is underneath those headings are, or adding to, uh, the, the user's experience.  It's not there just to be there. Um, and that's hard. So never mind putting things together appropriately, but making sure that your content is reading in a way that actually makes sense and is building upon each other is a huge thing that you need to be able to do, which helps people with multiple disabilities, but it helps.  Joe soap. Who's super busy trying to figure out what are they going to do? How is this going to help? If you have to dig for it, they're going to go somewhere else. So by making your site accessible, and these terms will also make it more acceptable, it'll help you with your thought process on how you're going to build this out.

 

Joel, if you don't mind, I don't know if you can scroll down the screen because I'm not seeing the full image. But, uh, okay, so we'll use this image. This is with our financial advisory piece. Um, so I wanted to show that my purpose of showing this image is that a disability is sometimes hidden and, uh, other times it's Physical that you can physically see it. So I have a wheelchair user on the top and I have a picture of a black woman using her screen, just typing away. She could have a disability and that I wanted people to, when they see the site to go, She doesn't have a disability. She could have a disability and the person sitting at the desk next to you may have a disability that because of stigma, they're not letting people know.

 

So that's what I was trying to achieve with that picture. So instead of black woman at computer desk, that doesn't tell you, give you a meaning of what that nothing, nothing. It doesn't say anything about what I'm trying to say, which is this person may have a disability. And it goes way past the fact that she is a black woman in a financial situation, which is rare to begin with, but she could have a hidden disability.

 

And that that's how I should've described. Yeah, that's the thing. We all get caught up into our, the way we perceive things like the sensory parts. And if I'm trying to make something for somebody else, I'm thinking about their sensory experience, but we need to, it's not rocket science that we really need to think of this whole thing as like, maybe like an S.

 

What is it? What does it mean? What does that, what does that image mean? How does it reinforce your content so that it tells, tells me exactly what I need to know. And Tara, I don't fault you for that Alt Text. You're looking at it. And you're looking at it in the context of the other content on the page.

 

And you were describing the subtleties of what that image means to you, but either a literal explanation of that. Or even just like the subtlety of this, it doesn't translate over because if I'm not seeing it, I won't get that subtlety that you're seeing. So you have to be really concise about what your friends say, as Tara mentioned before it it's, um, it actually will make your site better and it just doesn't benefit.

 

The people who use those image, all this alternative descriptions, it helps everybody that that's where inclusive design becomes a huge advantage when you start to use those ideas, because then everybody benefits and then it makes your site available to a lot more people. Tara, what do you want me to look at next?

 

You want to look at more images or should we look at more of the stress? I let's, I think we've killed the images. Do you want to go down to the structure? Uh, there was a couple of things when I did this with Joel to begin with that blew my mind, for example, bullet points. Um, and then there's a fun one.

 

How FAQ I don't have that on my site, but you might want to do F dot a dot Q dot because it comes off put frequently. I just think about the potential person where that could come out, which is what comes out when you're using a screen reader when you don't have the dots. So, uh, the U dot N dot, uh, sustainable development goals.

 

It, when I first did this with Joel, it was unSustainable development goals. So it creates a real problem for people that are blind. What's an unsustainable development goal, right? It's the opposite. And for people with neuro diversity, we don't know all the acronyms. Sometimes it's a bit best practice to spell these things out.

 

It may take a little more space on your screen, but it's a communication that everybody understands now because I don't know what that unthinking. And I'll have to sit there and think about it. And I don't know other people who aren't blind based they'll have that same, same experience and you lose people quickly that way.

 

So there's that assumption. Um, so in building myself, And I think that this is, I can generalize this against pretty much everybody. You're assuming that people have the same knowledge as you, you try to make it down into layman's terms, you doing your best, but because this is your. You you mess up. So with the U dot N dot, although that's better than UN sustainable development goals, United nations should be written out.

 

Um, and like you said, it's really long and it takes up the, so then you're dealing with like the visuals. So how do you make that look sexy? And that's up to a person. Knows how to make website sexy. I'm using Wix. So, uh, I don't think I can make that sexy, but, um, clearly I need you, because what I'm trying to do is reach out to people with disabilities and let them know that they need to fight for financial inclusion.

 

And, uh, it is a United nations human right, to be a part of, uh, Society through financial inclusion and 60% of people with disabilities are considered low moderate income, which means they are in poverty and 40% do not have access to credit for a bank account. And that's horrendous. So I should put United nations on there to let everybody know that not allowing or by.

 

Subconsciously not thinking that people with disabilities should have financial inclusion. This is a UN right. Uh, United nations. Right? So, um, so again, by being more clear about these things, you become more are at least I'm becoming more clear about what my messages and what I'm trying to, to, uh, emit.

 

Let's go deeper. There were, and look at these headings because they're supposed to be the summary of the content that's coming afterwards. Advisory heading level one. So advisory that's the page, diversity and inclusion heading level two through diversity and inclusion. I don't know what to expect there, but I would expect that diversity and inclusion has never been so front and center of every business decision.

 

That gives me a better sense of what that is now that I start reading it. That heading makes sense because it's really explaining through diversity and inclusion. Let me go to the next heading financial services heading level two. Okay. And this is another service. It's not heart of the, the first idea, but it's a parallel idea.

 

So I know that they're not connected to each other and one's not inside the other. Let's go to the next thing, human resources in diversity and inclusion heading level two, I'm hearing heading level two. So I know that these are all parallel concepts. Nested and one inside the other www.beyond-impact.com.

 

Bar iron colon 47 dash 1 2 6 5 2. I don't know what that is. That's my batteries. That's the footer. That's your footer. Oh, okay. I don't know why it keeps coming up. As it's saying it's a heading level five. So it's, it's, you've done a good job of structuring the patient. But at some level it's made that a footer, but it's also made it a heading level five, as you probably heard before we had heading level one and a whole bunch of heading level two.

 

So we know that they're all, uh, parallel ideas. And then now we have heading level five. So now I get confused and, uh, it's like the information there. Doesn't tell me anything immediately that I understand I can do it. So it's, it's interesting, but we need to have like a good hierarchy. Um, one thing I wanted to talk about before we go further is colors are super important.

 

You know, that as a visual people are visual, always think about the colors, but one thing you may not think about, uh, actually two sets of people that you might not think about are people who have low vision people who are losing their eyesight, or that can proceed, uh, certain ranges of colors, like people who are.

 

Red blue, green colorblind, or monochromatic color blind, or people who are just low vision or they have glare issues. Uh, contrast becomes a big issue. There even magnification becomes an issue. You need to be able to zoom your site and everything still needs to be intact. Uh, the colors need to be, uh, high con.

 

If you're looking at compliance, there's a gauge that they call  where it gauges the contrast and their numbers for that. And tools like Wix will help you to make those colors compliant, to contrast. But another part of this that you may not think about it, and it's a little harder. Is there a diverse people could be affected by Clarin colors.

 

They could make them a little more agitated. So you want to really think, not necessarily muted colors, but colors that aren't so glaring and they're not, you want to avoid angry colors that they like a sense of a lack of safety that people. Yep. So, uh, super bright blue neon green, uh, there's um, images that have lines and circles at the same time, it actually hurts people.

 

It physically hurts people. So, um, right now we're, we're zoomed in on this person's jacket, which is, um, now that I'm looking at it has vertical lines and horizontal lines. If I, the person is really upset by that, you know, if a person is looking at that, so maybe I should be looking for someone wearing a solid suit because that could be also, um, yeah.

 

Yeah. So there's just so many things. That you just don't think about it. If I wasn't having this conversation with you right now, I wouldn't even notice those horizontals. And I was quite proud of my document. Not having any bright contrasting color, you know, I had everything, what I thought was right. But now I'm looking at something that's very wrong.

 

So it's a process. This is interim. If you try your best. You keep going and you try a little more and then it becomes, it gets better over time. Uh, so it's a moving target, so it's not nothing to be stressed about, but you making things better. And the more people you help with communicating on the site think of how that impact for every.

 

So another thing I just wanted to talk about is we talked about zoom. You should be able to zoom your, your page to 200%, maybe more, uh, there's also something called responsive design that's that's uh, on a lot of sites these days, they want to convey the same message on smaller screens, like mobile and tablet.

 

So what happens if you zoom too much? The whole. Layout of the page can change. You really need to consider how a smaller screen. Ken can prove how you communicate on smaller screens too. The whole idea is you want to keep your message intact and maybe just move things down the page, let it flow down the page so that it's like vertically scrolling and then.

 

You can get the same information. You don't want to be able to scroll in two directions because again, like what we mentioned with the colors and the patterns, and look the images and say just maybe styles and lines on the page. This, if you're just having to scroll horizontal and vertical, that becomes stressful.

 

And I may miss a lot of information that way. Not as bad for a screen reader, user per se. If you leave things out, it becomes a problem. And if you're seeing and say you're a little vision, and you're only seeing a small part of the screen at one time, you could lose. So it's important to keep both those ideas in check.

 

So I want to go through the tool that Tara bought for to make the site more accessible. It's called accessibility. And there, I don't want to focus on accessibility per se. There are a lot of tools like this and I just both Tara and I just want to assume that accessibility has their heart in the right.

 

Uh, but does it really do what it says it's going to do and do any of these tools that are supposed to automatically make you legally compliant, really give you what they're promising. So I want to go back. Yeah, I just want to clarify, um, I was hoping that this would give another level of comfort to any user that came to my site.

 

We did this on my husband's business website as well. We thought that by doing this, it would allow every user to be able to. Do whatever they needed to make my site more, uh, easier to use. Full-stop I already knew I was WCG accepted because of the way I, uh, Wix went through the accessibility and I ticked all the boxes.

 

I knew I was legally. Okay. But I thought that this was something that would make my users more comfortable. And, uh, so, uh, Joel, if you want to go through on how it's not so comfortable, So I know that everybody wants to do things automated, so they protect the box and then it's done, but it's, it's, it's not realistic.

 

And it's not the reality. Even after you run automated checks and it tells you that it's good. It's probably only checked 30 to 50% of the potential issues. That really is why you, the next. Or you need to know what you're looking for as a, as a single business owner or somebody who's running a small company, or you have a small product.

 

So the excessively accessibly tool is a suite of different, uh, tools that you can use it. In this case, it's telling me if I want to use a screen reader, which I've already used. So I don't need that, but a lot of these tools are free and if you really wanted to use them, you can embed them on your site without having to pay anything.

 

Because a lot of these sites that they're, that they're coordinating for you in one place, they're all free. So maybe you're paying just to get the sweep of all the tools together. You don't necessarily need to do that, but let me stop waxing philosophically and let's turn on excessive skip links region out of region button use website, button advisory bar.

 

Be on dash impact bark, skip links, region link, skip link, skip to content link, skip to con link, skip to content. Now you don't hear that turn on the screen reader it's it's running how it changed the page link. Skip to foot out of region banner landmark clickable visited Lincoln. Visited link graphic beyond impact disability inclusion site navigation landmark list with six items visited link home out of list.

 

Clickable visited link graphic beyond impact disability inclusion blue. It hasn't changed anything so far. Let's keep moving down. Site navigation landmark list with six items home visited link clickable mainland mark advisory heading level. Heading level one, advisory graphic, happy comma, diverse comma, millennial work team with wheelchair user in the front heading level two, true diversity and inclusion.

 

Diversity and inclusion has never been so front and center of every business decision dot from the number of me too movement to the murder of George Floyd comma. The whole community is questioning the preconceived notions about comma and subconscious bias against comma, certain races, comma, gender, comma, and sexual orientation.

 

If you take re nothing's changed so far. Let me just keep moving. Welcome dot heading level six that wasn't there before Tara. Yeah. I don't know. What's what's heading level six. Let's out of list heading level six. Welcome dot. Yeah. Where did that come from? And the subconscious bias against people with disabilities.

 

Graphic a woman sitting by her computer in a trough. There's a woman sitting by her computer in a trough are out of graphic heading before. I wasn't sure what a trial was. I had no idea, a woman sitting by her computer in a trough.

 

I have no idea. Let me see. That's it. I think that was there before, but accessibility access to be didn't help with that. Either heading level two financial service. The on dash impact comma, a woman and disability owned company, comma list with 13 items, Bloomberg comma heading level six. So this is another thing that wasn't there, nothing that you were talking about bullets before Tara, this was the blooded part of the content that we didn't necessarily go over before, but they were all lined up bullets that would help people read through this and understand this like a concise breakdown, how the OD impact advises.

 

But right now, it doesn't give me something I can use. And it's a little confusing. I don't know how this content connected in anything else. And I don't really know how to navigate through it because it's kind of jumped out of order bullet heading level six, Salesforce, comma bullet, heading level six, Goldman Sachs comma bullet.

 

This looks like a list of clients heading level six, TD bank, the clients, but there it's not. Yeah, I they're in Boulder and they have, uh, so I'm on my Wix right now. It's calling it paragraph two. It's definitely not a header. So we all are really excited about AI and machine learning. And I don't know about you guys, but I use those terms anytime.

 

I want to sound smart. And in a group I'll refrain from seeing them in that context here. But I made tools try to leverage those pieces, but they're not there yet. They make a lot of mistakes like this.

 

But a lot of these tools are lagging behind, and this is why automation is good, but it's not the end all be all. Even after you implement something like this year down and you still have to understand what this stuff means to other people, bullet heading level six, Deloitte comma bullet, put your content info, landmark new window visited link heading level four.

 

So it didn't, uh, so that, that footer is a little better. Now. I know it's still heavy one five, but now it's also telling me that it's a new window. I don't know what any of that means. And if there's something there, this interactive, I don't know how to access that. Heading level five visited link www.beyond-impact.com.

 

Bahrein colon 47 dash one clickable link, LinkedIn new window options, comma. So that's, again, the accessibility toolbar at the bottom of the page where you can choose different, uh, options in different, uh, like say low contrast modes or screen reader modes. But when I'm looking at this, I'm not entirely sure if Tara was well served by this tool, because it seems like she had something that she could work with and improve before.

 

And now I don't know how you fixed it. Because what's how how's the tool gonna interpret this and change my page. So that's really the message here. You have to gauge whether these tools are actually helping. It's easy to buy something, but there's a lot of sales would ship in the United States and sometimes people are selling you stuff.

 

Not necessarily fits your needs. You have to be an informed consumer on buying this stuff and really think about the impact. It's, it's, it's a lot of all idea to make these things more inclusive and accessible, but you have to go one step further. Is that what you're actually doing? Is it better at the end of the day, you have to decide.

 

Like anything else in the world, Joel, if it's worth doing, it's going to be hard. There is not a full solution. So, um, what we've learned today, uh, very briefly is we need to put things in our websites that are hierarchical. We need to make sure they waterfall that the images are explained to actually, uh, enhance.

 

The texts that you're using so that anybody who's using this, whether they're blind or cognitively disabled, or just somebody who's in a rush, which is 99.9% of us, that they're able to figure out what you're doing, how you're doing it and what your, uh, That's it. I take away all the other nonsense that is not really required, but in order to do this correctly, you really need to work hard to make sure that what you're saying.

 

How you want it to be understood. And I think we forget about that. Uh, it's basic marketing 1 0 1 that we all forget because our we're in the woods, you know, we're all trying to get through life. Uh, but if we want to get through life with other people, with us to have them be able to enjoy everything that we're able to use, um, if we want to truly be inclusive, we have to put an extra work.

 

It's just that simple. And it's not rocket science. It's a lot of these things that we've talked about today are pretty obvious. And if you're thinking about it, that consideration makes everything better. I don't know if it's that much work, but it's definitely work that we need to put in. If it's something important.

 

This is important. So, uh, yeah, so that's why I wanted to use my site because I'm supposed to be somebody who understands disability. I spent 20 years in disability and I'm still learning on a daily basis. On what I need to do to be more inclusive and, uh, yeah. And, uh, there's no miracle AI solution.

 

There's just a lot of hard work and, uh, you know, and thank goodness there's people like Joel, that we can go to, to fix things up. So hopefully by the time this video is being watched, everything, my site is actually more inclusive. I'm very open to hearing other people's. And what's in the side and what we're talking about.

 

Um, I am happy to throw myself under the bus because if I don't, no one else will. And uh, we need to, we need to do better as a society to be more inclusive of everybody. So, Joel, thank you so much for your time on this. So I hope you guys learned something from our, a little dialogue here.

 

And if you want to contact us, you can contact Tara through the beyond-impact.com website.

 

Or you can reach me through Novellus LLC, uh, or through LinkedIn again. Uh, Tara Cunningham here and I'm Joel Isaac. Thank you so much care. Be safe.

​