 All right, the next talk will be by Christina workman and she'll be talking about how accessible websites can benefit everyone All right, hey everybody as it says I am Christina workman and thanks for coming to accessible websites benefit everyone That will be the prevailing theme so Come on I'm testing out a new app that I literally just put on my computer like an hour ago So bear with me because now it's not working I bet you it's stalled out No, it's not connecting again. That's fine Story of my life All right So a little bit about me As it says up there. I am a friend and dev at a company called american eagle.com. It's a digital agency I've been working with wordpress for about 13 years or so give or take I've been an event organizer within the wordpress community meetups word camps kids camps contributor days So I've really embraced the wordpress community and I hope you will all have found already if this is especially your first word count that There's a lot to learn from the community almost everything that I've learned In these 13 years that has gotten me to where I am I learned from a meetup or a word camp or from talking to Somebody in the community reading their blog posts seeing something they put on twitter So the community if you haven't figured that out yet is a great resource I am also an aging neurodivergent. I have bifocals this year Before that I used to look at my phone like this So And just my fun. I'm a lover of tea sloths and if you don't notice All things purple So This talk first of all what this talk is not about Is how to fix your site how to make it more accessible what it is about is A little bit of intro to web accessibility and disability And then primarily we're going to go through some real life scenarios And from those scenarios we're going to talk about barriers that could be Experienced by somebody in those scenarios and then also talk about other situations or Things that may happen to anybody in the general public that they may experience those barriers as well So my goal is hopefully by the end of this talk You will have a better understanding Of why accessible websites are so important for everybody Not just The people that are labeled as disabled All right, so before I actually get into this I looked up 2017 Stats Canada said about 22 of the population over the age of 15 Was listed as somebody with a disability at least one disability They may have several some of those disabilities may have nothing to do with using a website So we're not even necessarily looking at all of those people So we'll say roughly 20 percent maybe of people using websites. So that's a fifth, right? So like a handful of you maybe if we were doing the ratios But as you'll see Inaccessible websites Are a problem for everybody So we're not just talking about those people But the reasons that I hear from agencies freelancers clients All that kind of thing There's a lot of common reasons that you'll hear people say why they don't want to put in any investment or time Into making their site accessible. So one of those is it costs too much Okay, it does cost a little bit But it's worth it and there are lots of counter arguments to things like If you start it sooner like at the very beginning of your project and just build it in bake it into your process And everything you do it won't cost too much and the sooner you implement it the less it's going to cost This is what I hear from designers all the time And clients and everybody but designers especially are worried that they're not going to be able to be as creative as they want to be They're not going to be able to make things look how they want. It's going to just wreck their design There may be some things That you're a bit limited in But for the most part you can still do everything you want to do You just have to make sure that you implement Certain things to make it accessible in different ways to something like we'll talk about some things later, but Movement right some people they can't deal with lots of things moving around fast or Videos playing so as long as you have it doesn't mean you can't put that on your site You just have to make sure that you provide a way for somebody to stop it You can still have all of those things that you want to have mostly So this is not valid And the last one that I hear the most my site visitors don't have disabilities So again, they're thinking 20 of Canada Those people aren't going on my website Not true. This is the one that gets me really riled up So this is the one we're going to focus on my site visitors don't have disabilities Not only do I guarantee you you have site visitors who are disabled I also know That other people on your site are going to benefit from you making your site accessible And you may be wondering christina, how can you promise me that? How can you guarantee This thing that you say Every one of you whether you realize it right now or not has had an experienced a disability Every single one of you I doubt that there's one person at the end of my presentation Who will be able to say none of that applied to me? And if you do, please come tell me I want to know So like I said, we've all experienced disability Disabilities can be permanent disabilities like those people reporting to stats canada And an example of that would be somebody maybe with an amputated arm But disabilities can also be temporary. Somebody with a broken arm is now temporarily disabled And disabilities can be situational So an example would be if you're carrying an arm full of groceries into the house and you get a phone call Or you need to look at something online or your Maybe you're Using lyft or uber to get back to your house from groceries and you're trying to deal with that So there are all kinds of different types of disabilities that we can experience at any time So we're going to go through four scenarios the first one Imagine you get home from work If your work remote pretend you don't And you have to feed your kids or your dog or your cat Although the pets don't really work for this one You have a migraine you've had a long day at work And for extra fun your kids are really excited and loud and bouncing off the walls Which is just adding distraction to your already brain fogged mind because of this migraine So you think okay fine We'll order in we'll go to go to a website Pizza place whatever you want favorite place We'll order delivery and then you can just chill and the food will come everything will be okay Until you hit that website So there's some potential barriers that you could end up having there could be confusing navigation You may not know exactly where you're supposed to go To place the order there might be the order button might be hidden somewhere Maybe they want to tell you all about the restaurant or their policies or or whatever else So if the navigation doesn't make sense You're going to have a hard time. You're going to get frustrated Maybe the buttons and links are also hard to find Sometimes you could have things where They just don't look like links. So you don't even know where you're looking Another one is you have too many links or ctas if you've got all in the same line Subscribe to my newsletter buy my product Contact me somebody who is experiencing the situation is going to look at this and go Which one do you actually want me to do? Another so like I already mentioned fast-moving animations if things are Binging at you all over the place and you can't stop it and something's spinning around That's just going to cause so much distraction I've actually felt nauseous from some sites that move too much And then assuming you actually get to the order you place get ready to place your order You get to the checkout form Checkout forms can have tons of barriers in them You could have placeholder text that Magically disappears as soon as you start typing in and there's no label to tell you what's going on So imagine you're back in that scenario I've described and the kids in the other room all of a sudden you hear a bang crash and This is no longer important. You go figure out what that is You come here. You've half typed stuff in and now you don't know what on earth that field was for And half the time in that situation you backspace And it still won't tell you what it was because the placeholder text is just gone I've had where I even just Temporarily get distracted for no reason and all of a sudden I don't know what I'm doing there anymore. So text-holder uh text-holder placeholder text instead of labels is a really hard one And sometimes this is a little more rare these days Sometimes you're not able to click into a field. Sometimes field forms will only let you Progress from one to the next to the next and you can't go back And you can't go any further forward than the one That's not a good experience either. So Given this scenario if you were to hit all of these barriers, eventually you would just give up trying to order from this place and Maybe give another restaurant a try online But the chance of you ordering from this place anymore gone bad experience not going to happen anymore So these are all examples Of neurological disabilities Some more examples you can see there Brain fog lack of sleep anybody other than me last night, right? Maybe you're sick. You've got a flu or a cold maybe you have Anxiety or depression which can in of themselves cause you to not focus properly on things Maybe you just have stress we all experience stress sometimes And maybe you're just in a distracting environment and it's hard to focus on anything So how many of you hands up have experienced at least one of these things? So if you look around the room that was a lot more than 20 percent of you, right? And I know some of you just didn't want to put your hand up. I wouldn't have either So Yeah, so those are all examples like I said of neurological disabilities So this is why we know neurological accessibility benefits everyone So next scenario You decide to remote work from a local coffee shop today Get stuck on a problem Chat gpt has not been invented yet And you search for a tutorial You find the perfect video, but it's embedded on a web page. It's not you can't find it on youtube or anything else It's on this page and darn it. You forgot your headphones at home. How are you gonna watch that? So if there's no closed captions, you can't read it if there's no transcript you can't read it If video is the only way that that information is presented You don't get that information And you don't get to solve that problem another Issue that can happen is if video is set to autoplay Now for this particular example, it's not necessarily a barrier It's more of a potential embarrassment If you've ever been somewhere where it's kind of quiet and all of a sudden something Auto plays and it's all loud and in your face and everybody looks at you But it is also a barrier in other situations As well and I have actually been there was a site I used to do maintenance on sites every week and every week there was this one site That would catch me off guard. You'd think I'd learn it took me months Every time I would run the updates. I would go and I would check the site And this video would just start music playing and blaring at me and I literally jumped in my chair once or twice So no autoplay So these are examples of audio accessibility Some other things you might see you might have tinnitus Or tinnitus depending on how you pronounce it Maybe you've got a plugged ear, you know, I flew in here yesterday and it took a little while for my ears to pop Um, you might be skimming text to find a quick answer. I personally Hate watching videos to get information. I would much rather just scroll down find the bit. I'm looking for and be on my way Maybe you're learning a new language Subtitles closed captions are amazing for helping people Learn a new language by watching somebody talk, but still also having that text in front of them Maybe you've got your blog hooked up to a digital assistant Um, and they need to be able to access Transcripts to know what your content is about Again loud environments if you are in that coffee shop and it's not quiet, but it's really loud You may not be able to hear what's going on in the video And so again having that ability to read it would be really helpful And You know if you're like some members in my family when they watch tv and movies, we're a native english is our native language But they will watch english movies with subtitles on because it helps them focus on what's going on So these are all examples like I said of audio accessibility So audio accessibility again benefits everybody Next scenario Let's say you're one of those I'm going to bet you there's a couple of you in here Wordpress developer any kind of developer you don't even have to be a developer Some people just don't like taking their hands off the keyboard They know the short codes for everything their hands stay put mouse doesn't exist so You decide to register in an online course for the latest and greatest headless platform What kind of barriers might you experience? Maybe there's a no skip to content option Now luckily wordpress Generally most themes have a skipped content option. So we're covered there But some themes don't so you still have to be careful And what that means is you're able to go as soon as the page loads You're able to skip the whole everything that's in the header and just get to the content So that you don't have to read it and you may think well I want them to see and know what's in the header But maybe this is the fourth page into your site that they've hit They've seen the header. They just want to get to the content And then sometimes there's keyboard traps inside your main navigation And so when that happens instead of when you tab through if you have a bunch of sub menus Ideally you want them to be able to click Through each top level and then carry on and if they want to open up the sub menu they can But if your menu isn't coded properly They go to this one and it opens the sub menu and they go boom boom boom boom And then they go to the next one and then it opens the sub menu and they go down And so by the time you finally get to the other end You're exhausted from just navigating the menu and you haven't even seen the content yet Maybe there's no focus indication. So when you're tabbing all along you have no clue What link you're actually on if you hit enter you don't know what's going to open Or maybe you have unexpected tab behavior that takes you I've had a couple of sites where it goes all the way down to the chat box in the bottom I don't want to talk to you yet. I want to read your stuff And again, maybe the registration form is full of keyboard traps So some of those things I mentioned before where if you can't go backwards or forwards or You just you can't navigate purely with a keyboard. You need to have a mouse So these are all examples of keyboard accessibility Some examples here that could affect anybody at any time Maybe you have a broken arm wrist finger had all of these I launched a site with the arm and my my arm in a sling once Typing like this isn't fun Maybe you've got carpal tunnel syndrome and it's acting up And you just need to have something else Maybe your mouse battery died if you've got one of those apple magic mouse Happens all the time And my favorite, maybe you've got a baby or a pet sleeping on your lap one of my dogs Loves sleeping on me if I'm sitting on the lap my on the couch with my laptop open And he will he's so silly. He will sleep. He'll beg to lay on my lap I put my computer on top of him and he will stay there for a half an hour But then his head goes right on my arm and I can't use this one anymore So keyboard accessibility benefits everyone all right last scenario Imagine it was last month Temperatures are high You're like me. I live in Calgary. We don't have air conditioning out there very often So I don't have air conditioning So windows need to be open And we know there were lots of wildfires Everybody across Canada and lots of the top states Had a few days at least where those wildfires were causing poor air quality even if you weren't in those areas, right? So if you've got the air there the windows open and the bad air quality your eyes get irritated from the smoke your vision gets blurry And Maybe you're actually closer to those fires than what I've been in And you have to evacuate but where you evacuate to is a more rural area It doesn't have good wi-fi and you still have to do your work So you need to rely on that poor wi-fi so Some potential barriers we can see here Your eyes are blurry, right? So if the text is too small or even in some cases too skinny You may not be able to read what's on the page If there's low contrast between the background and the text for paragraphs buttons Anything you may not be able to actually read that text. You might not even see it or know that it's there Maybe again, there's hard to find links if you've ever seen a paragraph of text that's in black And there's a link for some of the words in dark blue Good luck If your content can't be resized or zoomed into there's you know those small Skinny texts if you want to try to read them Try to zoom it in But some content can't it's not responsive And I've been on sites on my phone even where not just images But content text was scrolling off the side of the page and I couldn't scroll to get it That half of the text completely invisible to me And that wasn't even zoomed in that was just poorly mobile And sometimes if you're in bad wi-fi or you're having wi-fi issues Key images may not load and if there's no alt text available to tell you what's going on there You're not going to know So these are visual accessibility issues and these are kind of I put this one at the end because These are kind of some of the ones that people tend to think of first And sometimes only and so I just wanted to make sure to that we all know that it goes way beyond What you can see but some Other examples of a visible or visual disability Maybe you have an eye injury and you've got a patch on and you don't have your depth perception Maybe you've just gone to the eye doctors and they've put those drops in your eyes and your eyes are dilated and you can't focus very well Maybe you've got an oral migraine which is where it causes like spots or just like blackness to fill part or all of your vision Sometimes if you go back to that coffee shop example or depending on where you sit in your house Maybe the bright sun outside is shining down on your screen That can make it really hard to see in low contrast situations Or maybe like the fire example your eyes are agitated because of allergies, which again very seasonal but not always Maybe you forgot your reading glasses and so you just can't see or maybe like me. You're just getting old and you need different glasses So visual accessibility benefits everyone So those scenarios that I've gone through those are real life scenarios Those at least in some form have all been experienced by myself I'm pretty sure most of you have probably experienced some piece of those as well But there's lots more scenarios. So I encourage you to come up with your own examples Think about how you're using your site how your parents use your site how your kids use a website And think about the things that they may come up against And share Share these examples your own examples Anything you can with your community with your peers with your co-workers Anybody who might be involved with using a website not even making a website because the more people that know Better world are we're all going to be because it ends up spreading And ultimately by sharing and having more people understand this we can help normalize accessibility So I hope by now You can all agree Making your website accessible makes it better for everyone That's it for me so feel free to contact me at any of those sources and If we have any questions three other actually four other accessibility Opportunities that I that work when I'm talking to a client who is reluctant to get involved in accessibility number one google is the biggest internet user in the world and it is blind Very true if you your client might not care about The 20 percent of people who have disabilities, but they may care about seo. That's really important another thing Up to 20 percent of internet users may be either drunk or high Which we would you mind if I included that then no, please do When I was in my 20s I had a bad drug interaction. I was taking medication And it conflicted with another one and I lost My my vision went away and luckily I had a phone Back with a dial and I could braille my way around the phone to call 911 If I'd had a smartphone, I wouldn't have been able to yeah and So a number three I have a one client that Is an abuse hotline resource And sometimes if you've been beaten up badly or been in an accident Or if you're just driving And you weren't paying attention and then you were in an accident either before or after your accident It is really handy to have your phone be able to To be able to navigate a website audio with audio Or with have it read stuff back to you. Those are things that happen to people who don't expect Or who may not have sympathy for people with Built-in or long-term disabilities, but please add those because those can get through to people Who might not ordinarily think that Accessibility matters. Yeah, and I've actually been saying that to a few people recently that you know Lots of clients. They're willing to invest tons of money on seo because that was the buzzword That's gotten through to everybody now But lots of the things that you do to make thing your site accessible Are also beneficial to your seo Not just from the google reading perspective, but just in general too Another thing if you're just trying to convince a client to take accessibility seriously At least in the united states plaintiffs attorneys are actually finding websites to go after on purpose The way that they make money is they scare you with a lawsuit And they want you to settle out of court and they move on to the next one So their business model is scaring you into paying out of court. They don't care that your website is Actually helping people or not. It's just a way to get money out of you But you should be doing accessibility for all the reasons you mentioned anyway and to legally protect yourself Yeah, exactly. And you know, unfortunately, I've even heard of some people some clients who have said We did the risk calculations. It's cheaper for us to get sued But suing the suing thing does often Scared of people, but we have to get them to know it's more than that I'm just wondering if you have any favorite tools or Things that help with accessibility, whether it's for wordpress or plugins and such like that. Yeah Um One of the easiest things to do is check that color contrast If you google color contrast checker, the first one usually comes up is by webaim.com I think it's just webaim.com and you can punch in your two colors Your background and your foreground And it will tell you If it passes for AA or AAA because there's different standards And it will tell you if it passes those for regular size text large text or Graphical interface items because there are different levels that it needs to be for those. So that's one that I use Constantly when I'm checking designs There is a chrome extension called wave like just wave Uh, it'll do a quick scan of your site. It'll pop up Um a thing on the side that will show you Not just issues, but also just information So it'll tell you it looks at your heading structure To see if it's in the right order and it'll show you this is what your heading structure is So you can confirm that it's what you want It will show you contrast errors as well Uh, it will show you Alt text that it thinks is missing or needs to be checked Um, and then it shows you what aria labels you have on it But it doesn't tell you if they're right or if you should have any others But if you're familiar with that kind of thing, it does give you that information So that's a that's a good one to just sort of do sort of a quick check and try to get some of those low hanging fruit issues And then there's another one I can't remember what it's called. I'll have to get back to you on that. I'll post it on twitter But the one i'm thinking of it does a bit more of a A complex check and there is also there's a There's a chrome developer tools extension by a company. I think they pronounce it dq. It's deq u e Um the company name and they have a chrome extension called axe that actually sits in your dev tools And I think you can run a scan there and it'll parse your code and and see if your code looks okay Hi, do you have a tool or method when you're testing for tabbing because I don't usually use just my keyboard so i'm curious How do Users use tabs and keyboard and is there a way for us to test that? Yeah, so The easiest way is to literally just try it yourself Hand put the mouse away and see and check and see Is the behavior of can you see where you are when you're tabbing? So do you have those focus? Um indicators Is it moving in a logical fashion? So is it going through? I'll like the menu and then down to whatever the next linker button is and then to the next one or is it jumping? all over the place but there is I think it's the tool that I can't remember the name of right now they have a Sort of a simplified version and then they have a more extensive version And in their extensive version one of the things it will actually as you tab through it will track for you And it'll draw a line from each tab so from here to here to here to here so you can actually visually see Where it's tabbing to I see I have a plug-in extension for chrome also and it show Like colorblind what is supposed to look like if you have colorblind All this different disability They can show a list there and then you will see what the people see Yeah, the way they it is my question is there is some Website right now to quick fix the problem. They have an add-on plug-in when you click on it. There is a list and then do the accessibility instead of Originally designed it as accessibility for accessibility so It's a trend right now or is it a way of doing add-on instead of design through um, yeah, so That's a good question and So those are called accessibility overlays what they do is you'll see them on sites where they'll have like that little figure Of a person sometimes in a circle or whatever And you click on that and it gives you a bunch of different options to do um, those are A bit of a hot topic in the industry because of course those companies claim that they are fantastic as you would expect them to do um, but the accessibility community in general From my experience um, they don't recommend those For a couple of reasons one big reason is a lot of people who rely on extra tools to help them navigate sites They don't like those tools And one of the reasons for that is sometimes it will actually hijack or break the tools that they're used to using every day so Using you know sort of the most common example that we think of a blind person navigating On their computer navigating on a website. They've got their screen reader setup. They've got they've picked their Their voice it's gender the tone the speed They've set all of these things up and if your site goes. Yeah, but I want you to use this And now I can't use what I'm used to That's not really helping me as much as you might think Two plugins that I've been using lately On client websites one of them. It's a really cool plugin for authors And let me see I just had it a second ago. It's called accessibility checker Is that the one by equalize digital? Yes, and it's really cool in particular you can have it highlight the It will like put a little orange box around as you go tabbing around so you can Really see where you're going. It's got contrast some controls and other cool stuff And another one that I add to clients Sites is called one click accessibility It puts up a little drop down for users That will let you do things like highlight links and Change the contrast change font size and that's also a good way If you don't if you're not as enthusiastic But it's also great on the front end if it's important that people be able to Like see that You know if you have like really busy backgrounds over text It lets you turn that off Yeah, so and that kind of falls under that overlay that I was just talking about. Yeah, it's not the ideal It's not ideal. It's better than nothing. I do believe but Yeah, and the one that you the first one that you mentioned about I haven't tested it out myself It's on my to-do list Um, but from what I've seen and heard of it. It sounds really good I've seen people in the WordPress accessibility community seem to be embracing it And for that one it is it's called accessibility checker because it's checking for different things for you So that's really good as well In the repo plug-in repo Yeah, and actually along those lines one of the other things I don't touch on in this presentation But has come up in in the community in general Inclusivity is also part of accessibility and Not to be plugging any other plugins But Yoast with their SEO plug-in has started putting in Inclusive language options as well. So they're doing some really cool things with that Hi I have a question about not the front view of WordPress for accessibility But the dashboard so I did a website for somebody who was visually impaired And she really wanted to do some updates on her own and this was before the block editor So I haven't explored it since then but it was a failure for her to try to update Um with her screen reader and I'm wondering Has there been An improvement in that and is that a focus of the core project? And if you don't you know, I don't know if this is an appropriate question But I always think about it when I am here at an accessibility talk Yeah, no, that's a great question and I don't have full answers, but I have some answers um so I don't know too much about When it was just the classic editor I do recall though reading so there is WordPress is open source anybody can contribute to it There's lots of ways to contribute there are official teams that are involved in In creating it one of them is core One of the other ones is accessibility So there is a group of people and they're all volunteers And they work as hard as they can to make sure everything is accessible not just the front end but also the back end I do recall before the block editor came out reading like an open letter from somebody and it like Half the accessibility team kind of just quit because They felt they weren't they weren't being listened to um I think things have improved from what I've seen um I know that there are some good people working on it now I do know that of course They don't always get to be the ones making and influencing the decisions and not everything that they put forward is considered priority for a particular particular launch But they are trying and I believe accessibility when when the block editor was being created it was More top of mind Is my understanding i'm not part of the accessibility teams. This is just all stuff. I've gleaned from posts and twitter and and all that stuff, but I hope it would be better for her now And I think that is one of the things they try to keep in mind Some things they still get overruled but they do listen I actually submitted and this is the other thing too with wordpress being open source If you ever find an issue or see an improvement you can log a ticket log bug So This was a small thing, but again being the aging neurodivergent I don't always read things or interpret things the same way as a lot of other people and you know when you go into the dashboard and You've like the admin dashboard and one of the widgets that's just default there is the events happening in your area and You could actually change the location But in order to do so you had to hit A pencil icon And to me And said like i'm looking at Calgary and then there'd be pencil I'm like, why would I want to edit how you spell Calgary? So I realized one day I clicked it and an input field opened up and let me put in type in a different city I'm like, oh You don't want me to edit it. You want me to be able to search a different location? Like that's the wrong icon So I submitted a ticket and I marked it as an accessibility issue and actually I know some people say their tickets sit there for a long time and some do Mine got put out in the next release So you're all welcome You can make a difference Yeah, for the person who was in the back Firefox the browser, you know, we have the web inspector. They have an accessibility inspector too So you can turn it on it'll show you your tab index So I think it's like tab view So you can just see in one quick look you're where you're going And then for the overlay solutions I don't think you should use them just as a band-aid But one of them is called user way. I think it's the most popular one It will It's almost like it'll put a bunch of band-aids on and it'll tell you Now you need to go fix these things systematically so it's I don't think you should turn it on and say now my accessibility is done But it's at least a hit list of these are the most important things. Here's my My double a's that need to get fixed. Okay. So it's doing a bit of a check for you as well Yeah, you should use it like a full tool not as a I'm just going to make my headache go away That's good news. Yeah, it's good. That's probably I haven't used any of those myself Just see a lot about them read them. I've I've actually seen them On sites and once or twice. I've clicked on them. I guess but Yeah, I would imagine that's not how it started. So that's a really good Thing, I hope that's a trend we see in the rest of them Can I make one more point? Since we're talking about tools a lot I just want to mention That lots of those tools even the checkers even the really good ones They don't find everything. There are a lot of things that technology can't find Things like technology would not have picked up that pencil icon because that was a contextual Meaning that tech wouldn't understand So there's a lot of things that you need a human To actually review and think about And even when you're doing alt text, not every image needs alt text Not all alt text is good alt text. So it might go. Yeah, you have alt text. Good job But if your alt text says DSC dash zero four five No good alt text So something to keep in mind Good All right. Well, thank you everybody for coming out