Navigation Accessibility Review

We’re working towards removing the toggle for our navigation redesign and need to perform an accessibility review or audit before taking this final step towards release.

Previous reviews

Note: We need to perform another review because the design, structure, and features have continued to evolve.

Audit

Note: This is a starting point for the categories that need to be reviewed. Once the audit is prioritized we'll have to finalize the scope and exactly what details should be covered in the audit.

Audit the designs as well as the created code for the implementation of the navigation redesign. Validate that the design and implementation is inline with our inclusive design principles. Results of the audit should generate individual issues that can be added to the Navigation Accessibility epic

Visual

  • Colors have sufficient contrast.
  • Color isn't the only means for conveying information.
  • States (hover, focus, active) are distinguishable.
  • Text remains readable and layout doesn't brake when scaled up.
  • Text wrapping and truncation don't impact reading (also consider translations).

Keyboarding

  • Ensure that all content and functionality in the navigation can be accessed and used with a keyboard alone, without relying on mouse or touch input.
  • Ensure that keyboard focus follows a logical and meaningful order within the navigation menu.
  • Ensure that there are no keyboard traps.

Semantics and content

  • Use semantic markup (W3C validator).
  • Correct use of headings (if present).
  • The DOM order should match reading order.
  • Use ARIA correctly, and only as needed for roles and relationships.
  • Use plain language when possible (Readability Analyzer).

Screen-readers

  • Assistive technology (AT) should be able to accurately communicate content and interaction to a user.
  • Include alternate content (text) for graphics, like icons, where appropriate.
  • Form elements, like search, must be labeled.
  • Button and link purpose must be clear.
    • Avoid repeating general actions like "unpin" without qualifying their association.
    • Icon-only buttons must be announced with meaningful text.
  • Use correct semantic page structure and landmarks.
  • States and changes in the UI should be communicated.
  • A user should understand what the result of an action will be, and what has happened as the result of an action.

Browser combinations

Use the results of the screen-reader survey to evaluate browser/screen-reader combinations by general popularity.

OS Browser Screen-reader
Windows Chrome JAWS
Windows Firefox NVDA
MacOS Safari VoiceOver
iOS Safari VoiceOver

Related WCAG Criteria

In addition to the above, ensure that the navigation is compliant with relevant WCAG Guidelines: 2.4 Navigable and 3.2 Predictable

Reporting

Any findings that will not be immediately addressed or that prevent some or all users from completing a task should be noted in the VPAT.

Scope

In…

  • New navigation in the current state as of reviewDate
  • Navigation color themes available in user preferences
  • Windows High Contrast Mode
  • Collapsed and peek states/interaction
  • Navigation contexts: Your work, project, group, admin area, user profile, user settings, explore and wherever is available to an unauthenticated user.
  • Testing all inputs: mouse, keyboard, and touch.
  • Testing across breakpoints where appearance or behavior changes.

Out…

  • Search/command modal
  • Breadcrumb
  • Dark mode

Automated vs. manual testing

While automated testing with validators and axe Devtools can test a number of items, most will be done manually and all will require manual validation.

Resources

Edited by Jeremy Elder