0:00:00
The primary template in oxygen is one of the most important aspects of your website build because it controls Nearly the entire website and if you’re an agency or you’re a freelancer you’re making multiple websites dozens of websites Maybe even hundreds of websites if you’re getting your primary template wrong That means that all of your websites have some really big problems now it might seem to you like hey Kevin This is a primary template tutorial. I already know how to make a primary template. It’s not that hard You just click a few buttons in oxygen and then you move on with your life, right? No, no, it’s actually quite complicated because when we take accessibility into mind There’s actually a lot of very specific things that you have to do in oxygen to set up your primary templates Which I’m saying templates because it requires two templates to get this right in fact There’s so many specifics that I actually map this out in base camp so that we can walk through Step by step and just we’ll just mark this off as this as if we are doing an SOP document Which is a standard operating procedure for those of you who might not be in the agency world So let’s go ahead and well first. Let’s let’s pull up in base camp. Let me screen share Let’s pull up the actual list and I’ll keep this side by side with our Training installation over here and like I said, we’re just gonna go down the list step by step But the only difference is as I do each step of the process I will explain the why behind All of the steps because it’s very important for you to understand and it’s also important for you to know That the way that I map this out the steps is mainly for teaching purposes You can do these steps in different orders Once you understand what steps are actually involved and and why we’re doing things the way that we’re doing them So this isn’t to say that you need to copy this exact step by step process every single time It just means that you need to account for all of these items, okay?
0:02:02
So let’s go ahead and start with step number one task number one is create a main template With a main div in inner content all right, so we’re gonna go do that create a main template with a main div and inner content So in oxygen I’m gonna go over to oxygen and templates and when you have a fresh oxygen install This is exactly what you’re gonna see nothing So you’re gonna go ahead and hit add template. You’re gonna name this main. We’re gonna go ahead and hit publish and We’re gonna open with the oxygen builder now. You’re gonna notice it says Create a main template with main div and inner content what I want you to understand is that when you see these tags I’m not just calling it main and my job is done, right? This speaks to semantic HTML. We actually have to give an element in this template a main HTML tag So it says create a main template with main div and inner content main div and inner content not just inner content A div and inner content. So what that means is this we add a div This is that that template that I just created called main it’s a blank slate. There’s nothing going on so I’m gonna add a div and What I’m gonna do is over here on the left hand side I’m gonna look for this tag section and I’m gonna click the drop down and I’m going to choose main now if for some reason Main is not in your list You can always click use custom tag and just type the word main you can do that either way It doesn’t it’s gonna be the same exact outcome and I’ll show you in the HTML As we get further into this tutorial what all of this stuff is supposed to look like and why it they were doing all of this Okay, so I’m gonna hit add now and I’m gonna do inner content and this inner content because I have my div selected This inner content is gonna go right inside of this div in fact I’ll open my structure panel so you can see it happen inner content Went right inside of that div and what the inner content module does is it Dynamically pulls the content from whatever page you happen to be previewing or on the front end of the site Whatever page you happen to be accessing and as you can see here. It’s previewing the homepage. You can see the little preview up here And so it’s pulling in the content from the homepage and this is all that’s on the homepage right now So before we leave this template or save what we’re doing I’m gonna go ahead and edit my structure panel I’m gonna edit this div and I’m just gonna name this main Because it you know div number one doesn’t really do anybody any good You want to get get into the practice of naming your structure panel your items in your structure panel And then this inner content number seven. I mean that that can just stay like that. It doesn’t really That that’s inconsequential now one thing to note is that just for beginners when I do things in the structure panel over here Like renaming things that has nothing to do with the output on the actual website that is simply for like internal Organization purposes. So I’m gonna go ahead and hit save and we’re gonna mark that as done Next it’s gonna say change the ID of the main div to main. This is super important Because what we’re doing here is Well later in this tutorial we’re gonna create what’s called a skip link and the skip link takes People with screen readers to the main content it bypasses the navigation in the header or any other clickable elements It takes them right to the main content We can’t take them to the main content if we don’t have a Landmark to take them to and so we’ve created I don’t know I use the word landmark, but really landmark is just the semantic HTML. We need this anchor. That’s what it’s called an anchor So the way I edit an ID in oxygen. It’s a little like iffy, right?
0:05:36
You can’t like click it here if you click it here it opens this box and it makes it seem like you can’t edit this But you actually can if you just keep look it’s even not behaving right now. Sometimes you have to triple click. Let’s try that there You go. So I triple click and it highlights it They need to make that user experience much better in my opinion But now I can just write the word main and now in fact my div has the ID of main It also has the semantic HTML tag of main again. I’ll show you all of this in the HTML in just a minute I’m going to go ahead and hit save and we can go ahead and check that off now says make the main template the default template for pages The way that I do that is I go back to admin I’m editing the main template still and I can come down here and I can choose what I’m applying this template to by default And I want to apply this to all pages by default and then I’m going to hit update. Okay, fantastic I’m completely done with step number one Step number two, it says create a primary template So now we have to create a completely separate template and again, I’ll explain why we’re doing all of this Okay, and it’ll make perfect sense to you once you kind of see You know things further along. So I’m going to click the add new template button and I’m going to type in primary and I’m going to go ahead and hit publish and Let’s see what it says next add header builder or div with a header tag. Okay, so I’m going to open the builder in oxygen If you’re not using Firefox, I would highly recommend using Firefox when you’re doing dev in oxygen because the builder loads much much much Much more quickly and you don’t have a lot of the lag issues that are present when using chrome All right, let’s refresh it says add a header builder or div with a header tag This is up to you. It’s personal preference now the header builder in oxygen does give you a lot of benefits But it also has some downsides. So I just added a header builder. What this does is it adds Three different columns to your header row It gives you the ability to add multiple header rows It gives you the ability to make headers sticky or not sticky to show them in overlay or hide them in overlay to actually overlay the header on Which means on top of your content so it’s like floating on top of your content If you’re making transparent header for example, so it does give a lot of benefits But it also gives a lot of bad things like you can’t control the size of these columns You can’t control the behavior of the columns. You can’t control the display of the columns You can’t you can’t do a lot of things and it does in fact cause a lot of issues depending on what you’re trying to accomplish So there may be some cases now I would say I use the header builder 80% of the time There may be some cases where you’re just want to like you just need to build a header all by yourself So you’re going to go ahead and add a diff It’s going to add that in and then down here. Let’s click on this if you do it this route You go to the tag section again and you need to choose header So I’m going to click the drop-down and you see header is an option if it’s not an option What do you do you click use custom tag you write the word header? All right? That’s it plain and simple That’s very important that it has this semantic HTML header tag though This is these are called landmarks these main Ht these semantic HTML tags like header main footer aside those types of things And they really help people with screen readers again We’re talking about accessibility throughout all of this really helps people with screen readers navigate and understand the structure of your website It’s going to get more and more and more important for SEO. I would say as well And just user experience in general and crawlers crawling your website Everything it’s just it’s important. Okay. That’s why we’re doing this. It’s important All right, so anyway, that’s how you would do a manual header diff now I’m going to go ahead and just rock the header builder the thing about the header builder is there is no semantic HTML tag It automatically adds the header tag for you so you don’t have to you know find a select box You’re going to notice it’s not even there. It’s not even an option, but just know and you can double check the HTML code to verify It does give the header tag for you All right, so I’m going to open this up so that we can see what’s going on and I’m also going to name these just as you know good practice So we’re going to say this is the header and we’re going to say that this is the primary row Okay, if I added another row it might be a secondary row it might be a top row It might be a whatever like I can name it whatever. This is just internal stuff But I’m doing header and primary row. All right. Let’s see what our instructions say we did the header or or did with the header tag good Add an inner content elements. We have to do that again But I want you to notice this time We’re not wrapping the inner content in a div and we’re not giving the div any sort of tag because there is no div So I’m just going to say inner content add it And there it is it adds it but again not nested inside of a div All right, so we’re just going to leave that saying inner content 13 I’m going to go ahead and check that off now. It says add section and set the tag to footer So we are going to create our footer now. I’m going to add a section And over here on the left. I’m going to set the tag to footer Perfect now. I’m going to go ahead and hit save now because this entire page is white I and I want us to be able to see these elements on the front end and the back end I’m going to go ahead and put and actually let me go ahead and yeah, let’s just do a background real quick I’ll just do a bg base ultra light and then on this one. I’m going to do bg base ultra dark Okay, so I’ve got my header. I’ve got my footer. Let’s save and see what’s next Add sections of the tag to footer which we’ve done Set main template to inherit the primary template Set the main template to inherit the primary template. So I’m going to go out now Admin All right, and then I’m going to go back to templates I’m going to find main and then I’m going to find this box right here Which says inherit design from other template. I’m going to hit the drop down I’m going to say hey, you need to inherit the primary template now. What is our primary template?
0:12:04
Our primary template is literally just the header and the footer The inner content is going to be switched out with whatever other template that we are using So if if we so choose like the main template, right? And when we see the front end you’ll see exactly why this is happening But for right now what I need to do is take that main template and make sure that it inherits the primary template So remember the main does not have a header the main does not have a footer So we need to inherit that header and that footer from the primary template That’s exactly what this setting does right here I’m going to go ahead and hit update and then we’re going to mark that as done Step three is open the primary template. All right, perfect So I’m going to go to oxygen templates. I’m going to open the primary template And we’re going to start actually adding elements to this template Then we can take a look at the front end and then we’ll explain exactly why we did this kind of Two template kind of process here All right, I open the primary template add skip to content link to main as the first item in header So we already talked about what the skip to content link is it’s a way for people with screen readers to skip all of the navigation remember think of think about them Landing on your homepage, okay, they go through the navigation They see what all is available to them they start interacting with the rest of the page Then they click a link that takes them to another page Do you think They should have to go through that whole navigation again with their keyboard to get down to the new content on the new page No, that’s what the skip to link the skip to content link is for they get to the second page It’s like dude, I already know what’s in your menu, right? Let me let me get to your actual content here That’s what the skip to link menu does All right, so I am going to open my structure panels You can see we’re going to open the header open the primary row and we need in this row left a skip to content link So I’m going to add a link It’s just a text link right here and notice it through it all the way at the bottom because I had the primary row selected Which makes perfect sense oxygen But anyway, I’m going to take that and I’m going to drag it up into row left So there it is in my header Now you’re going to notice that I just lost all of my header padding and that’s because I’m using automatic that CSS Which the header does not have Padding by default because it wants you to choose the amount of padding that you want So we’re going to put pad header and we’ll do M to give us M padding on the header medium padding on the header So that’s all nice and fixed very easy And then I’m going to make the text of this length say skip to content Just like that Now the thing is and you’re like Kevin that is awful and I don’t remember seeing these on any other side I don’t know apple doesn’t have one of these amazon doesn’t have one of these that I’ve ever seen right um We’re not leaving it here, okay?
0:14:52
So a lot of there is some CSS magic and I’ll put a snippet down below for you to manually copy and paste in with your CSS But the idea here is that we need to hide this link from almost everybody We only want people to find this link if they are using keyboard navigation on your website Which is tab focusing through available links, right? So there’s a bunch of special CSS that has to be applied if you’re an automatic that CSS user like I am You can simply type in link double dash skip There’s a very special class in here for skip links and it configures it for you But it is important that this is the very first link on your page It needs to go even before your logo. That’s why we put it in first and now you don’t even see it, okay? And we’ll look at how you interact with it in just a minute So add skip to content link to main as the first item in header now. I did miss a step there, okay? So I’m going to click on this you can’t see it but I can see it in the structure panel And in fact, I’m going to rename it What am I going to name it skip link so everybody knows exactly what it is Over here in the URL I need to make sure that I can navigate that link to the main div just like that. So I’m going to go ahead and hit save Excellent. All right now I can mark that off Now it says add logo to the header and link it to Forward slash forward slash if you don’t know is the homepage, okay?
0:16:19
So we’re going to go ahead and add a image And we are going to browse the media library and let’s let’s just see I can pull up dropbox Let’s go to automatic CSS. Let’s go to branding. I’m just going to throw in a logo here Black white box black here we go. We’ll just throw this one in and select image And notice that it’s it’s an SVG. So I’m using Firefox If you don’t set an explicit width on your SVGs in Firefox, they will just not be there at all So if you ever add an SVG and you’re like uh, where is it? I don’t know what’s going on. It’s because it needs a width So I’m going to add a logo Link to that which already has a width by the way. Um, I can do like eight round. We can do something just to get you know A decent sized logo in there that might be a little big. There we go. Perfect. Just like that And I need to make sure that it comes after the skip link. Remember my skip link should be the first thing that people interact with with their keyboard Now next thing I’m going to do is I am going to let’s see what this says add logo Yeah, and link it to the homepage, okay? So in order to do that I click the little link icon right here And it’s going to ask me where I want to link to so I put forward slash hit add link And I’m done that now links to the homepage. So I’m going to go ahead and click done now Just make sure the logo has an alt tag so an alt tag really important for accessibility Very important for SEO when you start adding a lot of other images and stuff to your website Also very important for screen readers so that when somebody with a screen reader interacts with this item They know what it is because screen readers can’t read images right it can’t like tell the person what the image is of That is what the alt tag is for so in order to do that right now we have the link wrapper selected I need to click the actual image and then you’re going to see this alt text box right here alt text the rule of alt text is Describe exactly what the image is so this is We can say the automatic dot css logo. Okay, just like that We’re going to go ahead and hit save And we’re going to go see what’s next. So make sure logo has an alt tag that is done create an accessible menu create an accessible mobile menu Unfortunately, here’s why break the bad news to you There is no way to create an accessible both of those things you can create an accessible menu in oxygen But you cannot create an accessible mobile menu in oxygen without an additional tool Like max mega menu like oxy extras oxy extras light box oxy extras mega menu those things can be made accessible The pro menu in oxygen is not accessible the regular menu in oxygen is not accessible Um, it’s just it’s again. It’s not great. And then they really really really need to improve it So because there’s so many routes that we can go. I’m going to do separate tutorials on creating accessible menus We’re going to skip the menu portion of this and we’re going to do that in separate tutorials because it’s more involved And there’s multiple ways of approaching it. So I’m going to create multiple tutorials for it All right, and then you just piece these tutorials together to get your ultimate accessible website. Okay All right, so we’re going to go ahead and pretend like we did those two items We’re going to move on to step number four, which is add footer items to your footer in the primary template All right, so we’re going to go ahead and just add some footer items here We’re going to make this super easy. I’ll just use automatic CSS and whip up a little footer for us So I’m going to add a div And we’re going to say that this is what’s going to be really simple with this grid to and gap of XL, let’s say and then Let me get my dives in there Now we decide where do we want that to break? So let’s just take a look at kind of the sizing here That’s the L break point. Here’s the M break point. I think we definitely need to stack on M So we’re going to go grid M1 that’s going to stack that at the mobile break point And now we have a fully responsive grid that we can just start putting stuff in So I’m going to go ahead and add an image and I’m going to browse and I’m going to use this white one right here and I’m going to go with footer which I believe is already a class in this training Site here. Yep, and just add that image right there and then I’m going to go ahead and add a heading And we’re going to make that in h3 and we are going to let’s make everything in this footer white So we’ll just do text double-dest white We can make this say automatic.css and then we can add text as well And let’s just go to lorum and grab some lorum if some and drop this in and send this as a nice little description about our website And then I’m going to do grid one on this grid if I can type one and I’m going to do gap Just showing you guys a little trick here of excess and it’s basically like owl spacing except it’s a much cleaner version of owl spacing Same exact thing as if I had taken these off And just did owl What was it s or excess? Yeah, s so there you go. It’s the exact same effect Um, so you can do that either way whatever you want to do I just want to show you that grid that one exists and this is why it exists Some people were like why is there a one column grid? I don’t really understand well So you can do stuff like that All right, so we have that and then we need some footer links So we’re going to add a link and we’re going to call this footer double underscore link And we’re going to put some links in there This is going to be our home link. This is going to be our about link About about about us and then we’ll do services and we’ll do uh Join the team and then here we’ll do Contact us how about again Grade one Gap s they’re all nice and spaced out Uh, we also need to give these actual URLs. Okay, so we’re going to do a forward slash for home pound sign there Here we go again and again And again you have to add these uh, hashtag these pound signs because um if you don’t Firefox will not treat them as real URLs and you can’t test your tab focusing So really important hint that one’s tripped me up many many times in chrome It actually will still tab focus those but in Firefox it will not unless it has a real URL Which a hash link is a real URL? So I’m going to go ahead and hit save here Let’s take a look at our responsiveness Which we don’t have responsiveness here, but we do have it down here. Look at our nice little footer grid All right, so that is all looking really really decent. All right. I’m going to go ahead and hit save And let’s see what we do next add footer items to your footer in the primary template done Now it says test keyboard navigation test color contrast ratios Absolutely excellent. Okay, so we basically done our job and now I need to explain to you why we did things the way that we did and show you The HTML output and things like that first thing I’m going to do just because my OCD It’s it’s killing me. I’ve got to go fix the way that those buttons are stacking or not stacking on mobile. We’re going to do that real quick So we’re going to load the home page and while we’re here we can take a look at HTML structure So I’m just going to come down here and say grid s1 to make sure that at the s break point down there They stack on top of each other instead of being all nice and squished All right, I’m going to go ahead and hit save so that’s all fixed And let’s take a look at the front end of our website so if we go To the admin real quick we look at our home page You can see it’s using the default main template. It is not using the primary template Let’s refresh memory main Has no header footer primary only has a header in a footer main has the Div with the main tag and that’s the one that we want all of our pages to default to which is correct right here default main right So I’m going to go on the front end and we’re going to inspect this page and I’m going to pull this up Make it big so everybody can see This is exactly what we’re looking for from a semantic HTML perspective on almost all pages of your website So you have your header your main and your footer those are key landmarks header main footer, okay?
0:25:00
If you don’t have the main You’re missing a hugely important landmark, okay, but there is another problem If we have a blog post template with a sidebar let’s say you got a sidebar of all this stuff It’s unrelated to the main content of that blog article right You can’t wrap all that stuff and then below the article what do you have you have an aside which is basically related articles let’s say you have a little related post feature like so many blogs do You can’t put stuff all that stuff into your main I mean you can but you’re not supposed to right But if you only have one template and your one template has the HTML main tag on the inner content It means that when you go create a blog post template and inherit that template so that you can get your header footer on your blog post You’re going to inherit that main tag and your main tag is going to be wrapping everything We don’t want that to happen So effectively now what we’re able to do we’re empowered because we have two separate templates right We have one that has a main tag over here and one that has just a header footer with no main tag We can combine them together if we want by choosing default main or if we create a brand new Um, template like we would for posts Add new template you could say blog post You choose what to inherit well I want to inherit my header and my footer, but I don’t want to inherit my main tag So I’m going to choose primary which is my header footer, but no main tag Now I’m free to go make a blog post template and I can put the main tag in the blog post template wherever it’s supposed to go That’s why we need to have two separate templates your main for pages like you’re going to create a page right add new page It says what template do you want to use?
0:26:49
Well, yeah, I want to use my main because I need everything to be in the main tag that’s on this page Except the footer won’t be in the main tag right it’s it is kind of hard to explain, but where is the footer? Tag it’s in the primary template and that’s going to give you a footer with the footer tag That’s exactly what you want anyway Only the inner content is wrapped in the main tag on the main template, okay? So hopefully that makes sense to you once you’ve built it a couple times and looked at the HTML output Especially when you have a blog post that doesn’t or it does have a main tag But it has a main tag in a different place which when I re-record the blog post template I’ll show you exactly where to put it But the key is we can’t take everything on a blog post like a sidebar and related posts and all that stuff And I’ll stuff it all in the main tag that’s not semantically accurate So we create these two separate templates and that gives us the ultimate control to build exactly what we need and to keep everything accessible All right, so let’s go back to the front end. I kind of explained here’s your your landmarks that you’re looking for your nice clean HTML Semantic output now what we need to do is test our tab focus see if our skip link works and all that good stuff so I’m going to go ahead and hit tab and Well, I was already in sorry. I was already in the page because I clicked around in here But I’ll do it again So here is the very beginning where this skip to toolbar is the admin which obviously is not there if you’re not logged in So if I click tab again, it’ll tab focus to the very first Focusable element on my website which as you can see is a skip to content link And if I hit enter it will take me down to this main area right here Now here’s the thing Notice it’s styling right you can style these skip links a lot of different ways This you didn’t see me style that it is styled automatically by automatic dot css Basically to match my button styling right here and it has this outline to show that it is focused by the keyboard All right, so I’m going to go ahead and hit enter and you can see it brings me down to training Now the next thing that I should be able to focus on is the get a quote button Now there’s one thing I’m taking my time on this. I’m going really slow because That won’t happen for a lot of you and here’s why it might not happen if you have a navigation up here or my logo Notice it did not focus on my logo next if you are in oxygen Do I have a builder open I do manage Settings and then I’m going to lock to class everything’s locked. I’m going to go to global styles And I’m going to go to scripts right here. So in global styles click on scripts If this is selected in fact, let’s just select it. So we’ll select it hit save And then let’s refresh Now let’s tab focus All right, here’s the first item. I’m going to hit enter which takes me down to my training Notice the skip to content did not well hold on. I’ve got to get this URL correct because that’s That was cheating that was using the old way Okay, so there’s my skip to toolbar. There’s my skip to content. I hit enter Notice skip to content did not go away notice in the URL There’s no hash link of main attached to the URL appended to the end and if I hit tab look what happens It goes to the logo next This feature in oxygen smooth scroll to hash links breaks Tab focus order in websites because it uses jQuery any website that uses jQuery for smooth scroll to hash links It’s going to break your skip link and break tab focus order with your website So it’s very important that you turn this off and I’m going to go ahead and hit save And then in automatic that CSS we replace that with CSS smooth scrolling so you still get smooth scroll effect, but it doesn’t break your skip link It doesn’t break your tab focus order. Okay, so now that that’s turned off. Let me go ahead and refresh There’s my skip to toolbar. Here’s my skip to content The skip to content went away when I hit enter it appended the main properly to the URL And now when I tab again, it does not tab focus on my logo It actually tab focuses on the first thing inside of the main Content element now I can tab through I can see that all of my links focus. There’s the get a quote There’s learn more there’s does this focus it now jumps focus down to my footer and I have proper tab focus navigation I also want to show you really quick how to Use Kind of like how a screen reader would work and this is only if you have a Mac computer I don’t know how to do this on windows. I don’t know if this is a feature But on Mac you have apple voice over and you can hit command f5 now I want to warn you ahead of time. I can’t control the volume of how this person talks. Okay?
0:31:53
So it might be a little loud coming through So maybe just turn your volume down just the tab right now as we do this But I’ll show you how to test your website using apple voice over. We’re going to hit command f5 and just listen Digital link banner visit it link skip to content visit it link image visit it link get a court visit it link visit it link link Skip to toolbar. Okay, you are currently on a link inside of web content to click this link press control option space To exit this wet area press control option shift up arrow. Okay, it talks a lot. All right, and I’m just gonna Let it talk so you can listen to exactly what what’s gonna happen You can always hit commander option. I believe let me test it real quick to make them shut up visit it link skip to content banner Visited link image automatic dot CS out logo hold on you are currently on a link to click this link There. Oh, it’s control. Okay, so if you hit the control button on the keyboard it’ll they’ll stop talking So let’s try that again visit link there you go So I’m I’m only gonna let it tell you the very first part and then I’m gonna I don’t want them to keep talking okay, so here’s our skip to content link now just pay attention carefully link Exactly what he says on every item visit link skip to content better Okay, so he’s saying you visited this link, but it is a skip to content link and it’ll take you to the banner Okay, which is the main now or sorry. It’s in the banner and that’s like a region in In this language basically. Okay, so I’m gonna hit tab listen Visited link image automatic dot CS out logo You’re currently on a link so notice it said let’s do it again Visited link image automatic dot CS out logo. So it said here’s a link you visited It’s an image and then what did it do it read the alt tag to the user that we put in earlier it said automatic CSS logo, so they know now exactly what they’re hovered over now. I’m gonna go ahead and hit tab again Visited link get a quote hero region. Okay, so it’s putting it in the hero region. It’s visited link get a quote All right, we’re all good visit link learn more visit link learn more visit link. Does this focus?
0:34:05
So notice on these it’s reading out the text which is important that you actually put Usable text okay, so like to learn more Not so great, right? But to get a quote really great like they know hey if I want to get a quote I better click this link the learn more not so much it doesn’t really tell them as much so we would have to Do a better job and maybe add what are called are you labels to these buttons and these links In some cases to make them more descriptive But this is just a way for you to use apple voiceover. You can also click I believe it’s control and option if you hold those down Visited link this this web padding level one training this website is for training. This is the Notice that I can now select elements that aren’t actually links. I can select the Actual sections if I want to I can select headings. I can select text It’ll read the entire page to me and this allows you to go through and not just check your tab focus on your links But actually use apple voiceover as if it’s a screen reader to see how your entire website can be interpreted and whether it makes sense or not You can even close your eyes and go through the whole thing and see if the different areas and sections and elements Make sense to you and if they don’t you can clean them up And there’s various techniques that will go over in the inner circle Related to accessibility, but I wanted to get your feet wet with using apple voiceover for those of you who have a Mac I’m going to go ahead and turn it off voiceover off and and that’s it So that concludes this tutorial. We have now created your primary templates properly We have the proper semantic HTML structure We have the ability to separate our main tag and put it wherever we want depending on the template that we’re going to be using or the type of page That we are going to be creating and um, like I said follow up to this training will be how to create these accessible menus That’s kind of the only missing part that’s left to this and there’s a few different ways to do it So we’ll tackle that in separate tutorials. All right. Cheers
