HTML网页无障碍访问的核心是通过lang、dir、alt、aria-label、role等属性明确内容意图与交互状态。lang和dir确保语言与文本方向正确；alt和aria属性补全图标与控件功能描述；role及相关aria属性表达动态状态；tabindex、aria-hidden和aria-live控制焦点与实时通知。
用 lang 和 dir 明确语言与方向
页面整体语言缺失，会导致屏幕阅读器读错发音；双向文本（如中阿混排）不声明方向，会打乱阅读顺序。
-
lang="zh-CN" 写在
<html>标签上，告诉读屏软件整页按中文普通话朗读，避免误用英文音调 - 嵌套外语内容时单独声明，比如
<p lang="en">The quick brown fox...</p> - 阿拉伯语、希伯来语等从右向左书写的文字，加 dir="rtl"，确保标点、换行、光标移动符合习惯
用 alt、aria-label 和 aria-labelledby 补全“看不见的信息”
图片、图标、按钮符号本身没有文字，但用户需要知道它们“是干什么的”。属性在这里承担描述职责。
-
alt 是图片的必需属性：
<img src="search.svg" alt="搜索按钮">—— 功能性图标不能留空，也不能写“search.svg”这种文件名 - 纯装饰图用 alt=""（空字符串），读屏器会跳过，避免干扰
- 按钮里只有图标？补 aria-label：
<button aria-label="关闭弹窗">✕</button> - 复杂控件（如带图标的输入框）可用 aria-labelledby 指向附近可见文字，复用已有文案，避免重复
用 role、aria-expanded、aria-checked 等表达动态状态
原生 HTML 标签无法表达“这个菜单当前展开”“这个开关已开启”，而这些状态对键盘和读屏用户至关重要。
- 自定义下拉菜单加 role="menu" + aria-expanded="true"，用户一进页面就知道可操作且已打开
- 手写复选框（
<div class="checkbox">）必须加 role="checkbox" 和 aria-checked="false"，并用 JS 同步更新值 - 模态框用 role="dialog" + aria-modal="true"，强制读屏器聚焦内部，屏蔽背景内容
用 tabindex、aria-hidden 和 aria-live 控制焦点与通知流
键盘用户依赖 Tab 键线性导航，而动态内容更新常被忽略——属性能主动干预这个流程。
立即学习“前端免费学习笔记（深入）”；
- 让非表单元素可聚焦：自定义按钮加 tabindex="0"；禁用状态加 tabindex="-1" 并配合
aria-disabled="true" - 隐藏暂时不用的区域：侧边栏收起时，加 aria-hidden="true"，读屏器自动跳过
- 异步操作反馈（如提交成功、加载中）用 aria-live="polite" 包裹提示文字，读屏器会在空闲时播报，不打断当前操作
