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.

跳到安装

来源信息

仓库
pdovhomilja/dovhomilja-cz
最近来源活动
2025年11月24日 07:59
检测到的 SKILL.md 语言
英语
星标
0
分支
0

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
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)
在 GitHub 查看