 Hello everybody. Welcome to the second talk in this in track two. It's right here. Yeah. Jen Harris is a WordPress developer specializing in helping clients solve and prevent WordPress problems. She works with a wide range of website clients from multi-million dollar companies to solopreneurs maintaining WordPress sites with care plans, helping them with website accessibility. Her talk today introduction to is introduction to web accessibility. So everybody give Jen a warm welcome. Technology. Come on. There we go. Excellent. Alright, so I like to do a little bit of audience participation. It is of course voluntary. But if you want to volunteer yourself to participate, put your hand in the air. Most of it is in fact putting your hand in the air. Come on. Let's go. Hands up. Thank you. Alright. Today's topic is introduction to accessibility. Maybe. Technology. Okay. We're gonna go this way apparently. I'm Jen. I started my career as a software developer at Boeing working on the V1 bomber project. And one of the interesting things about my time at Boeing was I didn't end up on one team. I ended up on all the teams. I was in test. I was in development. I worked in prototyping. I worked on trying to literally create new systems to solve problems. I worked with the requirements team. And I worked in specifications. So what I ended up doing most of the time was what's frequently called glue work was I looked for and found problems and then looked for and found solutions. So finding and fixing messes kind of became my thing. And if you've never heard of glue work before, there is this really great presentation. No idea dot dog slash glue. It's one of those URLs you just can't forget after you learned it. Then after Boeing, I got involved in WordPress. And I have been involved with WordPress for over a decade. And I've worked on literally over 1000 websites during my career. I've done everything from new builds, remodels, e-commerce, learning, membership, security work. And now I've gotten quite a bit into accessibility work. So I started getting into accessibility about the end of 2019, which was great because COVID happened in 2020 and everything went online. And accessibility really started getting pushed forward a lot because everyone needed to be able to access everything regardless of their abilities. And since I have become frustrated with the lack of a number of available tools for accessibility, I decided to go solve that problem too. And so I have started working on building accessibility tools. And because that's not enough to do, I also organized the Baltimore WordPress meetup. And we are online on Zoom for all of our meetups, including our very fun Ask Me Anything where I literally let you ask me anything WordPress on Zoom live answered. So you can patch us on meetup.com and just look for Baltimore WordPress. Quick disclaimer before we get into accessibility because this is an area of many legal cases. This is general information. I'm not a lawyer. This is not legal advice. Now that we've covered that, I'm going to go over the definition of it, the laws, what it is and how to get started. So before we get too far into it, who's actually heard of accessibility? Excellent. Who is still mostly clueless about it? Good. So the first definition is WCAG or Web Content Accessibility Guidelines. So just like HTML, HTML5, which you've probably heard of, those are standards. And those are written out, they're enumerated, they get implemented. And those standards are maintained by W3C, the World Wide Web Consortium. And just like HTML is versioned, these accessibility guidelines are versioned. We have version two, which is what we are currently working on, specifically we are on version 2.1. And within these guidelines, we have levels. And basically, it's how hard it is. Level A is a shorter list of requirements. And these are considered basically the bare minimum. Level AA includes everything from level A plus an additional set of requirements. And this is basically what's been considered the standard. Then there is AAA, which is really above and beyond and very, very few websites even attempt AAA. It's hard. Alley. A11Y. This is the abbreviation for accessibility. What it means is between A and Y, we remove 11 letters. This is just like how I18N stands for internationalization. Because no one wants to spell that out. The next definition is something called an overlay widget, which you will frequently hear talked about with regard to accessibility. This is basically a technology that exists between the website and the user. So it's a lot like a browser plugin. You've probably added various extensions maybe to Chrome or if you use Brave, Safari, Mozilla, all these different browsers have various extensions that you can add to customize the experience. And if you've installed enough of them, you've probably broken webpages before. Maybe who's broken a web page before. Excellent. What happens is these overlay tools act very much like the extensions. And they can have many unintended side effects and break things out a little bit about laws. And this is specific to the US because we're in New Jersey. The ADA is the Americans with Disabilities Act. It was passed in 1990. And it applies to places of public accommodation. Now, if anyone actually remembers 1990, the internet was not public. Most people didn't really hear about the internet until about 95 with AOL or American online. Right? Who's who's with me on that? Yep. Okay. So the ADA says zilch zero, nothing about websites because they weren't public. There were only a very tiny number of research places, government institutions, a few academic institutions that had anything. So it has become a mess. The Department of Justice is in charge of what is called rulemaking. So in physical places, like these physical buildings, we have things like a wheelchair ramp. And the Department of Justice has gone in and said, if you have a wheelchair ramp, the angle must be between A and B. If it is outside of A to B, it's wrong. If it's within A to B, congratulations, you passed. In order for someone to say that you fail, they have to prove that you are outside of the allowed range. So it's very easy. You can go to a general contractor, you can have them build something that's ADA compliant, because they can specifically say I checked off all of these boxes, it meets all the rules done. The Department of Justice has made words saying that they might do this for online accessibility. And then it has been crickets. Absolutely nothing. They haven't actually made any rules. So it's a mess. However, there is something called Section 508. This is a federal law, and it applies to federal organizations. And it applies to federal websites. So if you go to White House dot go, that's a federal website. Therefore, Section 508 applies to it. And Section 508 has what we're looking for that specific checklist of things. So it can say yes, we passed. In order to get upset, or to file a grievance about it, you have to show which item on the checklist it failed. Hopefully at some point, this will happen for the rest of the internet. But at the moment, it is only for federal websites. Now, New York and New York City specifically have their own laws. I'm not going to get into the details of them. But this big trend that has been happening coming out of New York City is that websites and about 80% of the websites that they are suing are e-commerce. These websites are being sued by people in New York City, in New York City courts. And these are websites that are in Iowa, California, Texas, all over the country. These people there are basically doing this opportunistic lawsuit, trying to go after what is considered an easy target. Think of it kind of like speed traps on the highway. If you're flowing with all the main traffic, you're not really an easy target for the cops. But if you're that one guy speeding down the left lane or swerving around, you stand out like a sore thumb. You're the one they go after. So what they do is they get a whole pile of things from various different sources. And then they go through the list. And they say, uh, it's okay. It's okay. It's okay. Oh, it's a mess. Let's go after this one. So they go after that. So now that we're done with kind of the legal stuff, let's get into what accessibility is. So who here has ever been to a website and it didn't work the way you expected? Right. That pretty much is what website accessibility is. It's you go somewhere and it doesn't work how you expect it to. And by conforming with these accessibility guidelines, conforming with WCAG, you actually make things more predictable and easier for people to use. Because regardless of your ability, the biggest complaint is always it doesn't meet my expectations. Let's talk about those expectations. Who here has been to a website and there was this little tiny text in like light gray on a white background at the bottom? Yeah. And who could actually read it? Basically no one. So, you know, our expectation is that when we arrive at a website, we can read the text. It's not some crazy curly font. You've seen those before you're like, no, I have no idea what you wrote on this page. None no clue whatsoever. Next expectation is that I can find links. So tell me quickly, what color is a link? Thank you. So what happens if there's a whole lot of blue everywhere? Everything's a link. Exactly. You're like, I click everywhere. Wait, it doesn't work. And now the website has not met my expectations. I'm frustrated and I leave. The next thing is videos have caption. Did you know that the vast majority of the younger generation people in like the 10 to 30 range use captions on just about everything? So Netflix actually published a study of their own user base because they know whether people click captions on or not. It is huge. Over 80% of Netflix users are running captions almost all the time. So people want captions, but there's also a bit of the older generation who hates them. So they want the choice. They want the ability to choose the ability to set things up to their own preferences, and use things in the way that serves them best. Who's ever been to a website and there was like a bouncing video on the right. And exactly what did you do? You wanted to leave, right? Okay, so stopping unwanted moving content. Big deal. And one of the WCAG guidelines. And who's got, you know, one of these and actually search surfs the web with it? Everyone? Yeah, you want your put your page to work on a phone. You want it to work outside in bright daylight. So if you're outside in bright daylight trying to use your phone, you actually have pretty similar vision to someone with glaucoma. So if we make a website that suits people at everyday people using their phone outside, we also help people with glaucoma. So it's not just about trying to find these these little small groups, it's about trying to help lots of people. Order of elements. Nice logical orders of elements. And that also helps your SEO, you know, good clean page structure, tell search engines what your content is. It's like having a good table of contents for a document. People can actually find contact information. Who's been trying to go to a business and you cannot for the life of you find the contact information. Exactly. Buttons are consistent and do things consistently. You know, you've got you've been to the website and you're like, Wait, I don't. What the heck is a button? There's a whole lot of squares here. menus are easy to navigate. And that is regardless of whether you are using a mouse, you're using a touchscreen, or you're using a keyboard. Form fields have labels. Who's ever started to fill out a form and then been interrupted by something in life. Then you go back to the form. And if there aren't labels and everything, you're like, No idea. No idea what I was doing. And clear error messages ever been to a form and you're like, I click submit. Nothing happened. What's going on? And colors are logical. While you shouldn't use color alone to tell what something is. Most of the color blindness is red green. It is roughly 10% of men, roughly 1% of women. You should use logical colors. So let's take a look at this. What is your first instinct when you see today's payment in red? Yeah, it's it's bad. You're like, Oh, no, orange and red. I have screwed everything up. Oh God. Well, actually, everything's okay, because the payment is due in July and it's June. But do you God, I panicked for a minute. It's like, it's overdue. It's overdue. No. Um, and then over here, speaking of the blue, I had first clicked to the WordPress 20th website from email that went out to WordPress Meetup organizers, if I organize Baltimore. And I clicked and the entire website is blue. I'm like, Oh, this is bad. So not my most polite email ever. I replied to them. And you know what, about six hours later, the website was not blue. I also posted on one of my groups on Facebook for there's a WordPress accessibility group on Facebook. It's a great group, fantastic people who run it. And a bunch of them also emailed. So I think they just got like a whole inbox flooding. And yes, we got change. Let's talk a little bit about types of disabilities. So there's three types of disabilities, temporary, situational and permanent. And something that just about everyone is going to experience is temporary. Who here has ever had an injury? Okay, most people have had some sort of injury. You know, you accidentally jammed your thumb. Okay, well, now I have an injured thumb. And this is my mousing hand. Okay, okay, I'm gonna try a mouse with with my left hand now. Okay, this is hard. Alright, so tiny little tap targets where you're like, trying to get that little spot, I can hit it with my right hand, but it's frustrating, it's hard. But if you go with large tap targets that are easy for many people, you just help the person who jammed up their thumb. And you also help the person with multiple sclerosis. You help both people by doing the same thing. So some examples, headaches, who's ever had a headache? Ever noticed how your tension span is just a little bit shorter when you have a headache? And it's just a little harder to find what you're looking for? Well, you have a temporary disability. And the same thing that helps you help someone with ADHD. It helps people with all sorts of issues. It just makes it easier. Lots of things like medication side effects, those can impair you. Substances, lots of people, you know, have a glass of wine in the evening, you are slightly impaired after that. Things, you know, not quite as easy, you don't have quite as much dexterity. Injuries, medical procedures, you know, you just got cavity filled at the dentist, you got novocaine, you can barely use your tongue now to speak a sentence. You know, these are temporary disabilities. But most people are going to experience these basically every single month, you know, at least at some point in the month, I get a headache, right? You know, I, you know, drink a little bit recreationally. That's at least once a month. And yes, I do take, take out my phone and try to use the internet while doing that with varied success. But you know, these are things that happen to real people all the time. The next one is a situational disability. Who here has ever pushed a shopping cart? Come on, a couple of more people push the shopping cart. Okay. So you have this wheeled vehicle that you're now kind of driving around. And there's a curb between, you know, the store and the parking lot. Well, you got to specifically steer towards those curb cuts, because you know, a six inch drop, when you just bought eggs, it's not a good thing. It's just not good. Don't do that to the eggs. But this is a situational disability. Also, sitting in a loud cafe, you know, you, you're at a cafe, you're at the airport, you're trying to get a little bit of work done quick. And you can't have anything with audio playing on your computer. You can't hear a darn thing. There's noise everywhere. So you can't hear. Basically. So that's a situational disability. And as we talked about before, bright sunlight, being in a moving vehicle, you are not going to be using that phone for very long in a moving vehicle before you get nauseous. So most people are going to be encountering situational disabilities, at least monthly, and plenty of people, you know, people commuting in on trains and buses, all sorts of people are going to encounter this literally every day. The next type of disability are permanent disabilities. And these count as both not counted and counted. So there's about 27% of the adult US population, and about 40% of those over 65 who have a permanent counted disability. There's also a bunch of people with a not counted disability. Over 60% of adults have prescription eyeglasses. But they're not counted. 60 is a whole lot more than 27%. They're not counted. But if you know, they take off their glasses, they're squinting at the computer screen trying to read it. Guess what? They have poor vision. The same thing that helps them help someone who's actually legally blind. And in the counted group. Lots of people have something. I have an issue with my hands. I can't use a mouse. No mice. I actually have a tablet on my desktop, and it has a pen. And I literally grab the pen without using my thumb. And I'm very accurate with it. I can tap I'm actually faster than most people with a mouse. But because it's not actually a mouse, it doesn't have a scroll wheel on it. So if I get to a website, I just grab that bar on the right hand side and move it up and down. But if I get to a website and they style that bar to be this itty bitty super skinny thing, I'm like, okay, well, now I have to go to my keyboard and use my keyboard to navigate up and down this page. It's annoying. I don't like it makes me not like these people. But I'm, I'm in the not counted group, because it's not a big enough disability to cause a significant hampering to me doing normal activities. I can still drive a car, go around, use power tools, all the good stuff. So people who need accessibility are Joe. He's having a party, football games, blaring on the TV. He's had three beers already. He's now trying to order pizza. And of course we need pizza delivered because everyone's had at least three beers. So he's got to use his phone because he can't hear a thing with, you know, four friends yelling at the TV, everything's blurry, dogs barking next door, everything. He's got to use his phone to order it. So if it's not easy to use, it's not intuitive. He's not going to be able to make that pizza order. He's going to go to the next place that does have an easy pizza order. Or what about Susan? You know, she's got a headache and a screaming toddler. And she needs to find out how late the pharmacy is open because she needs medicine because the screaming toddler has an ear infection again. You know, she has so much trouble focusing, so much trouble actually completing even a simple form and a simple thing because it's hard. Who's commuting 45 minutes on the metro every day. And he's trying to, you know, order a gift for someone trying to get in product information about it. Well, you know, what Metro is a little bumpy, a little wobbly. If it's not an easy to use site, if he can't get to his product information quickly off to the competitor, you know, someone at a bright sunny dog park and trying to, you know, get in touch with customer service because package shouldn't arrive, you know, distracted, loud, bright sunlight problems. You got to solve them. And of course, people who are, you know, Leslie, legally blind screen reader user. So they are using assistive technology on desktop computer or on a phone because they're screen readers for phones. And, you know, they're trying to find a wedding venue. You know, they want to get married. It's not a crime, right? But they're they're trying to get information about the venue. You know, just because they're legally blind doesn't mean they are totally blind. They can still see a little bit. They can still get a little bit of information, but they need to see descriptive information about the venue so that they get a much better picture of what it looks like so they can talk to everyone else about it. So what really happens is everyone benefits from these accessibility things. So how do we implement it? Accessibility is about removing the barriers. Instead of intentionally making our buttons super small, we make them bigger. A basic plain HTML website with no CSS is accessible. The browser has done the work to make it accessible. There are lots and lots of tools out there to assist people with reading that basic HTML website. So we don't need to make the tools. We don't actually have to solve the problems. We just have to make sure that we aren't creating the problems, that we aren't adding barriers. So these sites become accessible because people don't know better. For some unknown reasons, someone thinks that baby pink on a white background for text looks good. Don't know where they got that idea, but they apparently got that idea in their head. They apparently love pastels. Unfortunately, that's just not a good combo. So they just don't know better. The next thing is a lot of developers start adding CSS. They start adding JavaScript. They start adding various types of little features and doodads to everything. And oops, you just created a whole bunch of barriers. You just created a whole bunch of challenges. You basically started adding hurdles to the race. It's not fun. So now we talk a little bit about how we test for and how we measure that accessibility. So the first thing that we like to do is throw in a little bit of automated testing, because who doesn't like it when the computer does it for us, right? We all want the computer to do things for us. It's nice. So a couple of tools that do this is WebAIM has the Wave tool that is pretty much considered the standard. It's pretty much the most popular and it is used by most people as the standard. The company called DQ, which has a whole bunch of accessibility learning information online. You might want to write that down DQ. They have a tool called X. It's a little more challenging to use. You have to go watch that watch some YouTube videos about how to use it. Wave is definitely much easier to just hop in and use. Google has the Lighthouse tool. It's built into the Chrome browser. It's available on any Chromium version browser. So if you use Brave or one of the other alternatives, it's right there in the browser. You right click, go to developer tools, look for Lighthouse. Then once you've done that, that's going to be able to test roughly 30% of that whole list of criteria in WCAG 2.1 level AA. So we got this whole list of items and about 30% of them can be effectively tested using an automated tool. At least 70%. Now there are some tools. The DQ-AX tool does have what is called guided testing, which can help you test some more criteria. So basically it kind of points you at things and says go test this, but you as a human need to determine yes or no. Did it pass or fail? And then we have full-on manual testing. So the easiest kind of manual testing is to open up a website and hit the tab key on your keyboard. And tab should allow you to go between elements. And by hitting return, you should be able to select an element like a link. Buttons should also be able to be opened with the spacebar. And then you can of course do shift tab to go backwards. And this is all falls under the human testing. And I do have a link at the end of this for a basically a meetup tutorial where someone went through and did a bunch of accessibility testing on a website. So how accessible is the internet? There is a group called WebAIM. As we previously mentioned, they make the wave tool. And they tested the top 1 million home pages on the internet. And over 96% of them had a failure detectable by automated scans. So in that 30% of the criteria that we can test, they had a failure. Most of them failed 50 times on a page. And that's not 50 types of things. That's just 50 individual instances. So let's say you made your paragraph text light gray on a white background. And you have 20 paragraphs on your page. That's going to flag as 20 errors. So even though it says there's 50 errors, you could have only had two criteria that that you failed and it might be four lines of CSS to fix them. So of these errors, nearly all of them fell into six categories. And this has maintained very consistently for the past five years. The biggest problem on the internet is low contrast text, which is why I always harp on it. Because it's that that very light text on, you know, white background, dark text on a dark background. You just can't read it. The next one is missing alternative text on an image. So if there's an image and someone is using a screen reader, the screen reader will read out the alternative text if provided. Well, as you can see, over 50% of the images don't have anything. So that's not a great experience for people who can't see the screen. Next one is empty links. You're like, how is a link empty? It's JavaScript. People have used JavaScript to create these links. And because of the way they've coded those links, you can't get any information about the link when you're using assistive technology. The link has no info, which means that someone who's using a screen reader just hears link. That was so not helpful. Next one, missing form labels. Again, we got a whole bunch of form fields and nothing is labeled. They they use that very light gray placeholder text, which no one can read. And then as soon as you type in the field, it goes away. And then your dog barked. So you can settle your dog down. You come back and you're like, I have no idea what this feels like. Delete the field. Okay. Read the hard to read placeholder. All right. Now type the text in and hope I don't get interrupted again. Again, empty buttons are very similar to empty links, except empty links is going to be the anchor tag or the A tag and empty buttons is going to actually refer to the button tag. So as you can see combined, that is a lot of JavaScript going on that is basically making it very, very hard for people with assistive technology to use the site. Of course, we have missing document language. For some reason, people have not yet learned how to declare their document language in their HTML tag. Should be easy, but not. And that is very helpful for people who are trying to browse a website in a second language. So for example, I do baking. So sometimes I end up on French websites to do some bread baking and I use the translate tool to, you know, translate it for me because I don't speak French or read it really except chocolate. I can read chocolate. So I just wrote out what those are. So briefly I'm going to talk about the accessibility overlays. So as we just talked about, they are a tool that lives between the website and the user. Very similar to a browser extension. And since we talked about the automated tools and that they can find 30% of the criteria, they can find this many. Even if the overlays worked absolutely perfectly, and as we know no browser extension works perfectly, how much could they actually fix? Not more than they could find. You can't fix what you can't find. The next one is they require user configuration. You have to go find the little widget, which is normally the very last thing on the page. So a user would have to literally go through every element on the page if they were using keyboard navigation. They'd go through every element on the page where they finally get to the configuration widget. Then they have to open it. Then they have to go through its settings panel and configure it. It would be very similar to wanting to walk into a grocery store and being told, oh you want the door to open automatically. Okay, well we're going to have to configure the door over here. So first you got to go over here to the side, open the panel, press three buttons, wait a moment, now the door is going to open automatically. Like no? That's not nice. So the next thing is they cause conflicts with many of the tools, just like your browser extension. Sometimes you have one on and you have the other on and they're both trying to do the same thing and the website just doesn't work anymore. So you got to open incognito where you have them both set to off and now the website works. And the other one is they just create this middle layer. So they're just getting in there and mucking about and they can actually take a website that is functioning properly and cause problems. I had built a website for blind golf Canada and I had a whole bunch of their users who are all legally blind test it. And what happened was they wanted to add this little feature widget to it. It wasn't a full-on accessibility overlay, it was a feature widget. I told them we shouldn't do this. They said do it anyway, we'll have our users test it. They had their users test it. It broke several screen readers. So it was working fine before but they thought well wouldn't it be cool to have the widget? No, no it wouldn't be. So we immediately deleted the widget, the users tested it and it worked fine. So now how you actually get started. So the first thing you can do is today start entering content better. It's an easy place to start and just start entering better content. So the first one is don't put in a whole bunch of inline styles. I have remodeled so many websites and we're in those databases trying to do massive search and replaces because there's that span style with 15 things in it on every paragraph and line item. Not fun experience. So don't cause your future self rework. Don't cause your future developer rework. Just don't bring in all that extra HTML. Goodberg does a pretty good job of stripping it out but there's also a whole bunch of websites where you can just paste stuff in and you can just use paste and match format. You just when you go to edit menu there's paste and then there's paste and match format, paste and match style. Click that one and it won't bring in all the extra content. Use proper headings. You have one h1 on a page then you have an h2. You do not then suddenly go to h6. You go to h3. If necessary you go to an h4. In actual real content I almost never see an h5 or an h6 actually needed. Make your links clear. Don't say click here 15 times on the page. Say you know WCAG 2.1 level AA guidelines. Have that be your anchor text. This is also going to help your SEO because click here not great for SEO. Have appropriate alt text on your images. Now this is a little more complicated. There's an actually an entire diagram and system on getting good alt text but at least start to think about it. Forms with labels. Most form tools by default will put in labels. Don't change it. Leave the labels. Don't add placeholder text. Just labels and don't automatically start videos or animations. Stop embedding animated gifs. Please. Especially on emails because they literally cannot be stopped on emails. So just don't. The next thing once you start just entering your content going forward a little bit better is to add an accessibility statement to your website. It literally takes about 10 minutes. The next thing is update your colors and fonts so that they can be readable. So that we're not dealing with the light gray text on the white background or the light pink or the yellow or the orange on yellow. And then make sure that you're not relying upon color alone to indicate important information. For example you have a pricing table. Make sure that it's not a green block to say yes included and a red block to say not included. Because about 10% of men are red green color blind. So a green check mark and a red X. Perfect. You didn't use color alone. Color is helpful. The people who can see color get additional benefit. But it's not color alone. Make sure that your website works with text size and zoom. So in your browser you can hit the you know command or control and plus and the whole website zooms in and gets bigger. You've ever gotten your eyes dilated by going to the eye doctor. You do this because you can't read a darn thing on the computer screen. So make sure it works with that. The next thing is you can actually set a minimum font size in your browser. So if you never again want to see you know size 10 text you can literally set size 14 as your minimum font size and all that super tiny text gets bigger. It's great. You can also set a general size preference on your text. So you can say I want my text to be normal or you know what I like big text. I just like big text. You can just say I want larger text and it will on every website that's coded properly will give you larger text. So start checking your websites for things like that. If you have a reasonably well-coded theme this is actually quite quick. If not it might be faster to change the theme. Now we start getting into more manual work stuff that takes up more time and that is adding proper alt text to images that already are on the website. And quite frankly that can take a while because alt text is context sensitive. I have a photo of a girl with a dog. Well that could mean many different things. The breed of dog may be very important. The age of the girl may be very important. That may be an entirely irrelevant. It depends on the context in which the image is used. The next thing is of course go through existing content and make sure your headings follow a logical order. And again this helps not only people but also search engines. And as a quick pro tip nearly every theme out there in the repo that is listed as accessible has issues with their heading order in their sidebars and putters. So you may need to have that corrected in your child theme. I don't know why these people can't figure out that you can't suddenly jump to an h4 or an h5 but that is not actually tested by the theme testing team under the accessibility. More manual work making sure that your videos include captions and transcripts. Again the captions are important because quite frankly lots and lots of people want them. They're also good for people who are deaf but mostly because most people want them. And transcripts because there's a whole lot of people out there who want to be able to skim through your content or who want to be able to do a find on your content. They want to go in and be like oh yeah I heard someone mentioned that presentation and it talked about this topic. It's an hour long video. I'm not watching the whole video. I just want to know about like these like three paragraphs. So they do finds in the transcript. Then you find the content you're looking for and great move on and make sure that your transcript is not hidden. Sometimes people have made transcripts and they hide it behind an inaccessible button. Well good you made a transcript unfortunately I can't actually access it because again like we saw with that links and buttons. Most of them aren't accessible. And then you can start getting into more detailed checks ensuring that your online forms have clear error messages. Making sure your website can be used with a keyboard and testing with automated tools such as wave. And then you can proceed to get to some of the more detailed WCAG criteria. In general when the courts have had an accessibility case in the U.S. the court has ordered the website to make the website compliant or pass WCAG 2.1 level AA. And there are usually an annotation saying within reason occasionally you can meet the intent of a guideline but not necessarily the letter of the guideline. You know for example when driving we can meet the intention of going with the flow of traffic even though we have technically violated the speed limit. Because if you're driven on the garden state you will be run over for driving the speed limit. And of course accessibility is an ongoing process. You continue to do SEO work. You continue to add content. You continue to make updates to your design. You continue to update plugins and themes. You do have to regularly check the accessibility to make sure nothing went pear shaped. And the more you understand people. People just like people in this room. The more you understand people the more you understand accessibility. So here's some facts about tools. There are tools for people which can pull every heading from the website and basically give them a table of contents. This can be really helpful for everyone from screen reader users to people with ADHD. This can just grab a table of contents so now they're like oh not not information overwhelm just a simple list okay i want to go there. That's great but it only works if the headings make sense. There are tools to instantly pull every link from a page. This is great unless every single link on the page says click here. And again using devices outside it's just like having poor vision. There are many people who use screen readers who can see just fine but they have cognitive or learning disabilities. There are a lot of people with dyslexia who prefer to use a screen reader because it reads everything out to them. They don't have to worry about angel or angle. Which one is it? It reads it all out to them. Many of them will actually select the text as it goes to make it even easier for the person. A bunch of people who are learning a new language a second language they will use a screen reader tool because again it highlights every single word as it says it. This is fantastic for learning a new language. And many people who have dexterity issues, arthritis, multiple sclerosis, all sorts of issues use keyboard navigation and will use voice controlled computers. So the links from this presentation are available at this website. EasyAllieGuide.com slash learn and questions. Those are two months right? Yes. Yes just like accessibility it's abbreviated as A11Y. So why is using a video that for example say you have your own page and then consider having just a simple color background. Is that a scenario where that's susceptible to have auto management video? Only if it can be stopped by the user. So only if it's user controllable. Yeah. You know there's a lot of tools now people that have kind of like slide in the place and stuff. So entrance animations basically. Would you suggest having like a link somewhere that like floats in the side that says stop all and is that the kind of. So for entrance animations there is actually a function on your computer and all your other devices where you can say prefers reduced motion. Many browsers even have it available as a setting but most people will set it across their entire system and again it's called prefers reduced motion and that is actually detectable via CSS and JavaScript and so what you need to make sure is that you have obeyed that preference. So if someone has turned on prefers reduced motion then you need to stop all animations and some of the builders will do this by default but always always test. Can you tell us more about all the text for images in terms of the context but you have a good example of what to do and what not to do. Yes so don't repeat surrounding text. For example if you have a caption below the image that does honestly a very good job of describing it you would have what's called a blank alt text which is ALT equals quote quote so blank alt text because the caption below the image provides a clear description. If you have immediately surrounding text that provides a clear description it's probably just a decorative image. There are also just purely decorative images you just put some squiggle on a page to fill up some space. That's a purely decorative image and again it's ALT equals quote quote then for things like you want you have a photo of a house and you're specifically talking about the shutters that are used you would want to make it specific to what is the purpose of this image. I as a sighted person am seeing this. What is relevant about what I'm seeing? If I'm talking about a list of like a photo gallery of people who work at a company you might want to actually describe the person because that is what I as a sighted person see. You know I see okay older white male younger Asian female that that's what I'm seeing as I quit glance around. You know I might see someone wearing you know a specific hat or what is my am what am I seeing as a sighted user what do what feelings what what am I getting out of this content. Thank you. Yes. From the work I've seen if you um you're building a plugin or building a site. Yes. I know in Media Library you can certainly control that. You shouldn't. I do recommend that that you add alt text to your media library within reason because alt text is context sensitive you need to be able to control the alt text when you're inputting the image because on one location it will have one meaning on another location it may be purely decorative on a third location it has an entirely different meaning. Yes. So as a plugin and theme developer you need to be able to allow alt text per image. And it drives me nuts tons of plugins and themes don't allow this adding captions per image so if you have if you're making a gallery plugin allow people to set alt text and also allow them to set a caption per image stored just to that gallery because again it might be different in another location. Are there any plugins out there? I haven't looked at clients. So are there general plugins out there that make that easy for people to kind of call out you know here? The default Gutenberg gallery does alt text well but it has no captions. Um honestly it it is a fight I don't want to actually build that kind of a plugin but I know it would be hard to build that because like you said you have to account for so many different scenarios. Yeah I I haven't tested all all of the various gallery plugins but yes it is definitely a real challenge trying to get a good gallery in there. And last question. Kind of along the same line so in an effort to make things easier for the clients update on the day-to-day basis they want to put an image in a blog post. Yep. So if they have uploaded their image they put in the appropriate alt text for that image hearing that now it's context sensitive. Is there is it perform to not adjust the alt text if they use it in like say a decorative instance later on? Yes so it so what you'll do if you're using the Gutenberg editor you can click on an image and in the sidebar you can select your alt text per that image. Okay so they could set it on upload but then adjust on a case by case. Exactly. And you should. Yes. Thank you. All right and my time is up. Thank you Jen.