skills.rest
ftnilsson
ftnilssonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Accessibility

Implement semantic HTML, ARIA patterns, and focus management for web accessibility.

Updated Feb 15, 2026
Search Tags:#inclusive design#accessibility#a11y#keyboard navigation#semantic html#color contrast#aria
One-click install
npx skills add https://github.com/ftnilsson/agent-cli --skill accessibility-ftnilsson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Accessibility
Source: https://github.com/ftnilsson/agent-cli/tree/main/frontend/skills/04-accessibility
Command: npx skills add https://github.com/ftnilsson/agent-cli --skill accessibility-ftnilsson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating web interfaces that are usable by everyone, regardless of their abilities or assistive technology needs.

Core Features & Use Cases

  • Semantic HTML: Guides the use of appropriate HTML elements for better accessibility.
  • ARIA Implementation: Provides correct usage patterns for ARIA attributes.
  • Focus Management: Details how to manage user focus for a seamless experience.
  • Color Contrast: Explains WCAG contrast ratio requirements.
  • Keyboard Navigation: Outlines essential keyboard interaction patterns.
  • Labeling: Emphasizes the importance of accessible labels for all interactive elements.
  • Use Case: When developing a custom dropdown menu, this skill ensures it is navigable via keyboard, announced correctly by screen readers, and visually distinct for users with low vision.

Quick Start

Apply semantic HTML principles and manage focus intentionally when building any user-facing component.

Frequently Asked Questions about Accessibility

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

FAQPage Schema
How do I implement ARIA patterns and semantic HTML for accessible web interfaces?▼

To build accessible web interfaces, implement semantic HTML elements and apply correct ARIA attributes to ensure proper screen reader announcements. This approach provides robust structural meaning and enhances universal usability for assistive technologies.

What are the WCAG color contrast requirements for visual accessibility?▼

WCAG color contrast requirements mandate specific contrast ratios between text and background colors to ensure visual accessibility. Meeting these ratio thresholds guarantees that web interfaces remain visually distinct and readable for users with low vision.

How do I manage keyboard navigation and focus for custom UI components?▼

Manage keyboard navigation by implementing intentional focus management and robust keyboard interaction patterns for custom UI components. This ensures users navigating without a mouse can seamlessly interact with elements like custom dropdown menus.

When do I need to add accessible labels to interactive elements?▼

You need to add accessible labels to interactive elements whenever building user-facing components that require screen reader support. Proper labeling ensures all interactive controls are announced correctly and usable by everyone, regardless of their abilities.

Does this approach work for making custom dropdown menus accessible?▼

Yes, applying semantic HTML, ARIA patterns, and focus management works effectively for making custom dropdown menus accessible. This ensures the component is navigable via keyboard, announced correctly by screen readers, and visually distinct.

Related Skills

Explore More Design & Creative Skills→
Aaron-TawilAaron-Tawil

creating-streamlit-themes

Customize Streamlit application themes via config.toml colors and fonts.

Community
Intermediate
bizoton19bizoton19

508-audit

Audit federal websites for WCAG 2.1 AA accessibility compliance.

Community
Advanced
elab-developmentelab-development

tailwindcss-development

Automate web interface styling with Tailwind CSS v4 utilities.

Official
Intermediate
TamtitamTamtitam

aria-accessibility-fixer

Review and correct ARIA attributes in frontend HTML for WCAG compliance.

Community
Intermediate