Accessibility

What this describes

Rules

Checklist

• Keyboard focus is visible.
• Icon buttons have names.
• The page does not say the product passed WCAG.

AI instructions

You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Accessibility.
Use the element, name, and focus treatment the standards describe. This page is not an audit.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-A11Y-001 [required] Use the element that matches the action. Buttons act. Links navigate.
- NX-A11Y-002 [required] Keep the focus outline. The outline is 3px #85b6ff with a 2px offset. Do not remove it.
- NX-A11Y-003 [required] Name every control. Visible labels for fields. An aria-label for an icon-only button. Hide the decorative icon.
- NX-A11Y-004 [required] Target size follows WCAG 2.5.8. 24 CSS pixels is the AA minimum, with exceptions. 44 CSS pixels is a proposed touch convention, not the AA number.
CORRECT:
export function Close() {
  return (
    <button type="button" aria-label="Close dialog">
      <span aria-hidden="true">×</span>
    </button>
  );
}
INCORRECT:
<div onClick={close}>×</div>
The div is not a button, has no name, and is not in the tab order.
CHECK:
- [ ] Keyboard focus is visible.
- [ ] Icon buttons have names.
- [ ] The page does not say the product passed WCAG.
SOURCE: WCAG 2.2 https://www.w3.org/TR/WCAG22/
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.