Aria Controls for creating a mobile navbar

A direct quote from Mozilla Aria Controls

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

As web pages became more complicated, some common html attributes were added to html 5 for use rather than using div tags for every component. Some of these components include <nav>, <footer> tags. This enabled screen readers the chance to recognize these components. Otherwise, how would it determine which div tag is the navigation bar?

Some basic information can be found: WAI ARIA basics

The WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) defined some html attributes that can be applied to common elements. These can be broken into three main areas: — Role, Properties, and States. (Definitions, bullet list of each area)

For this blog, the properties are relevant.

Properties — These are properties of the html elements which give extra meaning or semantics. One example, aria-required=”true”, signals that a form item is required.

Now that you have a basic understanding of what Aria is, let’s focus on this aria-hidden property.

The main steps to creating the mobile navbar will be:

1. Style the menu for the desktop version (Not shown here)
2. Set the menu icon to be hidden by default.
3. Set a media query to show the icon when the page size is reduced.
4. Use the aria-expanded property to style the menu based on true/false
5. Use JavaScript to toggle the property.

Here is a snippet of a nav bar:

In case you are not aware of the item in the span, this “&#9776” results in ☰ when the page is rendered. This is the menu to select on the mobile application. But, this should be hidden when the desktop version is used, and shown on mobile.

2. Set the menu icon for mobile to be hidden by default

The navbar Component in Html has this aria-expanded property here. The button attribute also has an aria-controls name which will be used later in the css code.

In the CSS, the button is selected by the aria controls, the display property is set to none:

[aria-controls="navbarDropdown"]{
   display: none;
}

Remember, this is the defined behavior for the desktop version.

3. Set a media query to show the icon when the page size is reduced.

Next, a media query is setup to modify this when the screen size is reduced. The media query is set up for 768px, a common Ipad or tablet size. This property is changed to display:block. Now it will be visible to the user.

@media screen and (max-width: 768) {
[aria-controls="navbarDropdown"]{ display: block;}
...

When the screen size is reduced, the media query kicks in and now the menu is shown:

4. Use the aria-expanded property to style the menu based on true/false

Next, the menu has to be expanded. This is when the expanded property comes into play.

@media screen and (max-width: 768) {
...
[aria-expanded="false"] ~ ul {
    display: none;
}
[aria-expanded="true"] ~ ul {
    display: block;
    position: absolute;
    right: 0;
    top: var(--size-50);
    background-image: linear-gradient(to right, transparent,          rgba(255,255,255, 0.7));
    width: 100%;
    text-align: right;
    box-shadow: 0px 0px 20px rgba(52, 49,75,0.3);
}
...

When the aria-expanded property is false. This menu is hidden. This is the image shown above. When the menu is pressed, the property is changed to true by JavaScript, and the [aria-expanded=”true”] is used to style the components.

For reference, this is what it looks like when the menu is expanded:

5. Use JavaScript to toggle the property.

The last piece, is the JavaScript to modify this property.

The navButton is selected by the aria-expanded property. A function is defined to toggle the property, and the function is added to the button event listener. Now, the expanded property is modified when the button is pressed. This takes care of toggling the property.

I hope you can now make a mobile-responsive navigation bar. Happy coding!