开箱即用的网站可访问性提升指南（能访问任何网站的浏览器）
sinye56 2024-10-24 16:40 28 浏览 0 评论
本文首先介绍什么是网站可访问性、残障人士如何访问网站；然后提供一些开箱即用的建设无障碍网站的操作指南，让你能够立即在项目中使用；最后介绍了如何检测网站的可访问性。
什么是网站可访问性
网站可访问性指的是残障人士 (包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障) 在使用网站时不会遇到障碍，也就是说他们可以认知、理解网站、在网站上导航以及与网站组件进行交互。
残障人士如何访问网站
残障人士大概可以分为视觉障碍、听觉障碍、肢体障碍和认知障碍四大类。每类群体都有特定的访问网站的方式和页面要求。
视觉障碍
主要包括色盲、色弱和全盲和视力衰退等。全盲用户主要靠读屏软件来接收页面信息；色盲和色弱的用户对页面色彩要求比较高，包括颜色的选择和对比度的使用；视力衰退的用户有时需要放大页面上的文字和图片来阅读。
听觉障碍
主要包括耳聋或者听力衰退等。这类用户对页面上的一些音频信息有一定的要求，包括音频内容的可暂停、音量的调节、音频字幕等。
肢体障碍
主要是肢体残缺。这类用户主要借助一些软件或者硬件来访问网站，比如手臂残疾者借助一些物体敲击键盘来访问我们的网站。这就对我们网站的键盘可访问性有很高的要求，其中包括能通过键盘聚焦页面的交互组件、触发相应的键盘事件来进行交互、快速导航到主要内容区域等。
认知障碍
主要包括学习障碍和聚焦障碍、语言障碍、精神局限等。这类用户需要页面内容清晰易懂、能够重复多次阅读、内容可以灵活调节，这就要求我们页面上一些滚动区域的内容可以随时停止和重启、一些复杂的内容的能够配以简单易懂的说明文字、相同的链接使用相同的文字、页面上动画的设计不会引起用户不适等。
让你的网站无障碍
清晰的网站结构
1、通过 ARIA 中的 role 或者 HTML5 中语义化的标签 <main> 、<header> 等来为页面提供 Landmark，常见的有 Landmark 有 navigation、search、banner、contentinfo、complementary；
2、使用 H1 ~ H6 表示标题文字，用 H 元素组织页面区块；
网站样式和内容
1、确保你的设计有足够的颜色对比（字体颜色和背景色），这对低视力和色盲用户有益。WCAG 2.0 AAA 级要求正常文本最小对比度为 7:1，大号文本为 4.5:1，AA 级的建议是正常文本最小对比度为 4.5:1，大号字体为 3:1；
2、颜色不作为传递信息的唯一渠道，比如必填项、错误提示等信息的传递；
3、为 <html> 标签提供 lang 属性；
4、当页面内容的语言与 <html> 标签语言不同时，使用 lang 属性为内容标明语言；
5、尽量保证 DOM 顺序和视觉顺序一致；
6、页面缩放时能保证内容排版的正常阅读；
7、页面中必须包含一个 <title> 元素，并且不能为空；
8、移除页面上的 i 和 b 标签，用 css 实现加粗等样式。要强调的词、短语和句子，请用 em，strong 实现；
9、最大化兼容当前和未来的用户代理(包括辅助技术)；
10、为页面提供一个无障碍帮助文档的链接，用于说明页面无障碍使用方法；
11、为页面上的非文字内容提供替换文本，如图片，ASCII，SVG， Charts，Graphs 等；
Form
1、form 表单里面的表单元素必须有一个独一无二的 label。一般通过 label 配合 for，id 使用或者aria-label，aria-labelledby 实现；
2、如果页面上有多个表单，submit 和 reset button 必须是独一无二的；
3、Invalid 的表单输入值使用 aira-invalid 属性标识非法性；
4、必填元素使用 required 或 aria-required 来标识；
5、错误信息提示：为关联的表单输入项添加 aria-describedby 链接到错误提示 或者 使用 ARIA 中的 role = alert 或 Live Region；
6、input = images 必须有 alt 或者 titile 属性，且不为空；
7、输入框的描述文字或者错误提醒里面应提供正确例子和格式说明；
8、使用 fieldset 和 legend 为表单内容提供说明文字；
Table
1、使用 th 来定义 row 或者 column 中数据的标题；
2、数据表格必须有 name 和 descption 且不能相同。使用 caption、summary、title、aria-label、aria-labelledby 等属性实现；
3、尽量不要使用 table 布局，仅用于数据展示；
Link 和 导航
1、链接应该聚焦在本页面，如果需要在新窗口打开页面需要提前告知用户该行为；
2、使用 aria-label，aria-labelledby 或 title 为链接提供说明文本，描述去向；
3、链接的描述文字必须是独一无二的，相同的链接描述文字应该一致；
4、如果一个链接包含一个图片和文字，并且 alt 中的内容和文字类似/相同，那么 alt 的属性应该为空；
5、保证不会的用户不知情的情况下刷新和跳转页面；
Image
1、为 img 标签提供替换文本，使用 alt 或者 aria-labelledby 等属性；
2、纯装饰性图片提供 alt = ""，role = "presentation" 或者用 background-image 实现；
3、避免提供与相邻链接或文字类似/相同 的 alt 文字，造成冗余；
4、为一组图片的第一个 item 提供替代文本，比如商品评分star图片组
5、提供图片验证码的替代文本，并提供针对不同类型感官直觉的输出方式，如语音验证码
6、有背景图片的应该提供图片缺失或者不可用时的背景色
Hn
1、每个页面应该有且仅有一个 H1 标题且包含在 main 区块或者 banner 区块；
2、同级标题的内容必须是独一无二的，不能相同；
3、H 标签里面必须包含可视性文本，H2 ~ H6 中除了 img 的 alt 属性外，还应该包含文字内容；
4、标题合理嵌套，方便屏幕阅读器理解文档结构， 如 H2 嵌套 H3，不要跳级嵌套；
键盘可访问性
1、提供可以直接导航到主内容区域的链接和快捷键；
2、用 Tab 导航时，获取 focus 的顺序必须有意义，尽量和视觉效果保持一致，且在获取焦点时样式上要和未获得焦点的元素不同；
3、页面上所有的交互功能必须可以通过键盘来完成。不要使用双击处理程（onDblClick），因为键盘不能执行这个行为。鼠标事件要提供对应的keydown、keypress、keyup、onfocus 等事件；
4、不要有键盘陷阱，保证用户不会被困在某个弹窗里（不能退出）或者迷失焦点元素里。可以使用 tabindex = "-1" 从 Tab 顺序中移除一个元素；
5、为页面上的公有区域比如公共导航，提供可以直接跳过的快捷键；
6、保证提供的页面快捷键不会和浏览器标准快捷键相冲突；
7、保证所有的 menu 子菜单可通过键盘打开并在其中导航；
多媒体和动画
1、音频必须要有配套的可替换文字和描述文字；
2、音频内容在页面加载时自动播放，超过 3s 的内容要让用户可以自主的暂停和重启内容；
3、页面上不要出现闪动频率高于 3 次/s 的内容，以免引起不适；
4、如果用户的交互是受时间限制的，需要提供一个方式让用户可以关闭，调整这个时间限制；
5、滚动内容或者自动更新的内容在页面加载完成自动开始，更新或移动频率低于 5s 时，需要提供一个可以停止和重启的功能；
检测网站的可访问性
建站完成之后，可以使用一系列的测评工具对页面的可访问性进行检测。其中包括使用测评插件、键盘可访问性检测、内容检测、屏幕阅读器、其他方式等。
测评插件
目前比较流行的测评插件有 Chrome 的 WAVE，Firefox 的 Accessibility Evaluation Toolbar 。
键盘检测
在只是用键盘的情况下访问网站。
内容检测
缩放浏览器 75% ~ 200% 进行检测，看页面上信息展示是否完整。
屏幕阅读器
使用主流的阅读器主要包括 JAWS， NVDA， VoiceOver 来阅读网站。
其他方法
邀请身边的残障朋友使用网站等。
参考文献
Accessible Rich Internet Applications (WAI-ARIA) 1.0
网站内容无障碍指南2.0/Web Content Accessibility Guidelines (WCAG) 2.0 中文版
Test Your Site for Accessibility
Web Accessibility In Mind
WAI-ARIA Authoring Practices 1.1Functional Accessibility Evaluator 2.0
原文作者：小冉/饿了么前端
相关推荐
- 6个接私活的网站，你有技术就有钱
-
如果觉得有帮助，还请大家帮忙多多转发，点个关注作者：发哥链接：GitHubDaily本篇文章会向大家推荐国内外几个接外包比较靠谱的平台，主旨是贵精不贵多。因此，像「猪x戒」这种会让程序员自贬身价，扰乱...
- Java开源可商用的CMS建站系统_java建站源码
-
Java研发的CMS内容管理系统具有许多优势和特点，包括以下几个方面：跨平台性：Java是一种跨平台的编程语言，可以在不同的操作系统上运行，包括Windows、Linux、Mac等。这意味着Java...
- SEO新手建站必看"干货"优质空间和功能选择技巧!
-
一.空间的分类服务器：远程的高级大型计算机。vps:虚拟服务器。虚拟空间：也称虚拟主机云主机：是在一组集群主机上虚拟出多个类似独立主机的部分，集群中每个主机上都有云主机的一个镜像，从而大大提高了虚拟主...
- 千字长文教你使用 宝塔面板 快速搭建网站
-
本文将教大家使用宝塔面板快速搭建网站，云服务器购买以及域名注册部分请自行上网搜索了解，亦可留言联系小编进行咨询。如果是和下方一样本地搭建演示的话，则不需要付费购买域名和主机。宝塔面板的是...
- BlueHost香港虚拟主机建站的5个优点
-
应该是从2006年左右开始，如果我们建站选择国内的主机需要备案手续，而且比较繁琐，且根据各地的不同政策还需要到接入点拍照登记个人信息等，一来比较繁琐，二来我们担心万一网站可能存在的信息问题导致不必要的...
- 10款好用的Linux服务器网站管理面板推荐
-
如今在建站时，很多人都会使用管理面板来辅助建站，因为相对于手动安装软件，面板更加简单而且高效，即使新手也能很快学会搭建网站，在本文中我们来推荐几款好用的网站管理面板宝塔面板宝塔面板是一款简单好用的网站...
- 小白拥有一台云服务器到底能干些什么?成就感爆棚的简单方案!
-
?云服务器是什么？云服务器（比如阿里云、腾讯云等）是提供给用户的一种虚拟服务器资源，你可以把它看作一台“rent的电脑”，只需要支付少量费用就可以拥有一个功能强大的网络设备。对于小白来说，拥有一...
- 苹果CMS，苹果CMS采集插件，苹果CMS快速建站(图文教程)
-
苹果CMS，有着强大的管理功能，管理后台界面大方、操作简单、功能齐全、模块众多、双端管理。苹果CMS加上丰富的系统标签，系统内置了丰富的cms标签并支持thinkphp框架标签完美融合，可以调取系统内...
- 新手搭建网站、小程序、APP等系统，如何选择服务器?
-
今天和小蔡和大家说说，新手搭建网站，如何选择服务器？废话不多说，直接来干货。服务器是存放网站源代码的容器，也是运行网站程序的工具，所以是不可或缺的。新手刚接触搭建网站，若不知道怎么去选择一台适合自己...
- 在海外VPS服务器(Hostinger)上配置宝塔面板的操作步骤
-
不得不说，宝塔面板是真的好用啊~用上就放不下了，一些海外的免费开源的服务器集成面板（比如CloudPanel）我也用了，不喜欢，真的不如宝塔面板方便耐用。今天聊一下在海外服务器（也包括国内服务器，没有...
- 干货盘点:每个wordpress站长都推荐完成的60个任务清单
-
构建和运营wordpress网站包含了很多重要任务，遗漏哪一方面都可能造成或大或小的不良后果，因此我们特别整理了这个任务清单，为你查漏补缺，希望能对您现在运营或者即将开始构建的wordpress网站有...
- 为什么站长喜欢选择BlueHost主机建站
-
BlueHost正式成立于2003年，从事主机(虚拟主机)业务至今已经将近十余年，无论从口碑还是用户的评价，我们基本很少看到关于Bluehost主机产品和商家负面的评论信息。从2014年开始，Blue...
- 自助建站时代来临 半小时成建站达人
-
“H5”意为第五代HTML，即第五代网页编写语言。自从1991年第一代HTML开始研发以来，网页编写、网站建设一直都属于高端技术行业，网站建设人员都是一些专业型人才，这也意味着网站的建设和维护都需要不...
- 现代化、开源的 Linux 服务器运维管理面板
-
1Panel是一个现代化、开源的Linux服务器运维管理面板。1Panel的功能和优势包括：快速建站：深度集成Wordpress和Halo，域名绑定、SSL证书配置等一键搞定；高效管理...
- [1Panel]开源，现代化，新一代的 Linux 服务器运维管理面板
-
测评介绍本期测评试用一下1Panel这款面板。1Panel是国内飞致云旗下开源产品。整个界面简洁清爽，后端使用GO开发，前端使用VUE的Element-Plus作为UI框架，整个面板的管理都是基于do...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- linux进程通信 (63)