一个能过检查的页面

编写一个能够真正通过可访问性检查的页面。虽然没有浏览器，标记结构即使不依赖浏览器，也能明确判断对错。

只需创建 /root/work/html/index.html。不需要 CSS，也不需要 JavaScript——本实验检查的是你选择了什么标签。

环境中已经包含一个检查器，它会检查与前七个步骤相同的规则。你可以随时亲自运行。

cd /root/work/html
python3 /opt/lab/checks/html-lab/audit.py index.html

对于每一项问题，它都会说明哪一行的什么内容为什么有问题。

图片文件可以并不存在，只检查标记。

自动检查只能发现 30～40% 的问题。其余问题大多可以通过移开鼠标，只用 Tab 完成整个流程来发现。

页面骨架与 lang

创建 /root/work/html/index.html，其中必须包含 <!doctype html>、<html lang="ko">、<title>、<meta charset> 和 <meta name="viewport">。

使用 mkdir -p /root/work/html。缺少 lang 时，屏幕阅读器会按英语发音规则朗读韩语——这是仅修改一个字符就能取得巨大效果的改进之一。缺少 viewport 时，移动设备会按桌面宽度渲染。

用地标绘制页面地图

添加 header、nav、main 和 footer。页面中只能有一个 main。

<div class="main"> 不会向机器传达任何信息。屏幕阅读器用户会在地标之间跳转，只有存在 main 时，“跳到正文”功能才能工作。

标题就是目录

只设置一个 h1，并在其下使用至少两个 h2。标题级别不能跳跃（禁止从 h2 直接到 h4）。

标题不是字号，而是文档目录。如果想改变大小，请使用 CSS——因为 h3 看起来漂亮就使用它，是最常见的可访问性问题。

正确选择 alt

添加三张图片——两张传达内容的图片（使用有意义的 alt），一张纯装饰图片（alt=""）。每个 img 都必须存在 alt 属性。

完全省略属性与写成 alt="" 并不相同。省略时，屏幕阅读器会朗读文件名（IMG_20240103.jpg）；留空则会安静跳过。装饰图片必须明确写出空 alt。文件可以并不存在，只检查标记。

没有标签的字段就没有名称

创建一个包含三个输入字段的表单。每个字段都必须有 label（通过 for/id 关联）；电子邮件字段必须具有 type="email" 与 autocomplete；使用 button 提交。

placeholder 不是标签——输入后它会消失，用户将无法知道这个字段原本要求填写什么。关联标签后，点击文字也会让字段获得焦点，这在移动设备上差异很大。正确设置 type 后，移动键盘会随之改变。

链接用于跳转，按钮用于操作

添加两个指向真实地址的链接。链接文本本身必须说明目的，不能使用“这里”“查看更多”“点击”。对于执行操作的位置，不要使用 a href="#"，而应使用 button。

屏幕阅读器用户会抽取链接并以列表查看。只有二十个“这里”的列表毫无用处。也不要使用 div onclick——它无法通过 Tab 到达，也不能用 Enter 激活。

表格必须有表头单元格

添加一个包含 caption、thead 和 th scope 的表格。列表头使用 scope="col"，行表头使用 scope="row"。

只有设置 scope，屏幕阅读器才会读成“1 月、销售额、1200”；否则只会连续朗读数字。不要用表格实现布局——那是 CSS Grid 的职责。

自行执行检查

亲自运行 /opt/lab/checks/html-lab/audit.py，并把结果保存为 08-audit.txt。问题数量必须为 0。

运行 python3 /opt/lab/checks/html-lab/audit.py index.html | tee 08-audit.txt。该检查器查看的规则与前七个步骤相同。同时请记住，自动检查只能发现 30～40% 的问题；其余问题用键盘操作 5 分钟就会暴露。

哪些能力是免费获得的

在 09-notes.md 中至少写三行：用 div 制作的按钮会失去的两项能力，alt="" 与省略 alt 属性的区别，以及如何检查自动工具无法发现的问题。

正文中必须包含 키보드、alt、랜드마크。核心只有一点：可访问性不是之后附加的功能，而是在选择标签时就已经大体决定。