This UX Accessibility Blog Series, “Setting Up An Accessible Web Page,” will walk you through the basic elements of an accessible web page in hopes that you can take what you’ve learned and apply it to more complex pages. This blog series is loosely based on Heydon Pickering’s book “Inclusive Design Patterns: Coding Accessibility Into Web Design.”
Sometimes, to save screen real estate, it is necessary to use a menu icon to denote that the navigation region can be toggled into view. This is very common on small interfaces, such as smart phone screens. Using the hamburger icon to denote a collapsible menu has become convention for showing that menu options can be shown or hidden.
Why do we need an icon at all? Specifically, why the hamburger menu icon (glyphicon-menu-hamburger)?
It’s been long established that images help sighted users comprehend the meaning of certain functions faster than text alone. This is especially helpful when your target audience consists of users that could speak different languages or have poor reading ability. However, this doesn’t mean that we should remove text all together and only use icons to denote meaning. Newer internet users may not understand the meaning of a glyphicon, but they can read the word “menu” next to the icon and understand from then on that icon means “menu”.
The hamburger icon represents a list. As discussed in the “Site Navigation” blog post, navigation sections are conventionally denoted by using an unordered list. The three horizontal lines of the hamburger icon are used to represent a list. Assuming your navigation mimics a list, this greatly assists the inclusivity of your web page by following convention. As Heydon Pickering says in Inclusive Design Patterns: Coding Accessibility Into Web Design, “convention is a friend to inclusion.”
Glyphicons vs SVG
In his book, Pickering recommends using SVG to render icons. SVG stands for Scalable Vector Graphics and, according to Wikipedia, is an XML-based vector image format for 2D graphics that supports interactivity and animation. SVG images and the behaviors associated with them are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. This can be extremely helpful when it comes to accessibility. SVGs also have the ability to change with the text color. Therefore, if a user has their browser set to invert colors, the SVG will change colors just like the text.
However, SVGs can be a bit more complicated than just using glyphicons, especially since glyphicons come standard in Bootstrap and Ensemble. Since glyphicons are a text font, they tend to behave like text. When the user resizes the screen or inverts the colors of their browser, the glyphicon will react to these changes just as text would. The only downside to using icon fonts is that some users may choose a different font that doesn’t play nicely with glyphicons, such as users have dyslexia and change fonts to reduce the difficulty of reading.
When using a menu hamburger to show that your navigation region is collapsible, it is important to use the aria-expanded attribute to allow assistive technologies to communicate the state (collapsed or expanded) to the user. If your menu is collapsed by default, add aria-expanded=”false” to your menu button. Make sure that the value of the aria-expanded attribute toggles between true and false depending on if the menu is expanded or collapsed.
When considering against using a menu hamburger or any other convention for an element, consider the implications on your users. Especially in the case of collapsible menus, it’s important to follow convention and communicate the menu’s state to maximize the odds that your users will understand exactly what you’re trying to convey.