user agent什么意思(什么是网站的可访问性，可访问性与WCAG又是什么关系？)

回答这个问题之前，我们先来看一些实际场景：

网站的可访问性

场景一：

在安静的图书馆里，你正在使用笔记本电脑浏览某个网站，当访问一个网站页面的时候，这个页面有一个视频/音频自动播放，而你却在页面上找不到可以关闭、暂停这个视频/音频的按钮。

场景二：

你忘记带鼠标了，可这个时候你需要使用电脑完成机票的预定，如果只能通过键盘操作，你可以完成订票网站的查询和预定吗？

场景三：

你的听力有些问题，无法听清网站视频的声音，但是你很想知道视频中人物的对话内容。

场景四：

你的视力有些问题，有一些色弱，当浏览某个网站的时候，网站的文字颜色和背景颜色太接近了，导致你无法看清楚文字的内容是什么。

场景五：

你是一位盲人，你很希望查阅某些资讯网页的信息，所以你需要借助辅助设备或者语音阅读器，但是尴尬的是你访问的那个网站竟然无法通过这些辅助设备访问。

用户的多样性

• 约有 2% 的人口患有某种视力残疾（即盲人或戴眼镜也严重看不清物体）
• 约有 50% 人口患有某种临床上显著的屈光不正（近视，远视，散光等）
• 约 8% 的男性和 0.5% 的女性患有某种色盲症
• 约 2% 的成人患有听力残疾
• 超过 4% 人口有认知障碍（难以记住事物、集中注意力或做出决策）。
• 某些情境下，比如需要抱孩子的母亲，安静的图书馆，正常人不能使用听觉或者运动觉。

用户的多样性

网站的可访问性指的是访问与使用网站的便捷性和效率。让用户可以通过屏幕阅读器等辅助设备来访问网站内容。同时满足用户在各种极端情况下正常浏览网站的需求，比如阳光强烈的中午，安静的图书馆，鼠标坏了的电脑等。

所以网站（应用）应该具备以下三点能力：

• Web内容对于残障用户的可阅读和可理解性。让包括残疾人在内的所有人都能访问。
• 无论用户残疾与否，都可以通过用户代理（ user agent ）来访问web内容，如语音浏览器，车载个人电脑，移动电话等。
• 应付极端情况下的正常浏览需求，使多样化的用户在各种极端环境都可以正常浏览并使用网站。

WCAG：网络内容无障碍指南（Web Content Accessibility GuIDElines） 为开发无障碍网站提供了指南。https://www.w3.org/TR/2021/WD-wcag-3.0-20211207/

WCAG 级别

WCAG对网站的可访问性定义了三个级别，分别是A，AA，AAA，级别越高，网站的可访问性越好。但是并不推荐网站一定要达到AAA级别，因为那样会让网站在设计上，功能上取舍很多。所以达到AA级别，是大多数网站的选择。

WAI-ARIA：网络无障碍倡议 - 无障碍互联网应用（Web Accessibility Initiative - Accessible Rich Internet Applications） 文件包含了创建完全无障碍 JavaScript 部件所需要的技术。

法律法规：很多国家与地区都已经出台了相应的法律和法规，在欧美很多国家，如果网站没有达到可访问性的要求属于违法，这也是欧美项目中比较注重可访问的原因。国内在可访问性的重视方面还有待提高，原因是国内项目的很多客户还缺乏这方面的意识，在项目需求上都没提这方面的要求。

网站无障碍技术法律法规

很多小伙伴可能浏览了WCAG官网，发现内容是如此之多，会感叹道：“天哪！这么多内容，怎么可能记得住，开发和测试人员都会疯的！”

别紧张，如果你对WCAG不太了解，可以大概浏览下，不用去死记硬背，因为有很多工具会帮助你，并且如果你本身就是基于W3C标准来进行开发网站，那么你的大部分代码本身就已经是符合WCAG规范了。

IDE工具与可访问性相关插件可以协助开发

TS LINT / ES LINT提示

浏览器插件检测可访问性

无论是火狐还是谷歌，自带的console都提供了可访问性的检测功能。

谷歌

火狐

小风在此强烈推荐浏览器插件AXE，非常简单易用，而且相当专业。根据AXE的提示，就可以轻松的知道目前网站哪些地方没有实现WCAG标准，并且该如何实现。

AXE谷歌插件

AXE

人工检测：开发人员和测试人员除了使用工具外，还必须通过人工来检测。

• 使用键盘tab键获取页面焦点顺序正常
• 页面需要互动的表单控件可以通过键盘获取焦点
• 页面需要互动的表单控件有对于功能的描述
• 当页面出现新对话框的时候，焦点自动聚焦
• 没有焦点陷阱（无法通过tab键跳出的控件）
• 自定义的互动表单项有WAI-ARIA规范的roles.
• 页面上的视觉顺序遵循DOM顺序
• 表单控件可以使用键盘进行完整的功能操作
• 页面不可见的内容对于辅助设备也是不可见的
• 只使用屏幕阅读器和键盘可以正常使用网站的所有功能

最后，让我们回到文章最开头的那几个场景

场景一：

在安静的图书馆里，你正在使用笔记本电脑浏览某个网站，当访问一个网站页面的时候，这个页面有一个视频/音频自动播放，而你却在页面上找不到可以关闭、暂停这个视频/音频的按钮。

解决方案：如果网页中有视频或者音频，请提供控制按钮，让用户可以在网页上暂停或者关闭。

场景二：

你忘记带鼠标了，可这个时候你需要使用电脑完成机票的预定，如果只能通过键盘操作，你可以完成订票网站的查询和预定吗？

解决方案：用户通常习惯用鼠标操作去点击按钮，去选择输入框，网页在能响应鼠标操作的同时，需要提供监听并响应键盘操作的能力。网页中的输入框、按钮、链接需要可以通过TAB键按照显示顺序获取到焦点，按钮和链接需要可以响应回车键。

场景三：

你的听力有些问题，无法听清网站视频的声音，但是你很想知道视频中人物的对话内容。

解决方案：网页中如果有视频，请提供相应的字幕或者文字内容。

场景四：

你的视力有些问题，有一些色弱，当浏览某个网站的时候，网站的文字颜色和背景颜色太接近了，导致你无法看清楚文字的内容是什么。

解决方案：请设计师注意网站的用色，注意颜色对比度，让用户可以清晰的识别文字。

场景五：

你是一位盲人，你很希望查阅某些资讯网页的信息，所以你需要借助辅助设备或者语音阅读器，但是尴尬的是你访问的那个网站竟然无法通过这些辅助设备访问。

解决方案：网站开发人员需要考虑到盲人使用的情况，比如图片img标签请设置title或者alt属性以供阅读器读出。尽量使用语义化标签，比如使用button来表示按钮，如果不得已使用了别的标签，请根据WAI-ARIA，提供相应的role属性，使屏幕阅读器或者语音设备清楚这个标签充当了按钮的角色。