制定团队内部HTML可访问性代码风格指南-html教程-PHP中文网

alt属性必须显式声明，空字符串alt=""表示图片无语义可忽略，而缺失alt会导致屏幕阅读器误读文件名；装饰图用alt=""，信息图需有意义描述，动态图须手动设置，链接内图片alt应说明动作目标。

制定团队内部html可访问性代码风格指南

为什么 `alt` 不能为空字符串但有时又必须写成 `""`

空 alt（即 alt=""）不是“没写”，而是明确告诉屏幕阅读器“这个图片是装饰性的，跳过”。如果完全省略 alt，多数辅助技术会把图片的文件名或路径读出来，比如 header-logo.png，造成干扰。
常见错误：用 alt=" "（空格）代替 alt=""——空格会被读作“空白”，反而触发播报。

功能性图标（如搜索按钮里的放大镜）：必须有有意义的 alt，例如 alt="搜索"
纯装饰图（如分割线、背景花纹）：用 alt=""，且不要加任何空格或注释
图表/信息图：不能只靠 alt 交代全部信息，需配合 <figure></figure> + <figcaption></figcaption> 或页面附近文字说明

表单控件必须绑定 `label`，但 `for` 和 `aria-labelledby` 怎么选

没绑定 label 的输入框，屏幕阅读器无法关联名称和控件，用户不知道“这是填什么的”。for 是最直接的方式，但前提是 id 唯一且可预测；aria-labelledby 更灵活，适合动态生成或复用场景，但依赖 DOM 顺序和 ID 存在性。

静态表单、简单字段：优先用显式 <label for="email">邮箱</label><input id="email">
复选框组或单选按钮组：用 <fieldset></fieldset> + <legend></legend>，不用多个 label 拼凑
模态框内动态渲染的输入：若 id 不稳定，改用 aria-labelledby="title-desc" 并确保目标元素存在且文本可读
避免 aria-label 覆盖原 label 文本——它会完全替代视觉标签，导致上下文丢失

`role="button"` 不等于真按钮，什么情况下该用 `<button></button>`

用 div 加 role="button" + tabindex="0" + 手动处理 Enter/Space 事件，看似能“模拟按钮”，实则漏掉焦点管理、禁用状态样式、语义继承等隐式行为。只有当无法修改 DOM 结构（如第三方组件封装死）时才妥协使用。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

所有可点击的交互控件，只要能用 <button></button>、<a href="#"></a>（带真实跳转）或 <input type="button">，就绝不用 role 模拟
禁用状态必须同时设 disabled 属性（对 <button></button>）或 aria-disabled="true"（对 role="button"），仅 CSS opacity: 0.5 不起作用
<button></button> 默认是 type="submit"，表单内非提交按钮务必显式写 type="button"，否则触发表单提交

颜色对比度不够？别只盯着 `#333` on `#fff`，检查实际渲染环境

WCAG AA 级要求文本与背景对比度 ≥ 4.5:1，但工具（如 axe 或 Lighthouse）检测的是静态 CSS 值，不考虑字体粗细、字号、抗锯齿、高亮状态、甚至系统级深色模式切换后的实际渲染结果。

小字号（
按钮悬停/聚焦状态：必须重新验证对比度，很多团队只测默认态，而 :hover 背景变浅后可能跌破阈值
深色模式下，别直接反转色值；用 @media (prefers-color-scheme: dark) 单独定义，且测试真机（iOS/Android 辅助功能开启时的渲染差异）
避免用 opacity 降低文字可读性——它同时削弱前景色和背景色，对比度计算失效

可访问性不是加几个 aria- 属性就完事，而是从结构语义、键盘流、视觉反馈到运行时环境的全链路校验。最容易被忽略的，是那些“看起来没问题”的交互状态——比如折叠菜单展开后焦点没自动进入、表格排序后无 ARIA live 区域提示、或者深色模式下 SVG 图标颜色没同步更新。