Frontend Accessibility

Ensure semantic HTML, ARIA attributes, keyboard navigation, and screen reader compatibility.

6|1|Updated Nov 12, 2022

Search Tags:#inclusive design #accessibility #semantic HTML #ARIA #WCAG #frontend #UI/UX

Ready to run

npx skills add https://github.com/coreyja/coreyja.com --skill frontend-accessibility-coreyja

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/coreyja/coreyja.com/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/coreyja/coreyja.com --skill frontend-accessibility-coreyja

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures user interfaces are usable by people with disabilities, improving inclusivity and compliance with accessibility standards (like WCAG) without manual oversight.

Core Features & Use Cases

Semantic HTML & ARIA: Guides the use of proper HTML structure and ARIA attributes for screen reader compatibility.
Keyboard Navigation: Implements robust keyboard navigation and focus management for interactive elements.
Use Case: When creating a new navigation menu, use this skill to ensure it uses semantic nav and ul tags, has proper ARIA labels, and is fully navigable via keyboard.

Quick Start

Apply the Frontend Accessibility skill to the new modal component, ensuring it has correct ARIA attributes, keyboard trap management, and focus returns to the trigger element on close.

Frequently Asked Questions about Frontend Accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make my website accessible to screen readers?▼

Screen reader accessibility requires semantic HTML structure (nav, main, header, footer), proper ARIA labels, and alt text for images. Use heading hierarchies, form labels linked to inputs, and ensure all interactive elements are keyboard navigable with correct tab order.

What's the best way to ensure keyboard navigation works on my website?▼

Implement keyboard navigation by managing focus order with logical tab sequences, adding focus indicators, avoiding keyboard traps in modals or menus, and returning focus to trigger elements after closing overlays. Test with Tab, Shift+Tab, and Enter keys.

How do I meet WCAG color contrast requirements?▼

WCAG compliance requires text and interactive elements to meet minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text, and 3:1 for UI components. Test color combinations against WCAG standards before deployment.

What ARIA attributes do I need for modal dialogs?▼

Modal dialogs require role="dialog", aria-labelledby for the title, aria-describedby for descriptions, and aria-modal="true". Implement keyboard trap management, return focus to the trigger on close, and ensure screen reader users understand the modal is open.

Can I build accessible forms without extensive markup changes?▼

Accessible forms require semantic HTML: explicit label elements linked to inputs via for/id attributes, fieldset and legend for grouped controls, required and disabled attributes, and error messages associated with fields. These are standard HTML, not extras.

Why does semantic HTML matter for accessibility?▼

Semantic HTML (nav, main, article, section, aside) communicates document structure to assistive technologies, enabling screen reader users to navigate efficiently and understand content relationships without relying on visual layout alone.