Make Hover Text Reveal more Accessible. Using Oxygen Builder in WordPress

[Music] hello everyone welcome to my next video in my last video you saw that we made these nice hover effects where we have an entire div that when we hover inside it our icon change background changes color our heading moves down and our text comes into view all on hover and we set up three of these within a grid some people have mentioned that this is not accessible friendly which is very true so today we're going to take the next steps to go ahead and make it a little bit more accessible so that we can tab through it using our keyboard and set it up to be a little bit more screen reader friendly as well so what we're going to do is and i'll show you exactly what it looks like when it's done here so you can see i add a little icon in the top giving users an idea that they need to hover to get more information you can tab through or shift tab to go backwards you can see if i do even click on it that it stays focused and then there's a few more other things that we're going to do but we'll go through those as we do them so the very first thing we need to do is actually add some code in a code snippet so that we can use font awesome icons even though oxygen has the ability to use icons like we are here that are font awesome icons we can't use them as just actual font awesome code like you typically would so let's go ahead and get that added first so to do that what we need to do is add in a code snippet so i'm going to go to my plugins add new and if you just search snippet it should be our first one that shows up here and go ahead and click install and once we get that activated while it does that i'm going to come over here sridhar wrote a tutorial on how to do this so i'm just following along with this still works pretty well so what i'm going to do is take all this code right here and i'm going to paste it in over here so i'm going to come into snippets add new and i'm just going to click in the code field here and paste it in and for our title i'll call it font awesome and you can set it to run everywhere the one thing you will need to change is this link right here so right now it has a version in there that might not be the latest so in order to get that we'll jump back over here and you can see we just need to replace the current latest version which can be seen here so if you click this it's going to go to font awesome where it gives you the ability to get a a kit code so you'll have to enter in your email address in order to do that but it's a very simple process and once you've done that you can come either log in or via email go ahead and get your link so i already have one that i set up but i'm not going to show it here i'll copy and paste that in off screen the one thing i am going to just say though is if the link you have does have https in front of it go ahead and put that in there as well you just want to make sure that it's inside of these single quotes here and you can just add in that entire link and once you do that just come down and click save changes and activate all right so we got that in there and you can make sure that it is toggled on which if you click saved and activate it should be so now we can go back and jump into our builder which i have here i am going to click save here first and then refresh and i just wanted to do that to make sure that it's actually pulling in our font awesome data as we go in to do that all right so let's go ahead and keep working on this i'm going to open my structure back up here and we're going to expand this out all right so i'm just going to continue expanding this out till i get to my first div here i'm going to come up here and make sure that i'm on my class and click on state we're going to choose before and in our content here we're going to do a forward slash and then we're going to type in f 0 5 a which happens to be the font awesome icon that we need this is not to be considered confused with the backslash because it won't work you can see that it's not working yet there is one other thing we need to do to make this work so what i'm going to do is come over to advanced and come down to custom css and we're just going to add in a font family of font awesome and do make sure that you have capital f and capital a all one word and that's just gonna let let it know that we need to use this font family for that so go ahead and click apply and we can collapse that and now you can see that our icons are showing up there i'm going to click the little back arrow here so we can style this out a little bit i'm going to go to typography let's go ahead and set a font size to let's do 25 and a color i'm just going to choose an existing color that i have here we'll go with this darker blue and next i'm going to click my little back button here and let's go to our layout and here we're going to take this and go all the way down and click on absolute and we're going to set our top to zero and our right to let's try five and see how that looks that looks pretty good to me it seems like it's got even spacing all the way around it on the top and on the right so we'll go ahead and leave that there and we're good for the before so next i'm just going to click on our state here again and go back to the original and i'm going to um let's go ahead and add in our box shadow now so i'm going to come down to effects and box shadow and you can choose an existing color or type something and i usually do just do an rgba and set it up as black so it's going to be three zeros and then i do an opacity of like 25 percent and that usually ends up looking pretty good and on this i'm going to do one for my horizontal offset and one for my vertical offset and let's try four for our blur and one for our spread and if you're anything like me i always end up clicking in the top here and setting inside just make sure you have that toggled off and it'll show on the outside so you can see we're getting a nice shadow effect all the way around you can increase that or decrease it and change your color as you see fit i'm happy with this i don't want to spend too much time on that showing you how to do it is um what i'm trying to do here so next let's go ahead and continue to work through this so one of the next things we did was set it so that we can actually have focus on it so we're going to do that in the same exact way that we did our hover the only thing we're going to do different here is we're going to change hover to focus and add three items here now again if i stay on my class here i'm only going to have to go through and add these once so i'm going to click add state and we're going to type in focus and our first one was a div and of type make sure you get everything spelled right here so you can see a focus div colon and of type one i'm going to go ahead and click ok and i'm going to come over here and all we need to do is set our background and again we switch to that nice blue which i believe was our second one here i'm gonna set that and we need to set our effect of transition which was 0.25 ease and out all right so we got that added there the next thing i'm going to do is just click my back arrow here a couple of times and we're going to come up here and add our next one so click add state again again we're going to type in focus space in this case is our h3 colon nth of type one and go ahead and click ok once you verify that everything's spelled correctly and on this one mostly all we're adding is going to be under effects so let's go ahead and start with opacity we're going to be changing that to zero currently it's at one so we want to make that disappear just like we do when we're hovering we're going to set our transition to point five again that'll be ease in out and we're going to set our css properties to opacity and transform then i'm going to click my little back arrow here and we're going to come down to transform and add transform change from rotate to translate and set our translate y to 100 and change our value from pixels to percent so all we're doing is pushing that 100 percent down so we are good to go on that one so let's jump and do our third one so go ahead and click add state again and let's get our last one in here which is going to be focus space p tag length of type and one verify that you have everything in there correct and go ahead and click ok and you can see that we're still on our transform so i'll just go ahead and add that in to start right away since we're already here so again i'm doing a translate translate y and what we're going to do is set this to 1 so right now when we're not hovered on it or focus it's what negative 100 currently so it's up above here and when we hover or focus it comes down so we just want to set that to be one percent so let's move back and go to our opacity which is going to be one currently it's set at zero so when we focus or hover we want to set that back to one and lastly we're going to put in our transition again we did point five ease in out and our css properties we're going to do opacity and transform all right so we got all of those in there and now if i go ahead and click on these other divs we should see that if we're set on to the class here that it automatically has our state all connected there so you can see we have our before that we added giving us the icon and then the three focus items that we just added as well which is perfect and again we can verify that on the third one as well and you can see they're all there so that makes it very easy using our classes like that so i'm going to jump back to our first one and now we're going to start adding in some attributes so i'm going to come over to advanced and attributes and add attribute so the very first thing that we want to do is add tab index and what we're going to do is set our value to zero basically that means that it's going to allow us to tab through these items or be keyboard focusable so i get that added you can click apply attributes and i think what we'll do is probably add our other ones here in a moment i will do one more here which is going to be our aria label and that we just set our name to aria label and our value i'm going to set it to each of the titles that we have so in this case speed for my first one and we'll do power and then design for the third there's going to be two more that i add but we're going to come back to those in a little bit here so i'm going to click apply jump over to my next one advanced attributes and we're gonna set this to tab index just got to make sure you get this all spelled right and again to zero and we're gonna add our next one which is going to be aria label and this one we're going to do power and apply and our third one we're gonna follow that same exact suit at attributes tab index set to zero and add our next one basically what our aria label is doing is giving our screen reader showing that this has this label of design in our case and this one again you can set that to whatever you need that to be a lot of times we see these show up on buttons and things of that such there's a lot of a lot of articles and stuff out there on our attributes so if you want to learn more about that there's a ton of things out there i'm not going to link to anything specific here just because there's so much out there and i'm by no means an expert on this and i'm just trying to share what i'm learning as i go with you guys so that i can help make the oxygen community better and that so that we can all learn and make our websites and web designs more accessible so we got all those added in here the next thing we can do is actually expand out each of these items and i'm going to go to our text as well and i'm going to add an attribute there and come down to attribute and you can see i actually have this still in here already we're just going to add a role and tooltip didn't realize i still had that in here but regardless this is what we want in here so we want to set our role to tool tip basically what that is saying is that it's alerting the screen reader that this head is a tool tip and that by hovering or focusing you're gonna show the tooltip and show what that information is within the tooltip so once you get that added click apply and you can set that to the next three again mine are already in there so i'm not going to go through the third one so the last thing that i do want to do is we're going to add in a code block so i'm just going to click on my top div here and click add and i'm going to add a code block so you can just search and it doesn't matter if it's at the bottom or at the top you just want it to be within this section if you click on the php we can comment this out so that it's not saying hello world so just highlight everything and just match it just like i have here and go ahead and click apply and we'll click back and that just so we can get rid of that hello world here you can see it's no longer showing and we're come down to our javascript and what i have here is two functions that are fairly simple and i'm gonna walk you guys through what those are as as we go through them i'm just going to copy and paste them over and not actually type them out all the way so what i have here is two functions our first one is something we're going to be calling on focus and the second one we're going to be calling on blur which is the opposite of on focus so basically what that bit is doing is any time that we're no longer focusing on it we're calling the on blur which takes it back to what we want it to be so in our case we're calling a function which i labeled focus hover we're passing in an object and then we're using that object to set the tribute and we're going to set our attribute of arya expanded to true and on the flip side when we're no longer focused we're calling our function focus blur again passing in an object and using that object to set attribute and we're gonna set our aria expanded back to false so what that's doing is basically saying that when a screen reader comes across that when it's not focused or hovered it's not expanded that's why we're saying it's false but when it is focused or hovered it's changing that to true which is when we're getting our data to show here so we're just going to do that dynamically so let's go ahead and add those attributes to each one so i'm going to go ahead and click apply there and i'll include this in the description as well so you guys can just copy and paste it you don't have to try and read what i have here on my screen and you can choose what to label your functions as whatever you want them to be i just did that for the focus of this lesson here because it makes a little sense to me so i'm going to collapse that and now i can come back to my divs here and we're going to go back to our advanced and attributes and we're going to go ahead and add two more in here so we'll do our first one which is gonna be on focus is what we're calling there and then the value is going to be focus hover with a capital h is how i had it there and then we're going to pass this so basically what this does is it takes our whatever item we're on so that's where we're getting the object from is the object is this so that's what why we're passing this to that so let's go ahead and add our other one and here we're gonna do on blur and our value is going to be focus blur and again we're going to pass this into this function and go ahead and click apply and we just want to do the same exact thing on our other two divs let's navigate over there and get those added so on focus is our first one it is important to make sure you spell those correct because otherwise it's not going to work properly and we're going to call our function which was focus hover and pass in this all right and let's add our second one which is gonna be on blur and we're gonna pass in focus blur and there we go i'm gonna click apply and let's do our last one now you can see this is a little bit repetitive here but it is very important to make this more accessible so on focus again and our value is going to be the focus hover my finger keeps hitting the v instead of the c and let's get this last one added all right so we got all those in there click apply and we should be good to go so now any time that we hover you can see everything's still working and then once we get to the front end here you'll see that it's going to still be working as we tab through it and we're gonna have all this nice data i'm gonna go ahead and click save jump to the front end i'm gonna click refresh and i'm just gonna quickly show you this so this is i had um the icon the font awesome icon showing here before and this is what it would show up as if we didn't have that code snippet added you'd see it just doesn't show properly even though as i said oxygen lets you use the font awesome icons within the builder you can't call it directly by the code unless you add in that code snippet like i showed so i'm just going to click refresh here and you can see that's working now so now you know if i tab through you can see that this is working if i tab backwards with shift tab you can see they're all focusing as we'd expect and if i go ahead and inspect here scroll up a little bit for you you can see that when click on this one here which is our first one and if i tab to that you can see we're getting our expanded equals true and when i tab to the next one that turns to false and the next one turns to true and when i tab again that one goes back to false and our next one goes to true and then you can see that we have all that other data showing here as well so that wraps up what we were trying to do here make these a little bit more accessible by adding an icon so people know that there's more information to be seen here when either they hover and then making it keyboard accessible via tabs as you can see we tab through that and then also adding the aria data so that screen readers can pick it up a little bit better as i mentioned earlier i'm not an expert on accessibility i'm just trying to share what i learn as i go so that we can continue to build up the oxygen community and make everyone a little bit better if you guys have questions do leave them down in the comments below or on facebook i'm happy to answer them and if you have suggestions or feedback if i did something that you think is incorrect please do let me know as i said i'm not an expert on this i'm just trying to continue to make myself better and share with you guys as i go that wraps up this video i hope to see you guys in my next video and we will go from there thanks have a great day

Channel: LocalSBM

Views: 483

Keywords: Oxygen Builder, WordPress, Oxygen Builder 3.7, CSS Only Text Reveal, :Hover, Accessibility, keyboard focusable, aria labels, :focus

Id: Uxpf36MDDGw

Length: 27min 34sec (1654 seconds)

Published: Thu May 20 2021