Naviagation, flow, and testing it all

This article is part of a larger series written by Benedict Ampea-Badu on including accessibility in your design thinking. You can find the list of series articles here.

In this last segment of the series, we’ll delve into the crucial elements of navigation and flow, exploring further the part of web accessibility that ensures users can effortlessly navigate online content. Additionally, we’ll shine a spotlight on the indispensable practice of regular testing, an ongoing commitment that goes beyond compliance, providing invaluable insights into real user experiences and fostering continuous improvement.

Ensuring a seamless online experience for everyone and facilitating smooth navigation boils down to adhering to the fundamentals of web accessibility. It boils down to carefully planning how websites are laid out, making it easy for users to explore different things effortlessly. When developers grasp how users interact and tackle possible issues, they go beyond just ticking boxes on a checklist. Instead, they create websites that truly put users first, considering how people actually use and prefer to browse.

As we discuss further to topic of web accessibility, keep in mind that, it’s more than just adhering to a set of rules. As established earlier, it is an ongoing commitment, outlined in a simple guide that adapts to the ever-changing digital world. Our aim, in the end, is to build an online space where everyone’s needs matter. The big picture is creating an environment where equal access isn’t just a concept but something real. It means crafting an online experience that not only follows the rules but is genuinely welcoming to all users, no matter their abilities or backgrounds.

Navigation and Flow

Navigation and flow are fundamental aspects that shape our online experiences. In the digital experience, navigating through websites and smoothly flowing from one piece of content to another is crucial for users to find what they need effortlessly. Imagine a well-designed road map that guides you seamlessly through different destinations – that’s the essence of navigation and flow on the internet. The WCAG 2 concepts ensure that users, regardless of their abilities, can easily discover and explore web content, creating a shared intuitive and enjoyable online experience. If you need a refresher in the guidelines, go to https://www.w3.org/TR/WCAG22/

For Navigation and flow, we will mainly focus on Guideline 2.4 (https://www.w3.org/TR/WCAG22/#navigable), which highlights all the requirements concerning navigation and flow. Websites built with this guideline provide better accessibility for diverse users, particularly those with disabilities, by facilitating the discovery of web content and navigation of the website.

Finding relevant content and keeping track of its location on a webpage is often challenging for people with disabilities. By emphasizing the benefit of providing clear information about the user’s current location and available navigation options, the guideline aims to tackle the challenge.

As a reminder, the levels of compliance go from A (the most basic level), to AAA (the most strict level of compliance with the best accessibility when the type of content will allow it).

There are various criteria to be met according to this guideline. These are:

1. Allow users to skip blocks of content that appear on multiple web pages:
   This usually requires the user to be provided with a mechanism such as the “skip to content” link, that allows the user to bypass repeated blocks of content on multiple web pages. This reduces the effort needed to navigate directly to the main content and saves time. This is at the basic conformance of Level A of Criteria 2.4.1 – creating bypass blocks.
2. Each webpage should have a descriptive title:
   In compliance with Criteria 2.4.2 at conformance level A, there should be a descriptive and meaningful title for each page. This allows users, particularly those using screen readers or those with multiple tabs open, to quickly identify and differentiate between various web pages.
3. Ensure that the purpose of each link can be determined from its context:
   The aim of this is that without relying solely on the appearance or destination URL, the user should be able to tell the purpose of a link from the surrounding content or context. This is beneficial to most users, especially those using screen readers. It throws more light on the destination of a link before the link is activated. Allowing the choice to further explore a link or not easier. This is in conformance to criteria 2.4.4 at level A.
4. Ensure that the purpose of each link can be determined from its link text alone:
   Based on Criteria 2. 4. 9 at conformance level AA, the purpose of a link should be clear from its link text alone, without relying on the context or surrounding content. This differs from guideline 2.4.4, because this caters also to a different set of users, particularly those using screen readers, as it will help them understand the link’s destination without needing additional information.
5. Provide multiple methods and ways for users to locate web pages:
   Providing multiple means of navigating and finding webpages, makes it easier for users, including those with disabilities, to access content via different paths. Enabling various means of navigating web content enhances the overall user experience even for individuals with different abilities and preferences. At a conformance level of AA to Criteria 2.4.5, this approach is particularly crucial for users with disabilities, as features like keyboard shortcuts, voice commands, and screen reader compatibility provide them with alternative ways to interact with online information. Beyond accessibility, a diverse navigation strategy caters to the varied preferences of all users, offering options such as traditional menus, visual cues, search functionalities, and interactive elements. This not only improves user satisfaction and engagement but also addresses the challenges presented by different devices and screen sizes through responsive design, ensuring a consistent and seamless experience across various platforms.
6. Headings and labels must describe the topic or purpose they represent:
   To meet Level AA conformance of Criterion 2.4.6, headings and labels must accurately describe the topic or purpose they represent. Descriptive and informative labels aid users, especially those relying on assistive technologies, in comprehending content structure and navigating efficiently. This commitment to Level AA criteria ensures a clear and organized content hierarchy, enhancing overall accessibility. By employing meaningful headings and labels, websites create a user-centric experience, allowing individuals to quickly grasp the context of different sections. This not only benefits users with visual impairments who rely on screen readers but also enhances the overall user experience for everyone by providing a well-structured and easily navigable interface.
7. Ensure keyboard focus is visible and distinguishable is vital:
   The visual distinctiveness of keyboard focus, such as the focus outline, assists users navigating with a keyboard or other input devices in identifying their current focus position. Adhering to Level AA of Criterion 2.4.7 underscores dedication to multiple user-friendly web navigations. Visible focus indicators serve as a fundamental aspect of web accessibility, benefiting users with motor disabilities and those who rely on keyboards for navigation. The clear visibility of focus outlines not only aids in navigation but also provides valuable feedback to users, contributing to a more intuitive and seamless interaction with the website.
8. Provide information about the user’s current location within a set of web pages:
   Users should be informed about their position within a website’s structure, facilitating better navigation. Adhering to the AA Level of Criterion 2.4.8 reflects a commitment to enhancing the user experience by offering clarity and context regarding the user’s location. Communicating the user’s location within a website helps in orienting users, enabling them to navigate efficiently and understand the overall structure of the content. This not only aids users with cognitive disabilities but also contributes to a more enjoyable and seamless browsing experience for all users.
9. Use clear and descriptive headings:
   Using clear and descriptive headings for sections of content is essential at Level AAA conformance of Criterion 2.4.10. Descriptive section headings convey content meaning and structure, allowing quick navigation, especially for screen reader users. Adhering to Level AAA criteria signifies a dedication to the highest accessibility standards, ensuring organized and interpretable content for users with diverse needs. Clear section headings not only facilitate navigation for users with visual impairments but also benefit users scanning content quickly. Implementing descriptive headings enhances the overall usability and comprehension of the webpage, promoting a more inclusive and user-friendly digital environment.
10. Make sure the website works well with just a keyboard:
    Ensure all website functionality is operable via a keyboard interface, accommodating users who cannot use a mouse. This fundamental principle falls under the broader scope of web accessibility, specifically addressing the needs of users who rely on keyboard navigation due to mobility challenges or an inability to use a mouse. Ensuring all website functionality is operable via a keyboard interface is in alignment with various guidelines set forth by the Web Content Accessibility Guidelines (WCAG), especially Guideline 2.1 and specifically with Criterion 2.1.1 at Conformance Level A, which speaks on Keyboard Accessibility.

Implementing keyboard accessibility involves designing and developing websites in a way that users can effectively navigate, interact with, and accomplish tasks solely using keyboard inputs. Here are some practical considerations:

• Focus on Interactive Elements: Ensure that all interactive elements, such as links, buttons, and form fields, are easily accessible and operable using keyboard inputs. This includes using the “tab” key for navigation and the “Enter” key for activation.
• Skip Navigation Links: Provide “skip to content” links at the beginning of each page, allowing keyboard users to bypass repetitive navigation and jump directly to the main content, in line with WCAG Criterion 2.4.1.
• Visible Focus Indicators: Maintain visible focus indicators to highlight the element that currently has keyboard focus, aiding users in tracking their position on the page (WCAG Criterion 2.4.7).

Ensure there are no Keyboard Traps:

Prevent users from being trapped in specific keyboard focus zones, allowing seamless navigation through interactive elements. Preventing users from being trapped in specific keyboard focus zones is a key aspect of web accessibility, addressing the potential frustration users may encounter when navigating a site using a keyboard. This principle aligns with WCAG’s Guideline 2.1 Keyboard Accessible and specifically with Criterion 2.1.2 at a conformance level of Level A. Here are practical considerations:

• Test Keyboard Navigation: Regularly test the website’s keyboard navigation to identify and eliminate any potential traps. Ensure that users can move seamlessly through interactive elements without encountering barriers.
• Accessible Forms: When implementing forms, ensure that keyboard users can navigate through form fields without being trapped or encountering navigation difficulties (Criterion 3.3.2).
• Provide Clear Instructions: Include clear instructions on how users can navigate using the keyboard and avoid potential traps. This can be beneficial for users with varying levels of familiarity with assistive technologies.

Ensure the website is user-friendly for various input methods, including touch gestures and mouse interactions:

Guarantee the user interface operates with a single pointer and supports standard gestures for improved interaction. Ensuring the user interface can be operated with a single pointer and supports standard gestures is a crucial aspect of providing an inclusive user experience, especially for touch-enabled devices.

This aligns with WCAG’s Guideline 2.5 which speaks about Input Modalities. In this aspect, further light can be thrown on 3 major criteria under Guideline 2.5; Criterion 2.5.1 which covers Pointer Gestures at Conformance Level A, Criterion 2.5.2 which covers Pointer cancellation at Conformance Level A, and Criterion 2.5.5 which covers Target size at Conformance Level AAA. Here are practical considerations:

• Support Touch Gestures: Design interactive elements to respond to touch gestures, ensuring that users can navigate and interact seamlessly on touch-enabled devices.
• Implement Pointer Cancellation: Prevent accidental or unintended pointer activations by implementing features that cancel or undo actions initiated by the pointer (Criterion 2.5.2).
• Consider Target Size: Design clickable targets, such as buttons and links, with adequate size to make them easy to activate, particularly on touch-enabled devices (Criterion 2.5.5). Aim for a size of at least 44 by 44 CSS pixels.
• User Feedback: Provide visual or auditory feedback to users when a gesture or interaction is successfully recognized, aiding in a more intuitive user experience.

In conclusion, effective navigation and flow lie at the heart of a user-friendly online experience, and adherence to the guidelines ensures that this experience is inclusive for all users. By addressing challenges faced by individuals with disabilities, such as finding relevant content or navigating through web pages, the outlined criteria offer practical solutions for developers and designers.

From skip options to descriptive titles, clear headings, and keyboard accessibility, each criterion contributes to a more accessible and enjoyable online journey. Embracing these guidelines not only ensures compliance but, more importantly, fosters a digital landscape where diverse needs are accommodated, creating a truly equitable online environment for all.

Regular Testing Is a Must

The importance of regular testing cannot be overemphasized. Although following these guidelines aims at producing a website that is accessible to a wide variety of users, testing during building will give you a better picture of accessibility.

The crown of accessibility is usability and what better way is there to assess this than testing? However, testing should not only be done at the end. Testing should be done at each step of the building process. This is not because the guidelines do not work but because the guidelines alone, do not guarantee usability. While adhering to the WCAG guidelines is crucial to ensuring accessibility for diverse users, testing during the development phase provides a more comprehensive understanding of the website’s accessibility performance.

Furthermore, testing allows you to put the guidelines into practice and observe how real users interact with your website. By conducting tests, you gain invaluable insights into potential barriers or challenges that users with disabilities may face, allowing you to make informed improvements.

To reiterate, testing should not be a one-time event reserved for the end of the development process. Instead, it should be an ongoing practice throughout each step of the building process. This approach ensures that potential accessibility issues are detected and addressed early on, minimizing the need for extensive rework later. While the WCAG guidelines serve as a solid foundation, they alone do not guarantee perfect usability. Every website is unique and user interactions vary widely. Therefore, incorporating testing throughout the development cycle empowers you to tailor the accessibility solutions to your specific user base, creating a more user-friendly and inclusive experience.

By embracing regular testing, you foster a culture of continuous improvement, enabling your website to evolve and adapt to the ever-changing needs of your users. Remember, accessibility is not a one-and-done task; it is an ongoing commitment to providing equal access to information and services for all. So, let testing be your compass, navigating your work toward a digital realm that is truly accessible and user-centric.

Tools for Accessibility Testing

Some common tools that can be used for testing web accessibility are:

• Wave
• AccessScan
• Siteimprove
• CSS & HTML Validator
• Axe (a free accessibility plugin from Figma)

Each of these tools can be useful for determining common accessibility issues.

Conclusion

In this comprehensive exploration of the basics of accessibility, we have uncovered the critical elements that make digital experiences truly accessible to all users. By this point, we should all understand the importance of accommodating the limitations of disabilities and enhancing usability for everyone. As we go on to further topics under the series, I would love for us to keep these practices in mind as we build on them further.

In addition, let us not forget the importance of regular testing, not just as a final step but as an ongoing practice throughout the development process. Testing helps us to bridge the gap between guidelines and usability, offering invaluable insights into real user experiences and ensuring continuous improvement.

It is imperative that we recognize that this journey is far from over. Accessibility is an ongoing commitment to making the digital world a more accessible place. So, let us create welcoming designs and make testing our compass, guiding us toward a digital realm that embraces accessibility as an integral part of its DNA. Together, we can build a digital landscape that leaves no one behind.

References

• Understanding Success Criterion 2.4.6: Headings and Labels | WAI | W3C. (2023, July 23).
• Web Accessibility Initiative. Retrieved July 17, 2023, from https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html
• Understanding Success Criterion 4.1.2: Name, Role, Value | WAI | W3C. (2008, December 11).
• Web Accessibility Initiative. Retrieved July 17, 2023, from https://www.w3.org/WAI/WCAG22/Understanding/name-role-value
• Web Content Accessibility Guidelines (WCAG) 2.2. (2023, May 17). https://www.w3.org/TR/WCAG22/