How to Add A Skip to Content Button In Oxygen Builder - Improved Accessibility

[Music] hello everyone welcome to my next video in this video we are going to walk through adding a skip to content button on our website this is used for accessibility purposes specifically for people who can't navigate a website using a mouse and may need to do it using either a screen reader or a keyboard so typically when a person using a keyboard is going to access the website in this case i will show you the example if i hit tab it's going to move me about the page so typically it starts at the top here and you can see it goes to the very first link on the page and if i hit tab again it's going to take me to the menu and i'll have to tab all the way through before i can get to the content on the actual page and let's say that you know i got to the website the first time and i've navigated through the menu but now i just want to navigate to the actual content on the page what i need to do is have a button here so i don't have to navigate through all of the menu items every single time so what that would look like is if i come over to this page again starting at the top here if i hit tab you can see i get a button that comes down here and into view and if i hit enter on my keyboard it's going to take me to the main section on my page and if i hit tab again it's just going to take me to the next link on the actual page and so on where without that if i hit tab again it starts me at the top and i have to go through everything before i can actually get down onto the actual page so it's a pretty simple thing to do and i'm going to walk you through how to do that today so let's dive right in we are going to start first with our home page so i'm just going to jump into oxygen editor all right now that we're in here i'm going to open my structure panel and select my inner content and what i'm going to do is add a div and in this with this div i'm going to click my selector here and make sure i'm on my id and if you're in the edit part what i'm going to do is just rename this to main all lowercase click enter and if you click off it should keep it alright so what we're going to do is start putting everything inside it so i'm just going to drag all of these in here one by one certainly if you're starting your page brand new you'll make your div first so you don't have to drag everything inside it you'll just start with everything inside it and i'm also going to rename this here so i'm going to click the little pencil rename highlight everything and i'm just going to call that main so next what i'm also going to do is come over back to my editor section over on the left hand side i'm going to click advanced attributes i'm going to add an attribute attribute call this role and main i'm going to click apply i'm going to click save and from here now we can go ahead and jump back to the back end so i'm just going to click back to wordpress and admin one thing i quickly wanted to mention so i'm going to jump back into oxygen is that any time we build out more pages we do want to make sure that we are adding that main div onto every single page that we're adding and making sure that we are actually renaming it with the id of main you can try to add in the item by using a reusable item and you can see i have that here i did that off camera because i just wanted to show you quickly so i click back on my main content here and add in this by being editable and assume that there is no content in there and again it's actually not letting me because i have this other one in here so let me just jump back here and try that again and click editable you can see that it actually doesn't bring in my id name as main so i do have to reset that in the case that we are actually setting it to use a reusable component so i typically just add the div and rename it myself and that way i don't have to worry about forgetting it if i just use a reusable element so i just wanted to quickly touch on that because if you do not have your main id on the page when you actually go to use it on the front end it's not actually going to work so i'm going to click save and we're going to jump back to the front end or back end i apologize and we're going to keep going from here then i'm going to go over to my template and i'm going to go into my global header and footer which i already have set up i'm going to click edit with oxygen all right i'm going to open my structure panel and i'm going to expand my header builder and my header row and my roll left which is going to be my link wrapper which is our logo here which i believe has an image inside of it i just pulled this from existing design set along with the home page as well and i haven't done anything else with it thus far so what we're going to do um in this header row we are going to add in another link or actually a text link so you can search it on the left hand side add that in the important part is we want it to be above our link wrapper here you want it to be the very first link that is showing within the builder the highest up in your html so what we're going to do is click to edit this and we're going to call skip to content i'm going to click done i'm going to come over to my url here and we're going to put the pound sign or hash and we're going to go to main so that's going to allow us to link directly to our main div that we just set up on our home page from there i'm going to go to advanced i'm going to go to my attributes add i'm gonna add two and from here i'm gonna do tab index i'm gonna set that to zero and next i'm gonna do label and i'm going to do skip to content i'm going to click apply next we're going to start stylizing this a little bit so the first thing i'm going to do is just because we're set to this black background i'm actually going to make this white so if you have a white in your um color panel already go ahead and choose that otherwise you can just set it as um f f fff and make sure you put the symbol in before it alright so we got our color there and now we're going to add a little bit of padding here let's go ahead and do we'll see what it looks like with 10 on top do 20 on each side and 10 is probably going to be too much so i'm just going to do five and again you'll have to play with it to see what works best for you all right next and actually this is going to change too once we get this fully set up which we'll get to here in a second now that we did our size so we're going to click on layout we want to come all the way back all the way to the bottom we're going to click absolute and you can see now that is showing over our logo here instead of pushing everything to the right so what i'm going to do is also set my z index to 1 just so i make sure that it's the topmost item here and you can see we're not getting the logo coming through anymore like we were you can see when we do this it's kind of over the top there so again set your z index accordingly one in my case certainly if your menu is set differently you may have to go a higher number so this looks good to me so what i'm going to do next is click my back arrow i'm going to come to our typography and we can set this to be i'm going to increase my font weight just so it's a little bit thicker here and i'm going to make sure we have our underline and i think our color is going to be okay with our just blue link color that is standard with an oxygen certainly you can color it as needed just make sure that your color contrast is good all right we're not going to add an actual border but we are going to add just a little bit of radius just to make it look a little bit better i don't like sharp corners for my buttons that's just a personal preference so you can set it how you see fit for you for your design purposes but i'm just going to add 4 pixels on each side next we're going to come down to our effects and we're going to do a transition of 0.5 i'm going to set it to ease in out and click the back arrow next we're going to come down to transform and we are going to do translate translate y and we're going to set this to a percent and you may have to play with it depending on the size of your header but i'm going to go with 150 and actually it's going to be -150 and you can see it's going off the top now you may have to go more or less depending on how big your actual menu is but 150 is going to work for me so just play around with that a little bit i'm going to click my back arrow and we'll hit back again the next thing i'm going to do is now come up to my state and we're going to click add state and we're just going to add focus click ok and it's going to add that into our list here the very first thing i'm going to do is come down to my effects again i'm going to add in the same transition just so we have it on both sides again i'm going to add ease in out click my back arrow and we're going to go to transform and we're going to again do a translate and we're just going to do 1 and i'm going to do it at percent just so we're using the same values or same measurements i should say so now you can see it's back to showing and if i go back to original you can see it slides up and if i come down to focus it slides back into view the next thing i'm going to do is click my back arrow twice and we're going to come to our custom css and from here i am going to add in one line here and it's going to be outline we can color this appropriately so i'm going to do two pixels solid and you can choose your color now depending what color you have going you may have to you want to make sure you choose something that pops out both from the white and the black so we can try the blue and see how that sound or how that looks i'm just going to hit apply here and i'm going to collapse and you can see it's not showing right now because we're not actually focused on it click my back arrow and i think that's going to be everything we need here all right so i'm going to click save and the other thing i want to point out while we're in the back end here is we're going to go into settings by clicking on manage and settings and if you click on page settings animate on scroll i apologize it's scripts if you have this checkbox checked the smooth scroll to hash links you have this checked you're going to have issues jumping to your hash links so we want to make sure that this is not checked so i'm going to click my back arrow here and click it again because we're under page settings i'm also going to do the same thing under global styles and scripts you want to make sure it's unchecked here as well all right so we can go ahead and click save and now we're going to jump to the front end so i have that here and before i click refresh you can see if i hit tab on my keyboard it's first taking me to the very first link on on the page which happens to be the logo here and if i hit tab again it takes me an order here so you can see that we don't have that there so what i'm going to do is go ahead and click refresh here and if i do the same exact thing this time you can see that the very first thing we get when we tab is our skip to content and if we hover it and look all the way down on the bottom here you can see we're getting our hash link to main so what i'm going to do is just go ahead and click that and when i do that if i hit tab again you're going to see it takes us to our next link which is our get started button so again coming up to the top here if i click tab it's going to go to skip to content and if you click enter it's going to take us to our main content area where if i hit tab it's going to go to my next clickable link or item which is in this case our getting started button so if we didn't have that set up properly what we'd have to do to get to this is actually tab through everything so again if i start here and do it again we're going to go to our logo and then through all our menu items until we get all the way down here so by adding this we can just skip having to navigate through all the menu items and jump right to our page and that concludes this video so if you have questions do let me know um this was a pretty simple um thing to add within oxygen builder thanks to how easy oxygen builder allows you to build out your header and again i did this using the actual header builder you could do this regardless of how you how your header is built even if you had a just a section up here or if you've made two sections so i'll actually do that just to show you so i'm going to go ahead and add in two sections here and i'm going to drag them all the way up above our header and what i'm going to do is i'll just color these slightly different here and i didn't want text color i apologize there we want background color there we go and we'll do the same thing on this one and do slightly different and in this top one we'll just add i'm going to do two divs intersect our our layout here to horizontal and middle and we'll go space between here so it should push them to both edges and we'll in this div add a let's see here let's do some text links so we'll do two and we'll have to come back to those and we'll just set this to email at email.com and this one to a phone number do one two three four five six seven eight nine zero click done there and we're gonna set these two horizontal as well and put a little bit of spacing between them here so i'll just add it to the first one and again i'm not worrying too much about my design here just trying to show you the layout and on this one i'm going to again set this to horizontal and we're going to set some um link wrappers and we're going to put an icon in there and i'm just gonna repeat that a couple of times and actually i want to repeat my link wrapper not my icon so you can see we have three of them there i'm just going to throw a little bit of spacing on here just to separate them and we'll come back up to our section here which i believe has some spacing on it already and i'm going to take that out all right so you can see we have those there and maybe i'll put a a little bit on there still i'm going to do the same thing on our next section here and this one we're just going to add in um an image actually we'll start with our div duplicate that i'm going to set my section to horizontal again middle and do space around again and in here we're going to add our image i'm just going to set my width to 100 pixels we're just assuming that's going to be our logo and over in this div we're going to add in a menu you can do the regular menu or a pro menu and i'm going to set my spacing on this one again to 10 and 0. so you can see we built headers here again i didn't do everything properly because i just want to quickly show you this so we have both of those there is if you did a top header and then your main header with your actual menu so what i'm going to do here in our case is we want to take our original text link that is our skip to content and what i would do is just drag it all the way up to our very top item here and you can see that right now it's not quite far enough up if i did hit save and jump to our front end again you can see it's still got our main in here from when i clicked refresh so i'm just going to take that out so it takes us back to our top so you can see right now it's not quite far enough up and it's showing here so if that's the case for you all you'd want to do is come into advanced and effects transform and we go to minus 175 and you can see it's all the way off now and if we go to our front end you can see it's not showing now and if i hit my tab that's the first thing we get to and if i click enter it's again going to take us to our main section and if i hit tab again it's going to take us to our first button so again jump back to the top and if i just hit tab again it'll take me right through an order here and because i didn't actually link our logo in this case it just jumped right to our menu items so again it doesn't matter whether you use the actual header builder or if you build your own header and set everything up the important part is just that you want to make sure that your text link is the very first link within your hierarchy of your structure here and again you want to make sure that you're setting your tab index on that which is under your attributes and the other main thing to keep in mind as i mentioned is under settings page settings and scripts that we make sure that our check box here and also under global styles and scripts is unchecked because if we do that and i'll go ahead and show you just so we have that i'm going to click save jump back to our front end here and you can see when i hit tab again instead of going to my button it took me back up here so that's why we want to make sure that we have this unchecked so again i'll do that again for you i'm going to take out our main here click enter from the top of the page if i hit tab you can see our skip to content button comes in if i hit enter you can see it looks like it takes us to our main content but as soon as i tab again it just takes me back to the next link on the page not inside the actual main so as soon as i come up and uncheck this and click save again if i hit refresh and we'll try this again so i hit tab hit enter and again it scrolls us to our main and if i hit tab again it takes us to our next button so those are the important things that i just wanted to mention i have seen a few people run into that and wanted to make sure i mentioned that in my video again if you have questions regarding this do let me know down in the comments below i hope this helps you make your website more accessible

Channel: LocalSBM

Views: 461

Keywords: Oxygen Builder, WordPress, Accessibility, Skip to Content, Skip Navigation, keyboard accessibility

Id: aFu01uREwoo

Length: 26min 7sec (1567 seconds)

Published: Sun Sep 19 2021