为了更好的帮助残障人事，写一个针对于WordPress的网页访问无障碍教程，因为我们的社区也是采用的WordPress驱动；其它的网页系统也可以使用这个实现方法，因为网站程序大同小异。
网站无障碍工具条是一种专门为视力受损、听说障碍、阅读和写作困难、身体障碍以及身体功能下降的老年人群或残障人群设计的网站辅助JavaScript插件。
这个工具条的主要目标是提升这些特定群体访问和使用网站的体验。它为用户提供了一系列的辅助功能，例如字体大小调整、颜色对比度改变、键盘导航、文本到语音转换等。这些功能可以帮助那些有困难阅读标准文本、理解复杂颜色对比度、使用鼠标或触摸屏，或者理解网页内容的用户。
此外，网站无障碍工具条还可以为用户提供关闭动画的选项。因为对于一些用户来说，动画可能会引起不适或干扰。有了这个选项，他们就可以更舒适地访问和使用网站。
- 1.使用代碼进行编写，可以看下方的教程。针对开发者哦，小白用户的话可以咨询我们的客服。
- 2. 使用无障碍插件：有一些WordPress插件可以帮助提高网站的无障碍性，例如WP Accessibility或One Click Accessibility。
- 3. 遵守无障碍设计原则：例如，确保所有的图片都有ALT标签，使用清晰的标题和子标题，避免使用复杂的语言和句子结构，等等。
- 4. 提供键盘导航：对于视力障碍的用户来说，键盘导航是非常重要的，所以你的网站应该可以通过键盘进行完全的导航。
- 5. 提供文本到语音功能：对于视力障碍或阅读障碍的用户来说，文本到语音功能可以帮助他们理解网站的内容。
- 6. 提供关闭动画的选项：对于某些用户来说，动画可能会引起不适或干扰，提供关闭动画的选项可以帮助这些用户更好地访问和使用你的网站。
功能实现：
1.文本朗读 2.页面放大&缩小 3.大鼠标样式 4.十字线 5.大字幕 6.指读
演示地址
https://muzihuaner.github.io/assist/example/index.html
调用方式
- 在网页合适的地方如banner处加入id为 assist-open 的标签；
- 在页面底部 body 之前引入插件js；
- 如果需要特殊处理的地方使用后面的API做对应处理；
- 在网页根目录上传 /src/assets/allaw.cur文件;
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站无障碍工具条</title>
</head>
<body>
<div id='assist-open'>无障碍</div>
<script type="text/javascript" src="../dist/assist-entry.js"></script>
</body>
</html>
CDN地址（可替换）
<script type="text/javascript" src="https://fastly.jsdelivr.net/gh/muzihuaner/assist@mAin/dist/assist-entry.js"></script>
无障碍图标样式
<div><img src="https://a.sinaimg.cn/mintra/pic/2201190827/32aria.png" height="32px" id='assist-open'></div>
API
- showTag; 用于打开无障碍标识，（点击无障碍后并不在当前页面打开，而是跳转到其他没有调用showTag的页面打开）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<a id='assist-open' assist-href='https://'>无障碍</a>
<script type="text/javascript" src="dist/assist-entry.js"></script>
<script>
~(function(){
AssistEntry.showTag() // 如果当前页面点击 无障碍 按钮后需要跳转到其他页面打开无障碍功能，则需要调用此函数做cookie标记
})()
</script>
</body>
</html>
- zoomState; 返回页面放大倍数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<a id='assist-open' assist-href='https://'>无障碍</a>
<script type="text/javascript" src="dist/assist-entry.js"></script>
<script>
~(function(){
AssistEntry.message.subscribe('zoomState', state => {
console.log(`页面放大倍数：${state}`);
})
})()
</script>
</body>
</html>
- openState; 返回插件打开状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<a id='assist-open' assist-href='https://'>无障碍</a>
<script type="text/javascript" src="dist/assist-entry.js"></script>
<script>
~(function(){
AssistEntry.message.subscribe('openState', state => {
console.log(`是否开启无障碍模式：${state}`);
})
})()
</script>
</body>
</html>
- bigTextState; 大字幕开启状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<a id='assist-open' assist-href='https://'>无障碍</a>
<script type="text/javascript" src="dist/assist-entry.js"></script>
<script>
~(function(){
AssistEntry.message.subscribe('bigTextState', state => {
console.log(`是否开大字幕模式：${state}`);
})
})()
</script>
</body>
</html>
页面标注:
对于插件无法识别或识别不准的标签需业务自行标注，标注规范如下
1 – 对于img标签，需设置 alt ，如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<img alt="网站无障碍工具条无障碍图片" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F20130625150506_fiJ2r.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627139099&t=524628587af020410785e8ba98157609">
</body>
</html>
2 – 对于其他标签，需使用 title 进行标注，如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<div title="网站无障碍工具条">
网站无障碍工具条
</div>
</body>
</html>
3 – 对于非语意化标签，需加入 role来标注其真实属性，如果不标注title，则取标签内容，如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<div role="button" title="提交">
提交
</div>
</body>
</html>
隐藏模块：
对业务中需要隐藏的模块加一个class名 qunar-assist-hide ，插件在打开的时候会自动监测这个class名统一隐藏
页面缩放影响：
随着页面放大，部分非自适应或者绝对定位的组件可能会出现错位问题，需业务开发自行调整
大段文本识别：
对于可能出现大段文本的地方，需要在当前标签加一个名为 qunar-assist-long-text 的class，插件会自动对这个class下的内容进行分割
兼容性
- ie10+
- 所有主流浏览器
- 火狐（不支持页面放大功能）
参考： https://github.com/duheng/assist
https://github.com/gemgin/AmblyopiaTool
https://blog.csdn.net/Z51047299/article/details/123617530
文章标题：WordPress网页无障碍(非插件)代码实现方法
文章链接：https://cbec.com.cn/5433.html
更新时间：2024年09月07日
原创声明：本文系作者授权CBEC跨境社区发表，未经许可，不得转载。
如有侵权，请联系 info@hicici.com 删除。
