LuxMenuBar Dropdowns Should Be Keyboard Navigable

by ADMIN 50 views

Introduction

The LuxMenuBar is a crucial component of the Lux Design System, providing users with an intuitive way to navigate through various options. However, a critical issue arises when attempting to navigate dropdowns using the keyboard. This article delves into the problem, its severity, and the recommended fix to ensure that the LuxMenuBar meets the accessibility standards set by the Web Content Accessibility Guidelines (WCAG).

WCAG Success Criterion: Keyboard Navigable

According to the WCAG 2.2 guidelines, 2.1.1 - Keyboard navigable states that "All functionality of the content is available from a keyboard." This means that users with disabilities, who rely on screen readers or keyboard navigation, should be able to access and interact with all elements of the LuxMenuBar without any issues.

The Issue

When attempting to navigate dropdowns using the keyboard, the current implementation of the LuxMenuBar fails to meet the WCAG success criterion. The steps to recreate the issue are as follows:

Steps to Recreate

  1. Go to LuxMenuBar in the Lux Styleguide
  2. Tab to one of the dropdowns
  3. Open the dropdown using the space bar
  4. Attempt to navigate to one of the items in the dropdown using the arrow keys (if there is a scroll-bar on the page, it will scroll the page, otherwise it will appear to do nothing)

Severity

The severity of this issue is significant, as it affects users who rely on keyboard navigation. The inability to navigate dropdowns using the keyboard makes it difficult for users with disabilities to access and interact with the LuxMenuBar.

User Impact

The user impact of this issue is substantial. Users who rely on keyboard navigation will find it challenging to navigate the LuxMenuBar, which may lead to frustration and a negative user experience.

Recommended Fix

To address this issue, the recommended fix is to enable arrow key navigation between menu items. This can be achieved by focusing on the menu items and allowing the arrow keys to navigate between them.

Is it a Focused-Element Issue?

It is possible that this issue is related to the focused-element. The focused-element is the element that currently has focus, and it is essential to ensure that the focused-element is correctly set and updated when navigating the LuxMenuBar.

Acceptance Criteria

To ensure that the recommended fix is effective, the following acceptance criteria should be met:

  • I can successfully use this feature with Voice Over in Safari.
  • I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
    • axe dev tools
    • Lighthouse
    • Wave
  • ...

Conclusion

In conclusion, the LuxMenuBar dropdowns should be keyboard navigable to meet the WCAG success criterion. The recommended fix is to enable arrow key navigation between menu items, and it is essential to investigate whether this issue is related to the focused-element. By addressing this, we can ensure that the LuxMenuBar is accessible to users with disabilities and provides a positive user experience.

Future Development

In future development, it is essential to prioritize accessibility and ensure that all components of the Lux Design System meet the WCAG success criteria. This includes conducting regular accessibility audits and testing the components with various assistive technologies.

Best Practices

To ensure that the LuxMenuBar meets the WCAG success criterion, the following best practices should be followed:

  • Use semantic HTML to define the structure of the page.
  • Use ARIA attributes to provide a clear and consistent accessibility API.
  • Ensure that all interactive elements are focusable and can be navigated using the keyboard.
  • Use a11y-friendly JavaScript libraries and frameworks.

Introduction

In our previous article, we discussed the importance of making the LuxMenuBar dropdowns keyboard navigable to meet the WCAG success criterion. In this article, we will address some frequently asked questions (FAQs) related to this topic.

Q: What is the WCAG success criterion for keyboard navigable?

A: The WCAG 2.2 guidelines state that 2.1.1 - Keyboard navigable requires that "All functionality of the content is available from a keyboard." This means that users with disabilities, who rely on screen readers or keyboard navigation, should be able to access and interact with all elements of the LuxMenuBar without any issues.

Q: Why is keyboard navigation important?

A: Keyboard navigation is essential for users with disabilities who rely on screen readers or keyboard-only navigation. It allows them to access and interact with web content without relying on a mouse. Additionally, keyboard navigation is also beneficial for users who prefer to use the keyboard for navigation.

Q: How can I make my LuxMenuBar dropdowns keyboard navigable?

A: To make your LuxMenuBar dropdowns keyboard navigable, you can follow these steps:

  1. Use semantic HTML to define the structure of the page.
  2. Use ARIA attributes to provide a clear and consistent accessibility API.
  3. Ensure that all interactive elements are focusable and can be navigated using the keyboard.
  4. Use a11y-friendly JavaScript libraries and frameworks.

Q: What are some common mistakes to avoid when making LuxMenuBar dropdowns keyboard navigable?

A: Some common mistakes to avoid when making LuxMenuBar dropdowns keyboard navigable include:

  1. Not using semantic HTML to define the structure of the page.
  2. Not using ARIA attributes to provide a clear and consistent accessibility API.
  3. Not ensuring that all interactive elements are focusable and can be navigated using the keyboard.
  4. Not using a11y-friendly JavaScript libraries and frameworks.

Q: How can I test my LuxMenuBar dropdowns for keyboard navigability?

A: To test your LuxMenuBar dropdowns for keyboard navigability, you can use the following tools and techniques:

  1. Use a screen reader to navigate the dropdowns.
  2. Use keyboard-only navigation to test the dropdowns.
  3. Use accessibility testing tools such as axe dev tools, Lighthouse, and Wave to identify any accessibility issues.
  4. Test the dropdowns with different assistive technologies.

Q: What are some best practices for making LuxMenuBar dropdowns keyboard navigable?

A: Some best practices for making LuxMenuBar dropdowns keyboard navigable include:

  1. Use semantic HTML to define the structure of the page.
  2. Use ARIA attributes to provide a clear and consistent accessibility API.
  3. Ensure that all interactive elements are focusable and can be navigated using the keyboard.
  4. Use a11y-friendly JavaScript libraries and frameworks.
  5. Test the dropdowns with different assistive technologies.

Conclusion In conclusion, making the LuxMenuBar dropdowns keyboard navigable is essential for meeting the WCAG success criterion. By following the best practices and avoiding common mistakes, you can ensure that your LuxMenuBar dropdowns are accessible to users with disabilities and provide a positive user experience.