Skip to main content

frontend-accessibility

Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and proper color contrast. Use this skill when creating or modifying UI components, implementing forms and interactive elements, working with navigation menus, building modals and dialogs, adding images and media content, writing JSX/HTML markup, ensuring keyboard accessibility, testing with screen readers, managing focus states, implementing proper heading hierarchies, providing alternative text for images, maintaining color contrast ratios, using ARIA labels and roles, or ensuring all interactive elements are keyboard-navigable. Apply this skill when building frontend components, reviewing UI accessibility, refactoring markup for better semantics, or implementing WCAG compliance requirements.

Zur Installation springen

Quellinformationen

Repository
pdovhomilja/dovhomilja-cz
Letzte Quellaktivität
24. November 2025 um 07:59
Erkannte Sprache von SKILL.md
Englisch
Sterne
0
Forks
0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
Frontend Accessibility
description
Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and proper color contrast. Use this skill when creating or modifying UI components, implementing forms and interactive elements, working with navigation menus, building modals and dialogs, adding images and media content, writing JSX/HTML markup, ensuring keyboard accessibility, testing with screen readers, managing focus states, implementing proper heading hierarchies, providing alternative text for images, maintaining color contrast ratios, using ARIA labels and roles, or ensuring all interactive elements are keyboard-navigable. Apply this skill when building frontend components, reviewing UI accessibility, refactoring markup for better semantics, or implementing WCAG compliance requirements.
# Frontend Accessibility ## When to use this skill - When creating or modifying any UI component files (e.g., `.tsx`, `.jsx`, `.vue`, `.svelte` files) - When writing HTML or JSX markup for user interfaces - When implementing forms with input fields, labels, and validation messages - When building navigation menus, buttons, links, and interactive elements - When creating modals, dialogs, tooltips, and overlay components - When adding images, icons, or media content that needs alternative text - When implementing keyboard navigation and focus management - When using or adding ARIA attributes (aria-label, aria-describedby, role, etc.) - When ensuring proper heading hierarchy (h1-h6) in page layouts - When choosing colors and ensuring sufficient contrast ratios - When testing components with screen readers - When managing focus states for dynamic content and SPAs - When reviewing components for WCAG compliance and accessibility standards This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility. ## Instructions For details, refer to the information provided in this file: [frontend accessibility](../../../agent-os/standards/frontend/accessibility.md)
Auf GitHub ansehen