Accessible HTML5 Dropdown Menu: ARIA Best Practices and Code

Lightweight HTML5 Dropdown Menu: Pure CSS Techniques

Overview

A lightweight HTML5 dropdown menu built with pure CSS avoids JavaScript, reducing file size, complexity, and potential runtime issues. It leverages semantic HTML (nav, ul, li, button/a), CSS positioning, :hover or :focus-within, and transitions for animation while keeping accessibility and keyboard support in mind.

Why choose pure CSS

• Performance: No JS runtime; faster load and simpler caching.
• Simplicity: Easier to maintain and fewer dependencies.
• Progressive enhancement: Works in basic form even if CSS is limited; JavaScript can be added later for advanced behaviors.

Core techniques

• Semantic structure: use a nav > ul > li > a/button > ul pattern.
• Show/hide via CSS:
  • :hover for desktop hover interactions.
  • :focus-within to support keyboard navigation.
  • Use hidden attribute or aria-expanded toggled via JS only if you later add JS; with pure CSS, rely on :focus-within and :hover.
• Positioning:
  • position: relative on parent li; position: absolute on the submenu.
  • Use transform-origin and translate for smooth entrance.
• Transitions and animations:
  • Use opacity and transform (translateY/scale) for GPU-accelerated animations.
  • Avoid animating display or height from auto.
• Responsive patterns:
  • Collapse to a vertical stack using media queries.
  • Use a CSS-only toggle with a hidden checkbox + label for mobile “hamburger” menus.
• Accessibility:
  • Usefor items that open submenus when possible.
  • Include ARIA attributes (aria-haspopup, aria-expanded) — note: pure CSS cannot change aria-expanded dynamically.
  • Ensure focus styles are visible and :focus-within keeps submenu open while tabbing.
  • Provide keyboard support primarily via native focus; complex keyboard handling (arrow keys) needs JS.

Example (concept)

• Desktop: submenu appears on :hover and :focus-within, fades in with transform.
• Mobile: checkbox hack toggles menu open/closed; submenu nested toggles via sibling checkboxes.

Trade-offs and limitations

• No dynamic aria-expanded toggling without JS.
• Limited keyboard navigation (arrow key handling) without JS.
• Checkbox hack can complicate semantics and may confuse assistive tech if not implemented carefully.

Quick checklist for implementation

1. Use semantic nav and list markup.
2. Keep submenu off-screen with opacity:0 and transform; reveal with opacity:1 and transform:translate/scale.
3. Use :focus-within for keyboard access.
4. For mobile, use a checkbox toggle with label for the main menu.
5. Test with keyboard-only navigation and a screen reader.

If you want, I can generate a minimal, accessible HTML/CSS example using these techniques.