Be an A11y with Your Content: Alicia St. Rose

[00:00:00] AMBER HINDS: Well, we had kind of a fun pre-chat this time. It is 7:06. I am going to officially get us started –

[00:00:08] ALICIA: OK.

[00:00:08] AMBER: – and do a few announcements and then we will hand it over to Alicia.

[00:00:17] So, let’s see. If you have not been here before, we have a Facebook group that you can use to connect between meet ups. If you go to Facebook dot com slash groups slash WordPress dot accessibility, then you can find it. Usually, it will come up also if you search “WordPress accessibility” on Facebook. That is a good way to ask questions, share things you are working on, get feedback with people in between Meetup events.

[00:00:48] This Meetup is being recorded. It will take us about a week and a half to two weeks to get corrected captions. Then we will post the recording with a full transcript, and the captions on our website. That is a question that everyone always asks. Is it being recorded? The answer is yes. You can find upcoming events and past recordings if you go to equalize digital dot com slash Meetup.

[00:01:19] If you join our email list, which if I have done everything right, then you should get prompted to join it at the end, when you leave the Meetup. You will also get an email when the recording is available and lists of upcoming events that way as well.

[00:01:39] The other way to join the email list is to go to equalize digital dot com slash focus dash state. We are seeking additional sponsors for the Meetup. So, if you would be interested in helping us to support Meetup, we do rely on sponsors to cover the cost of live captions. Unfortunately, the WordPress Foundation does not have funds for that, so they require either we cover it ourselves, or we get sponsors to help us and we do have some spots available.

[00:02:11] So, please reach out if you would be interested in helping with that, or your company would. In addition, if you have other suggestions, or there is anything that we can do to make the meetup work better for you, you can reach the organizers, myself and Paola, at meetup@equalizedigital.com.

[00:02:35] So, who am I? I am Amber Hinds. I am the lead organizer of WordPress Accessibility Meetup. I run a company called Equalize Digital. It’s a certified B Corp. We focus in WordPress accessibility and we have a plug-in called Equalize Digital Accessibility Checker that audits WordPress websites for accessibility problems and puts reports in the dashboard.

[00:03:00] This is my shameless plug. Right now, we are running a Black Friday Special. Now through November 30th, you could get a 50% discount on a pro version of Accessibility Checker. We also have a free version, so if you want to just give it a go on free, you can do that. It is free forever. You could learn more about that on our website.

[00:03:21] We also are the live caption sponsor today because we did not have one. So, we are also covering live captions. We do have one other sponsor that I want to thank, Empire Captions Solutions. They do all of our post event captioning, and creating the transcript for, so we can have accurate captions on our recording of the Meetup.

[00:03:45] In addition to doing that, they do audio description, they do ASL interpretation services. They were actually who did, if you attended the WordPress Accessibility Day Conference, they did all of the ASL interpretation and live captions for that event. They did a phenomenal job.

[00:04:03] They donate their services to us for the Meetup, which we very much appreciate. If you’ve been before, you have had me talk about the nightmare it was for us to try to caption videos ourselves after the fact! So, we are always encouraging people to thank sponsors, just to encourage them to continue. So if you are on Twitter, you can find them at Empire Caption. You can shout them out and say thank you. We appreciate that.

[00:04:28] We have two upcoming events that I want to highlight. The first one is on Thursday, December 1, at 10:00am Central. Ryan Bracey, from Second Melody, will be talking about selling your clients on accessibility. He will be sharing his slide deck and talking about how he actually talks to his clients about accessibility. That’s a great one if you are a salesperson, or a project manager, or a freelancer who is trying to convince more clients to focus on accessibility.

[00:05:01] Then, on Monday December 19, at 7:00pm . . . so the same timeslot, but in December, I will be teaming up with Alex Stine. We are going to be doing a live accessibly audit on the underrepresented in tech websites and giving them feedback, so that they can help improve the accessibly of their website.

[00:05:26] It will be a fun way to get a look at what user testing and accessibility audit would look like on a website. If you are not familiar with Alex Stine, he is a WordPress core contributor. He is an engineer that does all kinds of fancy things with code. He also happens to be a screen reader user, who uses a screen reader everyday.

[00:05:47] That should be a great Meetup to attend, if you want to learn more about auditing. Also, you can definitely participate in the chat and help give them feedback. So that if you are familiar with auditing, I am sure there will be things where we might not have time to touch on it, or we might miss something and any feedback you can give them in the chat would be appreciated as well.

[00:06:10] So, I am very excited to introduce our speaker for today, Alicia St. Rose. I am going to add a spotlight to her, so she should pop up, hopefully, for everyone.

[00:06:21] Alicia has been doing WordPress for over ten years. She is a freelance developer working exclusively in WordPress and is a designer. Her business is WP at Heart. It is a micro agency that employs one so far. She provides an online DIY website coaching for entrepreneurs and content creators, and is also a creativity and Mindshift mentor, empowering others to embrace their wildly creative, uniqueness.

[00:06:55] Alicia became a fierce web accessibility advocate, after witnessing the struggles that those with disabilities endure to surf the web. She has been very big in the WordPress accessibility community. We very much appreciate that she is here today, to share her expertise with us. So, thank you, Alicia.

[00:07:15] Wait, I might not be able to hear you. Hold on.

[00:07:17] ALICIA: Oh.

[00:07:18] AMBER: Now I can.

[00:07:20] ALICIA: Can you hear me? I was muted for a minute. It might have taken awhile. Thank you for the introduction. It was awesome.

[00:07:26] AMBER: Yes.

[00:07:29] ALICIA: OK. So, you just let me know when I’m on. That is now?

[00:07:37] AMBER: Yes. You’re on.

[00:07:38] [Laughter]

[00:07:39] ALICIA: I wasn’t going to start this session with the World Cup stuff, but why not? It is a big deal. I have been watching almost every game since 1994. I had a situation that made me think about what a lot of people with disabilities might have to endure, just to simply surf the internet. Mine was just every four years. Usually I cover on how to watch this game, without a television, because I don’t have one.

[00:08:09] This year it was an excruciating way for me to find my way to watch the World Cup. In the past, I have done a VPN. It’s like go to the BBC, let’s go watch it. But this year, they said Peacock Streaming was going to show the World Cup. I’m like, that’s cool. I’ll be ready for when I wake up in the morning, I will simply turn on Peacock, and I listen and watch the World Cup.

[00:08:38] I turned it on and it was in Spanish. So I was looking all over the page. Where’s the English part? Where do I make it go English? I did a little Google research, and it turns out it’s never going to be that way on Peacock Streaming! My Spanish was enough, that I knew when he was talking about the ball. I knew that word. I thought, I got to solve this.

[00:08:59] So, I spent another couple of hours. I lost some money. [Laughter] going into different things that usually didn’t show what I wanted to see. Finally the solution arrived, with me, streaming Peacock on my iPad, downloading a BBC app on my phone, and then using the slider, really delicately, to match the commentator to my iPad, so I could watch the game.

[00:09:31] Usually, it takes by the second half, that I got it matched. [Laughter.] I was like doing this, and I was thinking, you know what? If I had to go through the internet for me to just watch something, or get access to some content, and I would have to go through these kind of hoops, I would probably just not do it.

[00:09:49] That is usually the case with a lot of people, who have disabilities or are temporarily disabled, which it can be worse for them, because they don’t have the tools. They never used tools for years to surf the web. It is frustrating for people who already do have these assisted technologies, to find a website that didn’t take them into consideration. And they are not having a temporary moment. They are going to have to actually find something else.

[00:10:18] I just thought I would mention that. Also, if that fixes for anyone else who wants to see the World Cup without paying $64 to YouTube or whatever. That is the facts. [Laughter]

[00:10:30] Let me get started here. I’m going to share my screen with my talk. There is a little bit about what we are go to be doing. The talk is probably going to go a little quick, the slides. Because I really want to get into going into a website and doing a few things so you can actually see. I do like the accessibility stuff isn’t really an esoteric thing where you can just sit and listen and then have it soak in.

[00:10:55] You really want to do it and then find out how easy it is to actually do it, and add little layers on as you go and as you learn. It’s not something that should remain giving you that feeling of overwhelm. Because I know when you first hear about it, and people tell you, and then they roll off all of these things that are wrong with your website. Then you throw up your hands, and you don’t even want a website. I’m just not even going to do that anymore.

[00:11:25] It is not like that. These things are easily fixed, by simply thinking about them when you put your content in. So, let’s get started with the slideshow here. I will share my screen. Make sure I got everything.

[00:11:42] We’re going to go for the slideshow. I hope . . . whoops. I am going to do this really quick. There we go. That is not a slide you were supposed to see! Oops is not how we start our shows. [Laughter] So, this talk is Be an Ally With Your Content. What I mean by ally, a lot of people don’t realize when they see the capital A and then an 11 is a Y, that is actually the word “accessibility” that is a shorthand. What they have done is they have put the A at the beginning, the Y at the end, and there are eleven letters in the middle.

[00:12:22] If you are talking about it, and you don’t want to say the word “accessibility,” or you are writing about it, you can set that up at the beginning. You can say accessibility in parentheses ally, and you can totally use that shortcut. I also like the fact that it says the word ally. Having an accessibly website, or an ally website, means that you are aiding someone in getting to your content.

[00:12:48] I will show a few things you can do as a content creator that you can fix. What we will be covering: what is web accessibility, tips for accessible content . . . I’m going to move everyone here . . . tips for accessible content, and a few tools and resources.

[00:13:14] I am not sure if you know this, but as a content creator, or even someone who inputs content in a website, you are extremely powerful. You are truly powerful, because you are the gate. I don’t want to put a lot of pressure on you, but you got to take this power, you have to own this power. You are the gate between an accessible website and one that can go off the rails.

[00:13:45] You are really kind of are. Because any developer can make the most amazing WordPress site. Everything is completely, completely accessible. They have done all of the art labels. They have done everything they need to do. Dynamically putting the title into the read more. All of that stuff, where you don’t have to touch that.

[00:14:04] All you have to do is go in and forget that there’s such a thing as headings for the structure of your page, and copy something from a Word document. Slap it in there, and you are pressing “publish,” and then that content, the content everyone is going to be reading, is no longer accessible.

[00:14:31] All of the work that would go into it, months, can be kind of . . . run amock by one post. One post, you might think is not a lot. If it becomes one of your most popular pieces, and everyone is reading it, it will be known as an inaccessible website, because that is the content that everyone is reading.

[00:14:58] So, as a content creator, you can influence, you can inform, you can entertain, and you can totally make a difference. Everyone should have in opportunity to engage with your content or you could end up doing this.

[00:15:16] This is real. I didn’t make this. [Laughter.] I stumbled across this on my own. That is an oops. So, whoever created that page, it was an emergency. There was a festival that had ended. They needed to get a message out. But they also wanted to continue to look cool, so they put this thing in the background. They didn’t know about contrast and font and things like that.

[00:15:48] That message is completely inaccessible to . . . I can’t even read what that is, and my eyesight is pretty good. So, let’s talk about what web accessibility is. I just took this from the W3C because I think they have a better idea about the definition. We all may have some personal experience with other people – friends, family, or just coming to the Meetups and listening to other stories.

[00:16:20] So, web accessibility is websites, tools, and technologies. We often think of just the website, but there are other things, too. There’s your phone, the iPhone. Just using things that are happening outside of the browser on the phone. Like how to actually make that work for you. So these tools have be used by people with disabilities.

[00:16:46] They must be able to be perceive, to understand, to interact with the web, just like everyone. Everyone has that opportunity to gain knowledge, to gain insight, and all these things from one of the most revolutionary communication devices and communication types in the world. I mean, this is bigger than Gutenberg, no pun intended. [Laughter.] It is bigger than Gutenberg, the press. It really is. The world wide web, it is bringing people together.

[00:17:23] It is also suddenly dividing people, sometimes. But it is bringing people together and everyone should be able to be a participant in this. They should also have the ability to contribute. So that is why WordPress works really hard to try to make the admin of WordPress accessible. They have a lot of people that point things out for them. They really work hard to try to do that.

[00:17:47] So it is not just the stuff on the front end. It is how people use and engage with the web. Some simple tips for you as a content creator, to put your content in. Just simple things, just to start. You will learn stuff as you go. You come to these Meetups, or you go to a Word Camp and you go to a session and someone talks about ARIA. You are like, I have heard of that, but I need to know a little more.

[00:18:18] That is the kind of stuff you can’t get tossed at you at the beginning. That is why this talk is actually for people who may know nothing at all, about web accessibility, or might know intermediate stuff, or may know a lot, but just missed the simple thing because they were so focused on the the technical aspect.

[00:18:41] The key things are headings, structure . . . which a lot of people have heard of, but some people don’t really understand what that means. So we are going to do a little demonstration with a demo site that I kind of whipped up. Image alt descriptions . . . which I think is one of the key things because I think the descriptions and photographs that you have on your website are actually part of your story.

[00:19:09] If they are done well, they can enhance the experience for people who have low vision, or no vision at all. Color contrast, proper HTML elements. HTML might look like a scary, nerdy word, but you have been making HTMl from the moment you put anything in a WordPress post. It is automatically generated for you.

[00:19:38] It is high time you understood some of the things that are happening under the hood. Then you can actually be a little more savvy about the content, and what blocks you’re going to reach for. Avoid using symbols and numbers for words. This an interesting one, because I didn’t actually think about it, until I saw it.

[00:19:59] Then after you’re exposed to accessibility, you start noticing these things that normally you thought they were cute, and they made sense to you. But if someone is using a screen reader, and the word “four” comes up, that is a number. That is not the word “for.” It is like the number four comes up, and you can’t use that for “for.” Some people are doing that. That doesn’t make sense for the screen reader.

[00:20:26] Then there’s the other one. Avoid “click here” which may sound weird isolated here, but that is how it feels for someone with a screen reader, because they will take all of the links that you have in the page, and put them over to a sidebar. They’re just going to read the links. So if you have “click here, click here,” throughout your page, it loses its context for someone who wants to just scan that page.

[00:20:55] If anything that I want you to have a takeaway here, is that when you’re creating your content, it might be a good idea to envision someone using the devices. So for me, what I do is I always imagine if headings and links were pulled out of my contents, would it make sense?

[00:21:23] Then, it helps you arrive at a different phrase that you actually want to link. Perhaps, you can say, instead of “click here,” you can link “click here and download the pdf.” Use that whole phrase. You just have to think differently, and you have got to get a little more creative and a little more with intention when you’re actually writing.

[00:21:50] There’s some helpful tools. You may recognize one on here. Amber will. There are a few tools that can help you if you have content on your website and you are not sure. OK. There’s browser add-ons, like the AIM and WAVE. Now those will also show you a lot more than just what’s going on with your content. They will show you the structure of the page as well.

[00:22:17] Then there’s the screen reader text format. That plug in, I really love it. It can help you with your click more, if you have a nice button and you only want a few words on it. Sometimes that happens. This screen reader text format will allow you to add more context to the button that’s hidden for those who can see.

[00:22:38] We will go into that when I do a little demo. Then there’s the Joe Dolson’s Accessibility Plugin, which will show you a lot of things while you are working, like the alt description of an image. If it is missing, it highlights that while you are working. Another thing I love about his plugin is, it gives you a “skip” link.

[00:23:01] It is somehow able to add a skip link to your site. A skip link means that someone who cannot use their hands, but has to depend on tabbing through the keyboard, doesn’t have to tab through all of the menu items and the header, before they get to the content. It can actually have this link come up.

[00:23:20] They can click it, and it takes them directly to the content to read. If you have ever seen those, that’s what’s happening. Sometimes they are not there, and that is unfortunate. People have to get through a mega menu before they get to start reading.

[00:23:34] Thing is another one called the Equalize Web Accessibility Checker! I used it on one project, and it was amazing. If we get into the demo, I would like to ask Amber some questions, too. I have both Joe and her plugin in. I am interested in whether they play well together, or should we use one or the other.

[00:23:59] This might sound weird, right? Google Drive Document. That is an amazing tool. I will show you why once we get out of this slideshow. It is better to create your content outside of the editing area in WordPress, so you can actually have some freedom to write and also can visually see what you are doing.

[00:24:26] Sometimes the blocks can get in the way while you are trying to write. I would highly dissuade you from trying to compose your content in the admin of WordPress. You can build it up in some kind of document software and I am going to say it shouldn’t be Microsoft Word. I will show you why.

[00:24:46] A special word about page builders. I used to be, “Oh my God, don’t touch them.” Only recently, someone informed me that you can make some page builders . . . I am not sure why this is here. Let me go back. I am not sure why that third one is there. I got to take that out. That’s not supposed to be there.

[00:25:15] The Divi Accessibility Helper will actually help if you have a divi site, to create or add some ARIA that is needed, or other things. It is not an overlay. I have to say, I was confused and someone can correct me if I am still confused, but it doesn’t appear to be an overlay. It appears to be a helper.

[00:25:39] Beaver Builder has an amazing page of documentation for their accessibility and how to deal with that. Also, that third one is probably supposed to be . . . you can talk to your dev of the page builder that you are actually using. You can ask them about certain things that didn’t appear to be accessible on the theme. You can actually get some change happening.

[00:26:09] I have done that with the Generate Press. While we are at it, this is my favorite. [Laughter.] There’s a GeneratePress Theme and GenerateBlocks. When we were working on the air rally, I actually had . . . the Air Rally is like a competition that happens once a year in the fall. They just recently had it. With that competition, you compete with other teams to make the most accessible website as possible. Then, you get awarded at the end for first, second, or third place.

[00:26:44] We used the GeneratePress Theme as our base. Whenever we came along or across something that I was having a hard time trying to make it accessible, I would go on their forums and they would sometimes give me the code and in one case, I was told by the developer that he was going to add it to the documentation.

[00:27:06] So, if you find someone, a theme developer, or someone, or a team of people who are working that way, and working towards making things accessible, I really appreciate that. You are actually reaching out to them, so that they know about these things. Then, they actually make the change. Those are people worth sticking around and working with. Also, they are people that you want to promote and also shine the light on.

[00:27:37] I know there’s a lot of talk about overlays and things like that, and how we shouldn’t use them. I am down with that. But I feel like there’s a lot of people out there, a lot of software developers, themers, and they’re actually working to make things extremely accessible. They need more vocalized press, more people talking about them.

[00:28:03] I feel like when we put a focus on people who are actually doing the work, and doing things, we will see more of that. We won’t ignore the fact that overlays cause issues with websites. There’s so much. We want to see more people doing the good stuff. I think this is like my end of the slides, here.

[00:28:28] We’re going to go in. I have a site that I cooked up. Also, I wanted to let you guys know you can ask me questions while I am working on this. It is fine if that’s okay with Amber. Because it is kind of like a lab, really.

[00:28:45] AMBER: Yeah. We –

[00:28:48] ALICIA: Is that cool?

[00:28:50] AMBER: We have a few right now? Do you want a few right now?

[00:28:52] ALICIA: Yeah, let’s go! Let’s go! That way, I can prepare how I’m going to attack this. Okay.

[00:28:58] AMBER: Okay. So the first one was: Do you know how a screen reader reads “A11Y?” What it sounds like on a screen reader?

[00:29:09] ALICIA: I don’t. Does anybody know that? Is that one of those things where um . . .

[00:29:14] AMBER: I think it reads “A-1-1-Y.” I don’t think that reads “11” It definitely wouldn’t read it like “Ally,” like the way you are pronouncing it.

[00:29:22] ALICIA: I know, huh? Because you know how if you try to type WordPress with a small “p,” I don’t know if they got rid of this, but you couldn’t do it. WordPress would –

[00:29:35] AMBER: Oh, the screen reader wouldn’t read it properly?

[00:29:37] ALICIA: No, like WordPress would automatically in the code, make it a capital P. You could try to type that in your content. So I was wondering if the screen readers come together, and said when they see “A11Y,” we will read as “accessibility.”

[00:29:51] AMBER: Yeah, I don’t think it does that, because I think the problem with that would be then people wouldn’t even know that abbreviation exists, right? I think it will read out A-1-1-Y.

[00:30:03] ALICIA: OK.

[00:30:04] AMBER: I don’t know if anyone else has . . . I can’t remember. I don’t know if I had used a screen reader on a page that actually has that abbreviation. Glen is in the chat. He said in VDA, just said A-1-1-Y. He tested it for us.

[00:30:18] ALICIA: Oh, cool!

[00:30:19] AMBER: I guess it does says “11.”

[00:30:20] ALICIA: Yes, that’s like the ally thing, that’s me. I just like doing that. I have heard a lot of people saying A-11-Y. Even without screen readers.

[00:30:30] AMBER: That is how I pronounce that when I see it, “A-11-Y.”

[00:30:34] ALICIA: I just say “accessibility” when I see it. It is a shorthand. But it is a play on words in this particular. But do not take this to the pro game. [Laughter.] Apparently, they will laugh at you.

[00:30:51] OK, are there anymore questions?

[00:30:54] AMBER: This one may come up with you are talking. Maybe I will frame it and you can show us. Someone is wondering for “click here,” and similar issues, they are wondering about how to get action links and buttons that are in a card to say “learn more, get started.” How can they provide enough context around it?

[00:31:13] ALICIA: That’s a good one.

[00:31:14] AMBER: I am guessing you might be able to show us some of that?

[00:31:17] ALICIA: Yes. Yes.

[00:31:18] AMBER: There are two questions around that. Maybe I will pop off. I’m thinking these are going to come up in your demo.

[00:31:27] ALICIA: Yes. Was that the last of those questions?

[00:31:32] AMBER: I think that’s it. Ruth Anne, you asked would a callout confuse a screen reader? I am not totally sure there is more context on that? So, maybe type if there is some extra context. I am not totally sure I understand that question.

[00:31:50] ALICIA: Call to action or something? She might be meaning a call to action. I will stop and share. I will actually . . . it won’t share what I wanted to. It was . . . the slideshow. Now, I don’t actually see my slideshow. I think I shared the wrong screen. Let’s see what’s going on here.

[00:32:21] It says resume share. But I’m not . . . it says your screen-sharing is paused. I am going to stop. [Laughter.]

[00:32:31] AMBER: Yeah, maybe stop it –

[00:32:34] ALICIA: That is weird! Oh my God Zoom! OK, let me try this. I’m going to stop the share, and let’s try it again. Let’s see. Somehow I might have . . . [laughter.] I think I am back. Can you guys see my screen?

[00:33:03] AMBER: Yes.

[00:33:04] ALICIA: OK, good. It was just that fun thing that Apple does, and it took me into another screen that didn’t have my slideshow in it. One of the things that I wanted to do was really interesting. One of these tools . . . let’s do this. This might get me into the browser.

[00:33:21] One of these tools is the AIM. You can actually check any website with this tool, to find accessibly errors or things that you can fix. It actually gives you solutions for contrasts. Let me go here. Yay! We are in the browser.

[00:33:43] What we’re going to do . . . everybody recognizes this site, right? Do you see this little guy down here? I don’t actually like that guy. On this site, I am going to show you how to use this tool. It is a browser add-on. I am using this in Chrome. This is what the icon looks like. What I like to do is, I will come in and I will hit this hamburger over here.

[00:34:11] I will do the Fastpass. First of all, I want to say, this is not the be and end all of your accessibility. This is not an audit. This is a Fastpass. This is like Oh my God, if we saw this poking out of the ocean, the iceberg must be deep. You know what I am saying?

[00:34:30] Do not utilize this, and in your fastpasses clean to say my site is accessible. That doesn’t mean anything. It has to be really checked out. I will check on this one, with these guys. They have an overlay. Overlay should fix everything. But it doesn’t. So right here, we can see, even with an overlay, they have 18 failed instances.

[00:34:57] If you do this on your own website, you put this little add-on, and you will get these. A lot of you who won’t understand what they are talking about. That’s perfectly fine. There are other ones like ARIA and that’s like that, you won’t get. But the color contrast, easy fixes. There are 14 of these. These are actually low hanging fruit for people –

[00:35:19] AMBER: Alicia, are you seeing a second popup window?

[00:35:22] ALICIA: Oh my gosh! Yes I am.

[00:35:24] AMBER: You might have to share your whole screen. not just your browser.

[00:35:27] ALICIA: Yes I do. Let me do it again. I will do it again. Why did I make that mistake? Can you guys see it now?

[00:35:33] AMBER: Yes.

[00:35:37] ALICIA: OK. When I did the Fastpass, I got this popup screen. There are 18 failed instances on a site that has an overlay. Why go through the trouble if its not even going to really work that well? That’s kind of what my question is.

[00:35:57] Also, it tells you and breaks it down into areas that need to be addressed. Before I opened all these, there were these areas. You can head right down. Usually, the color contrast is the number one. When I do these tests, that’s the one that usually has the most. You can fix the easiest. You can totally open it up.

[00:36:19] What they will do is, they will tell you this is what you originally have, and you just change it to this. Make sure that one is that. Then, you are good. You can just literally go in and maybe sometimes you use the customizer to make something happen. Or there is CSS. Just change the number. This is fourteen errors that could go away.

[00:36:41] Apparently, they are not caught by whatever little guy is doing. Then there is one image here that doesn’t have an alt description. They would be able to add that, too. So that is a really good tool to help you know to the extent that content you had entered in. Also, before you even enter content, you can see if the theme that you are using or you purchased or that someone made for you has some errors that are obvious. You might want to avoid that theme. So that is another thing.

[00:37:15] You could figure out, is it an easy fix? Also, make sure that if it’s a color contrast thing, and you haven’t done anything, that can be fixed, too. That might just be some dummy content they had in the theme. It is not working out. When you put in your content, your images, things will be better. That’s that tool. I had wanted to go back to that.

[00:37:35] I got this website up here. One of the things, before we go to that . . . oh, also it shows you on the page where all of the errors are occurring. This one is probably not even our fault. It’s an ad. I’m going to close that up. I did tell you about Google. Let’s go visit the Google thing. I think it is really important. Google Drive in the documents, is a really, really, good tool to use to create your content.

[00:38:16] It’s so easy to structure it the way you would want it to appear on your webpage. For instance, this article has a title. If I click on it, it’s in H1. We’re going to go on our heading adventure now. In case people were wondering what headings actually were, they are the H1s, H2, H3s, H4s. Sometimes, rarely used, H5 and H6.

[00:38:50] They structure your page. H1 is usually the title of the page. Sometimes it could be the logo, if you’re on the homepage. That is rare. When you are within a post or a blog post, it is the title of the page. It is telling someone this page is about this.

[00:39:11] It only appears once. There should never be two H1s on a page. Because then they are competing with what’s the page about? So once you have decided what the title of that page is, that’s the H1.

[00:39:28] Then you start breaking the page up into different subjects, or sub-subjects. If I click on this, I can see it is an H2. I know I am structuring my page now. I have chosen heading two.

[00:39:45] Now we are breaking the content up. Why are cats so special? Then, there are reasons that they’re special. Each reason is now a subcontent, under why are cats so cool, reasons why I love them. If I click this, then I have an H3. OK? So this whole thing is totally formated perfectly. Not only that, you can check over here and Google will do the outline for you.

[00:40:21] If I started putting subs under here, like for instance, this was an H4, I typed in: “They go everywhere.” You can see that now that Google has put the outline here, underneath here is another sub. It’s going to keep nesting like this. So now you’ve got this visual, without having to worry about blocks and all that jazz and the icons and things that when you’re putting the content in, you are not sure if you are even in the right container. You have this.

[00:41:03] Then there is some magic. I will take this out, because it is not part of the thing. Then this is the special sauce. So I’m going to copy this whole document. I’m going to go over to Hello World. We will change the title. I’m going to just take that out of there.

[00:41:28] We are going to move this block. Then I’m going to hit command+v. I just pasted the whole thing in here. So I’ve got a post. Here’s the special part. Title went into the title. This is an H2. This is an H3. So, I don’t have to worry about having to go find the block and do all of this jazz.

[00:42:00] So we are ready. We’ve got this amazing article. Because I have two cats, and I know it’s true. They’re cool. So now that we’re in here, now we can do some of these other things we are talking about. There were two questions about what if you have a button or you wanted to add more context to click here.

[00:42:21] Let’s go in here. Normally, I will see something like this. “To read the free guide about awesome cats, click here.” That’s what most people do. They will do this number right there. They will put a link. For now, we will just put http . . . I know this exists somewhere. Cats.com.

[00:42:59] Let’s do that. It turns into a link. This won’t be helpful, right? Now, it’s not a button. It would be helpful for other people, too. It would be helpful SEO-wise, because when something is linked, the words in the link actually have more weight than words that are unlinked. I don’t know if everybody knew that. Words in an anchor, they have more weight.

[00:43:29] So instead of saying “click here,” I would put: “to read free guide about awesome cats,”I would change this to the whole thing. So you have to wrap your mind around it, right? I would change it to . . . oh my gosh, why won’t it work? Oh my god. Okay, I will just delete it like this. I would change it to: “Download our free guide about how awesome cats are.”

[00:44:23] The whole thing is linked. I’m just going to go like this now you guys, to save some time. The whole thing is linked. That is what you want to do. Start thinking like that. That is beneficial for everyone. People who are sight-impaired, or who can’t see at all, it is beneficial for everyone. That and beneficial for you, because those are key words: download a free guide.

[00:44:53] So you can do that. That is one option. The other one . . . some people like to add a button. So let’s go in here and we will find the button. We have a button here. “Download guide.” Now that doesn’t even make any sense. First of all, that is almost as bad as “click here.” It doesn’t say what the guide is.

[00:45:20] So that’s where you would probably want . . . OK. So this is where I’m going to introduce you to these screen reader text formats. So if I select this text, and I already installed the plugin. When you install the plugin in this dropdown, you get screen reader text only.

[00:46:02] So there we go. When I click out, it just says “download free guide.” Now, some people will think, I don’t know if that is working. I need to know. I go for a preview. There is the button. Previewing your html, don’t be afraid of the inspector and a few html tags.

[00:46:27] You are going to need to use the inspector, just to look and see if there are things that are happening so that they are hidden for others, but they are still in the code. They are still in the html, so they can be read. So that is why the inspector is really good for that. If I go here and I click on the button, and open hat up, I can see it says, “download free guide.”

[00:46:50] In this span, which is a special html tag, it says about how awesome cats are. Of course, I could probably use better grammar. But that would be read out for the screen reader. But someone who just comes to the site, has already read the part above, and it says to download free guide. So that screen reader text format plugin is amazing.

[00:47:13] It really helps because . . . I get it. A whole sentence like that in a button is not going to really look good on the phone. It is go to be more of a usability issue. They don’t even know it is a button. It is a paragraph, with rounded corners, so it looks really weird. I really highly recommend the screen reader text format plugin.

[00:47:34] That’s going to solve a lot of problems for people that don’t know what to do. There was even two questions about that, above everything else. Then, we are in here. I mean, we have totally —

[00:47:45] AMBER: Can I jump in and ask a couple of questions?

[00:47:48] ALICIA: Yes.

[00:47:49] AMBER: So, going back to when you were in the Google Doc, could you show someone how to turn on that outline on the left-side of Google Doc?

[00:47:58] ALICIA: You don’t have to turn it on. It’s automatic.

[00:48:00] AMBER: Well, I think by default, it might actually have that left arrow click.

[00:48:04] ALICIA: Oh, you mean like this? Okay.

[00:48:06] AMBER: Yes, so you don’t see that –

[00:48:08] ALICIA: Oh, you mean like reveal it. OK.

[00:48:10] AMBER: someone was asking how you got that.

[00:48:14] ALICIA: I have to say Google, that is mystery meat.

[00:48:21] [Laughter]

[00:48:22] Some of these icons are like hieroglyphics. There will be a time when humanity understands what they all mean. We are still straddling print and web. We still kind of sometimes need words. That’s where it is. It is right here. You open it up. All right. Was there another question regarding the Google stuff?

[00:48:41] AMBER: I think that was the only thing about the Google stuff. Someone had a comment, which I think you answered. Just to make sure, they are saying: Wouldn’t it be just as powerful to put the link on just the free guide on amazing cats, without including “download r” in the link, to reduce some of the screen reader chatter.

[00:49:05] ALICIA: Well, I would say it would be better to have the words downland. Then they won’t be pleasantly surprised when some download starts coming into their computer. Always put the words “download” for everybody. If there’s going to be a download link, the word “download” needs to be there. I have clicked links before, and I thought I was going to read it online, and something downloaded something on my computer.

[00:49:30] I was freaked out, because I didn’t know what it was. So, if something is going to download, make sure to put those words “download.” To be honest, there’s a universal symbol with a box and an arrow kind of pointing out of the box, that should actually accompany anything that’s a pdf that has got a downloadable thing that comes on your computer. People will see that, and go if I click that, something is going to download. Definitely –

[00:50:02] AMBER: That’s a good point about people expectations that it’s not just a link to a different webpage.

[00:50:07] ALICIA: Yeah, that is that part where you have to be sensitive, And curious and creative and actually just get real nerdy with this, your content. Think about how it lands with other people. I know people who just “we need to put this thing up tonight.” They just write something in the admin, press “submit,” and they don’t even go to the front of the website to go and see if it published.

[00:50:34] Those days are over people! [Laughter.] You have to go in. You should always check your work. Especially if you want to look at it on a tablet and a phone. Just because of blocks, WordPress working on blocks and things like that, it doesn’t mean it looks okay on the phone. You might have to do a little jiggling around and stuff.

[00:50:56] OK, I can’t remember what we were doing. The other thing, I might want to put a picture in here. Let’s see. I want to put my picture here. Let’s insert it after. Add image. Media library. I just stuffed it full of my cats, my boys. One of my favorite ones. When you are going for an image, I know that the impulse is to just throw it in here, and I will put the alt text later.

[00:51:37] I have trained myself that an image has two steps, the image and then the alt description. So you can put the alt description in the media library. That’s a cool place to put it, so that if you grab the image in again, it’s already got an alt description. Also remember, if you are grabbing it again, and it’s going to be used in a different context, then you might want to, while you are putting the image in the post, change it post-specifically.

[00:52:06] You can do that when you’re putting photos in a post. You can actually change the alt description in that spot. I can show you. So I would put here: brown kitten with raised paw, lying in a blanket. Oh, another thing we need to do. I don’t want to replace it, but I will go back in here.

[00:52:48] That looks different! [Laughing.] Oh my gosh! I haven’t worked on this in 6.1. We don’t want anything in the title. I know this is going to be a bummer, because you want the title to go through your media library, and find out what everything was and names. But, when you are doing a search in the media library, it actually takes into consideration your alt description that you gave it.

[00:53:13] If you are trying to look for an image, you could use the search and actually type in. That’s another reason why having the alt description is awesome. You could also use caption. The caption will show up on the front end of the website. Captions are usually, you want to give the credit to the person who made the photo, if necessary. Or you can use it to elaborate on the image as well. Like a caption helps for people who can see, as well as not see.

[00:53:42] So that maybe they’re not sure what’s going on in the picture. That is actually helpful to have another spot, where you can even elaborate more for everybody what the picture is all about. That is interesting. Oh, look at that. A lot of things that are happening here are based on the two plugins I installed. Joel Dawson’s plugin, and I’m not sure if I have the Equalize one turned on.

[00:54:08] That is what I wanted to ask you, Amber. What would happen if both of those are on at the same time?

[00:54:16] AMBER: OK, so that checkmark about the image being decorative, that is coming from the WP accessibility plugin, Joe’s. Our plugins can work together just fine. Our plugin is an awning tool. It identifies problems.

[00:54:32] ALICIA: Okay!

[00:54:32] AMBER: This is a plugin to help you fix some common problems. They don’t really collide in anyway.

[00:54:40] ALICIA: Awesome.

[00:54:41] AMBER: They can work together.

[00:54:42] ALICIA: OK. Let me go turn yours on.

[00:54:47] AMBER: This is a total surprise, you all! I had no idea she –

[00:54:52] ALICIA: I know! [Laughter]

[00:54:54] AMBER: I feel like I should pop Steve up here, now. You can start asking him question. He built it all.

[00:55:01] ALICIA: I totally put that in there! I am not a shell, I swear!

[00:55:04] AMBER: You’re going to put us on the spot, and hope it works!

[00:55:07] ALICIA: I am serious! I didn’t turn it on because I wanted to make sure. I have to activate this one. Oooooh, that’s cool.

[00:55:13] AMBER: You can scan, if you want.

[00:55:18] ALICIA: This is an important update. I’m going to do that. I’m going to do that.

[00:55:22] AMBER: You can opt in, if you all want –

[00:55:23] ALICIA: I think I am already opted in. I can go back. So, Joel Dawson .. that was awesome. You don’t use alt descriptions for decorative images. This is another place where it is not black and white. You have to think. Is this decorative? Is this doing anything? It’s like an icon. Sometimes people add icons. They have to get them from their media library.

[00:55:52] A lot of times the icons are in CSS, so you don’t have to do anything. If you have an icon, you don’t have to go “icon out of the blah blah blah.” Itis not important. Most of us who see don’t even pay attention to those icons. So, you just really want to make sure that if it is important to the mood, or to the story, yeah. If you’re trying to get a response from somebody by having it, it is funny, it is a punchline, or something like that, you’ve got to put everybody in on that scene. You have to be really creative when you do it.

[00:56:27] So this is where I was talking about you could change it if you wanted to. I can come in here, when I have this selected. I could change this to be something else. It will not change it in the media library. That is at least how it worked before 6.1! Hopefully it still works that way. So there is that.

[00:56:44] The other thing I talked about was the proper html elements. Every time when we go back to this, we look. This is all the html that the post generated, just by putting it in there. You’re writing html by accident. It has to be proper html. Here is the kicker for this whole accessibility thing. This is the kicker, you guys. This is like really a big ah-ha moment for me. If someone codes a website to standard html 5, and does it impeccably, it is automatically an accessible website.

[00:57:27] This is because, somebody created assisted technology to actually read html websites. OK? When a site is not accessible, someone did something to it to make it not accessible. They either did some fancy Javascript thing, or they dragged things around with a whizzy wig dragger, like DragonDrop. They dropped things all over the page, because they didn’t realize underneath the hood what was going on.

[00:58:01] Almost 100% . . . if someone has other examples . . . it is something added to the website that made it not accessible. Weird accordion menus, other kinds of UI patterns and things like that. When Javascript shows up, that usually has an issue with it, too. They are trying to do things that are magical and cool.

[00:58:31] The challenge is trying to do those, and not leave anyone out. Because you can. There are some amazing websites. PayPal, by the way, is just amazing. If you have visited it lately, it is doing a stunning job of an accessible website.

[00:58:48] When it says paragraph, and has that really cool, fancy thing like this, that you see on your wordprocessor, it is really just a paragraph tag in html. It would be kind of cool to teach people html, but instead of having these it was actually a paragraph tag. Like you knew and then when you went over to look in this area, you can go, well that’s the paragraph tag. I know that’s the dates that I did.

[00:59:18] It would behoove people to learn just a little bit of html as you can. You can see what’s going on because you can go over here and edit it as html. You can actually see the tags. So you can do that. I can do . . . I’m not sure I can do a picture. Yes, I can. In the picture, I can see they wrapped it in something called Figure. There is the image tag.

[00:59:41] A lot of this stuff is beyond because people aren’t coding. They really just want to write. But I challenge you to learn a little html. It will empower you. You will be able to . . . if you see something that is weird, sometimes even in the page builder, you are allowed to get into the html. You can fix these things yourself, that the Page Builder can’t actually fix for you.

[01:00:05] AMBER: I think it’s work mentioning, so you are using all core blocks that come in WordPress.

[01:00:11] ALICIA: Yes.

[01:00:11] AMBER: These are all highly tested to make sure they are using proper html. I think more where people get in trouble is when they start using third party blocks libraries, or some of the different page builders. These are not tested super thoroughly. So that is where some of these problems can come in. Like buttons that are not actually buttons. They are like a Div, or a spin, as Javascript added onto it.

[01:00:41] ALICIA: Yes.

[01:00:44] AMBER: Yes.

[01:00:45] ALICIA: Yes. It is also, think of the user as well. Sometimes when you know a little bit of the geeky stuff, you know what to look for when you grab one of these tools. For instance, if you knew little subtle things, like if you put CSS in a customizer, like maybe someone told you you need to change the color. So you need to put this color whole in. You know CSS! At that point, you know it. You only know that much, but you know it.

[01:01:21] Once you have used a customizer, and you hit another app, or some kind of other theme that comes in, and you want to change something like that, then you start looking for that. You start looking for the place where I put my custom CSS. When you learn some html, you start looking for the place where I can actually edit the html. I want to be able to get to that. If this is a great tool, then it’s a tool where I can drag things around.

[01:01:48] When I need to, I can get to the html. Those should be qualifications for a tool. Like you should never have a tool, where you can’t access CSS. Then you have to write somebody about this tool. Then they say, “We may be fixing that in the next update, otherwise forget it.” You can’t just say, “All right, I will just wait for you,” because while you are waiting, your site is vulnerable.

[01:02:18] It is time to move onto something else. You don’t know what you don’t know. A lot of people are using Wix and Squarespace. They don’t realize that every time they drag something into that area, the canvas to build, they are writing this really horrific html. That’s why I said, you are powerful. [Laughter.]

[01:02:43] Content creator is the most powerful person! They can bring a site down to the ground. [Laughter.] They really can! There have been many times where I’ve let a site go out . . . it’s kind of like having a shelter, and letting the cat go to a family. You go to check on it, and you are like, Oh no! What are you doing? [Laughter.]

[01:03:09] So, I’ve had to go back and give them some tips and some things. That’s the other thing. Everybody needs tips. If you are a developer, and you have clients and you don’t want to have to be there every time they need you to add content or something. Because it is a content management system. They’re supposed to be able to do it.

[01:03:27] You might want to make a small little tip sheets or something, and show them how to do these things. They are the gate for this accessibility. They really are. Unless you are putting the content in for them.

[01:03:42] AMBER: You had a question about why did you remove the title on the image?

[01:03:48] ALICIA: Oh. Thank you, because I did not explain that. If we go back to this image, I have to replace. We go to the library. So the screen reader reads the alt description, the title, and the caption. But sometimes it doesn’t read the title. Sometimes it does. It always reads this, the alt text. It always reads the alt texts. It will always read the caption.

[01:04:22] If it always read the title, it would be cool, add even more content to the image. But it doesn’t. What I see a lot of is just the name of the file in there. If they have a screen reader that does read it, they will get like CD5 5000, whatever blah blah blah. Or they will put exactly the same thing in here, and put that in the title. Then they will get it read twice.

[01:04:48] Remember I said earlier, as you’re doing content and putting images and whatever, think of the reception of that. Think of the comfort level. I guess I have moved on from the basic accessibility, to comfortable accessibility. Yeah, it would be great to put a title in there. But does somebody want to go through a whole gallery, and hear everything twice?

[01:05:14] Sometimes you have to check your html for that gallery plugin that you got. Then look and see if their dynamically putting the name of the image in the title space. You are putting it in the alt description. A lot of plugins will utilize the title, and stick stuff in there. So it doesn’t make sense what they put in there.

[01:05:38] AMBER: Yeah, so normally if you have alt text, you wouldn’t want to have a title output. I think a well developed theme with core WordPress Box won’t will use the title at all. It will never output it. As you mentioned, themes and plugins may sometimes put the alt in the title, and the title. On that one, it probably would have been Milo dash one dash rotated. That is what it would read out. [Laughter.] That is not super helpful.

[01:06:08] ALICIA: Yeah. That is the url of it. Let’s go put the title in. I’m going to put exactly the same thing. That is usually what people do. I’m going to cover it all! I will put that in. I just want to see what happens when we look at the . . . so there is alt. Yeah, the title is not here. [Gasp]

[01:06:46] AMBER: So the core blocks don’t do it.

[01:06:49] ALICIA: Oh, OK. That is so good to know. Because someone is going to be very –

[01:06:54] AMBER: Steve, I am throwing you in the mix. Do you know? Most core blocks don’t do this, right?

[01:07:00] STEVE: Right.

[01:07:00] AMBER: It is just third party plugins or themes or what?

[01:07:03] ALICIA: Let’s try this.

[01:07:04] STEVE: It’s to maintain backwards compatibility.

[01:07:07] ALICIA: Wait, what?

[01:07:10] STEVE: That’s why it’s still there, to maintain backwards compatibility. So the title field has been there for many, many years. So there could be any number of plugins that are built that utilize that in some fashion.

[01:07:24] ALICIA: Got it. So let’s try this.

[01:07:26] AMBER: I mean, I have seen that. I’m pretty sure BeaverBuilder is one where puts the alt and the title, which is actually incorrect. That is a BeaverBuilder problem.

[01:07:36] ALICIA: Yeah. Write them –

[01:07:38] STEVE: Even some sliders will use that title as like the title for the slider.

[01:07:43] ALICIA: Yeah, there is the fancy box popup. I actually spent several hours . . . This is high-level geek. I spent a lot of time . . . actually, no it was the gallery guild for customs fields. I spent a lot of time having the title not be the caption or something? It was just the weirdest thing. Sometimes they will use the title as the caption on the popup?

[01:08:11] STEVE: Yes.

[01:08:12] ALICIA: Not the caption. So, I actually made that work. This is Generate Press. So, Oscar1, we will leave that. My kitten with the white patch, with the white tummy patch sleeping on a couch. OK. I am just curious to see . . .

[01:08:52] AMBER: So we are doing –

[01:09:02] ALICIA: Generate Press image doesn’t do it either.

[01:09:06] AMBER: Oh, yes it does. Title –

[01:09:08] ALICIA: Where? You see it?

[01:09:09] AMBER: Title dash one.

[01:09:10] ALICIA: Oh, I forgot. We didn’t do the same. Oh yes, it does. So if you want to use Generate Press, I will have to write them.

[01:09:19] AMBER: But that would be considered incorrect, right Steve?

[01:09:22] ALICIA: Exactly. So what you have to do –

[01:09:24] STEVE: I think so.

[01:09:24] ALICIA: So what you have to do, this one I would have to take the title out. So I go to replace.

[01:09:30] AMBER: That would have to be empty.

[01:09:32] ALICIA: Yes. I would have to go like that. I had to put the whole thing in there. I will write them. That is what you do, people! That is what you do. Do you know how many people wrote Meetup dot com? There was a newspaper article about it. [Laughter.]

[01:09:49] AMBER: I feel like that is a good circle back to a question that someone had at the beginning, when you were talking about Meet-up. Someone said: Aren’t overlays for assisting the visitor, not making the site accessible?

[01:10:06] I don’t know if you want to answer what your thoughts on that.

[01:10:08] ALICIA: Okay.

[01:10:08] AMBER: I am sure Steve might have some thoughts on what an overlay –

[01:10:12] ALICIA: OK. OK. Remember how I said that html, coded properly, which isn’t difficult. There are a lot of books out there. Fun books to learn html. It is almost like doing crossword puzzles, but it is coding language. It is not that difficult. If it is done properly, then assisted technology will be reading that. That is what it is looking for. That is what it is looking for.

[01:10:47] It is looking for properly coded html. So, when an overlay is added, it is usually because that is not happening on the website. They have been alerted, or they have been sought out by the company that does this. They do have issues, and we have this plugin, and are going to stick it here. It will use artificial intelligence to fix a lot of the things on your website.

[01:11:12] Some of things it does fix, it does an amazing job at doing that. But that is not what you are looking for. You are not looking for half the fix, or 75% of the fix. When I told you also about images and the context, and how I might want to change the alt description, based on where I stick this image throughout the site, so that I can actually make this an experience that I want to share, the way I have share with everyone who can see it. I want to share with everyone else who might have these issues.

[01:11:45] I don’t want to point out that accessibility is only for people who can’t see or have sight issues. There are a lot of other things. There are captions on videos. There is the ability to tab through. There is so much. Cognitive disabilities, so the fonts, centered texts. There are a lot of things. I am just getting to the points, that are major ones that you could fix very easily, before you even put your content in.

[01:12:14] So the overlay is not assisting anyone. It actually creates it script. Some of them actually recognize that assisted technologies is being used. That is actually a violation of someone’s privacy right there. People don’t want to have to go announce, “I’m using assisted technology on this website.” Then suddenly, this Javascript kicks in.

[01:12:39] There is an interesting article in the New York Times, by a young man who was visiting a Ham radio website where he was purchasing Ham radios. He was able to get by with the html. Maybe the layout looked weird for everybody else. It may have been a really ugly website. But the way it was for him, he got through. He could get by. It wasn’t the best.

[01:13:03] Then one of these overlays came on and he can’t get through at all because the overlay shuffles things around. It has to look like this, and this has to come over here. We’re going to do this. And it does things like that.

[01:13:15] So this guy now cannot access that site, because something is happening with the html and moving things around, because artificial intelligence thinks it knows better. That is really what is happening with these overlays. Also, a friend of mine pointed out, because she didn’t know what they were. I showed her. That thing popped out, and she thought it was actually insulting.

[01:13:40] She was like, “Why would I have to need that, to actually do the website?” That is like giving me training wheels or something. I need something, instead of really just a properly coded website is all they really need. You don’t want to go into the hospital and like the neurosurgeon not know proper medical procedures. You know what I mean?

[01:14:09] There are other things people expect to do it right. When it comes to the web, they’re going to run into wakes, and throw something out. We got to get out of that mentality. This is a serious business here. Not only does it make or break for accessibility, it makes or breaks for SEO, for privacy issues. There is so much that you have to consider when you’re on the web.

[01:14:31] I am shocked that . . . it’s a shocking amount of information. [Laughter.] A shocking amount of considerations. They are all moving parts. Is that my answer for overlays? I know I meandered. That’s my answer.

[01:14:49] AMBER: Yeah.

[01:14:50] ALICIA: If I said anything inaccurate, someone could totally help me. I don’t want to. [Laughter]

[01:14:57] AMBER: I think the overlay companies say they are for making a website accessible. But as you said, they don’t.

[01:15:03] ALICIA: No.

[01:15:04] AMBER: But they do –

[01:15:05] ALICIA: They give it away.

[01:15:06] AMBER: Yeah.

[01:15:08] ALICIA: As you saw, we just went on Meetup. They have an overlay, and they still have eighteen errors on their website.

[01:15:16] AMBER: Here is a totally different question. I’m going to throw a few questions at you now.

[01:15:20] ALICIA: OK.

[01:15:23] AMBER: Steve, do want to stay up? In case you get something?

[01:15:27] STEVE: I am good to go.

[01:15:29] AMBER: Someone was asking, can you expand on what is wrong with centered text?

[01:15:36] ALICIA: OK. Let’s do it. Oh, let’s do a longer one. Sometimes you can get away with a couple of sentences. Let’s do this one. I will copy. I will just double this up. Then, I’m going to center this. Then, we’re going to go over. I will hit refresh. I’m going to find out where we are. Where’s our centered stuff?

[01:16:13] Oh wait, does that even do it? Oh my gosh. I thought I was gaming the system here. I guess not. Oh, it’s the 10 reasons. OK. Did I not . . . here it is. OK. First of all, have you heard of the word “orphan,” when it’s applied to text? That is what happens when your last sentence had like four or five words in it.

[01:16:43] The big headache is that people often are looking at a different sized device, and they are like, “Can we make sure that one last word is not by itself?” So that is one thing. That is an aesthetic thing. The other thing is, some people will . . . I will move that out of the way . . . they will zoom up their screen. Where is our center? I don’t even know where it is.

[01:17:09] AMBER: It was up.

[01:17:11] ALICIA: It was up higher? Geez! Oh, right there.

[01:17:18] AMBER: There, under five.

[01:17:19] ALICIA: OK. They will even go higher than that. That’s only 200 –

[01:17:23] AMBER: I think the main thing on this is that it is harder when centered text drops to multiple lines, to track across the lines –

[01:17:31] ALICIA: Yeah. Absolutely.

[01:17:32] AMBER: – across the paragraph, when the start of the paragraph doesn’t line up. It is under number 5 I think.

[01:17:38] ALICIA: Thank you! Gosh dangit! Someone is paying attention. So notice here, and then you will notice. This is one of those things, that as we go through life, we don’t realize how comfortable it is. When we are reading a book or something, our eyes, even though the righthand side is jagged, we always know when we get to the next line, we will to to that one spot.

[01:18:02] Some people actually have to get their screen this big. They have to get really, really close. They will start reading and literally have to scan. They will come over here, and they are always moving in some weird place, to try to find the line. It’s just weird. I mean, look at it.

[01:18:23] Never do right lines. That is just not even . . . even when you know you encounter that, that’s bad. The other thing is people with cognitive issues.

[01:18:37] AMBER: Like dyslexia.

[01:18:38] ALICIA: Yeah. That is hard for them, too. Honestly, it looks silly. [Laughter.] It really does! The whole page of paragraphs and centered texts. This looks silly! So, no.

[01:18:51] AMBER: No. So the followup question on that, what about occasionally using like centered headlines?

[01:18:57] ALICIA: Yes. That is why I made more context here. Sometimes like one word or something . . . occasionally that is fine.

[01:19:06] AMBER: As long as is . . . I think the rule we use internally is that we don’t go more than two lines.

[01:19:12] ALICIA: Yes.

[01:19:15] AMBER: That is more of a best practice. I don’t know if there’s a wicked guideline for that.

[01:19:19] ALICIA: I feel the same way, especially when the text is big –

[01:19:24] AMBER: Like four words or something.

[01:19:26] ALICIA: Yeah, it is inviting them in, like “Welcome to blah blah.” Or landing pages, a lot of times landing pages need those. There can be big callouts. They look weird when they are all over to the left.

[01:19:40] AMBER: Yeah. So in an ideal world, everything should be left-alined.

[01:19:45] ALICIA: But you have seen sites when everything is centered text. Even on the phone, it is still not a good idea. The other one you don’t want to do is justify it. Then it creates gaps in the middle. That is just as bad.

[01:20:02] AMBER: OK, we only have a few more questions. I will jump through of these real quick. Circling back to Ruth Ann’s question originally, she was referencing block quotes. Do you know how those are read on screen readers, and if these make a difference from an accessibility standpoint, using a block quote or not?

[01:20:25] ALICIA: Oh, yeah. I might have to admit I am a little fuzzy on it. I did research about it. There’s block quotes and then pull-quotes. If someone wants to dig deeper on this, but one of them . . . I think the blockquote is supposed to be used to reference. One is used to reference actual literature and its author. You are not supposed to play around something someone’s review. Right?

[01:21:07] That is what I gathered from my research. This is also something I want to point out, too. The accessibility thing doesn’t end. You will always be learning something. If you get nerdy about it, you get like Ruth Ann, saying she’s getting really nerdy and awesomely nerdy about it. You want to get to the point where you’re really differentiating things because the screen readers and all of that is getting really good.

[01:21:32] From my research of that, I did come across where you may not want to use a block quote for reviews and stuff. There is something called Quote. One or the other has to be used for whatever it is. Then there’s also whether you wrap the site in a figure. There’s some stuff. It’s all html. It is all html.

[01:22:00] There’s people out there talking about this stuff. When you’re working on your content, and you wonder what I should do in that case? Just Google it. You will be surprised at how many conversations you will have. Eventually, you will see a consensus. Then you are like, I’m going to go with that.

[01:22:16] That is what I –

[01:22:17] AMBER: Yeah. As far as I know, I don’t think a screen reader will actually announce it is a quote? Actually, wait a minute. Glen might have said the same thing. He doesn’t think that screen readers will say anything special for block quotes. But I think the thing you want to be careful about with using the quotes, is to style like huge blocks of text, is that it could impact your readability, if it is making them really big or indenting them really weird. It depends upon the subtypes that have been assigned to your block quotes.

[01:22:49] ALICIA: Yeah, that is a good one. That is another one, too, where by now in this conversation, no one will ever use an H3, because they like the way the font looks for a paragraph. Because that happens a lot. It is always H3. [Laughter.] It is small enough, it is just small enough to be –

[01:23:09] AMBER: Or those H6 they like to put above the H2.

[01:23:13] ALICIA: Yes. Let’s get back to that, too. The order of those H’s have to remain in that order. You can’t start with an H4 and throw in an H2. That really throws it off.

[01:23:26] AMBER: So, someone had asked where can they find a screen reader to test their websites?

[01:23:35] ALICIA: I would like to know that, too. [Laughter.] You can, by the way, test your website with a Mac with the voiceover on a Mac. If you’re in a pinch. I have seen it listed in the 3. There is Jaws, the Mac and what was the N –

[01:23:57] AMBER: NVDA is the PC open source free screen reader. I don’t know if you’re asking . . . it just saws Dev Dev is the name. I don’t know if you are asking if a screen reader user is an actual screen reader? If you have a Mac, you can use voiceover. It is already there. NVDA is free on Windows, I recommended.

[01:24:18] If you are looking for a user to test your website, there are companies like ours that does it. Also, Knowability is a nonprofit. Alicia talked earlier on doing the Air Rally through. They do screen reader testing. Sometimes you can ask and you might actually have a screen reader user in your customer base.

[01:24:40] ALICIA: Oh, yeah.

[01:24:41] AMBER: That would be super ideal, because then they might already be interested in supporting your brand. Of course you want to pay them to test. Not totally sure which way that question was, hopefully we answered either way.

[01:24:55] ALICIA: Got it. I know Dev. Dev is very conscientious about accessibility, too. I want to point out, fortunately . . . I won’t put him on the spot because I can’t see him. He is a really good example of someone who is really conscientious and learning. Just watching him incrementally learn, because that is how it’s going to happen.

[01:25:20] You don’t have to be all scared, because you don’t know any of this. Incrementally, and then you build on that. After awhile, it is like second nature. It is just like muscle memory. You’re just writing out the alt description. You can see from a mile away. You can point to your friends. You know your heading structure is off. You know? [Laughter] You are changing other people’s stuff. It is really amazing to watch people grow.

[01:25:43] AMBER: Yeah. Maybe I will give another little shoutout. The December Meetup, Alex Stine and I will be showing how to test a website. If you want to know more . . . I know Alicia, at one point you mentioned accordions, and I saw some chatter in the chat, about how do you know if your accordion is working or not?

[01:26:04] If you are not sure where to start on that testing, come to that Meetup. That will be a good Meetup, to get a feel for that.

[01:26:09] ALICIA: Yeah. Sometimes, don’t even worry about whether your accordion is works or not. Just Google “accessible accordion” and go there. [Laughter]

[01:26:18] AMBER: The short of that is, try to use it without your mouse.

[01:26:22] ALICIA: Yes, that is one of them. Yes . That’s actually a good thing. Get in the habit of that. That’s like a fun game. You land on those websites of the day, like the word winning website. Then hit the tab button and watch yourself go directly to the footer on most of them. It is all this weird stuff going on. They were like, it is all about how pretty it looks, and not about how people can read or get the content.

[01:26:51] We have to get more accessible websites on the website a day.

[01:26:56] AMBER: I think we probably only have time for one more question. Someone asked, do you have recommendations for headers versus footers? Where is the best place to put page numbers, things like one of five, two of five? Maybe that would apply to a webpage?

[01:27:18] ALICIA: It does. It’s the page nav.

[01:27:21] STEVE: The pagination.

[01:27:22] ALICIA: Yes, the pagination. I sometimes put it on top and bottom. The both, because just as a usability issue, too. Once you scroll to the bottom, and it was at the top, that’s eh. I hate when you go to the top, and it’s at the bottom. Put it in both places.

[01:27:40] STEVE: Yes I think –

[01:27:43] AMBER: Go ahead Steve.

[01:27:44] STEVE: I think the important thing to understand about these too, is it is putting more context to what these numbers mean, as well. If it says one of five, you might want to put some screen reader text in there, and say “one post or one page or whatever you are outputting, of five pages.” Just to add a little more context to what that is.

[01:28:10] ALICIA: That would be . . . the URL plugin that dynamically does that for you, might be difficult to reach for. You come to a meetup or something, or you know somebody who can do dev stuff. They can actually put it in the template where it dynamically pulls in a word for you.

[01:28:30] STEVE: Yes.

[01:28:31] ALICIA: What you don’t know you don’t know kind of thing. Some of this is really easy. You just get someone to put a little piece of code in a template for you, and then it’s fixed.

[01:28:41] AMBER: Yes. Cool. Well, I think that might be it. We are over time now. I super appreciate everything that you have had a chance to share. I am seeing people saying in the chat thank you, that it was informative and motivating to learn more. I really appreciate you talking about it as being sort of a journey and learning things and trying things. Not being afraid to get in and inspect and all of that. So I think that has been great.

[01:29:12] ALICIA: Let me help Conrad out. Knowability has got a K. It is the word “know.” It is like know-bility.

[01:29:18] AMBER: Oh, sorry. K-N-O-W-B-I-L-I-T-Y dot org. That should be their website, because they are a nonprofit. Thank you so much, Alicia. Where can people get ahold of you if they want to follow up? Are you on social medias anywhere these days?

[01:29:37] ALICIA: Oh my gosh, I have so many cool . . . okay, I am on LinkedIn as Alicia St. Rose. I am Twitter, before it implodes. I’m on there is Intrepid Realist. I also have a meetup on the second and fourth Wednesday. We aren’t doing it this time, because of Thanksgiving. It is called the South Central WordPress Adventure Group.

[01:30:02] With a group of wonderful, fabulous WordPress people, we meet up pop. There are so many. There is so much education coming from there, and so much amazing . . . Jump into the meetup stuff, guys. There is so much to learn, and so many people willing to share. It’s a lot of really cool stuff.

[01:30:26] AMBER: Awesome. Thank you so much. And thank you Steve for jumping in. It turned out, no one exploded at my house. [Inaudible at ]

[01:30:32] [Laughter]

[01:30:32] I will go out there and see if they are still alive!

[01:30:36] ALICIA: You guys, save the chat. Someone posted all of the meetups we go around in!

[01:30:41] AMBER: Oh yeah, these is a huge list. Are these all virtual meetings?

[01:30:45] ALICIA: Yes! Seriously, you will see the usuals, like coming to Cheers!

[01:30:50] AMBER: Oh man, I need to start attending more of these! I didn’t realize these were all on Zoom. That is awesome. Cool. Thank you everybody. A quick reminder, join our email list. If you have not, join our email list so that you can get notified when this recap is available. Also, find out about upcoming meetups. If you are interested in trying our plugin, we have a 50% off now through the 30th.

[01:31:18] We are going to say goodbye and we are going to sit here quietly for about 60 seconds, to give our transcript time to catch up. If anyone was relying on the transcript, we will have it. You don’t have to hang out and watch up smile and wave for 60 seconds, if you don’t want to.

[01:31:33] So, thanks everybody.