Accessible Interactions

Interactive behavior lives mainly in assets/js/main.js. It must work with a keyboard, mouse, touchscreen, and assistive technology such as a screen reader.

General accessibility

These rules apply to every interactive component.

Basic control rules

• Use a button for an action on the current page.
• Use an a link to move to another address.
• Do not add an href to a disabled button (or, comment it out).
• Do not add a role that describes behavior the control does not actually have.
• Keep visible keyboard focus outlines.

Press Tab and Shift+Tab to move through controls. Use Enter and Space to operate them without a mouse.

Component-specific behavior

The following components have additional requirements because their visible and interactive states change.

Mobile navigation

If you change the mobile menu, confirm that it:

• tells assistive technology whether it is open or closed;
• keeps keyboard focus inside the open menu;
• prevents hidden menu controls from receiving focus;
• closes when Escape is pressed;
• closes after a navigation link is selected;
• returns focus to the menu button when appropriate;
• prevents the page behind it from scrolling;
• closes and restores scrolling when the browser crosses the desktop breakpoint.

Homepage flip cards

The instruction cards behave differently depending on the input device.

With a mouse or another precise pointer:

• hover and focus can reveal the back;
• the front instruction button and Back button are hidden and removed from keyboard navigation.

With touch or a coarse pointer:

• visible buttons control the flip;
• the active button is enabled and keyboard-accessible.

On a hybrid device, using touch must not permanently break later mouse behavior.

Only the visible card side should be available to a keyboard or screen reader. The code uses inert, aria-hidden, and focus settings for this; update them together.

Verification

Check JavaScript

After editing assets/js/main.js, run:

node --check assets/js/main.js

This only finds basic code mistakes. Also test the feature in a browser with Escape, Tab, Shift+Tab, a mouse, and touch input where possible. Resize across the mobile/desktop breakpoint.

Return to Styling and Interactions.