Accessibility

What to keep

Start from the block's semantic HTML, labels, keyboard behavior, and focus styles. Recheck them after you change the content or connect real actions.

• One clear page heading and a logical heading order.
• Buttons for actions and links for navigation.
• Visible focus for every keyboard target.
• Useful text alternatives for meaningful images and icons.

Forms and errors

Keep a visible label connected to each field. Add help text only when it changes how a person should answer.

• Invalid inputName the field and explain how to fix it.
• Failed requestKeep entered values and provide a retry action.
• SuccessConfirm what happened and where the user can go next.

Menus and dialogs

When a menu or dialog opens, move focus into it. Keep focus inside a modal dialog, support Escape when dismissing is safe, and return focus to the control that opened it.

Do not hide the only way to cancel, recover, or close behind a pointer-only interaction.

Release check

1. 1
   Use the keyboard

   Complete the main task without a mouse and confirm focus never disappears.

2. 2
   Zoom to 200%

   Check that content reflows and actions remain available.

3. 3
   Use a screen reader

   Confirm names, roles, errors, status changes, and reading order.

4. 4
   Reduce motion

   Confirm the task still makes sense when decorative movement is removed.