Accessibility
Designing Accessible Navigation Menus
This prompt helps teams design navigation menus that adhere to accessibility best practices, ensuring they are easy to use for all users, including those with disabilities. It focuses on keyboard navigation, screen reader support, and intuitive menu structures.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Define the menu structure and the content it needs to accommodate.
Review user feedback or analytics on current navigation challenges.
Gather platform-specific guidelines, such as mobile or desktop navigation conventions.
THE PROMPT
Help design accessible navigation menus for [specific product, platform, or website]. Ensure inclusivity and usability by focusing on:
Keyboard Navigation: Enabling full menu operability using the keyboard, with visible focus indicators.
Screen Reader Compatibility: Using ARIA roles and labels to provide clear and descriptive context for screen readers.
Responsive Design: Adapting menus for different screen sizes, including touch-friendly designs for mobile.
Hierarchical Clarity: Structuring menus logically with clear groupings and breadcrumbs for multi-level navigation.
Visibility and Interaction: Ensuring dropdowns and flyouts are triggered intuitively and remain accessible.
Provide specific recommendations for layout, interaction, and accessibility features in the navigation menus. If additional details about the platform, audience, or menu complexity are required, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Propose menu designs that simplify navigation for users with cognitive disabilities.
Suggest methods to optimize accessibility for multi-level or nested menus.
Highlight tools or techniques to test navigation menus for accessibility compliance.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Tailor suggestions for specific navigation styles, such as hamburger menus or mega menus.
Include localization options for right-to-left languages or multi-language menus.
Propose collapsible or modular designs for simplifying complex menus.
Highlight accessibility considerations for touch gestures, like swiping or tapping.
Add visual examples of compliant and non-compliant navigation menu designs.
WHEN TO USE
During the design or redesign of navigation menus for a product or website.
To improve usability for users who rely on assistive technologies.
When preparing for accessibility audits or compliance reviews.
WHEN NOT TO USE
If the product or platform does not require complex navigation.
When focusing on content creation rather than UI structure.