Applying A11Y Standards

Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.

diegosouzapw Updated 54 repo stars

File contents

Accessibility Standards (a11y)

When to use this skill

  • Every time you create a new component or page.
  • During UI audits.

Best Practices

  • Semantic HTML: Use <main>, <header>, <footer>, <nav>, and appropriate heading levels.
  • ARIA Labels: Use aria-label for icon-only buttons.
  • Keyboard Nav: Ensure all interactive elements have a visible :focus-visible state.
  • Contrast: Maintain a text-to-background contrast ratio of at least 4.5:1.

Instructions

  • Tools: Use the axe-core library or Lighthouse to run automated audits.
  • Alt Text: Every Image must have a descriptive alt attribute.

diegosouzapw/awesome-omni-skill/tree/main/skills/fullstack-web/applying-a11y-standards commit d06b94c403

Frequently asked questions

npx skillmds@latest add diegosouzapw/applying-a11y-standards