Anatomy of an Accessible Navigation: Steve Jones

>> AMBER HINDS: Okay. We are at 10:05. I am going to get started just so that we give Steve enough time to talk. So, a few announcements. If you have never been before we have a Facebook group if you want to connect between Meetups, you can find it if you just search WordPress accessibility where it’s facebook.com/groups/wordpress.accessibility is the URL. It’s a great place to connect with other people, ask questions, share things you’re working on between events ..

If you want to find other upcoming events, obviously we talk about them here, and you want to find past recordings all in one place, you can do that on our website at equalizedigital.com/meetup. It’s actually much longer URL but that’s a short one I made that redirects. 

Everyone asks, so I’m going to say this, yes, this Meetup is being recorded. If you have to hop out early for some reason or get disconnected, we will have a recording. It takes us about two weeks to get a accurate transcript and captions, and then we will put that up on this URL. 

The other way to get notified of the recording, when it is available, is to join our e-mail list. We send out e-mails about the Meetups before they happen. We send an occasional newsletter that shares different news and resources from around the web. If you’re interested in learning more, please join our e-mail list and you should get prompted into that after the Meetup, but if not, you can go to equalizedigital.com/focus-state and sign up for our e-mail list there. 

We are seeking additional sponsors for the Meetup. Unfortunately, the WordPress foundation doesn’t have a budget to cover live captions for our Meetup and so they told us that we have to go out and find our own sponsors for that [chuckle] If anyone is interested in helping, I know that we, for example, don’t have a sponsor for live captions for the evening Meetup this month. ‘Course we will still have live captions. My company will cover it if we can. We have committed to that, but we do appreciate if other companies are willing to step in and help with the expenses. It is a very worthwhile expense, but it is not cheap.

If you have any suggestions for the Meetup, if you would be interested in speaking, we are currently trying to find speakers starting for April and on, please reach out to us. You can contact myself and Paola [phonetic] at meetup@equalizedigital.com. And if you e-mail us at that e-mail address, then, you know, we’re happy to help you or I can come on as a speaker. We definitely love more speakers.

Who am I? I’ve been talking at you and using this name Equalize Digital. I’m Amber Hinds. I’m the CEO of Equalize Digital. We’re a Certified B Corp. a WordPress VIP agency and a corporate member of IAAP. We have a plugin called Accessibility Checker which helps people to audit their websites for accessibility and we started the Meetup mostly because we wanted to have more learning opportunities ourselves and that’s one thing that I love. 

Sometimes we come and like today my partner, Steve, will be speaking. But a lot of times we have other speakers and I learn something every time and I really enjoy running the Meetup, and that’s sort of who we are. If you want to get in touch with us, obviously, I’ve said our website about a million times so I’m not going to say it again, but we are on Twitter for as long as Twitter lasts. It seems like it goes down these days.

[laughter]

But we’re just at @EqualizeDigital on Twitter 

We have two sponsors that I want to thank today. The first one is Eric and his company IvyCat. Eric, I think I saw in the chat is here. IvyCat helps clients and agencies create, market and maintain high-performing WordPress websites and web apps that are fast, easy to use, accessible and get results. They have website care plans. They do search engine optimization and they offer accessibility services to help clients grow and succeed without the stress and headache of doing it alone. 

We really appreciate that they are sponsoring our live captioning today and encourage you to go check them out at ivycat.com. You can also find them on the web @IvyCatWeb on Twitter. We always like to encourage people to tweet a thank to our sponsors on Twitter because that helps to encourage them to want to come back. If you’re on other social medias and you find them on other social media say, thanks there. Thank you to IvyCat.

And then our second sponsor is Empire Caption Solutions. Empire Caption Solutions has generously donated their services to us after the event. So, they take our recording, and they correct it, so that we have corrected captions for our recordings that can live on our website, and a full transcript. They also do Audio Description for their clients, and they offer ASL interpretation services. 

They are a great resource if you’re looking for someone to caption your next event or your next video. You can learn more about them at empirecaptions.com or if you want to tweet a thank you to them, they’re @EmpireCaption, plural, no “s” on Twitter. 

We have a couple of upcoming events that I wanted to share with everyone. Two of these events are not official WordPress Meetups. They are slightly different. They are accessibility testing. I don’t know if you guys heard that one. I keep hearing branches falling hit the roof. It’s throwing me off. We’re going to have two webinars. 

One is about how to use NVDA and the other is how to use VoiceOver. The NVDA webinar will be on Thursday, February 16th at the same time 10:00 a.m. to 12:00 p.m. It’s a two-hour webinar. We have hired the Carroll Center for the Blind to lead these webinars. (Inaudible) will be teaching you how to use a screen reader, what settings to know and how to test with them. 

If you’re interested in that, because of the live captions and because we are paying our speaker, unfortunately, there are not free. But please reach out if have – if you’re interested and for some reason the cost doesn’t work for you, we’ll see what we can do because we’re just trying to make sure we can meet our cost on them and we want everyone to come. 

The next two Meetups on Monday, February 20th at 7:00 p.m. Central. Raghavendra Satish Peri will be talking about documenting accessibility issues during an audit. He is a certified-accessibility specialist, who is also blind and uses a screen reader every day. He will be talking about how he translates what he sees when he’s doing an audit into a report that it is meaningful for a client. 

If it’s something that you are interested starting to offer or you are already offering and you want to compare what you’re doing to what he’s doing, that would be a great Meetup. 

In this same time slot in March, I’m going to be doing Growing Revenue with Accessibility Monitoring and Remediation Plans talking about recurring revenue. So that should be a fun Meetup as well. 

Today I’m super excited to have my partner, Steve here. He is our chief technology officer at Equalize Digital and I’ve had the honor of working with him for many years and he has a phenomenal background as a developer for WordPress websites, and, of course, our plugin. Steve, we’re excited to have you here. I’m going to stop sharing my screen, let you take over. 

While I’m doing that, I just want to let everyone know we have a Q & A box here. I will try to watch the chat for any questions that may come in. But ideally if you can post them in the Q & A box, it makes it a little bit easier for me. Take it away, Steve. 

>> STEVE JONES: All right. I shared my screen. Are you seeing everything all right?

>> AMBER: Yes, looks good.

>> STEVE: All right. Thanks for that introduction, Amber. I’m excited to be here today to share with you my talk which is the Anatomy of an Accessible Navigation Menu. This is going to be a little more of a technical talk. We’re going to dive into some code.

I think Paola is going to share the link to the slides. The slides are actual. There’s code examples inside the slides and they’re not screenshots, it’s actual code. You can follow along with that link if you needed. 

So without delay I’m happy to dive right in. Why is an accessible navigation important? Right? You guys have been through a lot of these talks and there’s been a lot of great speakers that speak on the importance of accessibility and why accessibility matters. I’m not going to belabor that since we’ve all been through a lot of those talks and learned a lot through that. If you showed up for this talk, I’m sure that you understand the importance of accessibility.

But for an accessible navigation menu it’s important because it defines the structure of the website. When a user comes in the site, the navigation helps them get a feel, visually, and mentally of the page structure of the website. It avoids abandonment. If that structure that I just talked about is not proper or is broken in some instance, then visual users will likely abandon. And keyboard users will probably most definitely abandon the website. 

If this website is important to you or to your client, you really want to make sure you have a solid navigation that highlights the structure of your website. As far as development, you know, I try to have a motto. If it’s not accessible, it’s broken. We can do everything, you know, correctly, right, code wise that, you know, it’s semantic; it’s structured right, but if it’s not accessible for screen readers or keyboard users, then it’s broken.

As you’re developing and you notice that this doesn’t quite work, go the extra mile make it 100% accessible and try to adopt the mindset that if it’s not accessible, it’s broken.

With that let’s jump into some of the code stuff. As I mentioned menu structure is very important. It needs to be semantic. We say this all the time. We say the word semantic all the time but what does that actually mean. It means that the HTML code reinforces the meaning of the content rather than the design. In the case of a navigation menu, we’re using a list so when the screen reader hits, when they tab to a list, it tells them it’s a list and how many items are in that list. It gives them context to where they’re at.

If we were to build the navigation which is divs, div tags or paragraph tags, we could visually achieve that, but it would not be semantic markup, and it would not be good for screen readers. Menu structure should also be adaptive. It should adapt to the viewport. It should be responsive, is the word that we typically use. It should be able to build for tablet, mobile, desktop.

Our approach typically is more fluid responsively [inaudible]. We make sure that the navigation functions and looks correctly on all viewport sizes, on all screen sizes. So, you grab your window, and you slide it back and forth and you visually you check that everything is viewable. The text is not getting cut off, that drop downs or flyouts are not going off the side of the screen. You just want to be mindful of that.

It, also, supports magnification. If a user needs to increase the scale of their browser, instead of viewing it at a hundred percent they’re viewing it at a hundred fifty percent, that the text flows. It doesn’t cut off the side. There’s not like a hard overflow hidden. That if it’s a three-word link, that it would wrap to the next line and then that adapts to a assistive technology. And, I think, we’re going to dive into a lot of that today.

The navigation menu when tab to announces what it is, its context to the keyboard user where they are, how many items there are, is there a submenu. In being semantic we want to define our menu for websites we’re typically going to use an unordered list or an ordered list. We would use an unordered list if the menu is not specific, right. This is typically what we use. 

I have a code example here that shows code with an unordered list. It has an unordered list. It has an unordered list, open and close tag and within that I’m showing four list items with links, and for the purpose of this presentation, these are not real links. They’re just placeholders. I have an about. I have a home link, about link, a shop link, and a contact link. These can be reordered in any order. It doesn’t matter where they go. I know we typically put home first but this is what I would consider a nonspecific list. 

Now, could we use divs to create this, and then use ARIA attributes to define the roles of these things, we could, right. From a developer’s standpoint I think that’s overly complex. I always default to using semantic HTML markup before using aria-label attributes, aria attributes. Because if you can achieve it with just straight HTML, I think that’s the best way to go.

We want to use an ordered list when the sequence matter. I am showing a unordered – an ordered list here, open and close tags. And within those tags I have five list items here that go in order, and this is a little bit of a shameless plug, but I will read through what these are. Step one would be download the accessibility checker plugin, and then step two, upload the plugin into your website. Step three, activate the plugin. Step four, scan a post and step five, fix all your accessibility issues. All right.

That is the case where you would have where sequence matters. This could be like a food blog where, where you have instructions on how to bake a cake, or you have – it could be an automotive site where it’s instructions on how to fix a certain thing on a car. That is the case when to use an ordered list. 

We want to identify the menu. And we first do this by using HTML5 landmarks. And in this case, we’re going to use a nav. Now, the nav element is you have an open-closed nav bracket and you wrap your list in that. That’s what this code example shows. The code example leaves out all the list items just for purposes of this talk. Now we could use a div and we could give it a role of nav but like I stated earlier, I always default to using semantic HTML first. 

We want to label the menu as well. There’s two options to labelling a menu. We can use the aria-label attribute. If I jumped down to my code example here, I have highlighted the HTML5 landmark nav tag that I mentioned in previous slide. And I’ve added the aria-label attribute to that, and I’ve given that a value of main. I’m calling my nav menu main in this case. 

We can also label it with the aria-labelledby attribute and what this does is it also allows you – it kind of kills two birds with one stone, right. You can have a heading tag that defines the menu. This could be for visual users. This could also be hidden. You could make this screen reader text as well. On the HTML5 landmark nav tag I now have the aria-labelledby attribute with value set to main menu label. Inside of that nav tag I have an h2 tag and I have given it an id of main menu label which is the same as its labelledby. You want those to match.

What that does it tells the screen reader to grab the title of that heading tag, which is main menu. Those are the two options for labeling. We want to also indicate a current menu item. We use the aria-current attribute to do that. The code example here is I’m looking at it at just the menu item which would be the li tag, the list tag. And then inside of that tag I have an anchor link and for purposes of this talk the value of the href is set the placeholder tag.

And I have aria-current attribute set to page. This tells the screen reader that – and the text of this link is contact us – that tells the screen reader to read out this contact page and it’s the current page. We put that altogether and we get a rendered example here. This is actual rendered code that you can go through. Now, if I’m lucky since I’m inside of these JavaScript slides, let me see if the screen reader will read this out. –

>> COMPUTER: [indiscernible]

STEVE: No.

>> AMBER: Hey, Steve, hold on. 

>> STEVE: Yes.

>> AMBER: I know what happened. In your Zoom settings, give me one second. You can’t see me and I’m talking which is not good. This is good for everyone. In your Zoom settings, like your Zoom window settings.

>> STEVE: Yes, yes.

>> AMBER: If you go under accessibility, go turn off all the notices about people talking in the chat.

>> STEVE: Screen reader.

>> AMBER: Yes, screen reader alerts. 

>> STEVE: No, no, that’s good.

>> AMBER: Otherwise, it’s going to read it out while VoiceOver goes.

STEVE: All right, let’s give this another try. 

[laughter]

>> COMPUTER: VoiceOver on Brave, Anatomy of an Accessible Navigation Menu-Brave, Window of an Accessible Navigation Menu, selected, tab, group n, selected. Current page, link, Home list 4 items, digital to everyone. You are currently on a link. To click this link, press Control-Option-Space …

STEVE: No, I don’t think we’re going to have luck with that inside these slides. But I will at the end of this do some live examples where the screen reader should function properly. I think it started to read out my slides at the same time. This is all put together, the rendered example.

Now we move on to menu styling. We semantically set up our menu for – to be read by screen readers and navigated by keyboard users. Now, we need to make it visually accessible. Some things to consider. We want to, – want to display the menu where the user would expect it, right. Main navigation should probably be in the header or close to the header, right below the header, or around the header. It would be weird for it to be halfway down the page. Tradition – typically these days it’s in the header. I know in years past navigations were in the sidebar or the aside, but, typically it’s up high. User can get to it. 

You can add skip links to your page for the user to jump right to the navigation. It should be easily identified as a menu through properly marked up – proper markup and styles. We’ve gone through the markup. We’re getting ready to dive into the styles. 

The menu adapts to varying sizes of text and viewport which we have discussed. And you want to avoid confusing text in your menu items like line breaks and uppercase, and hyphens. Those tend to read out funny for screen readers. And then we want to make sure there’s adequate white space. If somebody suffers from tremors or elderly people, sometimes have a hard time hitting the right spot, we want to make sure that our buttons have adequate space and adequate hit area for the mouse user to click on.

We’re going to jump into some more code here. This is on the styling side so we’re looking at CSS this time. We want to change the hover and focus state when the user mouses over to give them visual guidance on where they are on the page. This code block I have I’m targeting the nav anchor link and the hover state and the focus state. So, I’m going to give the text color the color blue. I’m going to give the background color white. And I’m going to give it a text decoration of underline. 

I, also, have another style here that targets the nav anchor link when it’s focused. This adds a outline of solid, two pixels and in this case a blue-color. And then an outline-offset of two pixels. This is typically what we’ve adopted at our agency for focused states. Two pixels wide, two pixels offset. 

We want to also define the active state. Changing the active state helps user identify the menu item they click. And in some cases, defining the active state actually will help users identify when they accidentally click on a link. The active state is when you click – when you click and hold. When you press down on the link. In this case I’ve set color to a dark blue. The background color to a yellow, and then text decoration to underline again. 

We also want to define the current state. The current page that the user is on, we want to highlight that. And in this case, I’m using CSS code here. I’m targeting the nav element and I’m targeting it by an attribute. The attribute is the aria-current is equal to page. Since in the previous slide we added this to our current page, I’m now using CSS to target that and I’m going to give it a background color of yellow. I’m going to give it a text color of dark blue. And then to make it stand out from all the rest I’m going to give it a border bottom of .25ems, that’s solid and it’s a dark blue. 

I have a rendered example here. I’m not going to turn the screen reader on this time because I know it will read out my slides.

[laughter]

But we can look. Current active page has that aria attribute. So, I have it styled with a yellow background and the border below it. And then as I hover over the other links the about, I get the blue color with the text decoration. This shows me visually that I’m hovering over an item. And even the active page, if I hover over that, it goes to white. There is a visual change there that lets me know that I’m actually hovering over it even though it is the current link. 

And if I click and hold on these, they change color to show that I’m clicking and holding on it. Oh, I don’t want to go on to the about page, so I slide off of that. I will tab through these with my keyboard as well. When I tabbed through the whole page, I get the same visual effect, but the only difference now is there’s the two-pixel outline with the two-pixel offset. May not be the most visually pleasing but for the purposes of this talk it helps illustrate what we’re trying to achieve. 

All right. Now, we move – 

AMBER: Hey, Steve. 

STEVE: Yes. 

>> AMBER: Can we ask – can I ask you a couple questions that came up from people before you go on?

>> STEVE: Yes. 

>> AMBER: One was following up on the headers. Eric was wondering when is it advisable or appropriate to use headers in navigation menu?

>> STEVE: I mean if – 

>> SPEAKER 1: It’s not something that I follow –

>> STEVE: When it’s labeled by the header tag. 

SPEAKER 1 [inaudible]

>> STEVE: If you want to display an h2 on the page that that is the header, that may be appropriate. I don’t know if one – one way is better or not. Do you –

>> AMBER: One thing I could think of you might not do it for your main navigation. But I could see you doing it for navigation menus in the footer or the sidebar where you have multiple menus that are specific to a section of the site.

>> STEVE: Yes, so that sidebar menu has a heading.

>> AMBER: And that would allow the screen reader user to hear all the headings on the page and hear, in this instance, main menu and they could jump to the main menu just by the heading.

>> STEVE: Yes. In that case if you did – so, you’re in your sidebar and you have a submenu right there if you added an aria labelled equals main and you added a heading, right, it would be announced twice. Doing the labelledby, does that prevent it – well, I think it would still be announced twice, right?

>> AMBER: Yes, I think it would because it would read them; it would label them nav and then it would also read the heading. –

>> STEVE: Yes, I think it’s just the case where if you want to have a visual heading.

>> AMBER: Someone asked specifically about your CSS because you were only underlining the links on hover in this example. Wasn’t it better to underline all links or is it okay to just do it on hover like in this example?

>> STEVE: Yes, I think, typically, for any page links around the website within content you want to have the text, the underline attribute on there. The text declaration underlined. In navigation we don’t always do that. I don’t know if that’s an exception. You don’t typically see the decoration underlined in the just non-hovered state.

>> AMBER: Yes, the way I think about underlines on links is in [inaudible] there is a guideline you can’t use a color alone to indicate a link. That’s why what you were saying in body text we always use underline because that’s really the only way to distinguish a new paragraph. But in navigation or you have a link that’s styled to look like a button, you’ve done something else visually to it to denote that is a link and distinguish it from your normal text on the website.

>> STEVE: Perfect.

>> AMBER: That’s how I think about that. Sharon asked, can there be two main nav menus or two nav tags? She says, I’m developing an eCommerce website that has a navigation on top, but it also has a product category menu in the sidebar. What is the best practice and what do you recommend for menus?

>> STEVE: Yes, absolutely you can have multiple menus and you just want to make sure that they’re labeled.

>> AMBER: So that aria label would be different for each one?

>> STEVE: Yes, you would have your main navigation and then you would have – what was the second menu?

>> AMBER: A category navigation. 

>> STEVE: Yes, yes. You could have whatever that category or whatever that taxonomy you’re using is and label that menu that. Yes. Absolutely. You just want to make sure – 

>> AMBER: When they get to the first one, they hear main, then they get to the second one they hear categories or something like that. 

>> STEVE: Yes, and you typically want to – you want to label them correctly. Just don’t label it menu. You want to label it main or primary so that indicates that that’s the primary menu. Good questions. Anything else? Or good to move on? 

>> SPEAKER 2: We are getting registrations.

>> AMBER: One more thing on the CSS, Eric asked, is there any benefit to using text decoration as opposed to border bottom?

>> STEVE: I mean, I did use border bottom for the current page. This is a border bottom here and this is a text decoration. From a styling standpoint, yes, because you can control the border bottom. The text decoration we don’t have any control over it. The browser renders that. From an accessibility standpoint I think we covered. Amber had a great explanation why we don’t always have to use the underline on a nav menu, so I think that stands. I would – I would use the underline if it matters for style. If the text decoration is fine with the style that you’re trying to go for, I would use that. Good.

>> AMBER: Thanks. Yes. I think that’s it for now. There’ll probably be some more, and I think there were a few in the chat that we will probably get to as well in just a little bit.

>> STEVE: Sure. Absolutely. No problem. Now, we’ll move out to fly-out menus, sometimes called dropdowns, sometimes called submenus. The fly-out menu defines website hierarchy. It’s the second level or sometimes third or fourth or fifth level of your navigation menu. They’re important because they help reduce multiple page loads. We don’t have to click on the About page and then on the About page there’s a secondary submenu. Although, I will note that for screen reader users sometimes it’s a good idea to add the submenu links to that submenu parent page. If in the case they have difficulty accessing the fly-out menu.

Let’s move on to some markup here. Fly-out menus are nested within the list parent. I have a block of code here. I have highlighted the submenu here. You can see I’m inside of the nav tag that is – then inside of that is an unordered list and then inside of that are list items. 

And then inside the shop item link here I have a submenu which would be here. I defined another unordered list and then I have my list items in here. I have two list items inside of shop one called cart and one called my account. That’s the markup for the fly-out menu. 

Some CSS for fly-out functionality for mouse users. When a parent menu item is hovered, we want to show the submenu. This is done pretty easily with this block of CSS that I have here. I’m not going to read it out. It goes in a little bit more, but, basically, what’s happening is when that parent menu is hovered -is not hovered it’s set to display none, then when it’s hovered, it’s set to display block. 

That kind of goes quick like if you hover over it or you’re trying to get – use your mouse to navigate from the parent to the child, if there’s a gap, it will close. Or if you accidentally or somebody has a hard time controlling their mouse, they can accidentally close that. Sometimes it’s a good idea to add an additional JavaScript that will put a delay on the close of that maybe like a quarter or half a second delay before that fly-out menu will close.

For fly-out functionality for keyboard users we first want to define the submenu using the aria attribute aria-haspopup on the parent item. In the code block on the list item of the parent – parent link I have aria-haspopup equals true. Then within that list item we want to put a button toggle with aria-expanded attribute on it. The next step here, you see I have a button with aria-expanded, it’s equal to false. We want to default to false since it’s not currently showing. And then inside of that button I have added some screen reader text. 

The screen reader text is hidden to individual users. What it does is it grabs the parent’s menu item anchor link text which is shop and then I append on to that the text submenu. When the screen reader gets to that, it reads out shop submenu. 

Finally, I’m going to go through some functionality for keyboard users with JavaScript. The better – only way to achieve some of this advance functionality is to use some JavaScript. And these are what we’re trying to achieve with the JavaScript. We want the user in keyboard navigate through the parent menu items without having to navigate through all your submenus. Without JavaScript – and I’ll show this in a live example here in a minute. 

With a lot of navigation menus, you tab to the first item, and it has a submenu and then you have to tab through all the submenus, menu items, before you get to the next parent menu item and so on through the whole website. What we like to achieve when we make an accessible menu is that the keyboard user can tab to – through all the parent menu items without having to go through all the child menu items. In our example, we tab, it’s home, about, shop, contact. And then that keyboard user can be on their way. If they want to go through those submenu items, they can.

The submenu button – submenu button that we’ve added on click, we want to toggle the submenu visibility and toggle the area-expanded attribute. We’ve added an extra button, so you’ll see it in the live example here in a minute which is a little down arrow. When I go to home, contact and then I have this button for submenu the next tab will tab that submenu button and then it will announce that it’s a button that can be expanded. 

When on a submenu pressing the escape key which is the submenu and sets the aria-expanded attribute to false and returns focus back to the submenu button. We tab through; we’re in a submenu. We want to leave the submenu – we want to leave the submenu without having to tab backwards through all the links. We can just hit the escape key, closes that submenu, returns focus back to the submenu toggle button. 

And finally, we only – we only – we only want to allow the submenu, one submenu open at a time. If I open a submenu with my keyboard and then I don’t close it and I go to the next one, it’ll close that – that open one automatically before opening the next one. 

And one thing I didn’t list here that may be a little bit of a bonus is you could write some JavaScript to allow arrow keys on the keyboard to navigate through the menu as well.

We all know we have to make mobile menus. On mobile we collapse down to mobile view our website down. And we normally – the menu typically hides and then we get a menu button. We typically call it a hamburger menu denoted by the three bars that look like a hamburger. We want to make sure that this is always a button. We don’t want to use a link. If you use a link, you got to give it a roll-up [phonetic] button. 

And we want to use the area-expanded attribute on the menu toggle button. And we want to set the aria-controls to the menu’s id. We’re attaching that mobile menu toggle to the main menu. And you want it in the case where you have a submenu and if you would have a toggle on that, you want to tell – tell that button the screen reader what menu that button controls.

All right. Let’s dive into a live example. I’m going to try my screen reader again and, hopefully, we have a little bit better luck this time.

>> AMBER: Hey, Steve. Have you –

STEVE: Yes. 

>> AMBER: It was – it sounded like it was still reading the chat. Have you gone into your Zoom settings on your computer and unchecked all those boxes under the accessibility screen reader announcements? 

>> STEVE: I went to Zoom, preferences, accessibility.

>> AMBER: Screen reader alerts, and you want to check off everything and that box scrolls. I don’t know if you noticed that. 

>> STEVE: There you go. 

>> AMBER: Yes.

[laughter]

>> STEVE: That’s what it was. I didn’t scroll.

>> AMBER: Yes, it’s not – that’s a useability problem. It’s not clear that there’s a scroll box there –

>> STEVE: Yes.

AMBER: – and that there are multiple options

STEVE: Yes. Here we go.

[chuckling]

AMBER: Hopefully, we won’t hear chat messages now.

>> STEVE: Okay. Cool. All right. I’m going to show a live example, and I’m going to – this is kind of bold here but I’m going to call out a company and this company is Equalize Digital. On our current website we have a navigation menu that is accessible, but is it the most accessible, right? Probably not. But this is our current live website that we made two, three years ago. I think we had a junior dev work on so I’m not going to own this work. You can see we have –

>> AMBER: Also, I’ll jump in and say this is not custom, I mean it’s a custom child theme, but is not using a custom theme. It’s like one of the last genesis websites we built.

>> STEVE: Yes, yes. Here we have our navigation, so we get a hover state which is good. Just looking at some of the visual accessibility of it. If I click and hold, there’s not really a state there. I didn’t really see a change in that. And the same with the submenu items, I think those function the same, and let’s see active state. 

We get the active state which is the same as the hover state. When I hover over this, I’m not really getting a visual change currently on the active page. Let’s tab through it with the screen reader. Fingers crossed we’re not going to get all the chat messages here. 

>> COMPUTER: VoiceOver on Brave, Equalize Digital, vertical line, Website Accessibility Audits, Remediation, & Consulting – Brave, Window, Anatomy of an Accessible Navigation Menu, tab, equalizeddigital.com, contents selected, Address and search bar, edit text, Leaving toolbar item palette link, link, Skip to toolbar, link, current page visited, link, image, Equalize Digital, banner, visited link, link, Checker, visited link, Services, list 5 items. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: We do have an outline, which is good. Equalize Digital was good at putting an outline when tabbed to. Now it tells me I’m on this main menu. 

COMPUTER: Visited link, Bespoke Websites, list 7 items, level 2. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: You can see the screen reader is doing a good job of telling me I’m on level two once I go into this menu. The only bad thing now is that I have to go through all these items to get to the next one. Not inaccessible, but could the accessibility be better. I’m going to do that now and we’re going to see what the screen reader says. 

COMPUTER: Link, Accessibility Audits, visited link, User Test, visited link, Accessibility Remediation, link, Accessibility Monitoring, link, Web Accessibility Training, link Accessibility for Agencies, visited link, Accessibility Checker, list 5 items. You are currently on a link. To click this link, press Control-Option-Space.

STEVE: Screen reader does a good job of telling me all the links, but I had to go through all those. And I’ve seen some screen readers like some pro-users of screen readers, and they go through this stuff so fast it blows my mind. To have to do that on every website would be annoying. 

It would be nice for me to go services, yes, I’m not interested in services, let’s get over to the accessibility checkers so I can find out details about the accessibility checkers. I can get over, download that plugin and install it. Let me turn the screen reader off 

>> COMPUTER: Application, Voiceover off.

>> STEVE: Like I said, it’s not a bad menu, but could it be better, sure. It could be better. I’m going to jump over and show utilizing all the stuff we went through in the slides, what a better accessibility menu would look like. Any questions before we jump over there, Amber? Good.

AMBER: I think you’re good.

STEVE: Okay. 

>> AMBER: And then there’ll be some. 

STEVE: Sure, we can follow with questions afterwards. Here we go. I’m going to turn on screen reader again. Well, first let me jump through the visual look. Now, you can see I have the hover state like we had before. I’m trying to match the design when I redid this. Now if I click and hold, it’s a little lighter. You can see that I’m holding on it and the focus state now shows when I click and hold. 

I don’t want to click on that. That gives me a visual indicator that I’m clicking on something and maybe I don’t want to actually do that. That’s good. If I click on a link, this is a dev site so it might be a little slower than production. Now the active state I’m using blue. This is different than the hover state. When I hover over the active link, I get a visual change and the same with the submenu items. 

Let me go back home. And I’ll tab through these without the screen reader on. I get the same styles but now I get the outline, the focus state. I tab again and I have something new that I didn’t have before. This is the submenu toggle that I described in the talk a few minutes ago. 

And now when I tab again look at that, I jump right to the next parent menu item. I don’t have to go through all those submenu items. This is great, right. This tells me it’s a submenu. I go back and forth real quick. Quick navigation. I can get to what I need. 

Let’s turn the screen reader on here. 

>> COMPUTER: VoiceOver on Brave, Equalize Digital vertical line Website Accessibility audits, Remediation, & Object replacement. Character selected, link, My Account, list 2 items, link, link, Services, list 4 items. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: I can click this link. Go to that page or I can –

>> COMPUTER: Services, submenu, collapsed button, group. You are currently on a button group. To click this button, press Control-Option-Space.

>> STEVE: Now, I have something new. If I want to look through the services. I can go ahead and activate them. 

>> COMPUTER: Services, submenu.

>> STEVE: Services, submenu, great.

>> COMPUTER: Link, Bespoke Websites, list 7 items, level 2. You are currently on a link. To click this link, press Control-Option-Space. Link, Accessibility Audits. You are currently on a link, press Control-Option-Space.

>> STEVE: All right. This is as far I want to go on this one. I don’t want to go through all of these. I’m going to hit the escape key.

>> COMPUTER: Services submenu, collapsed button, group. You are currently on a button group. To click this button, press Control-Option-Space.

STEVE: I went down two menu items, and I decided I don’t want to be here anymore. I hit my escape key. I’m right back to that toggle, I can toggle back [inaudible] or I can continue on in that menu. 

>> COMPUTER: Application, Brave, object replaced, current page, link, link, link, Services, list 4 items. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: What I’m going to do here is I’m going to show going straight through the menu without having to bother with the submenu items. 

>> COMPUTER: Services, submenu, collapsed button, group. You are currently on a button, group. To click this button, press Control-Option-Space. Visited link, Accessibility Checker. You are currently on a link. To click this link, press Control-Option-Space. Accessibility Checker: submenu collapsed, button, group. You are currently on a button, group. To click this button, press Control-Option-Space. 

Accessibility Checker: submenu. Visited link, Overview, list 7 items, level 2. You are currently on a link. To click this link, press Control-Option-Space. Accessibility Checker: submenu collapsed, button, group. You are currently on a button, group. To click this button, press Control-Option-space. Application, Accessibility Shortcuts, VoiceOver off.

>> STEVE: All right. There we go. Now, we have this new and improved accessible menu that is quick and intuitive for keyboard user or someone using a screen reader. I will go through these real quick. I will open the escape key, close it out, it’s back. I leave that guy open. I go through to the next one and I click there, closes the previous one.

So how is this doing this? It’s not magic. It’s not CSS. Entirely there’s a bit of JavaScript doing this. I think we have time. I will look through some JavaScript if you guys would like to. I didn’t go through this in detail in the slides because the JavaScript for doing some of this stuff can get quite advanced and if anybody wants after this talk, I can throw this up on a gist so you can look through it or download it, use it in your own project. 

But what I’ve written is some scripts here to help achieve what we’re trying to do. I’m not going to go line by line but I’ll give you a summary of what’s going on just so you get an idea if you want to write some JavaScript for yourself on how to achieve this. 

I have some initial things that happened. One, I’m checking that a menu toggle exists. If it doesn’t exist, we don’t want to run any of this stuff, right. We’re going to go through and I do want to preference this to with that this menu is WordPress and we use WordPress to build up all of our websites. 

Without creating an advanced Walker function that goes through and walks through the nav function in WordPress and changes things, there’s something that I have to use JavaScript to do like adding the submenu button is added into that menu through JavaScript. That’s done here. 

The toggle class we’re going to add an aria-expanded attribute value to the menu, so this is for the whole menu when it expanded on mobile view, it announces. And I’ll jump back and show you mobile view here too. I forgot to show you that. We want to add a dropdown toggle button to the menu items that have children to the menu items. I’m just saying does this menu item have children, and it does. You can see down here I’m using this to build a button that adds in the classes and adds the aria-expanded that we talked about previously to it.

I add the aria attribute, aria-haspopup to menu items that have the class of item has children. This toggles the submenu when the dropdown toggle button is clicked. All this code handles when that submenu gets clicked opening of that menu, adding the aria attribute states whether it’s expanded or not expanded. And then it also grabs the parent menu text. If it’s the about page, it grabs that text and I add in submenu so it reads the button that’s called about submenu to the screen reader.

A little bit of the bonus items here are keyboard navigation. I showed you guys the escape key, when I hit the escape key, I’ve got some JavaScript that will then close that menu and then change the focus state. I went the extra mile here and I’ve got some code that controls the arrow keys on my keyboard. 

And that’s basically the JavaScript. It doesn’t look like much but it’s advanced and took a while to put together. If I’m navigating this by my keyboard, so here I’m using, I’m pressing the right arrow key. And press the left arrow key. And then I hit the down-arrow key and the up-arrow key. I don’t know that arrow keys are required for websites. I think that’s more of an application thing. I think it’s going the extra mile. We want to make this as accessible as possible.

One last thing I want to show you, before we jump to any questions if you have them, is the mobile menu. As you see as this website sizes down it turns into a mobile menu. I have my mobile at menu button here. It has the aria controls attributes on it. It knows that it controls that main menu. 

And I’ve got some of the same visual effects. I want to be able to know I clicked on that. I don’t want to click on that but I have a visual cue that I clicked on it. All the same as those links, so that opens up. And this is the same markup. It’s just been changed with the set [phonetic] the visual appearance of it. And these are the same toggles that toggle open the submenu. 

This works with the keyboard as well. I’m using my keyboard, tab key and enter key to control these. Basically, it’s the same markup, works the same. The only thing I’ve added are some media queries to control the styles of this menu and then I’ve added some style [phonetic] which is visually hidden until you get to the mobile view. 

With that, that’s kind of my brief rundown on the anatomy of an accessible navigation menu. I’m happy to field any questions if you have them. 

>> AMBER: Hey, Steve, that was awesome. Lots of people – you probably weren’t watching the chat, but lots of people were saying, good job. Elijah [phonetic} mentioned that he was working on that with the menu that they were doing on [inaudible], I think. He said, nice work. Because they had a lot of trouble with the arrow keys. They got it figured out because I know he just redid all their menus. Which is awesome. 

A lot of people are saying they love all the nerdy code.

[laughter]

>> STEVE: Good. Good.

>> AMBER: There were definitely votes for you putting the JavaScript up in the gist on GitHub. 

>> STEVE: Okay. Absolutely. I’ll do that.

AMBER: Do you want to give your Twitter? Where can people follow up with you? And then I’ll ask all the questions, but just in case anybody wants to reach you and they have to hop off here before the end. How can people follow up?

>> STEVE: I can be found on Twitter @stevejonesdev. I can be found at that handle in most places. If you want to find me on WordPress or GitHub, stevejonesdev. That’s where I can be found. I’m glad you guys like the nerdy-code stuff. That’s where I spend the primary – most of my time doing. If you don’t find me on social media, I’m probably buried inside some code somewhere. 

>> AMBER: Awesome. Let’s see. I’m going to go to the top. We have a question right at the beginning. And tell me if I’m too quiet, because someone mentioned there’s a lot of sound from background audio. I changed my Zoom settings to try to block more of that. I don’t know if that – tell me if you can’t –

>> STEVE: It sounds all right.

>> AMBER: -hear me.

>> STEVE: Sounds all right to me.

>> AMBER: Okay. Awesome. Tara asked about, they’re using Beaver Builder. They said we’ve started making the top page in the navigation not linked to a page, but just open the dropdown. First having the dropdown show on hover. Clients don’t want to put content in the top level so we put the quote top-level page as the first listed page in the dropdown. And this seems to work with tab navigation, but they wondered how this measures up. Any thoughts? 

And if you look to the Q&A, they actually posted a link to WashingtonWaldorf.org. You can open that if that would be helpful to you in answering this question about how they’ve been handling nav menus with the top item.

>> STEVE: Where’s the link? 

>> AMBER: It’s in the Q & A up at the top, Tara’s question.

>> STEVE: All right, Tara, there’s your website. You’re saying that this, is this what we’re looking at? Using, I’m assuming this is using JavaScript to block the default functionality. Yes, yes. 

>> AMBER: It’s like coded as a link but you can’t click it. 

STEVE: Yes. This comes up a lot. A lot of times what you’ll see is people will actually put in a hashtag to nullify that link. Actually, don’t think this is good. I don’t think this is probably the proper way to do it. And using Beaver Builder, you probably are limited on your options of what you can do. It probably should be a button, right, Amber? 

AMBER: Yes, if it doesn’t, if it just opens the dropdown, it should be – so it should be either be coded as a button not a link, or if you don’t have the ability to do that, maybe they could add role equals button to that link. I don’t know what the options are in Beaver Builder. 

>> STEVE: Yes. You can write some JavaScript – 

>> AMBER: Can you just zoom in, just to type it in your console there. Hit command plus a few times. 

>> STEVE: Sorry. 

>> AMBER: Thanks. My eyes are getting old.

[laughter]

>> STEVE: I think I lost where I was though. Hold on. Here. I was on this about. If I go in here and do like aria-role equals button, like that. That would probably make it more sufficient. 

>> AMBER: They probably, also, need aria-expander, though, right? It would have to denote whether or not it was open or closed. In this instance it would be true, but the other ones would be false, right? 

STEVE: Right now, it would be true. If using Beaver Builder, the way you would have to achieve this is with JavaScript. You’re going to have to target the parent menu items, which I’m sure there’s a way to do that. And then you would have to add the attribute aria-role equals button, and then you would have to add aria-expanded equals true. 

And then when that button is clicked, you would have to use JavaScript to change aria-expanded to true. It would start out false. And then when it’s clicked, you would toggle it back-and-forth when this is being clicked. That would probably get it be more accessible. 

As you have it right now, I would probably say I would probably say it’s not – a screen reader – if I’m a screen reader user and I make it here and then it tells me it’s a link and then I’m trying to click on it. I’m hitting my return key and I can’t. Should I try VoiceOver? 

>> AMBER: Yes. That would be interesting to know because I’m guessing it doesn’t announce when the dropdown is opened. They wouldn’t even – they might just think – 

>> COMPUTER: VoiceOver on brave, Washington Waldorf School vertical line Washington Waldorf School – Brave, window, entering, contact, Perspective link, About, list 7 items. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: Yes. I clicked the link, but it’s not telling me anything. I don’t – if I’m blind and I just clicked this, I have no idea what’s going on.

>> COMPUTER: Link, About WWS, list 6 items, level 3, You are link, Faculty link, link, link, link Health & Safety Information, list 5 items, level 3. You are currently on a link. To click this link, press Control-Option-Space. Link, Link, Link, About, list 7 items. You are currently on a link. To click this link, press Control-Option-Space.

>> STEVE: And I can’t close it.

>> AMBER: If you press the return key, it doesn’t actually close it.

>> STEVE: No, I can’t escape, use the escape key either. I think it’s going to be confusing. You typically don’t want to block the default functionality of an anchor link with JavaScript. It’s just going to confuse the screen reader.

>> COMPUTER: Application. VoiceOver off.

AMBER: Thanks. Let me see what other questions we had. Hopefully, that fully answered your question, Tara. So, Darren, this wasn’t a question, but I thought this was a good point. Darren said, that they use when they are adding headers into complex menus that are broken into columns. You might add headers into mega menus, maybe?

>> STEVE: Yes.

>> AMBER: In response to the discussion earlier.

>> STEVE: Yes, I think, we’ve done that before, right? Now, I will – the caveat is that mega menus are difficult for screen readers. You have to do a lot to make sure they’re accessible. We’ve had at Equalize a mega menu that we created.

AMBER: That’s a good follow on. Diane asked, are there any accessibility differences between dropdown or a mega menu? 

>> STEVE: Yes, I –

>> AMBER: Can we talk about this for just a minute. I know you don’t have a lot of time. 

>> STEVE: No, no. From a developer standpoint any time a mega menu is requested, that, no, no, I don’t want to do it. I typically would shy away from doing a mega menu altogether if accessibility is of the utmost. With Equalize Digital it always is. If it’s not accessible, it’s broken.

But you could achieve it but it’s going to take a lot more work. It may even require you to do something custom. What plugin – we used a plugin in here. And I want to put a disclaimer on this website. 

>> AMBER: Max Mega Menu? 

>> STEVE: This mega menu, it’s accessible but it’s not accessible beyond accessible like we’ve been going through, taking the next step. Just because you’re working with a mega menu there’s a lot of things inside of here, there’s buttons inside here. This is almost like a modal. You could treat it more like a modal than even a popup. 

>> AMBER: Not to totally throw a client under the bus but I think we had those all coded as buttons and they made us [inaudible] they wanted them to link, if you clicked them. 

STEVE: That’s definitely true. That is the case where we actually – Amber put in the request for the dev teams to change these to buttons and we did which is not super easy. You got to write some JavaScript to target the link and then you got to change it to a button.

Since we’re using this plugin, I can’t just edit the plugin files of this Max Mega Menu plugin or whatever we used. We changed them to buttons to function the way that we just described but the client then wanted them changed back to links. So sometimes you run up against these things with clients. When you’re trying to meet accessibility, exceed accessibility, and then the client pushes back. We have to do the best we can within what the client wants.

You’re needed, Amber. 

>> AMBER: I don’t think there’s – that any of those mega menus [inaudible] are great out of the box. I think this one is the closest, but still requires fixes. There’s a lot of menu plug-ins if you’re looking at them just go on your demos and try to tab. Half them don’t even open. They don’t have keyboard functionality. I would be really cautious. And I definitely second what you said, Steve, which is, if you can talk a client out of a mega menu, that’s the best bet.

Let’s see follow-up on, did you use CSS keyframe animation to delay the close on your menu?

>> STEVE: On this menu? 

AMBER: Possibly. 

>> STEVE: On this one I don’t believe I have a delay.

AMBER: Do you think a delay is important or helpful? 

STEVE If you look at our correct menu here, I am or whoever made this, I think this is Genesis, right? I don’t know that there is – There might be a slight delay on this one. Even given the animation that comes in here. I don’t know. Still doesn’t look like there’s much of a delay. I think that a delay would be a good addition to this. 

Just a few milliseconds to where if you have a user who has tremors or elderly person that’s not super precise or even a child; children are not super precise. That it would – if they kind of veered off here for a second, or for a fraction of a second, then it wouldn’t close right away, so actually don’t have a delay on here, maybe that’s something we should add in.

AMBER: I don’t know. I don’t know much on delay recommendations. I don’t think there’s anything to look in [phonetic].

[background voice speaking]

>> STEVE: Yes, just going the extra mile, right. Where I’ve done delays before is when you run in the scenario where – if you’re mousing from the parent down to the submenu, it doesn’t disappear. I had that really you lose it then you can’t get it back. You go back over the parent guide and you’re I’m going to go over it quick this time, right. I made it.

>> AMBER: It sounds like it’s too big between them. There’s a margin or something where they don’t.

STEVE: In this instance we don’t have the margin, we don’t have a gap there. And even for a mouse user, the way I have this coded, I can actually toggle that and now my menu is open. And I know from a development standpoint sometimes it’s nice when I am styling my menus, I can leave it open without having to go into the dev tools and fake a hover state.

>> AMBER: Tara was asking can she have an aria popup and aria-expanded attributes on the same button element. T

>> STEVE: The aria popup doesn’t go on the button, right? 

[background voice speaking]

>> AMBER: Well, you would have aria as popup to indicate that something has, but I don’t think you would call this a popup. I think that’s more like if you have a button that triggers a modal 

>> STEVE: Yes. 

>> AMBER: I don’t actually have any examples of those right now. I think you – – I think you could. I don’t think there’s a reason why you can’t. But what I think about that I expect a popup to exist when there is a modal and when the modal opens, you should not be able to leave focus on the modal so there’s no point in adding aria-expanded true on the button because you shouldn’t be able to reach the button while the popup is open. 

>> STEVE: We are adding aria-haspopup. Can you guys see that? 

>> AMBER: Oh, are we? 

>> STEVE: We’re adding it to the parent in the parent menu item, aria-haspopup true. This is the parent menu item. This is our toggle button, and this is our submenu. 

[background voice speaking]

We’re denoting that the parent list item has a popup. It’s not on the button. It’s on the parent list item. I don’t know if that’s overkill. When I run the screen reader, it doesn’t seem to trip up on it. 

[background voice speaking.]

>> AMBER: I don’t know. That might do a little more investigation on that. Let’s see does anybody have anything to say in the chat. Glenn says, you can technically have both aria-haspopup and aria-expanded on a button but it’s not a good practice, use one or the other. Which is what I was thinking, you could. I don’t know why you would, I guess.

>> STEVE: Right. It’s in the chat, Glenn put there, yes. Current code shows the list item with aria-haspopup but the list item will never receive keyboard focus, so it won’t announce it. This is just overkill, it’s not needed. That list item does not receive focus. Thanks Glenn.

>> AMBER: Let me see. I know we don’t have a ton of time so I’m going to try to look through this. Josh asked, assuming they follow best practices, is there an advantage to a quote fly-out menu versus an on-page submenu, for example, on a sidebar from an accessibility perspective? 

>> STEVE: If you want to be extra accessible, both is probably the best way to go. Having the fly-out is a good idea because it allows for quick navigation. It allows the user to get the visually and cognitively get an idea of the structure of the website. It reduces page load. If I have a file menu for about, it’s got list items under it, I can hover that. I can choose the page I want without having to load the about page, and then find the submenu and then go to it. 

But in the cases where for whatever reason a user has a hard time getting to that fly-out menu or misses the fly-out menu or in the case in the example we looked at where it didn’t read out that it was a submenu. Maybe they just went on or they went to that page, and when they were on that page, then there’s more items. 

I would probably err on the side of having both is probably the best for accessibility. I don’t know it’s necessarily required to have both or it’s better to have one or the other. If I had to choose, I would probably choose the fly-out over; if I’m choosing one or the other, I would probably choose the fly-out.

>> AMBER: There is a Wicket guideline multiple ways which is you’re supposed to get multiple ways for people to find content, and I think having a visible on-page submenu is that would be one way that you could achieve the multiple ways. Having the navigation also on your right sidebar on every page or a footer submenu, that sort of thing. 

>> STEVE: Yes, both is probably the best. 

AMBER: Eric asked, do you have a custom nav walker to set some of the main menu attributes or are most of those customizations done with the JavaScript that you showed us? 

>> STEVE: No, I did not create a nav walker. It’s all done with JavaScript which I briefly went through. 

>> AMBER: Is there any pros or cons to doing it with JavaScript versus running a nav walker?

>> STEVE: Yes, there’s probably a con, JavaScript is disabled. The pro in writing custom nav walker would be, or dare I say, coding your own menu function from WordPress. It would probably be easier just to do a nav walker. If for some reason they don’t have JavaScript enabled, that these attributes would still exist. I would give a little bit of a con to JavaScript over actually doing a nav walker that would then generate it as real markup, HTML markup on the page.

AMBER: Yes. Sandra asked the question which might be a quick answer. I think this is a response to VoiceOver telling you to press control plus option plus alt plus space. She said, would that be problematic with people with mobility disability in their hands having to press three simultaneously seems like it could be an issue. I don’t know if you want to answer that one but –

>> STEVE: I don’t know. I know that the enter key or return key works. When it said that, I didn’t do that. I didn’t press control, options, space. I pressed the enter key.

>> AMBER: The other thing just to note, that’s default on VoiceOver, but you can change your keyboard modifier in VoiceOver and you can customize then. If somebody has a problem with pressing three you can say I want to use my CapsLock button as my keyboard modifier. And you can set what those are. 

A slight pitch for come to our VoiceOver training with [inaudible] and he will teach you about all the different settings in VoiceOver.

Ann wants to know what are your thoughts – so we have our captioner until 11:45 Central, so I think we can squeeze in two more questions and if we don’t get them, please reach out to Steve or us. You can find him on Twitter if you want a quick answer there. 

Anyway, Ann is wondering what are your thoughts on a hamburger menu on the desktop view?

>> STEVE: I feel it was cool for a minute [chuckle] but I would probably not do that. I think you’re going to run the risk of somebody just ignoring your navigation altogether specifically a sighted user. I would just shy away from doing that. I don’t know that we have ever done that on a website project. So, I think it’s best.

[crosstalk]

>> AMBER: Making people have extra clicks to find things.

>> STEVE: Your website’s goal is to get the information to the person as quick as possible and as easily as possible, so I would shy away from doing that. 

>> AMBER: I think this is a good one to wrap up on. I know we’re going to share more of the code and everything, but someone asked specifically what would you need to do to replace a menu in an existing theme. And I know that’s what you’re doing for us. You’re not giving us a whole new theme, you’re replacing that. Could you talk a little bit about maybe some of the things you have to think about as you are doing that or how you would even find files to figure out what to modify, obviously, I recognizing it will be different for every theme.

>> STEVE: Yes, it’s different for every theme and you’re entering into a world of CSS that is different every single time. And there may even be Javascript on a website doing stuff with the navigation or maybe even a nav walker., who know. You got to check for those things. 

What I did on this website since its Genesis, I had to filter out the menu, the Genesis menu, remove it. And then I added in my own markup for the menu. Let’s see if I can find it. I don’t know if I can find it. Let’s see navigation –

>> AMBER: Also, could you maybe zoom it and [inaudible] in. 

>> STEVE: Yes, yes.

>> AMBER: You literally removed the menu that Genesis put into the theme.

>> STEVE: Yes, I did. And then right here I added in my own menu. I didn’t use a menu location, but I used the WP nav menu to output my menu. And then I just had some markup that I use with all this Javascript that’s written here that coincides with that. 

Some of this could probably be streamlined. Some of the markup I could probably output a menu container. Well, I am outputting a menu container here. I could probably streamline some of this if I wanted to go through and update all this Javascript. I output my – this where I’m setting the aria label for the nav. This is the HTML markup and then it outputs the WordPress menu here. And this is my mobile menu button here.

This gets added as an action to Genesis header. 

We don’t use Genesis. We haven’t used it for several years, but this is one of our last builds. We used to build everything on top of Genesis.

>> AMBER: Did you have to look at all the books again.

>> STEVE: Yes, it’s Google right. You Google and you figure out how to remove -I don’t remember how I removed the nav. It was probably removed the output of the nav here with Genesis and then I added this to add in mine. And then I have my Javascript which I have gone through and then just with any site, you’re going to have to style it. Now, this is the Genesis.

>> AMBER: Did you reuse any of the Genesis classes to try to keep styles or did you just do all from scratch?

>> STEVE: This is a little bit of a code base that I already had. I’ve used on multiple other websites. I’m trying to move quick, and I did this in a couple of hours yesterday, so, I’m bringing over – this was the initial navigation styles for Genesis that we had four years ago. Did we make this website four years ago, that can’t be right. Maybe it was.

>> AMBER: You converted it to SASS. Genesis wanted to have SASS. And you changed it.

STEVE: Yes, yes. That’s a good point. That’s what it was. Four years ago, I converted this to SASS. And this is a little insider tip if you guys can tell. We had a different name before Equalize Digital. Not officially but we threw it around. A little inside shop for Equalized Digital. 

This was the original Genesis styles. And there’s another Genesis menu on the website in the footer. I couldn’t just get rid of them because they were controlling styles in the footer, so I added my styles here. This is for my toggle, for the mobile map toggle and then my accessible styles here. Just like with any website the styles can get out of hand. You have to write a lot. You have to account for responsive screen sizes. That’s kind of what I did. Now everything is huge. Here we go.

>> AMBER: Well, thank you so much, Steve. This has been really awesome. I’m so excited for you to push that live. I know that’s a thing you’ve been talking about for two years probably wanting to fix that nav menu. 

>> STEVE: Yes, yes.

>> AMBER: Thank you everyone who stuck around. We’ll the recording up and some code, well, the recording will take a few weeks, one to two weeks, but we’ll have code. Steve will have some of that extra code up here in a few days. And we appreciate you hanging out with us and look forward to seeing a new and improved nav menu on our own website.

>> STEVE: There you go. Thank you, guys. 

View “Anatomy of an Accessible Nav” GitHub Slides.