mcpField
F
frontend-accessibility

frontend-accessibility

github.com/aj-geddes设计与 UI373601 次安装34 周前更新
代码仓库

关于 frontend-accessibility

用于构建无障碍 Web 应用的技能，涵盖语义化 HTML、ARIA、键盘导航和屏幕阅读器支持，适合需要落实 WCAG 指南与包容性设计的开发者。

主要功能

  1. 01语义化 HTML 与 ARIA
  2. 02键盘导航
  3. 03颜色对比度指导
  4. 04屏幕阅读器播报
  5. 05无障碍测试

适用场景

  1. 01在 Web 应用中落实无障碍标准
  2. 02支持屏幕阅读器用户
  3. 03改善键盘导航
  4. 04排查颜色对比度问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill frontend-accessibility

安装后在 Claude Code 中输入/frontend-accessibility确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessibility-testing.md
color-contrast-and-visual-accessibility.md
keyboard-navigation.md
screen-reader-announcements.md
semantic-html-and-aria.md
templates/
component-template.tsx

详细介绍

前端无障碍

目录

概述

遵循 WCAG 指南，使用语义化 HTML、ARIA 属性、键盘导航和屏幕阅读器支持，构建无障碍 Web 应用，为所有用户提供包容性的使用体验。

适用场景

  • 符合无障碍标准
  • 包容性设计要求
  • 屏幕阅读器支持
  • 键盘导航
  • 色彩对比度问题

快速开始

最简可运行示例：


<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <header>
      <h1>Article Title</h1>
      <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content...</p>
  </article>

  <aside aria-label="Related articles">
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/article1">Article 1</a></li>
      <li><a href="/article2">Article 2</a></li>
    </ul>
  </aside>
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
语义化 HTML 和 ARIA语义化 HTML 和 ARIA
键盘导航键盘导航
色彩对比度和视觉无障碍色彩对比度和视觉无障碍
屏幕阅读器播报屏幕阅读器播报
无障碍测试无障碍测试

最佳实践

✅ 应该
  • 遵循成熟的模式和约定
  • 编写清晰、易于维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不应该
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown