In my previous post I covered some of the basic steps I took to make my site navigation more accessible. In the second installment I want to finish up by taking an accessible approach to both indicating the current page and making the menu responsive.
Indicating the current page
Although not essential it’s nice to give users some type of indication of which page they are on. Unfortunately most people rely only on visual styling to achieve this, which leaves out a significant portion of their audience. I’m certainly guilty of this, in the past I’ve simply applied a class attribute of “current” to the current link and styled it accordingly. Thankfully there is a quick and easy way to indicate the current page to assistive technologies that also allows you to easily style the related link. The ARIA attribute aria-current allows us to represent the current item from a group of related elements, such as pages in a website. It’s similar to
aria-selected except that aria-selected is designed to represent an element selected by the user and is more suited for widgets like tabbed panels whereas
aria-current is more suited to pagination. To indicate the current page I simply needed to modify the current page’s link to this:
That’s easy enough but because I build my site with Jekyll I needed to figure out a way to apply the attribute to individual pages. My menu is so small I decided not to bother generating it dynamically so it’s hard coded into my default layout template. That means the same menu is included on every page, as the default layout template is used throughout the entire site. In order to apply the aria-current attribute to the proper link I would need some way of indicating that the page being built is the current page. For that I turned to page variables. In the front matter of each page I can simply include a variable that tells Jekyll that this is the current page. Then in my menu I can use some conditional logic to check for the variable and apply the attribute when it’s found. So in my front matter I would add a variable like this, with the value of the variable indicating the current page:
Next I modified my menu to check for the variable and apply the attribute to the appropriate link. You might notice that the link to the blog evaluates two variables. That’s due to me also using a layout variable so that I don’t have to include a page variable in every single post. It’s a new quirk of Jekyll 3 that tripped me up initially, so I will probably blog about it later. So my menu now looks like this, note the conditional logic that evaluates the page variable:
To finish the process and indicate the current page visually I added some basic attribute selectors to my CSS like this one:
Making the responsive accessible
With the basics of my menu out of the way it was time to think about how to make it responsive. Even though the menu is super small it still takes up a fair amount of room at small screen sizes, so I wanted to remove it and give the users an option of showing and hiding the menu. I considered some offscreen navigation patterns but in the end I decided to simply toggle the visibility of the menu on and off. Part of this was driven by the fact that I was basing my redesign off of the blog I designed for my Jekyll for Web Designers course. Since coding is rather tricky for me if I could reuse elements from that blog it would be a real timesaver.
In my menu I replaced this from the previous menu:
It’s cleaner, more semantic, and comes with keyboard accessibility already baked in.
Then in my CSS I added styles to my small screen Media Query to initially hide the menu and then show it when the toggle button is clicked:
Although my menu is functional and keyboard accessible it’s not as accessible as it should be. Since the menu has states that are controlled by a toggle button we should report those states to assistive user agents so that their users will know if the menu is expanded or not. Once again ARIA comes to our rescue with the aria-expanded attribute, which allows us to indicate the current state of a collapsible element. I’ll also need to indicate that the menu button controls the toggling of the menu. For that I’ll use the
aria-controls attribute. With that in mind I modify my menu button to look like this:
This tells assistive user agents that the button controls the menu and that its current state is collapsed. Since it is a toggle we will need to modify our script to change the value of the attribute as the menu is expanded and collapsed:
As an added bonus I can now change the visual state of the toggle button based on the value of the aria-expanded attribute. I added the following rule to my CSS:
My final menu, toggle button and all looks like this:
Even though my menu is incredibly simple I hope that this series of blog posts show how much thought should be put into making your navigation accessible. Navigation is a critical and essential part of any website if it is not accessible it can severely impact the usability of your site. For more information check out the W3C’s tutorials on accessible navigation. Feel free to reach out to me on Twitter or through this blog to discuss anything covered in this post!