Beaver Builder Accessibility Tips  ## Metadata - Author: [[YouTube]] - Full Title: Beaver Builder Accessibility Tips - Category: #articles - Document Tags: [[video-notes]] [[youtube]] - Summary: Beaver Builder Accessibility Tips (Part 4, Beaver Builder Accessibility Best Practices) - URL: https://www.youtube.com/watch?v=SIHBSoZOnqs Welcome back to the BeaverBuilder accessibility best practices series. In this final video of our four-part series, Amber Hines, CEO of Equalized Digital, shares practical accessibility tips inside BeaverBuilder. If you've been following along, this is where it all comes together. Let's get started. So, I want to dive in now to some really specific accessibility tips for BeaverBuilder. BeaverBuilder I know has been doing a lot to improve their underlying code. But as we talked about a lot of problems come in the content and how you use those modules. So these this section is going to include some specific things that you want to make sure you're doing when you are setting up BeaverBuilder to put yourself in the right place, right starting point from accessibility. So the first thing that I would always do is I would open the global styles in BeaverBuilder and I would set my global styles on links to underline. So what you do is you go to global styles, you expand the link section and then there is another area to expand called style and spacing and then you go to decoration and you toggle on underline. Now, when you do this, it will also underline links for your buttons. But what you can do is go to the next section, which I don't have shown here, but is below this. And you can change your buttons instead of default to decoration none. They don't have to have an underline because they have something else that denotes that they are a link and are different, which is they have a background or a border or however else you're styling your buttons. So, they don't have to have an underline if you don't want them to. But basically, you want all of your default four links to be underlined as where you're starting. And then if there are certain components where you know, oh, I'm giving this an icon or it's positioned in a certain way or it has a background like the button that shows that it's not a link, then you can remove the underline from those elements. But I would start from all links have underlines and then we selectively remove them if we don't need them. and we can tell and we have tested and know we don't need them. Now, I will note this global style setting. This only supports BeaverBuilder pages. So, if you're not using BeaverBuilder everywhere on your site, so for example, if you turn this on in global styles, it'll work on all your BeaverBuilder pages, but if you aren't using BeaverBuilder on your blog post, it may not add the underlines to the blog post. So, you might also need to force link underlines in accessibility checker or you might have to add some CSS to your theme or in some other place that will add it throughout the entire site for those areas that aren't covered. But for sure, you want to toggle this on in BeaverBuilder to cover BeaverBuilder pages. The next item that you want to think about is how you build your navigation. So, if you are using the BeaverBuilder theme or if you're using your own custom theme, I would always recommend turning on Beaver Theur and using a menu block rather than the navigation in the theme because it has some extra features for accessibility that the theme may not have. So, what are these specifically? I have a screenshot up here that shows a navigation menu that's been focused. And you can see there's an outline around the arrow next to blog, which is the control for that submen icon. And this means in this setup when you're using the menu block and you have your submen icon set to arrows or plus just anything other than none then what happens is that there are separate buttons that can be used to open and close the drop- down menus and you don't have to tab through every dropdown in order to get to the next item at the top level. On a small website, you might be like, "H, it doesn't really matter if someone tabs all the way through." But if you're building a website for a school, let's say, and I have seen this where they have huge numbers of items or maybe even like mega menu type behavior in the drop downs. You don't want to force someone to have to go through every child item if they really just want to get to the third top level item. You want to allow them to move across the top. So, this is a really nice feature of the menu block. And you want to make sure that you keep your submen icon set to something so that you can then have this feature enabled. The other thing that you want to pay attention to whenever you're adding a menu block is you want to set the menu name when you first add this in because it doesn't know where you're putting it or what the purpose of your menu is. The menu name is just going to say menu. Make sure you change that to something that describes the purpose of the menu or the location of the menu, but typically it's the purpose. So for our main navigation, what you most commonly see is that it is going to be named primary. We don't want to include the word navigation in it because when a screen reader encounters a navigation element, it's going to say navigation already. So if you were to put primary navigation, it will say primary navigation navigation. So you just write primary and then it will say primary navigation. Uh if it's a you other examples of things you might have is like utility or if you have a navigation menu down at the bottom that has like your privacy policy all of your other links like you might put policy here and then they would hear policies navigation and then they'd be able to access all that. So, just give it a descriptive name that is unique and doesn't repeat with any of the other names you've given to other menu blocks on the site and that clearly communicates what's in it. And then another thing to keep in mind is you don't want to put any sort of hashtag links in the top level. I've seen this where people are like, well, the top level is just a placeholder. I really just want the drop down. This can cause confusion. it will flag improper use of link issues in accessibility checker and in other accessibility testing tools uh because they don't really do anything. So you really do need to have pages there or you need to not have a tople item uh if it's possible and just have a button all the way across to open and close the navigation menu. Um but don't put hashtag links in the top level. And then another thing that I would say is if you want the last item to look like a button. So your contact for example, style it that way with CSS, don't put a navigation menu in your header and then put a button next to it and put contact in that. Why is this a problem? It's a problem because now your most important thing in your navigation, your contact page, like the thing you most want people to go to, isn't included in the navigation element, HTML element. So, a screen reader user could miss it. So, you really want to make sure that you still have it in your navigation menu and you just style it with CSS. Um, don't try and build it separately using a button element. So, Beaverbuilder supports a class called screen reader text. And this is a good thing to be aware of as you are building out content and pages. It's super useful. What this does is if you have the class screen-er- text applied to something, it will be visually hidden. So, a cited person will not see it, but it will still be accessible and available to a screen reader. There's two different ways that I would use this. One is that I could use it to hide an entire BeaverBuilder module. If I just put the class, if I go to advanced and under the HTML element settings, I put that class screen-er-ext right in there. So, what I have an example up here is a heading module has been added to a page and it's actually in the the footer in Beaver Themur and it's an H2 and the text that was actually given to that H2 was footer and then we've hidden it visually with screen reader. Then all of the headings that are in the footer below it that are actually visual, get in touch, additional resources, about us, these are all H3s. And what's really nice about doing this is one, it's going to solve my problems that I would have gotten flagged by an accessibility tool of these maybe having the wrong headings or being out of order because it would have thought that these footer items were sub items of whatever H2 happened to be in that particular page's body, which would make no sense because it would change every time, right? So, it gives us the proper semantic order, but it also tells a screen reader user as they're going through the page, oh, I've hit the footer now. They're just reading the page. We visually can see this because the footer has some sort of different background or different design that is consistent across all pages, right? But if you can't see it, you're only hearing the content. This is a really nice auditory cue. This is the footer. You've already heard the footer. You don't need the footer. Okay, I'm done listening to this page. Now I'm going to go somewhere else, right? I don't need to listen to everything in the footer. So, this is a really nice way to use screen reader text to help improve accessibility and user experience on the website. Another useful way to use this screen reader text class that BeaverBuilder supports is you can use it to add more meaning to links. So, I mentioned before that ambiguous links can be a major problem for people, but we all know that it doesn't make sense to have full sentences in links or long phrases. In some places, the button really just needs short text. A cited person can get context from what's around it. So, maybe we only want the visible text to be learn more. But for a screen reader user, we need it to say learn more about us so that I know what that learn more does. So what I did what I did here is on the button in the text field, I have the text learn more. And then I have a span class equals screen-reader.ext. Then I've closed my open span tag. I have about us. And then I have a closed span tag. And that keeps the visible text as learn more. But a screen reader user would hear learn more about us. So, this is a really nice way to do this and fix a lot of those ambiguous link problems that you might see flagged based on your content injury without having to rewrite the visible label. I'm going to talk about just a couple things for some of the other modules that are useful to be aware of. The first one is the accordion. So, in the accordion module, you can choose what tag you want to use for your label. In this example, I have selected an H3. It is almost always in almost every case important to have a heading on your accordians because it's going to help screen reader users find and understand that content. So, you want to choose whatever heading makes sense in the outline structure of your page. In this case, I made it an H3 because there was an H2 for accordians above it, right? Uh, if you think about an FAQ page where all you have is the title FAQ and then you have a long list of H of accordians, then they would actually probably just be H2s because your H1 is FAQ and there's no other headings before them. So, choose the right heading that makes sense, but make sure you always set these to some sort of heading level. If you are creating any sort of animated autoplaying items that are going to play for more than 5 seconds, they have to be pausible or stoppable. So, I give a huge shout out to Beaver Builder on this because they are one of the first page builders and only page builders, very few of which actually allow you to turn on a play or pause button for your sliders. So whether you're using a content slider or you've enabled sliders on testimonials, you always want to make sure that if you turn on autoplay that you are setting show play pause to yes. That will add the pause button and that will allow you to pass wikag2.2.2 for uh pause. So earlier I talked about lists and how important and helpful it is for users to get lists or have content grouped into lists when it's related content in the post element and I think there's a few other modules. You want to make sure that you are choosing the list structure. Now, BeaverBuilder set up in a way that you can make it semantically a list, but it's not going to output, you know, the little dots and make them all be stacked. It can still be a grid. It can still look just like you want it to look. So, what it's really just doing is giving that nice behind the scenes for screen reader users, and it's not impacting any of your design. So, you don't have to worry about that. But on the post module for example, what we have here, you go on the layout tab and then there's an item where it says post element and you can choose li and that is going to basically set it to be a list behind the scenes for screen reader users. And there's some other BeaverBuilder modules where this is the case. So, what I would just generally say is think about is this going to be a group of related content that makes sense for people to be able to hear it as related to one another, not just different sections on a page, right? And in that case, then it makes sense to turn this on. So, I talked earlier also about always having visible labels and not just placeholder text. It is really important that you have visible labels that stay visible even when someone has typed in a field. So if you are using BeaverBuilder's contact form, there is an option under general where you can go show labels placeholders. And what I would recommend setting this to is just show labels only. If you really want to show placeholders, you can. But a thing that I would note about placeholders is that placeholders are not intended to just repeat the label. They are intended to communicate information to users about what is expected in the form field. So a proper placeholder for a name field, for example, is Amber Hines. So, your label would be name and your placeholder your placeholder would be Amber Hines. And that would tell someone, "Oh, I'm supposed to type my full name in here." Uh, a proper placeholder for email is not the word email. It's amber equalizeddigital.com. Right? It's something that shows me an example of what information is expected in the field. So, if you want to turn on placeholders, you can. Just make sure that you're using placeholders properly. I would argue though that on a simple contact form like this, people don't need placeholders because they know how to type their name, they know how to type their email, that kind of thing. So in that case, I would just choose to show labels only. So that was a few things to think about with regards to some of the different modules. And I know this has been kind of a whirlwind quick presentation about accessibility and it can be I'm not going to lie, it can be overwhelming when you first get started with it. But what I want to emphasize here is that accessibility is a journey. It's not something that you just do one time. Sort of like you don't SEO optimize your website one time and then say, "Okay, I'm done now." Right? It's something that you want to build into your practice and you want to figure out how to, as I said before, incrementally roll out fixes or improvements over time. Uh, it's not necessarily something that you're going to hit on right away and get it all done right now, but it is something where you can choose very big problems and figure out how to fix them. And now it's better. And I would say too, if you're building a lot of BeaverBuilder websites, it's worth spending some time looking at whatever your blueprint or your starter website is and like making some of these changes. So, for example, if you have a contact form on a contact page that's just there every time you spin up a new website, you could go in and change your label setting to make sure that the labels are always visible if for some reason you didn't have that setting configured. And then every time you create a new website, that's already done for you. So, I would just think about what are these changes I can make now and then what changes do I need to adjust in my practice over time. Maybe you need to have some training for your content person about how they're entering content or explain if you've got a client who comes in and likes to upload images to blog posts. You know, spend a little bit of time training them on alt text and how to add it and that kind of stuff. um it can be something that you can work on and improve over time and just think about it that way and then I think it makes it a little bit less overwhelming of like this is this thing I have to do all of right now like this is a journey it's something that we we do to make the web better and over time we are going to all work together to make it better I have a few links on here if you're interested in them uh our the web content accessibility guidelines 2.2 that just goes over to where you can read that. As I mentioned before, this is an incredibly dense topic. So, you might also find helpful our WIKG quick reference, which is just a Google sheet if you click the link and it has little explanations of different success criteria simplified. Um, but if you're really getting into accessibility, I would recommend reading those and trying to understand them because you are going to need to do that to test. If that's super overwhelming, then I would say find a trusted partner for accessibility and they can help you understand those guidelines and how they apply to your website or not. If you want to learn more about screen reader announcements, the best resource that I have found for that is the MDN web docs, they have a whole section on Arya, which is the HTML attributes that control what screen readers are reading out when they encounter different elements. That is the resource that I recommend just like digging in and looking at and um spending a lot of time in our shift left with accessibility checklist. I've already talked about. It's linked here. We also have a free ebook, the small business accessibility playbook for WordPress if you're interested in that as well. And then uh there's a few different browser extensions that I find really helpful in addition to our obviously accessibility checker plugin works in WordPress, but if you need a browser extension, I recommend looking at wave the headings map. That was one that I showed before when we saw the outline of the page with the footer having the hidden H2. So they have a Chrome and a Firefox extension for headings map. Tably can help you to visualize tab order on a page. Colorblindly can simulate a page with different types of color blindness. So if you're trying to figure out does my color palette work for different people, that is a really great tool to use. And then um I like landmark navigation which has both a Chrome and a Firefox extension as well for being able to see what the HTML landmarks are on a page and make sure things are nested and structured properly. I am Amber Hines again. I'm the founder and CEO of Equaz Digital. I'm always happy to answer any questions if anyone wants to reach out to me and you can find me amberwisdigital.com or if you go on X I'mmberhines and I'm just Amber Hines on LinkedIn and Hines is spelled H I N Ds. Our website is equalizeddigital.com if you want to learn more about us and thank you and I hope that this has been helpful and feel free to again reach out if you have any questions. Thank you so much for following along with the BeaverBuilder accessibility best practices series. If you'd like to learn more or to catch up on past videos, check out the resources linked in the description below this video. And lastly, don't forget to subscribe to the BeaverBuilder YouTube channel so you don't miss out on upcoming videos like this one. Bye for now., Beaver Builder Accessibility Tips, YouTube, 01k9av0g3hj6pw05keccq4x0f6.