网站易用性与可访问性自查手册：10个必做项，让所有人都能用好你的网站
你有没有遇到过这样的网站？
按钮小到手指戳不准
颜色对比度低到看不清文字
表单报错只说“输入错误”，却不告诉错在哪
键盘按了半天Tab，焦点不知道跑哪去了
这些问题的本质，不是功能缺失，而是易用性（Usability）和可访问性（Accessibility，也称“无障碍”）没做好。
易用性：所有用户（包括正常用户）能否高效、满意地完成任务。
可访问性：残障人士（如视障、听障、行动障碍）能否平等地使用你的网站。
两者紧密相关——改善了可访问性，往往也提升了易用性；反之亦然。全球有超过10亿残障人士，加上老龄化社会中的视力、行动能力下降人群，忽略这些，等于主动放弃一大片用户和市场。
本文提供一份10项自查清单，不堆砌理论，直接给做法。你可以按顺序逐项检查自己的网站。
1. 确保足够的颜色对比度
问题场景：灰色文字放在浅灰背景上，视力正常的人都看着费力，更不用说低视力或色盲用户。
标准要求（WCAG 2.1 AA级）：
正常文本（小于18pt或14pt加粗）：对比度 ≥ 4.5:1
大文本（≥18pt或14pt加粗）：对比度 ≥ 3:1
非文本元素（如图标、输入框边框）：≥ 3:1
怎么做：
使用对比度检测工具（WebAIM Contrast Checker、Stark、Chrome 开发者工具里的“检查对比度”）。
不要只依赖设计师的直觉，用数据说话。
常见低对比度雷区：浅灰/浅蓝上的白色文字、红色按钮配黑色文字。
2. 支持完整的键盘操作
问题场景：鼠标坏了的用户、运动障碍用户、高效操作的用户（如程序员）习惯用键盘。如果网站的菜单、弹窗、表单不能用Tab、Enter、方向键操作，这些人直接无法使用。
必做项：
所有交互元素（链接、按钮、表单控件、下拉菜单）都必须能通过 Tab 键聚焦（焦点可见）。
焦点状态必须有明显的视觉样式（如蓝色外圈，不要只是灰色轮廓）。
使用 Enter 触发按钮/链接，空格 触发复选框/按钮，上下左右键 操作下拉菜单、单选组。
弹窗打开后，焦点自动移至弹窗内的第一个可聚焦元素；关闭时焦点回到触发元素。
快速测试：拔出鼠标，用Tab键走一遍全站，检查能否完成主要任务（登录、搜索、提交表单）。
3. 为所有图片提供替代文本（alt）
问题场景：视障用户使用屏幕阅读器时，无法“看到”图片。如果没有alt属性，屏幕阅读器只会念出文件名“IMG_12345.jpg”，毫无意义。
正确做法：
信息型图片：用简洁的文字描述图片传达的信息。
例：<img src="chart.png" alt="2024年各季度销售额柱状图，Q4最高达到200万">功能型图片（如搜索图标、购物车图标）：描述其功能。
例：<img src="search-icon.png" alt="搜索">装饰性图片（纯粹为了好看）：使用空的alt属性
alt=""，这样屏幕阅读器会忽略它。
避坑：不要把“图片”“照片”这些词写进alt，因为屏幕阅读器已经会提示“图片”。
4. 提供清晰的页面标题和章节标题
问题场景：一个网页信息混乱，没有层级标题，屏幕阅读器用户无法快速跳转到自己感兴趣的区域，就像一本书没有目录。
做法：
每个页面都要有唯一的
<title>（浏览器标签页上显示的标题），且能准确描述该页内容。使用正确的 HTML 标题结构：
<h1>用于主标题，<h2>用于主要章节，<h3>用于子章节，不要跳跃使用（如从h1直接到h4）。不要让标题仅仅是为了字体大小而用，要从语义上体现文档结构。
屏幕阅读器用户可以呼出标题列表快速导航，合理的结构能让效率提升数倍。
5. 链接文字要有意义，避免“点击这里”
问题场景：屏幕阅读器可以提取页面所有链接供用户浏览。如果链接都是“点击这里”“更多”“详情”，用户完全不知道每个链接指向哪里。
正确示例：
❌
点击这里查看年度报告✅
查看2024年度报告
做法：
链接文字本身就能描述目标（即使脱离上下文）。
如果链接是按钮形式，也要确保其可访问名称（通过aria-label或内嵌文字）清晰。
同一页面中出现多个“了解更多”但指向不同页面时，必须区分（如“了解产品A”“了解产品B”）。
6. 表单要容易填写和纠错
问题场景：用户填写了10项，点击提交报错“请填写正确信息”，但不告诉哪个字段错了，为什么错。这会让所有人崩溃，尤其对认知障碍用户。
必做项：
每个表单字段都有清晰的 标签（label），并且标签和输入框在代码上关联（使用
<label for="id">或用<label>包裹输入框）。必填字段要明确标注（比如用红星*，并确保屏幕阅读器能读到“必填”）。
报错信息要：
在提交后立即显示在错误字段附近
明确说明错误原因（“邮箱格式应为 name@example.com”）
用文字描述，不要仅依赖颜色（红色边框+红色文字）
使用 ARIA 属性
aria-describedby将错误信息与输入框关联起来，让屏幕阅读器自动读出。
7. 确保内容在放大时不变形
问题场景：低视力用户会用浏览器缩放功能（Ctrl + / Ctrl -）。如果缩放至200%或400%后，布局错乱、文字重叠、横向滚动条出现，网站就几乎不可用。
测试方法：
在桌面浏览器中按下 Ctrl + + 将页面放大到 200%。
检查：文字是否换行且可读？有没有内容被切掉？是否必须左右滚动才能看完一行文字？（WCAG要求：在400%缩放时不需要水平滚动）。
使用相对单位（em、rem、%）而非固定像素（px）定义字号和容器宽度，可以大幅改善缩放体验。
8. 避免仅用颜色来传达信息
问题场景：表单报错用红色文字“姓名不能为空”，但色盲用户分不清红色和黑色。状态指示只用“绿勾/红叉”，用户分不清成功/失败。
解决方案：
除了颜色，还要使用 图标、文字、图案、下划线 等辅助方式。
例如：错误信息旁边加 ⚠️ 图标；必填字段除了红色星标，再加“（必填）”文字。
链接不要仅靠颜色区分于普通文字，最好添加下划线（或鼠标悬停时出现下划线）。
9. 为多媒体提供字幕、转录文本和音频描述
问题场景：视频没有字幕，听障用户无法获取内容；音频播客没有文字稿，既不利于SEO，也排除了听障人群。
做法：
为所有视频提供 同步字幕（closed captions）（包括对话和重要的背景声音，如[掌声]）。
为音频内容提供 文字转录稿。
对于描述重要视觉内容的视频（如“点击屏幕右上角的红色按钮”），要提供 音频描述（在自然对话间隙插入对画面的语音描述），或另提供一个带音频描述的版本。
使用标准的
<track>标签嵌入字幕文件（WebVTT格式）。
10. 使用语义化HTML，而非全用div
问题场景：开发者用 <div> 和 <span> 加一堆CSS造出了“看起来像按钮”的东西，但没有语义。屏幕阅读器不知道它是按钮，无法触发默认操作，也不能告诉用户“这是一个按钮”。
正确做法：
按钮用
<button>，链接用<a>，标题用<h1>-<h6>，导航用<nav>，主体内容用<main>，区域用<section>。自定义交互组件（如下拉选单、弹窗）应使用 WAI-ARIA 角色和属性（如
role="dialog"、aria-expanded），但优先使用原生HTML元素，因为它们自带可访问性。语义化的HTML不仅对可访问性友好，也对SEO友好，且代码更简洁易维护。
如何快速开始？
你不需要一次做完10项。可以从以下高优先级、低成本的三项入手：
检查颜色对比度（用工具几分钟就能改掉大部分问题）
测试键盘Tab流程（拔出鼠标走一遍，修复明显的焦点丢失）
给所有图片加上alt属性（内容运营或开发可以批量补充）
完成这三项，你的网站已经能覆盖80%的易用性和可访问性基础问题。
如果需要更严格的合规（如满足《无障碍网页内容规范》WCAG 2.1 AA级，或应对政府采购、ADA诉讼），建议配合自动化测试工具（axe、Lighthouse、WAVE）加人工审核。
结语
易用性和可访问性不是“额外成本”，而是基本人权和商业机会。
一个能被所有人轻松使用的网站，用户满意度更高，转化率更强，SEO排名也更靠前。
从今天起，把你的设计稿和代码拿出来，逐项对照这份清单。每修复一个问题，就意味着又有一群人能够顺利地使用你的产品。
让网站不再只服务于“大多数”，而是服务于“每一个人”。