How to design an accessible navigation system for a website?
In the recent years, accessibility, inclusive design and universal design topics are more and more popular in both Norway and Europe, however, when talking about accessible design, most people will think it’s only something to do with coding and UI design.
After I have listened to a podcast by UXCoffee about how blind people used digital products, I realized that how difficult it’s for them to use the same applications as us. Because of this, I decided to search for accessibility design and share my understanding with you.
In this article, I will talk about how accessibility is relevant to information design, then narrowing it down to the navigation system and provide some guidelines for designing an accessible website navigation system.
What’ accessibility for websites
According to W3 in Introduction to Web Accessibility,
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, interact with the Web and contribute to the Web
Accessibility for whom
Web accessibility includes people with all kinds of permanent disabilities including sight, hearing, mental, mobility and speech.
It also benefits people without disabilities, such as:
• older people with weaker abilities due to ageing
• children have inadequate reading skills
• people with “temporary disabilities” such as a broken arm or lost glasses
• people with “situational limitations” such as in bright sunlight or in a noisy environment
• people not familiar with the web
Three Conformance Levels
There are three levels of conformance to WCAG guidelines:
Level A: minimum level of conformance, the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
Level AA: medium level of conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
Level AAA: high level of conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.
An overall review of accessibility is described in the following sketch drawn by Krisztina Szerovay, a UX designer and founder of UX Knowledge Base Sketch.
Why Do We Need Accessible Design
It’s important to note that there are over 1 billion people worldwide who have a disability, 15 to 20% of the whole population is either permanent or temporary disabled. And when we grow old, we will become part of them, suffering from losing sight, hearing and cognition ability.
As designers, we have the power and responsibility to go one step further and provide an accessible website for them. This is not out of mercy, it’s to protect their rights to enjoy the product as any normal users.
What’s more, according to web accessibility on Wikipedia, it’s illegal for websites that fail to follow a Norwegian regulation, which requires compliance with Web Content Accessibility Guidelines 2.0 (WCAG 2.0) / NS / ISO / IEC 40500: 2012, level A and AA with some exceptions.
What’s Information Design and Navigation
In Information Architecture for the World Wide Web, there’s one definition about Information architecture (IA) as “the synthesis of organization, labeling, search, and navigation systems within digital, physical, and cross-channel ecosystems”(Rosenfeld, Morville and Arango, 2015) the goal is to help users locate and understand the content.
IA is crucial to users’ experience of a website even though itself is often invisible. It’s like the skeleton of animals which make them into different creatures, IA decides fundamentally whether the content structured in a way meeting users’ expectation. And the navigation bar is the most important design element among all IA components.
As Nielsen Norman Group stated in The Difference Between Information Architecture (IA) and Navigation,
The Navigation components include global navigation, local navigation, utility navigation, breadcrumbs, filters, facets, related links, footers, fat footers, and so on.
A poor navigation design can cost much more time for users to find useful information, you may even lose a potential user. And for a disabled user, this can only be worse. Therefore, let’s start with the navigation system.
Practical Guidelines for the Basic Level of Accessible Navigation System
Consistent layout
Ensuring that all sections of your page are descriptively labelled as landmarks and the names of labels are consistent. Prioritize the contents of your page, which means, the most important thing should be always at the top whereas the least relevant should be kept at the bottom. Repetitive components such as headers, footers and sidebars should stay on similar locations across pages, as this will help users understand the layout of the website and can skip irrelevant sections confidently.
Assist Keyboard Navigation
As Pablo Stanley mentioned in Designing for accessibility is not that hard
Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content.
The big difference between the keyboard and the mouse is that keyboard navigation is linear, following a specific order, whereas with a mouse you can reach wherever you want. Therefore, it’s very important to make sure the focus order follows the visual flow of the page. Very often it’s from left to right, top to bottom, from the header, main navigation, content buttons and inputs, and finally to the footer. Use the Tab key to navigate and the Enter key to select items on your site.
It’s also important to provide obvious keyboard focus so that keyboard users know where they are on the page. It can be a thin grey dotted line or a blue solid border depends on the default setting of the browser.
Make sure there’s no keyboard trap, which is almost the worst experience a blind user can have. A “keyboard trap” occurs when a person who uses a keyboard cannot move focus away from an interactive element or control using the keyboard alone. For example, assigning a negative tab index to a Flash can prevent users from getting trapped in the Flash.
Allow Users to Skip Content
NNG claims in Keyboard-Only Navigation for Improved Accessibility, because the access to the links on the screen is sequential, in some cases, users have to tab through 100+ navigation elements to get to the main content, which is difficult and time-consuming. To make it worse, when user browses through different pages within one site, he needs to keep listening to the repeating header if the header is the same. It will be very useful if there is a skip option guiding them directly to the main content area or the other components. The most common way is to add a hidden ‘Skip to Content’ link in your header.
Provides Keyboard Shortcut
There are some keyboard shortcuts examples on WebAIM. Providing keyboard shortcut to users can help them navigate through pages more efficiently.
Twitter provides j and k for users to move forward and backwards between different tweets in your timeline. Pressing enter key opens the detail page, while g+h combination brings you back to timeline.
Another example is Facebook. You can also use j and k buttons to skip through different posts on the timeline with while enter/return key to see the details.
If you use safari on mac, you can reach different pages of Facebook by clicking ctrl + opt + # and replace # with the number key for where you want to go.
Although keyboard shortcuts are very convenient, there’s something important to notice if you want to add this feature to your website. Remember to spend some efforts on the shortcuts design in order to fit the context.
Add an Accessibility Menu
If your screen reader is activated, the navigation assistant, which is an alternative to the main navigation and only consists of three dropdowns, is always the first element on the page.
If not, you can simply press alt + / to open or to close it. You can use left or right arrows to shift among the 3 dropdowns, up and down arrows to choose items within each dropdown menu.
Conclusion
That’s it. I hope these basic guidelines can help you when you design the information architect for a website and meet the Norwegian standard. Keep your layout consistent, provide usable keyboard navigation, appropriate keyboard shortcuts and definitely avoid keyboard trap. If still have time, go for an accessibility menu.
As the first sentence on apple’s accessibility page,
Technology is most powerful when it empowers everyone.
I know the way to accessible design is not easy and we are always driven by business benefit, I still wish you can stop for a while and consider these guidelines as part of your design process. If possible, involve some disabled users in the user research stage and test continuously throughout the whole product development process.
Due to the time and words limit, I could only cover the navigation topic in the blog post. But I will keep learning accessibility design, practice them on my design projects and share my experience in the future. Feel free to leave comments and share your knowledge with me.
Reference
UX Coffee 设计咖. (2019). UX Coffee 设计咖. [online] Available at: https://www.uxcoffee.com/episode/72 [Accessed 24 Nov. 2019].
Apple. (2019). Accessibility. [online] Available at: https://www.apple.com/accessibility/ [Accessed 24 Nov. 2019].
Facebook.com. (2019). How can I navigate Facebook with keyboard shortcuts? | Facebook Help Centre | Facebook. [online] Available at: https://www.facebook.com/help/156151771119453 [Accessed 24 Nov. 2019].
Help.twitter.com. (2019). How to Tweet. [online] Available at: https://help.twitter.com/en/using-twitter/how-to-tweet [Accessed 24 Nov. 2019].
Material Design. (2019). Accessibility. [online] Available at: https://material.io/design/usability/accessibility.html#hierarchy [Accessed 24 Nov. 2019].
Medium. (2019). Accessibility. [online] Available at: https://uxknowledgebase.com/accessibility-e98a00c71dc7 [Accessed 24 Nov. 2019].
Medium. (2019). Designing for accessibility is not that hard. [online] Available at: https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 [Accessed 24 Nov. 2019].
Nielsen Norman Group. (2019). Keyboard-Only Navigation for Improved Accessibility. [online]
Available at: https://www.nngroup.com/articles/keyboard-accessibility/ [Accessed 24 Nov. 2019].
Nielsen Norman Group. (2019). The Difference Between Information Architecture (IA) and Navigation. [online] Available at: https://www.nngroup.com/articles/ia-vs-navigation/ [Accessed 24 Nov. 2019].
W3.org. (2019). Web Content Accessibility Guidelines (WCAG) 2.0. [online] Available at: https://www.w3.org/TR/WCAG20/#conformance-reqs [Accessed 24 Nov. 2019].
Web Accessibility Initiative (WAI). (2019). Introduction to Web Accessibility. [online] Available at: https://www.w3.org/WAI/fundamentals/accessibility-intro/ [Accessed 24 Nov. 2019].
Rosenfeld, L., Morville, P. and Arango, J. (2015). Information architecture for the World Wide Web. 4th ed. O’Reilly, p.22.
