Accessibility, Keyboard, Contrast, and Reduced Motion

Step 1: Check Structure and Names
Start with one descriptive page heading, a logical heading sequence, landmarks, real lists, useful link and button names, form labels, image alternatives, and an accurate page title. Structure should describe the content without depending on color, position, or a screenshot of text.

Step 2: Use the Entire Page by Keyboard
Move through the public page with Tab and Shift Tab, then operate menus, disclosures, sliders, forms, dialogs, media, and custom controls with their expected keys. Focus must remain visible, follow a useful order, avoid traps, and return to the invoking control after a dialog or menu closes.

Step 3: Verify Contrast and Responsive Reflow
Check text, icons, controls, focus indicators, errors, placeholders, disabled states, and text placed on images or colored panels. Zoom and inspect narrow widths without losing content or forcing horizontal document scrolling. A large desktop contrast value does not excuse faint body text or controls on another state.

Step 4: Respect Motion Preferences
Use motion only to support understanding, provide pause or manual controls where needed, and keep duration, delay, easing, and triggers editable. Under reduced motion, remove ambient movement, parallax, automatic transitions, and decorative video where practical while preserving every message and action. Test both preference states in Studio and public output.
