无障碍设计（Accessibility，简称 A11Y，因 “Accessibility” 首字母 A 和尾字母 Y 之间有 11 个字母得名）是网站建设中容易被忽视的重要环节。据世界卫生组织统计，全球约有 10 亿残障人士（如视障、听障、肢体障碍），若网站缺乏无障碍支持，将直接排除这部分用户；同时，无障碍设计也能提升老年用户、临时受伤用户的体验，甚至对 SEO（搜索引擎优化）有积极影响。本文将拆解网站无障碍设计的核心标准与落地方案，帮助开发者构建 “人人可用” 的网站。​
一、无障碍设计的核心标准：WCAG 2.1​
WCAG（Web Content Accessibility Guidelines，Web 内容无障碍指南）是国际通用的无障碍设计标准，由 W3C 制定，当前最新版本为 2.1，核心原则可概括为 “四大支柱”：​
可感知性（Perceivable）：信息和用户界面组件必须以可感知的方式呈现给用户。​
示例：图片需添加 alt 文本（供视障用户通过屏幕阅读器识别），视频需添加字幕（供听障用户理解内容）。​
可操作性（Operable）：用户界面组件和导航必须是可操作的。​
示例：所有功能需支持键盘操作（如 Tab 键切换按钮、Enter 键确认），避免仅依赖鼠标或触摸屏；按钮、链接的点击区域需足够大（至少 44×44 像素），方便肢体障碍用户操作。​
可理解性（Understandable）：信息和用户界面操作必须是可理解的。​
示例：表单错误提示需明确（如 “密码至少 8 位，包含字母和数字” 而非 “密码格式错误”），网站导航结构一致（如所有页面的 “首页” 按钮位置相同），避免用户混淆。​
稳健性（Robust）：内容必须足够稳健，能被各种用户代理（如屏幕阅读器、浏览器插件）可靠地解释。​
示例：使用语义化 HTML 标签（如<header> <nav> <main> <footer>），而非纯<div>嵌套；避免使用过时的 HTML 属性（如align），确保代码兼容不同辅助工具。​
WCAG 2.1 将合规级别分为 A（最低）、AA（推荐）、AAA（最高），对于大多数网站，达到AA 级别是基本要求（许多国家的公共网站、政府网站已强制要求 AA 级别）。​
二、前端无障碍设计的落地方案​
1. 视觉无障碍：适配视障与低视力用户​
（1）图片与多媒体的无障碍处理​
为所有图片添加 alt 文本：alt 文本需简洁准确，描述图片核心内容，避免 “图片 1”“点击这里” 等无意义描述；纯装饰性图片（如分割线、背景图）的 alt 文本设为空​