如何在编写HTML阶段通过IDE插件自动预防可访问性低级错误-html教程-PHP中文网

必须在项目根目录创建.htmlhintrc文件并显式启用"alt-require":true和"input-requires-label":true，同时确保vs code安装官方htmlhint插件、配置保存时校验且文件编码为utf-8，否则默认不报错。

如何在编写html阶段通过ide插件自动预防可访问性低级错误

VS Code 里怎么让 HTMLHint 报 alt-require 和 input-requires-label 错误

HTMLHint 默认不启用可访问性规则，alt-require 和 input-requires-label 这类规则必须显式打开，否则写 <img src="logo.png"> 或 <input type="text"> 都不会标红。

操作步骤很直接：

项目根目录创建 .htmlhintrc 文件（不是 .htmlhint.json，也不是放在子目录）

填入最小可用配置：

{
  "rules": {
    "alt-require": true,
    "input-requires-label": true,
    "tagname-lowercase": true,
    "attr-lowercase": true
  }
}

确认 VS Code 已安装官方 HTMLHint 插件（作者是 “mkaufman”），且插件设置中勾选了 Run on save
重启 VS Code 窗口（仅重载窗口不够，插件需完整初始化）

IntelliJ IDEA 自带 HTML Tools 能否替代 HTMLHint 检查可访问性

不能。IntelliJ IDEA 的 HTML Tools 插件默认只做基础结构校验（比如标签嵌套、属性拼写），对 alt 缺失、<input> 无 <label></label> 绑定这类可访问性问题完全不报错。

它能提示 aria-labelledby="xxx" 指向的 ID 是否存在，但不会强制要求 <img> 必须有 alt——这属于 WCAG Level A 强制项，IDEA 不覆盖。

如果坚持用 IDEA，唯一可行路径是：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

安装第三方插件 Accessibility Checker（JetBrains 官方市场可搜到）
或在项目里配 ESLint + eslint-plugin-jsx-a11y，但该插件主要面向 JSX，对纯 HTML 支持弱，常漏报 <img> 类错误

为什么 `input-requires-label` 规则容易被绕过

这个规则只检查是否写了 <label for="xxx"></label> 或把 <input> 包在 <label></label> 里，但它不验证 for 属性值是否真对应某个 id，也不检查 aria-labelledby 是否有效。

常见逃逸写法：

<label for="user-name">用户名</label><input id="username">（for 和 id 拼写不一致）
<label>邮箱</label><input type="email">（没绑定，纯视觉分组）
<input aria-labelledby="email-label"><span id="email-label">邮箱地址</span>（HTMLHint 默认不校验 aria-labelledby 值是否存在）

所以光开 input-requires-label 不够，还得配合浏览器 DevTools 的 Accessibility 标签页手动点检，或者加 axe-cli 做 CI 阶段兜底。

保存即报错但不生效？重点查这三处

很多人配完 .htmlhintrc 发现还是不报错，问题通常卡在这三个地方：

.htmlhintrc 文件编码不是 UTF-8（尤其是 Windows 记事本另存时默认 ANSI），会导致插件读取失败，静默降级为默认规则
VS Code 工作区设置了 "html.validate.scripts": false（注意这是 HTML 插件的设置，不是 HTMLHint 插件的），会禁用所有内联脚本和属性检查，连 onchange 拼错都不提示
文件未保存 —— HTMLHint 的 “Run on save” 是字面意思，Ctrl+S 之前不会触发，自动保存（Auto Save）模式下也必须设为 afterDelay 或 onFocusChange，off 就等于没开

可访问性错误不像 JS 语法错那样立刻崩溃，但它们会在自动化测试、屏幕阅读器实测、甚至某些地区法律合规审查中集中爆发。最省事的方式，就是在写第一行 <img> 时就让它标红。