Accessibility Patterns

Accessibility Patterns

WCAG 2.2 AA Requirements

Perceivable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 1.1.1 | Non-text content alt text | `` | | 1.3.1 | Semantic HTML | Headings, landmarks, lists | | 1.4.3 | Color contrast | 4.5:1 normal text, 3:1 large | | 1.4.11 | UI component contrast | 3:1 borders, icons |

Operable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 2.1.1 | Keyboard accessible | Tab, Enter, Space, Escape | | 2.4.3 | Focus order | Logical tab sequence | | 2.4.7 | Focus visible | Visible focus indicator | | 2.5.8 | Target size | Min 24x24px (44x44px önerilir) |

Understandable

| Kriter | Kural | Kontrol | |--------|-------|---------| | 3.1.1 | Language of page | `` | | 3.2.1 | On focus | No unexpected context change | | 3.3.1 | Error identification | Clear error messages | | 3.3.2 | Labels or instructions | Form labels visible |

ARIA Patterns

  Confirm
  ×

  Tab 1
  Tab 2

Content 1

  3 new messages

Keyboard Navigation

// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject) {
  useEffect(() => {
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    const first = focusable?.[0] as HTMLElement
    const last = focusable?.[focusable.length - 1] as HTMLElement

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key !== 'Tab') return
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus()
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus()
      }
    }
    ref.current?.addEventListener('keydown', handleKeyDown)
    first?.focus()
    return () => ref.current?.removeEventListener('keydown', handleKeyDown)
  }, [ref])
}

Skip Links

Skip to main content

...

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }

Motion Preferences

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing

# axe-core (automated)
npx @axe-core/cli https://localhost:3000

# Lighthouse accessibility audit
lighthouse --only-categories=accessibility https://localhost:3000

Checklist

• [ ] Semantic HTML (headings, landmarks, lists)
• [ ] Alt text on all images
• [ ] Color contrast 4.5:1 (text), 3:1 (UI)
• [ ] Keyboard navigable (tab order logical)
• [ ] Focus visible indicator
• [ ] Skip link to main content
• [ ] Form labels and error messages
• [ ] ARIA roles where needed
• [ ] prefers-reduced-motion respected
• [ ] axe-core test pass

Anti-Patterns

• ` instead of `
• Color-only information (add icon/text)
• Auto-playing video/audio
• Removing focus outline without replacement
• Using ARIA when native HTML suffices

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: vibeeval
• Source: vibeeval/vibecosystem
• License: MIT

Install and usage instructions live in the source repository linked above.