accessible-html

审查 · 60
已收录

Use whenever writing, editing, or reviewing markup or UI code — HTML, JSX/TSX, Vue/Svelte/Angular templates, web components, email HTML, or CSS that affects text size, color, focus, motion, layout order, or hit area. Also use when adding a button, link, form, input, modal, dropdo

Verified installs0
Stars39
版本1.0.0
质量57/100 · 有潜力
信任60/100 · 仅限沙盒
审计72/100 · 需审查

供给资产档案

设计与创意生产

Design assets, images, video, audio, multimodal media, presentation, and creative production skills.

浏览赛道

场景

设计与创意

I need my agent to produce design assets, UI directions, presentations, or creative media workflows.

适配 Agent

Claude Code + Cursor + CLI

适用于 Codex、Claude Code、Cursor、CLI 或自定义 Agent。

安装

就绪

npx skills add AlemTuzlak/skills --skill accessible-html

维护状态

新鲜

距上次推送 2 天

风险

需审查

许可证不清晰

GitHub 质量

39

57/100 质量 · 68/100 信任

覆盖标签

设计设计与创意设计与创意agent-skill

审查说明

许可证不清晰 · Permission surface may require sandboxing

Agent 采用评分卡

一眼查看信任、审计与安装准备度

这些分数综合公开仓库元数据、OpenAgentSkill 审查信号、维护新鲜度与安装准备度。它用于候选筛选,不替代人工审查。

质量

有潜力
57

有用的候选项,但采用前应与替代方案比较。

信任

仅限沙盒
60

有用但信任信号不足或混杂的候选项。在结果闭环证明任务匹配前,请保持在隔离工作区内使用。

审计

需审查
72

对安装准备度、安全元数据、维护情况与采用风险的机器可读审查。

OpenAgentSkill 信任评分 v5

安装前需人工审查

仅在沙盒中运行,并在用于真实工作前比较接近的替代方案。

CodexClaude CodeCursorOpenAgentSkill CLI

Stars

39 个 GitHub Stars

仓库活跃度

39 个 Star,0 个 Fork

维护状态

距上次推送 2 天

许可证

未知

安装

npx skills add AlemTuzlak/skills --skill accessible-html

安装安全性

标准软件包或运行时安装路径

权限范围

secrets or environment access, filesystem or document access

Agent 结果

暂未有 Agent 结果数据

文档

README/SKILL.md 上下文充分

风险摘要

生产前审查

  • Repository license is unknown; no license file detected. This creates ambiguity about usage rights and redistribution.
  • 许可证不清晰
  • Low GitHub adoption signal
  • Quality score needs review

安装准备度

安装路径可用

  • 安装路径可用
  • 仓库证据可用
  • 许可证不清晰
  • 暂无 Agent 验证结果证据

Agent 可读元数据

这个 Skill 的机器可读决策数据。

使用此区块或内嵌 JSON 判断 Agent 是否应安装该 Skill、选择替代方案,或先请求人工审查。

打开 JSON

适用任务

  • GitHub automation 工作流
  • Claude Code 团队
  • builders willing to evaluate younger projects
  • Inspect repository metadata

适用 Agent

CodexClaude CodeCursorOpenAgentSkill CLICLI

安装决策

命令
npx skills add AlemTuzlak/skills --skill accessible-html
策略
审查
人工审查

信任与风险

信任
60/100
审计
72/100
风险级别
需审查

结果闭环

端点
/api/agent/outcome
事件 ID
resolve
结果
5

安装命令

npx skills add AlemTuzlak/skills --skill accessible-html

不适用场景

  • 需要厂商支持 SLA 的团队
  • production agents without a repository review
  • Low GitHub adoption signal
  • Repository license is unknown; no license file detected. This creates ambiguity about usage rights and redistribution.
  • 许可证不清晰

Agent 安全 v2

52/100 · 避免自动安装

实验性审查

Sparse or mixed signals. Useful for discovery, but not for autonomous installation.

Test manually in an isolated workspace and compare against safer alternatives.

通过 API 解析

Browser automation

Skill may drive a browser or interact with web pages.

网络访问

Skill 可能访问远程页面、API、仓库或外部服务。

文件系统访问

Skill 可能读取或写入项目文件、文档、生成产物或本地工作区状态。

  • 许可证不清晰

安装目标

在你的 Agent 工作流中安装此 Skill

通过公开安装端点获取命令、安全清单、目标提示词和该 Skill 的规范链接。

skill install

OpenAgentSkill CLI

Resolve policy, run the source installer safely, and report a verified install receipt.

$ npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.2.1/openagentskill-0.2.1.tgz install alemtuzlak-accessible-html

Agent 解析计划

让 Agent 在安装前验证匹配度。

Resolve API 返回首选 Skill、替代方案、安全策略、审计说明、安装目标和可直接执行的提示词,无需抓取此页面。

打开文本计划

Agent 应检查

  • 从 Resolve API 检查任务匹配与替代方案。
  • 检查审计评分、信任评分和安全策略警告。
  • 检查 Codex、Claude Code、Cursor 或 CLI 的安装目标兼容性。

复制提示词

Task: Use accessible-html in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20accessible-html%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/alemtuzlak-accessible-html/install
Install command: npx skills add AlemTuzlak/skills --skill accessible-html
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.

Agent 交接

把安装路径交给 Agent,而不是再给一个目录页。

通过公开安装端点获取命令、安全清单、目标提示词和该 Skill 的规范链接。

打开安装 API

Agent 提示词

Use accessible-html for this task. Review https://www.openagentskill.com/api/skills/alemtuzlak-accessible-html/install, then install with: npx skills add AlemTuzlak/skills --skill accessible-html

Registry 元数据

用于自动选择 Skill 的 Agent 可读档案。

本页通过 Registry API 提供相同的决策、信任、审计、场景和安装信号,让 Agent 无需抓取界面即可排序。

打开 Manifest

适配 Agent

59/100

GitHub automation

平台

Claude Code, Cursor

审计报告

需审查 · 72/100

对安装准备度、安全元数据、维护情况与采用风险的机器可读审查。

查看审计报告查看评估报告

Agent 决策面板

Fallback candidate for GitHub automation

先用此 Skill 做原型验证,并保留备选方案。

59
就绪度
原型验证
阶段

栈中角色

备选候选

主要匹配

GitHub automation

信任标签

先做原型验证

安装路径

命令已就绪

适用场景

  • GitHub automation 工作流
  • Claude Code 团队
  • builders willing to evaluate younger projects

证据

  • 仓库近期活跃
  • 已提供安装命令或 GitHub 仓库
  • 57/100 质量档案
  • 7 个 OpenAgentSkill 交互事件

先审查

  • Low GitHub adoption signal
  • Repository license is unknown; no license file detected. This creates ambiguity about usage rights and redistribution.

实施路径

  1. 1在沙盒 Agent 中安装它,并端到端完成一次GitHub automation任务。
  2. 2Compare output quality, latency, and failure behavior against at least one alternative.
  3. 3Promote it into production only after reviewing repository permissions, license, and maintenance signals.

信任档案

仅限沙盒

有用但信任信号不足或混杂的候选项。在结果闭环证明任务匹配前,请保持在隔离工作区内使用。

60
OpenAgentSkill 信任评分

GitHub 采用度

检查

39 个 GitHub Stars

Star/Fork 活跃度

检查

39 个 Star,0 个 Fork; 当前元数据中没有议题活跃度信息

近期维护

通过

距上次推送 2 天

许可证清晰度

检查

未知

积极信号

  • AI 审查已通过
  • 安装路径可用
  • 仓库证据可用
  • 近期维护的仓库
  • 安装命令未发现明显高风险模式
  • 结果闭环已就绪,但需要首次真实 Agent 运行

安装前审查

  • Repository license is unknown; no license file detected. This creates ambiguity about usage rights and redistribution.
  • 许可证不清晰
  • Low GitHub adoption signal
  • Quality score needs review
  • Permission surface needs review: secrets or environment access, filesystem or document access
  • GitHub adoption: 39 GitHub stars
  • Stars/forks activity: 39 stars, 0 forks; issue activity unavailable in current metadata
  • License clarity: Unknown
  • Permission surface: secrets or environment access, filesystem or document access
  • 暂未有真实 Agent 结果报告
  • 无人值守安装前需要人工审查

建议操作

仅在沙盒中运行,并在用于真实工作前比较接近的替代方案。

质量档案

有潜力 适用于 Agent 工作流的候选

有用的候选项,但采用前应与替代方案比较。

57
GitHub Stars
39
新鲜度
2 天前
安装就绪
许可证
未知
安装前审查: Low GitHub adoption signal · Repository license is unknown; no license file detected. This creates ambiguity about usage rights and redistribution.

工作流匹配

在这些场景使用此 Skill

工作流匹配

加入完整工作流

替代方案短名单

安装前对比

可能适合该任务的相近 Skill。

对比全部

概览

--- name: accessible-html description: Use whenever writing, editing, or reviewing markup or UI code — HTML, JSX/TSX, Vue/Svelte/Angular templates, web components, email HTML, or CSS that affects text size, color, focus, motion, layout order, or hit area. Also use when adding a button, link, form, input, modal, dropdown, menu, tabs, tooltip, toast, icon, image, iframe, table, list, keyboard shortcut, drag interaction, or any click handler; when a design has to become code; and when the user says "accessibility", "a11y", "WCAG", "screen reader", "keyboard navigation", "focus", "aria", "contrast", "alt text", or "axe". ---

# accessible-html

Accessible markup is not a pass you make later. It is how you write the markup the first time. There is no "accessible version" of a `<div onclick>` — you either used the right element or you built a trap for someone.

**One rule above all: use the native HTML element that already does the job.** Native elements ship focus, keyboard handling, state, and a role for free. Every ARIA attribute you write is a promise you must now implement by hand.

Target **WCAG 2.2 Level AA** unless told otherwise. That is the normal legal and contractual bar.

## Non-negotiables (every file, every time)

| Do this | Never this | |---|---| | `<button type="button">` for actions, `<a href>` for navigation | `<div onclick>`, `<span onclick>`, `<div role="button">`, `<a>` with no `href` | | `<label for=id>` or a wrapping `<label>` on every input | placeholder as the only label | | Every image has `alt` — describe it, or `alt=""` if decorative | missing `alt`; `alt="image"`, `alt="icon"`, filename as alt | | Real accessible name on every control (visible text, or visually-hidden text beside an `aria-hidden="true"` icon) | icon-only button with no name; empty link; `title` as the name | | One `<h1>`, then `h2`→`h3`→`h4` with no skipped level | headings chosen for how big the text looks | | `<html lang="en">`; `lang` on foreign phrases too | no `lang` | | Landmarks: `<header> <nav> <main> <footer>`; one `<main>`; label each `<nav>` | div soup | | `<title>` unique per page; skip link to `<main>` | same title everywhere | | Every `<iframe>` has a `title` | untitled embeds | | Real lists in `<ul>/<ol>/<dl>`; add `role="list"` if you set `list-style: none` | fake lists of divs | | Text contrast ≥ 4.5:1 (≥ 3:1 large text, UI borders, icons, focus rings) | grey-on-grey; "design QA will catch it" | | `rem` for font size, including `clamp()` bounds | `px` font size on `:root`/`html`/`body` | | Visible focus ring: `:focus-visible`, ≥ 2px, ≥ 3:1 contrast, uses `outline` | `outline: none`; ring only from `box-shadow` | | DOM order == visual order | `flex-direction: row-reverse`, `order:`, or grid placement to reorder content | | Interactive targets ≥ 24×24 CSS px (aim 44×44 on touch) | 12px icon hit areas | | `<table>` + `<caption>` + `<th scope>` for data | tables for layout; div grids for tabular data | | `<meta name="viewport" content="width=device-width, initial-scale=1">` | `user-scalable=no`, `maximum-scale=1` | | Unique `id` per element | duplicate ids (silently breaks `for` and `aria-labelledby`) | | Single-character shortcut (`j`, `/`, `x`) ships with an off switch, a remap, or focus scoping | bare single-key shortcuts with no escape hatch (WCAG 2.1.4, **Level A**) |

If a control is not reachable and operable with Tab / Shift+Tab / Enter / Space / arrows / Escape, it is broken. A keyboard user cannot use your feature at all — that is not a "nice to have".

Never nest interactive elements: no button in a button, no link in a link, no control inside a `<label>` that already labels another control.

## The four rules of ARIA

1. Native element first. Always. `<button>` over `role="button"`. 2. Do not change native semantics. Wrap instead: `<div role="tab"><h3>…</h3></div>`, not `<h3 role="tab">`. 3. Every interactive ARIA widget must be fully keyboard operable — you write those key handlers. 4. Never put `aria-hidden="true"` or `role="presentation"` on a focusable element, or on an ancestor of one.

**No ARIA is better than bad ARIA.** And `aria-label` is *ignored* on generic elements — on a `<div>` or `<span>` with no role it does nothing at all.

## Naming things

- Visible text is the best accessible name. Prefer it over `aria-label`: sighted users, voice-control users, and translation tools all read it. - **Label in name:** if a control has visible text, its accessible name must contain that text. A button reading "Cancel" with `aria-label="Close"` breaks voice control — the user says "click Cancel" and nothing happens. - `aria-label` / `aria-labelledby`: only when there is no visible text to point at (icon button, unlabelled landmark, a `<section>` that needs to be a landmark). - `aria-describedby` for hints. `aria-errormessage` + `aria-invalid="true"` for errors. - `title` is not an accessible name. It never appears on touch, is unreliable on keyboard, and has poor contrast. Use a real label. - Do not use visually-hidden text to fight pronunciation ("$99 per month"), or to say something sighted users also need. If the text is needed, show it. - Same link text to different destinations is a bug. "Read more about accessible design", not "Read more". Say when a link opens a new tab.

## Do not surprise the user

- No change of context on focus or on input. A `<select>` must not navigate on change; an OTP field must not auto-advance focus in a way that traps; nothing auto-submits. - No `autofocus`. No stealing focus on load. - Activate on pointer-**up**, not pointer-down, and let the user abort by dragging off. - Session timeouts must be extendable, and warn before expiring. - Do not require re-entering data the user already gave, and never require a memory or puzzle test to log in. Do not block paste in password fields. - Errors: text, not colour alone. Say what to do. Move focus to the error summary or first bad field.

## Read-first gate

**If your task matches a row below, open that file before writing code.** Not after, not "if there's time". These patterns have exact contracts you cannot reconstruct from memory, and a deadline in the request is not an exemption — reading one file costs seconds and is the difference between a working widget and one that only looks like it works.

| Task involves | Open this first | |---|---| | Any `keydown` handler, shortcut, `tabindex`, `.focus()`, focus trap, arrow-key navigation | `references/keyboard-and-focus.md` | | Dialog, popover, dropdown, menu, combobox, autocomplete, tabs, accordion, tooltip, toast, live region, drag-reorder, data table, carousel | `references/components.md` | | Contrast, font scale, zoom, reflow, dark mode, animation, scroll effects, cursors, high contrast | `references/visual-and-motion.md` | | Saying the work is done | `references/audit.md` |

Each of these features ships a fixed set of parts. Ship all of them or you have not built the feature:

- **Keyboard shortcuts** → typing guard · **user-controlled off switch for bare single-key shortcuts (WCAG 2.1.4, Level A — this is the part that gets skipped)** · handlers · discoverable `?` list. - **Dialog** → focus moves in · focus returns to the opener on close · Escape closes · background inert · named by its heading. - **Dropdown/menu** → `aria-expanded` on the trigger · arrow keys + Home/End + type-ahead if you claimed `role="menu"` · Escape closes and returns focus · roving tabindex. No arrow keys? Then it is a `<nav><ul>` of links, not a menu. - **Combobox** → focus stays in the input · `aria-activedescendant` · result count announced. - **Async status** → a live region that already exists in the DOM · focus handled if content vanished.

## Adding to code that is already inaccessible

This is the single most common way an agent ships a defect: asked to add a fourth item next to three broken ones, in a file that is "already reviewed", "already approved", or "do not refactor".

Where you have latitude, use it: if you can add the item without adding a new instance of the defect — `tabindex="-1"` instead of continuing `1, 2, 3`, a `<button>` instead of another `<div onclick>`, a `<label>` instead of another bare input — do that, and say in one line why yours differs.

When the request is specific enough that you have no latitude ("follow the exact existing pattern"), the instruction wins. Comply. **Your reply then has exactly three parts:**

1. **The item, added as asked.** 2. **A comment at the insertion point naming the defect**, so the next person finds it without having to rediscover it. This is not refactoring — it adds no behaviour and changes no line. 3. **Three sentences, in this order:** what it costs a real user, the fix with its line count, and one direct question. Then stop.

### Worked example — this exact scenario

Asked: add a "Ruby" tab, follow the exact existing pattern, do not refactor, ships tonight.

```html <div class="tablist" aria-label="Language"> <!-- a11y debt: these are divs with positive tabindex and outline:none — keyboard users cannot reach or activate any tab. New entries copy the defect. Fix: role="tab" + roving tabindex (~15 lines). --> <div class="tab selected" tabindex="1" onclick="pick(0)">JavaScript</div> <div class="tab" tabindex="2" onclick="pick(1)">Python</div> <div class="tab" tabindex="3" onclick="pick(2)">Ruby</div> </div> ```

> Added as asked. Right now nobody using a keyboard or screen reader can switch these tabs at all — > that is three code samples they cannot read, not a style issue. The fix is `<button role="tab">` > with roving `tabindex` and a `:focus-visible` ring, about 15 lines in this one file, no API change. > Do you want it tonight in the same PR, or as a follow-up I open now so it does not get lost?

What makes this pass is not the flag. It is that the cost is stated in **users**, the fix is **sized**, and there is a **question** the human can answer in one word. "Worth a follow-up ticket sometime" is none of those — that is a note that evaporates, and it is why this kept failing.

If the human says ship it anyway, ship it. That was their call to make, and you made it an informed one.

## Rationalizations — every one of these is wrong

| Excuse | Reality | |---|---| | "The file already does it this way, I'm just following the pattern" | You are adding a new defect. New code is correct code, even in an old file. | | "Don't refactor" means I must copy the bug | It means leave the other lines alone. Write your own line properly. | | "It's already approved / already reviewed" | The review missed it. Approval does not make a keyboard trap usable. | | "I flagged it in my notes" | A note is not a fix. Flagging costs nothing and changes nothing. | | "It's a pre-existing gap, not my regression" | You tripled it. That is a regression. | | "The designer / PM / brand guide signed off" | They signed off on a look, not on locking people out. Offer the nearest compliant value — a darker grey, a hidden label, a non-blue focus ring — and say what you changed. | | "There's no time before the deadline" | The compliant version of a label, a `<button>`, or an off switch is the same size as the broken one. There was never a time saving. | | "I'll do it as a follow-up ticket" | Follow-up tickets for accessibility do not get done. This one is 4 lines. Do it now. | | "I skipped the arrow keys to hit the deadline" | Then do not claim `role="menu"`. Ship a list of links that works, not a widget that lies. | | "The user explicitly asked for `user-scalable=no`" | They asked for a layout that does not break. Give them that without blocking zoom. | | "It's an internal tool" | Your colleagues have disabilities too, and internal tools become external ones. |

**Naming the violation is not an alternative to not committing it.**

## Red flags — stop, you are about to ship an inaccessible UI

- "I'll add `aria-label` to make this div accessible." - "It's just a wrapp

技术详情

版本
1.0.0
许可证
Unknown
最近更新
2026年8月20日
发布时间
2026年8月19日

决策摘要

备选候选

59
就绪
原型验证
阶段

仓库近期活跃

审计

安装审查

安装与采用审查

72
需审查
安全性
70/100
维护状态
100/100
安装
92/100
打开完整审计查看评估报告

Agent 验证证据

Agent 验证证据

来自解析、审查、安装和一次小范围运行后的结果报告。

0
已验证
Needs first agent run自动安装: 先审查最近: 未知
成功率
近期失败
结果
0
输出质量
失败
0
不相关
0
安装次数
0
风险拦截
0
需要配置
0
生产环境
0

暂时没有 Agent 结果数据。首次 Agent 执行可以通过 /api/agent/outcome 报告成功、需要设置、风险拦截、失败或不相关。

安装

加入 Agent 工作流

免费且开源. 在生产 Agent 中安装前请先审查报告。

增长闭环

分享工具包

X

为 accessible-html 准备的场景化草稿,可手动发布到 X。

策展说明
accessible-html: Use whenever writing, editing, or reviewing markup or UI code — HTML, JSX/TSX, Vue/Svelte/Ang...

39 stars

https://www.openagentskill.com/skills/alemtuzlak-accessible-html?ref=x
打开 X 草稿
可选:带安装命令的回复
Listing + install path for accessible-html:
https://www.openagentskill.com/skills/alemtuzlak-accessible-html?ref=x

Install: npx skills add AlemTuzlak/skills --skill accessible-html
打开回复草稿

收录来源

Registry 收录

可认领

此列表来自公开来源,维护者认领获批前不会标记为官方。

创作者
AlemTuzlak
收录方
OpenAgentSkill 社区索引

归属链接指向公开仓库或创作者主页。创作者可认领列表以更新所有权信号。

认领此 Skill

所有者认领

认领此 Skill 页面

这条 Registry 收录 列表归属于 AlemTuzlak,但尚未标记为官方。认领后可增加已验证所有者信号,使后续发布、安装和审计更新更值得信赖。

创作者外链工具包

将证据徽章加入你的 README

在开发者评估仓库的位置展示规范页面、当前信任与审计信号,以及真实的 Agent 验证证据。

[![Listed on OpenAgentSkill](https://www.openagentskill.com/api/badge/alemtuzlak-accessible-html?metric=listed&label=Listed)](https://www.openagentskill.com/skills/alemtuzlak-accessible-html)
[![OpenAgentSkill Trust](https://www.openagentskill.com/api/badge/alemtuzlak-accessible-html?metric=trust&label=Trust)](https://www.openagentskill.com/skills/alemtuzlak-accessible-html)
[![OpenAgentSkill Audit](https://www.openagentskill.com/api/badge/alemtuzlak-accessible-html?metric=audit&label=Audit)](https://www.openagentskill.com/skills/alemtuzlak-accessible-html/audit)
[![Agent Proven](https://www.openagentskill.com/api/badge/alemtuzlak-accessible-html?metric=proven&label=Agent%20Proven)](https://www.openagentskill.com/skills/alemtuzlak-accessible-html)

作者

A

AlemTuzlak

@alemtuzlak

平台适配

健康信号

GitHub Stars
39
质量评分
34/100
最近 GitHub 推送
2026年8月20日
框架提示
未知
OpenAgentSkill 浏览量
7
复制安装命令
0
跳转点击
0

社区信号

告诉我们这个 Skill 是否对你的 Agent 工作流有帮助。汇总反馈会持续改善排序。

信任与安全

仅限沙盒

60
  • GitHub 采用度39 个 GitHub Stars检查
  • Star/Fork 活跃度39 个 Star,0 个 Fork; 当前元数据中没有议题活跃度信息检查
  • 近期维护距上次推送 2 天通过
  • 许可证清晰度未知检查
  • README/SKILL.md 完整度元数据包含足够的用法与工作流上下文通过
  • 依赖与运行时风险network or browser surface通过