Frontend Accessibility

Apply semantic HTML, ARIA, keyboard navigation, and color contrast to frontend interfaces.

Updated Mar 13, 2023

Search Tags:#accessibility #screen reader #semantic HTML #ARIA #WCAG #frontend #UI/UX

Ready to run

npx skills add https://github.com/pdovhomilja/dovhomilja-cz --skill frontend-accessibility-pdovhomilja

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures user interfaces are usable by everyone, including individuals with disabilities, by adhering to WCAG standards and best practices for accessibility, making your applications inclusive and compliant.

Core Features & Use Cases

Semantic Markup: Use proper HTML and ARIA attributes for screen reader compatibility and clear document structure.
Keyboard Navigation: Ensure all interactive elements are navigable and operable via keyboard, managing focus states effectively.
Color Contrast & Alt Text: Maintain sufficient color contrast ratios and provide descriptive alternative text for images and media.
Use Case: When creating a new navigation menu, this skill guides the AI to use semantic <nav> and <ul> elements, add aria-label attributes where needed, ensure full keyboard accessibility for all menu items, and verify color contrast for readability.

Quick Start

Review the new signup form for accessibility, ensuring all input fields have proper labels, ARIA attributes for validation messages, and are fully keyboard-navigable.

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 elements, ARIA attributes for roles and labels, and proper heading hierarchies. Use native `<nav>`, `<button>`, and `<form>` elements, add `aria-label` and `aria-describedby` where semantic meaning isn't implicit, and test with screen reader software to ensure all content is announced correctly.

What's the best way to ensure keyboard navigation works on all interactive elements?▼

Keyboard navigation requires managing focus states and ensuring all interactive elements are reachable via Tab. Implement visible focus indicators, use semantic HTML elements that are natively keyboard-accessible, manage focus programmatically in modals and menus, and test with keyboard-only navigation to verify all interactions work without a mouse.

How do I check if my UI meets WCAG color contrast requirements?▼

WCAG contrast compliance requires maintaining sufficient color ratios between text and background: 4.5:1 for normal text and 3:1 for large text. Use contrast-checking tools to validate your color pairs, test with common colorblindness simulations, and ensure interactive elements remain distinguishable beyond color alone.

Can I make forms accessible across React, Vue, and Svelte frameworks?▼

Forms are accessible across frameworks (.jsx, .vue, .svelte) by applying universal patterns: associate labels with inputs using `<label>` or `aria-label`, add `aria-invalid` and `aria-describedby` for validation messaging, ensure keyboard tab order is logical, and validate color contrast for error states and focus indicators.

What alt text should I provide for images and media?▼

Alt text for images must be descriptive, concise, and convey the image's purpose or content. Avoid redundant phrases like 'image of'; instead describe what the image shows or its function. For decorative images, use empty alt text (`alt=""`). For complex diagrams or media, provide longer descriptions via `aria-describedby` or linked text alternatives.

How do I test that modals and dialogs are accessible?▼

Accessible modals require managing focus to the modal on open, preventing interaction with background content, implementing keyboard escape to close, and restoring focus when closed. Use ARIA `role="dialog"` and `aria-modal="true"`, test with keyboard and screen readers, and verify focus trapping and restoration work correctly.