可访问性是功能刚需而非优化项，需严格遵循语义化HTML、正确使用alt与role、确保键盘操作完整、表单标签绑定及焦点管理。
alt 属性漏写、role 乱用、键盘焦点跳失——这些不是“锦上添花”的优化项，而是让屏幕阅读器用户能否读到标题、能否提交表单、能否跳过导航栏的决定性细节。
HTML语义化标签必须按场景选，不能只图结构好看
用 <div> 套 onclick 模拟按钮，或用 <span> + CSS 写标题，都会导致辅助技术完全忽略其功能或层级关系。
-
<button>用于触发操作（自带键盘聚焦、空格/回车响应）；<a>仅用于跳转（需含href，否则语义断裂） -
<h1>–<h6>必须保持逻辑嵌套，不能为样式跳级（如从<h2>直接到<h4>） - 导航区域用
<nav>，主内容区用<main>，侧边栏用<aside>，页脚用<footer>—— 这些不是装饰，是屏幕阅读器的“地图标记”
alt 文本要描述功能，不是复述文件名
图片不是“装饰”就得有 alt；但写成 alt="logo.png" 或留空 alt=""（除非明确是纯装饰图）等于没写。
- 图标按钮（如放大镜搜索）：写
alt="搜索"，而非alt="magnifier" - 信息图/图表：简明说明数据结论，例如
alt="2025年移动端流量占比达73%，同比增长9%。" - 纯装饰图（如分隔线、背景花纹）：才用
alt=""，且建议加role="presentation"显式声明
表单控件必须绑定 label，且不可只靠视觉对齐
很多页面用 CSS 把 <label> 和 <input> 视觉上挨着，但没做实际关联——这会让屏幕阅读器无法把提示文字和输入框配对。
- 正确方式：用
for+id（<label for="email">邮箱</label><input id="email">），或直接包裹（<label>邮箱<input></label>） - 复选框/单选组必须用
<fieldset>+<legend>包裹，否则每个选项都孤立无上下文 - 错误提示不能只靠颜色（如红字），要加
aria-live="polite"或插入<span role="alert">让变化可被朗读
键盘可操作性常被忽略，但它是可访问性的底线
鼠标悬停（:hover）或点击才出现的菜单、弹窗、工具提示，若不支持 Tab 键进入、Enter 激活、Escape 关闭，就等于对键盘用户关闭了入口。
立即学习“前端免费学习笔记（深入）”；
- 所有交互元素必须能被
Tab遍历：检查tabindex是否被误设为-1或随意正数 - 模态框打开时，焦点必须锁在内部；关闭后，焦点应回到触发它的按钮（用
focus()手动控制） - 自定义组件（如下拉选择器）需手动实现
ArrowUp/ArrowDown导航、Home/End跳首尾等行为，不能只等浏览器默认
<nav> 里塞满无 href 的 <a>，<main> 外还堆着一堆没 role 的浮动层——可访问性不是加几个属性就能通关的，它要求每一处交互、每一段文本、每一次焦点移动，都经得起脱离鼠标的检验。 
