Accessibility Quick Fixes for WordPress ![rw-book-cover](https://img.youtube.com/vi/--qEOwISveI/maxresdefault.jpg) ## Metadata - Author: [[YouTube]] - Full Title: Accessibility Quick Fixes for WordPress - Category: #articles - Document Tags: [[video-notes]] [[youtube]] - Summary: Accessibility Quick Fixes for WordPress (Part 3, Beaver Builder Accessibility Best Practices) - URL: https://www.youtube.com/watch?v=--qEOwISveI Welcome back to the BeaverBuilder accessibility best practices series. In this third video, Amber Hines, CEO of Equalized Digital, focuses on simple, high impact fixes you can make right away to improve accessibility on your BeaverBuilder websites. Let's get started. So, I've talked a little bit about that remediation, but let's talk about some really specific things that you can start with that helps with marking off issues and solving problems quickly. So, some quick wins in our accessibility checker plugin. We do have some automated fixes that can help to solve issues that are common on WordPress websites. Now, you shouldn't just go willy-nilly through these and check them all off because you only want to turn on things that you actually need. In accessibility checker for BeaverBuilder websites, this is what I would recommend. And this is a lot of these aren't BeaverBuilder specific. They're for any websites. So, the first one is either you should turn on our new window warnings, which adds a label to links that open in a new window in tab, or you should block links from opening in new windows. Uh so in order for people to understand that a website or excuse me that a link is going to open in a new window. They you want to have some sort of both visual and audio warning for those. In an ideal world we don't open any links in new windows but a lot of people have this idea that if it's a link off site it has to open in a new tab. I always wanted to open in a new tab. It is not a WIKAG violation to do that as long as users are warned. If they're not warned, then that is a WIKAG violation of on input, which is that there should be no um unexpected changes of context when interacting with a component and a new tab is considered an unexpected changes of context. So either toggle this on either one of these depending upon what you want and that will go out and it'll automatically either remove all new window links or it will sorry it won't remove the link but it will remove the new window behavior or it will add the warning dynamically for you every time. The other thing in accessibility checker pro is I would always toggle on add file size and type to links. What this does is automatically it will go through the whole website and if you are linking to a PDF to an Excel file to a doc it will add in the format that is required for the US government that's the format that we've chosen to use the information after your link text whatever you already have it will put in square brackets the name like the file extension like PDF and it will tell them the size of the file. This is really important so people understand what they're linking to and that in some devices it might trigger a download. Some people on mobile in particular might not choose to click a link if they know it's going to download a very large PDF to their phone. Uh so this is an important thing that is required for accessibility and also just general usability to let people know the purpose of the link. And so if you do this, it will just go out and do that automatically for you. You can also go ahead and do this manually on all of your links if you want. But if you've got a lot on a very large website, then it's easier to just toggle on the fix. The other thing that I would recommend is there is a setting that will remove title attributes from items that have already have accessible names. Title attributes are not recommended anymore. They have inconsistent support for with assist of technology and in some cases they actually cause repetitive labels or names to be read out which can be really annoying or confusing. The WordPress project as a whole has been working to try and strip this out of everything in WordPress core. But there are a lot of plugins and things that add title attributes when they should not. So if you toggle this on, this will just remove title attributes with JavaScript as the page loads. Most of the other fixes that we have here should not be needed by BeaverBuilder. Um, so for example, BeaverBuilder already has skip links. You shouldn't need to turn that on for BeaverBuilder if you're using the Beaver theme. Um, but there could be scenarios where you might still have to turn these on to fix a problem caused by another plugin or theme. So, I've seen some additional plugins that create separate custom post types and on those custom post types, they use their own styles and they remove everything that is added by the theme. Well, what happens then is that you might have skip links from BeaverBuilder that function throughout your whole site except for on that custom post type because that plugin is removing what BeaverBuilder has done, right? So, in that case, you might need to turn on skip links. And if we do that, we have it smart where it would only load where there isn't already a skip link. Um, focus outlines is another thing. You might run into cases where a plugin has said remove all outlines on focus. Your website as a whole has them because BeaverBuilder has them. But if you notice, well, this one thing from my other plug-in doesn't have outlines. I don't know what to do. You can write CSS to add those and override the incorrect removal of outlines from that element. or you could just toggle this on and then um we would add them to that element as well. So, those are some quick wins that you can just toggle on and it might add some fixes. Another big thing to look at is making sure that you adjust your color palette. Uh I have a screenshot up here of our contrast grid tool, which I'll just go show you. You can find this if you go to contrast do-grid. And what this does is it allows you to put in all of your colors that you're using and then it will overlay them on each other and it will say whether they have a double A, a only a double A for large. So it needs to be um 18 pixels and bold or 20 pixels and bigger or it does not pass color contrast at all. And I'm actually going to turn off all my does not pass and my double A18. I would recommend only choosing colors that work for AAA and double A. In some cases, you might be okay with a double A18 combination, but you run the risk of on mobile still having to keep the font bigger than you might like in order to pass contrast. So, the safest decision is only to choose AAA and double A. So, I can see right here that when I turn off those items, I have a color palette that almost doesn't work at all. The green doesn't work with white or the dark gray. The orange doesn't work with any other color. The bright blue doesn't work with anything. And that bright blue is really common. I would see this bright blue with white text. Well, that fails contrast. So, what you need to do is start thinking, okay, how can I adjust my color palette? So, for example, I might say, I really need to use that bright blue. What if I had a almost black here? I've just added 1313. Now, I know, okay, I can use that bright blue with that almost black or I can make it straight black if I wanted. Uh, and that would pass double A. So, what you have to start doing is figuring out how can I adjust my colors? Do I need to add in some other colors to build a palette that really works well? And again, this is a global this is a this is a global change that in theory you can adjust your global colors and it might roll out across your entire website and help you out. Um, think about having sufficient color options for both dark and light sections because you might be alternating these. There's dark backgrounds. So, don't just think about having white as a background or a light gray as a background. You want to think about the reverse as well. I would say an easy way to do this also is thinking about integrating shades for backgrounds. I always recommend looking at IBM's colors. If you search IBM accessibility colors, you can see they have a whole description where they talk about how their brand colors can be used with different shades. And the basically they use a tint or a shade generator to create here's different levels of shade based on their brand colors and the differences between them and how you can choose them. It's a really nice way of setting up a brand guide that also accounts for color contrast. I do have linked here a tint and shade generator tool that's super neat that might be helpful to you as you're trying to figure out adjusting your color palette. But I would say if you have color contrast issues, try to do this because this is usually a global thing and it's going to address a lot of issues on many pages across your site. Now I want to talk a little bit about some accessibility and design. These are problems that can happen before you even start building the website and things that you want to think about. So, first of all, you want to make sure that you're designing or accounting for multiple screen sizes, devices, or orientations. Don't just assume that it's going to be like super wide in the middle and really narrow right there. There could be a whole width in between. somebody might be looking at it on the phone landscape, right? So, really thinking about that as you're designing and planning. You also want to think about hover states, focus states, and error states. When doing buttons, for example, where you have a hover color and a non-hover, you want to make sure that you have significant contrast difference between the non-hover and the hover so that it's really clear. Especially if you have, for example, social media icons where you've got multiple in a row, they might be small and they're close together. You want to make it really obvious that I am hovered over the right one. If I'm a low vision user, that I'm on the right one. I'm trying to click to go to Facebook, for example. So maybe instead of just changing the color of that Facebook icon from blue to a slightly darker blue, think about instead, would I add a circle around it on hover? Well, now it's really clear to me that I am hovered over the right one or oops, no, I was on the wrong one. And I need to shift my mouse a little bit to the left. Uh because the one that I'm hovered on got a border when I hovered it. Uh for forms, you also want to think about error states. Don't just use color alone. You don't just want to make the border red. You want to add some text or some or an icon maybe that says, "Hey, there's an error on this field." Because red is one of the most common colors that people can be color blind to. A lot of men have red green color blindness. So if you're only using a red border around a field to indicate that there's an error there. Well, now a lot of men might not be able to tell which fields had an error. So you want to make sure that you're really thinking intentionally about this as you're designing and planning out how you're going to create these sorts of hovers, errors, focus states, different changes to things as people interact with the website. Then you want to make sure that you are including visible labels for all fields. Clear required indicators for required fields. Don't just use placeholder text. We'll talk about this a little bit more when we talk about the form module later for BeaverBuilder. Avoid designing any text that cannot be styled with CSS. Yes, even in 2025, I have seen things where a designer has made something so difficult that the developer said, "All right, these words are just going to be images." Uh, that is really problematic for a lot of reasons. Just try to do it where it can be styled with CSS. In an ideal world, you don't also want to have a bunch of spans like on every letter like rainbow words where you've got a red of this letter and then the next letter is orange and the next or or whatever, right? That will read out not as one word to a screen reader user. So, don't split up words. Ideally, don't split up headings. That can cause a ton um of noise. In some cases, there might be an argument where it makes sense to have like this phrase in a span and this phrase not in the span so that they can be styled differently, but be aware that that can cause problems. And if you're planning to do that, make sure that you listen to it with the screen reader and that the heading is going to make sense and not read out very strangely. Also, speaking of headings, use sentence case or title case, not all caps. All caps can be very difficult for people to read. I know sometimes as designers, we love it because we're like, it's so uniform looking. But that uniformity, the straight line across the top, the straight line across the bottom is what makes it a lot more difficult for people with dyslexia, for example, to read. Because in capitalized letters, a lot of letters look very similar and it can be hard to distinguish them. So as much as possible or completely avoid use of all caps in words or phrases or sentences. You need to make sure that when you are designing any sort of links in paragraphs or where they are interspersed with text that is not clickable and not linked that you do not use color alone. This is a WIKAG requirement to not use color alone. And the easiest way to do that is to underline your links. You don't have to underline them. You can add an icon like an arrow pointing to the right for example if you want to do that. But there needs to be something to distinguish the link from the text around it. So it is very clear if someone is color blind that this is an interactive element they can click. You want to make sure that you're keeping navigation consistent throughout the site and you want to avoid animations as much as possible. There are some use cases for animations, but I think, you know, the downside sometimes of page builders is they make it really easy for those of us, and I signed this up, that can't write a ton of custom JavaScript, that's me, to just be like, oh, I'm going to have this come in from the side or float up from the top. Right? very subtle animations may not cause a problem, but I have been on websites where the developer or the person who built the website has way overdone it and it is just so overwhelming seeing how much movement is going on on all the sections or every paragraph or everything as I scroll. U for some people this can be distracting. For some people it can cause dizziness or nausea. I've actually heard someone say that he watched his wife get dizzy and throw up literally when she was engaging with a website. Um, so as much as possible, avoid animations. It will make your life easier. And I just say in general, if you think about really big businesses that have really professional looking brand experiences on their websites, very few of them have excessive animations as things as you scroll or as things move into view. Um, so if you have clients that are pushing for this, I would always I usually just go find these big companies in the same industry and I say, "Well, look at their websites. They don't have this." And then usually they'll be like, "Oh, okay. Yeah, you're right." So, so try and avoid them. So, I talked earlier about a lot of problems can come from how content is entered. And this has nothing to do with the builder or the plugins. It literally just has to do with how someone created that content in the first place. So these are some things that you want to watch out for and keep in mind when you are creating content to make sure that you are creating your content in an accessibility first manner. First, you want to make sure that you are using headings. Every page needs to have an H1. It should only have one H1. And then from there, those headings need to be used in proper order. Do not select the heading level because of the size or the color or any other thing, the font that it uses. Headings should be used to create a proper outline of the content on the page and then from there you you know you should be able to style it in BeaverBuilder differently if you need to. So if you know hey this is a section heading and it's an H2. It really ought to be an H2 but I have an image here and the H2 looks too big. Don't pick an H3. make it an H2 and then just go into that module and set custom size on that H2 for that one section that's different from your global H2 size. That is okay. What matters most is that we're providing the correct order for people to understand and navigate the page semantically. Another thing you really want to watch out for is making sure you're writing meaningful link text. Don't link words that don't mean anything outside of surrounding context. Examples of this are here, click here, learn more, download. If I have to say learn more about what, download what, then my link text is ambiguous. It should be very clear what a link is going to do when I hear the name alone. I shouldn't have to look around to read paragraphs or headings nearby to try and figure it out. We want to make sure that we add alternative text to any images that are meaningful, especially if they include text, but also photographs that provide context or extra information. It doesn't have to be super long if it's just a stock photo, but there's a reason why you chose that stock photo and not some other stock photo. So, you should still have some sort of short description to help a blind person understand what the image is about and what it adds to the page. You want to make sure that you format content into lists as applicable. We'll talk a little bit more about this when we look at some of the different modules, but anytime you have a group of related content, this could just be a plain text list in a blog post. Uh it could also mean a group of posts. So a group of team members for example. These should be in a list. And the reason why is that when you group content like that in a list, it allows a screen reader user to have extra controls for navigating through the list. They could also jump past it much more quickly. So and and it will tell them when they first encounter that group. So imagine on your about page you have a section where you have team members and I'm coming on a screen reader. If it's just divs with like photos and information about people then I have no idea if there's 10, if there's 20, if there's 50. Right? If it's a list I'm going to get there and it might say to me list 27 items first item. and I could then go through it or I could say I want to bypass this entire list and go to the next section and hear what else is on this about page. Right? So having lists is really very helpful for a screen reader user in particular. You want to make sure of course if you have any sort of tabular data that you are actually putting it in a table and making sure that your tables have headings. So if you have product information or any sort of stats or anything like that, make sure you put it in proper tables with headings. If you have videos or podcasts, you need to provide captions for your videos. Any sort of audio like a podcast needs to have a transcript. You also need transcripts for videos. People always ask this, why do I need a transcript for a video if my video has captions? That's because deaf blind people can't interact with the captions. So, a deafblind person would need a transcript in order to get the content from the video. So, make sure that you have both captions and transcripts for videos and you have transcripts for any audio that's on the website. And then just in general, make sure you're targeting an appropriate reading level. If you are writing content for a city or a county website, any sort of thing that's just general mass public, then I would try and target an eighth grade reading level or sometimes lower, which I know sounds shocking to a lot of us who are highly educated. Uh, but on average, the average person around the world doesn't have a super high college reading level. So you want to make sure that you're writing content at the right level for the people who are going to be reading that content. And then just a high level, avoid PDFs. You can use PDFs. PDFs can be made accessible, but making PDFs accessible, I'm going to say it right now, is a giant pain in the behind. Uh you don't want to have to do that extra work probably if you're a web developer. So, you're going to go back to your client and say, "Hey, this PDF needs to be made accessible." Uh, there are vendors and companies that can do that for them. But the biggest question I always ask when my client is like, "Here's PDF. Put it on the web page." Is, "Does this have to be a PDF?" PDFs are intended for printing. They don't look good on your phone in particular. Like this is a giant pet peeve of mine when I'm trying to look up a restaurant menu and I'm trying to figure out if I want to go eat there and I get a PDF and I have to zoom in a bunch and scroll all around sideways and try and read it and you know what I end up doing half the time I pick the restaurant that has their menu on like Door Dash or something and I can just go look at it and I don't have to do all that annoyingness, right? So trying to figure out if you can avoid PDFs, it's going to make your life a lot easier. Um, and it's going to make the website way more user friendly for a lot of people, not just people with disabilities. There are so many things about different parts of a website building process. I've talked to you about too, design and content, but there's a ton of things that you need to do during discovery, during development, during testing and debug that I don't have time to talk about today. So, we have this free guide and it's actually a Google doc, so you can take it and edit it and do whatever you want with it. Um, turn it into whatever you need that includes all of the things we recommend for all of the different phases. And this is linked in the slides and hopefully in the resources for with this video as well. So, I definitely recommend if you want more detailed on this, I would go there and download those checklists. >> Thank you so much for watching. That wraps up part three. You can watch part four right now using the link on the screen or in the description below this video. But before you go, be sure to subscribe to the BeaverBuilder YouTube channel so you can get notified of future videos just like this one. Bye for now., Accessibility Quick Fixes for WordPress, YouTube, 01k9atxfny4c5414ej1sbgntwh.