lang属性须动态匹配实际语言，charset必须为首项meta标签，title与h1须唯一且语义一致，alt是图像语义的强制声明，四者共同保障可访问性基础。
lang 属性必须写在 html> 标签上，且值要动态匹配实际语言
屏幕阅读器依赖 lang 判断发音规则，写错或漏写会导致整页语音输出失真。常见错误是硬编码 lang="zh-CN" 在所有页面，但用户切换到英文版时，lang 仍为中文，AT（辅助技术）会强行用中文语调读英文词。
实操建议：
- 服务端渲染（如 Next.js、Nuxt）应在响应头或模板中根据
Accept-Language或用户偏好动态注入lang值，比如 - 纯静态站点若支持多语言，需为每套 HTML 文件单独生成对应
lang，不能靠 JS 动态改 —— 多数 AT 不执行 JS，只读初始 DOM - 嵌套内容语言不同时，用局部
lang覆盖，例如<p>报价单含<span lang="en">USD</span>字样</p>
charset 必须是 中第一个 meta 标签
<meta charset="UTF-8"> 放错位置会导致浏览器解析后续标签时乱码，尤其影响中文、日文等字符的 DOM 构建 —— 这不是显示问题，而是 AT 解析 DOM 树时直接拿到损坏文本节点。
常见错误现象：屏幕阅读器读出“”“□”或空格，或跳过整段文字。
实操建议：
- 把
<meta charset="UTF-8">紧跟在开始后立即写，前面不能有任何其他标签（包括注释） - 避免在构建流程中插入自动添加的
<meta name="generator">等标签到它前面 - IE 旧版本对 UTF-8 的 BOM 敏感，确保文件保存为“UTF-8 无 BOM”格式
title 和 h1 必须唯一且语义一致，不能靠 CSS 隐藏补救
搜索引擎和 AT 都把 <title></title> 当作页面核心标识，把 <h1></h1> 当作内容主干锚点。两者语义冲突（比如 <title></title> 写“订单确认”，<h1></h1> 却是“欢迎来到首页”），会让 AT 用户迷失上下文，也干扰可访问性树的层级推导。
实操建议：
- 每个页面的
<title></title>必须包含唯一识别信息（如订单号、文章 ID），长度控制在 50–60 字符内，主关键词前置 -
<h1></h1>只能有一个，且内容应与<title></title>高度一致，差异仅限于补充说明（如<title></title>是“订单 #ORD-7890”，<h1></h1>可为“订单 #ORD-7890 已确认”） - 禁止用
display: none或aria-hidden="true"隐藏冗余<h1></h1>—— AT 仍会解析它，造成权重污染
alt 文本不是可选字段，而是图像语义的强制声明
<img> 没有 alt 属性时，AT 默认将其读作“图片”，完全丢失信息；而 alt="" 表示“该图纯装饰，无信息价值”，这是两种截然不同的语义路径。
容易踩的坑：
- 用文件名当 alt，比如
alt="banner_v2_0723.jpg"—— 对用户毫无意义 - 在图表类图片中写“柱状图”，却不说明数据结论，比如缺了“Q3 用户增长 12%”这类关键事实
-
<picture></picture>中每个<source></source>不继承alt，必须在最终<img>上显式声明
复杂点在于：同一张图在不同上下文中语义不同。比如 logo 图，在首页 alt="品牌名称"，在文章页可能需写成 alt="返回首页"（如果它是链接）。这要求 CMS 或组件层按上下文注入，而非全局复用固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
