HTML中满足WCAG可感知原则的核心是确保所有用户可靠获取信息，需从语义结构、替代方案和渲染控制三方面落实：使用语义化标签（如–、、）、为非文本内容提供等效文本替代（alt、、aria-label）、保障颜色对比度、字体可缩放、动画可控及动态内容通过aria-live声明。
HTML中满足WCAG的可感知原则，核心是让所有用户——无论是否依赖视觉、听觉或运动能力——都能可靠获取内容信息。这不是加几个属性就完事，而是从语义结构、替代方案和渲染控制三个层面同步落实。
用语义化标签替代和屏幕阅读器靠元素角色（role）、状态（state）和名称（name）理解页面，<div>和<code><span></span>本身不携带语义，强行用aria-label补救往往覆盖不全、维护成本高。
- 标题必须用
<h1></h1>–<h6></h6>，且保持层级逻辑；跳过<h2></h2>直接写<h4></h4>会破坏导航流
- 按钮必须用
<button></button>，不是<div onclick>；后者需手动加<code>role="button"、tabindex="0"、aria-pressed等，还容易漏掉键盘焦点管理 - 表单控件必须配
<label for="id"></label>或包裹式<label><input>文本</label>；仅靠视觉对齐或占位符（placeholder）无法被读屏软件识别为标签
- 图片必须有
alt属性：纯装饰图用alt=""（空字符串，非省略），信息图用准确简明的描述，复杂图表需配合<figure></figure>+<figcaption></figcaption>或长描述链接
确保非文本内容有等效替代
可感知 ≠ 可见。音频、视频、图标、颜色编码这些“非文本”内容，必须提供文本替代，否则听障、色觉障碍或仅用键盘导航的用户将丢失关键信息。
-
<audio></audio>和<video></video>必须包含<track kind="captions"></track>（字幕）和<track kind="descriptions"></track>（音轨描述），不能只靠外挂SRT文件
- 图标按钮（如放大镜搜索、齿轮设置）必须有
aria-label或隐藏文本（<span class="visually-hidden">搜索</span>），CSS隐藏不可用display: none或visibility: hidden，得用视觉隐藏类（如position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;）
- 用颜色表达状态（如“红色=错误”，“绿色=成功”）时，必须叠加其他视觉线索：图标（×/✓）、文字（“失败”/“通过”）、边框样式（虚线/实线）或背景图案
- 图表若用Canvas绘制，需同步提供数据表格（
<table>）并用<code>aria-describedby关联控制内容呈现方式，避免剥夺用户自主权
可感知的前提是用户能按自己需要调整内容——放大字体、关闭动画、暂停滚动、切换高对比度模式。HTML层要主动配合，而非假设默认渲染就是最优解。
立即学习“前端免费学习笔记（深入）”；
- 禁用
<marquee></marquee>、<blink></blink>等废弃标签；自动轮播图必须提供pause/play按钮，并监听prefers-reduced-motion媒体查询关闭动画：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
- 字体大小用相对单位（
rem或em），禁用px固定值；行高至少1.5，段落间距不小于字体大小的0.5倍
- 颜色对比度：正文文本与背景至少4.5:1（小字号）或3:1（大字号≥18pt/粗体≥14pt）；工具提示、禁用态文字等次要内容也需达3:1；可用WebAIM Contrast Checker在线验证
- 所有交互元素（按钮、链接、表单控件）必须有清晰的焦点样式；不要用
outline: none全局清除，而应重写:focus样式（如box-shadow: 0 0 0 3px #007bff）
最容易被忽略的是“动态内容更新”的可感知性：AJAX加载新内容、表单校验实时反馈、通知弹窗出现——这些变化不会自动被读屏软件捕获。必须用aria-live区域（polite或assertive）明确声明，否则视障用户根本不知道页面已变。
屏幕阅读器靠元素角色（role）、状态（state）和名称（name）理解页面，<div>和<code><span></span>本身不携带语义，强行用aria-label补救往往覆盖不全、维护成本高。
- 标题必须用
<h1></h1>–<h6></h6>，且保持层级逻辑；跳过<h2></h2>直接写<h4></h4>会破坏导航流 - 按钮必须用
<button></button>，不是<div onclick>；后者需手动加<code>role="button"、tabindex="0"、aria-pressed等，还容易漏掉键盘焦点管理 - 表单控件必须配
<label for="id"></label>或包裹式<label><input>文本</label>；仅靠视觉对齐或占位符（placeholder）无法被读屏软件识别为标签 - 图片必须有
alt属性：纯装饰图用alt=""（空字符串，非省略），信息图用准确简明的描述，复杂图表需配合<figure></figure>+<figcaption></figcaption>或长描述链接 -
<audio></audio>和<video></video>必须包含<track kind="captions"></track>（字幕）和<track kind="descriptions"></track>（音轨描述），不能只靠外挂SRT文件 - 图标按钮（如放大镜搜索、齿轮设置）必须有
aria-label或隐藏文本（<span class="visually-hidden">搜索</span>），CSS隐藏不可用display: none或visibility: hidden，得用视觉隐藏类（如position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;） - 用颜色表达状态（如“红色=错误”，“绿色=成功”）时，必须叠加其他视觉线索：图标（×/✓）、文字（“失败”/“通过”）、边框样式（虚线/实线）或背景图案
- 图表若用Canvas绘制，需同步提供数据表格（
<table>）并用<code>aria-describedby关联控制内容呈现方式，避免剥夺用户自主权
可感知的前提是用户能按自己需要调整内容——放大字体、关闭动画、暂停滚动、切换高对比度模式。HTML层要主动配合，而非假设默认渲染就是最优解。
立即学习“前端免费学习笔记（深入）”；
- 禁用
<marquee></marquee>、<blink></blink>等废弃标签；自动轮播图必须提供pause/play按钮，并监听prefers-reduced-motion媒体查询关闭动画：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } - 字体大小用相对单位（
rem或em），禁用px固定值；行高至少1.5，段落间距不小于字体大小的0.5倍 - 颜色对比度：正文文本与背景至少4.5:1（小字号）或3:1（大字号≥18pt/粗体≥14pt）；工具提示、禁用态文字等次要内容也需达3:1；可用WebAIM Contrast Checker在线验证
- 所有交互元素（按钮、链接、表单控件）必须有清晰的焦点样式；不要用
outline: none全局清除，而应重写:focus样式（如box-shadow: 0 0 0 3px #007bff）
最容易被忽略的是“动态内容更新”的可感知性：AJAX加载新内容、表单校验实时反馈、通知弹窗出现——这些变化不会自动被读屏软件捕获。必须用
aria-live区域（polite或assertive）明确声明，否则视障用户根本不知道页面已变。 - 禁用
确保非文本内容有等效替代
可感知 ≠ 可见。音频、视频、图标、颜色编码这些“非文本”内容，必须提供文本替代，否则听障、色觉障碍或仅用键盘导航的用户将丢失关键信息。
