# 网站无障碍工具条
## **什么是无障碍工具条？**
> 网站无障碍工具条，这是一个针对于 有视障、听说障碍、读写障碍、肢体障碍，机体功能衰退的老年人群或残障人士开发的一个网站辅助js插件
## 功能
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文件;
例子：
```html
<!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地址（可替换）
```html
<script type="text/javascript" src="https://fastly.jsdelivr.net/gh/muzihuaner/assist@main/dist/assist-entry.js"></script>
```
无障碍图标样式
<img src="https://a.sinaimg.cn/mintra/pic/2201190827/32aria.png" style="zoom:25%;" />
```html
<div><img src="https://a.sinaimg.cn/mintra/pic/2201190827/32aria.png" height="32px" id='assist-open'></div>
```
## API
- showTag; 用于打开无障碍标识，（点击无障碍后并不在当前页面打开，而是跳转到其他没有调用showTag的页面打开）
```html
<!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; 返回页面放大倍数
```html
<!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; 返回插件打开状态
```html
<!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; 大字幕开启状态
```html
<!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 ，如
```html
<!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 进行标注，如
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站无障碍工具条</title>
</head>
<body>
<div title="网站无障碍工具条">
网站无障碍工具条
</div>
</body>
</html>
```
3 - 对于非语意化标签，需加入 role来标注其真实属性，如果不标注title，则取标签内容，如
```html
<!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+
- 所有主流浏览器
- 火狐（不支持页面放大功能）
[开发者关注](./DEVELOPER.md "开发者关注")
参考：
https://github.com/duheng/assist
https://github.com/gemgin/AmblyopiaTool
https://blog.csdn.net/Z51047299/article/details/123617530
本项目使用百度TTS，可参考
https://www.cnblogs.com/HGNET/p/16304126.html
网站无障碍工具条、无障碍 （162个子文件） 
04f63c1feccced0c898db90a4c4cdab941aa80 2KB 0674f57365637f45ec83ba66bd788a90d520bf 455B 069858ebd5f03574fca1b582533c7a97748aff 1KB 0db7b0adf97194ec41ae1de2a190e356f1eee4 3KB 12ebb6786ba5f46e5d7a5fc53e097a89dfd7a1 2KB 186cccd684f81708a405b3661dec05a75ac061 166B 19144b57646e95f6ca5c978c8f485373019fae 1KB 1c94fa8b38b4f6d5f30112b1febb77f045681c 182B 1e23e4922f9f3122f3e4f579de3c6a492ab935 62KB 215fa2ccc34cbeff3bfccf7ca3d35fad4e2df0 93B 21e2db465b0e4faa9ce777a5e2e49b165b006a 799B 258ade594e7226dd3da0f03505ff48faeebedb 1KB 28e0707d3f8f17edb6ed4ec21b493b4c97a206 163B 2acf3a4d9c92202aca9f66d815dbc56d4c7e0e 690B 2d97da08372c8c4151f775529204178e525980 111B 3314aad35809b8c7f52440b18b28c342b1bdec 1KB 3c314bec645aebeb5d128f787c57e6982acbea 112B 3d3c7d1c22d837baa212e3ab8c2dc2f911b483 446B 4050fe0517849d3d49e51c7c720bf9b1757b79 465B 43b0a58039104e6221639bd665ab34474adc54 1KB 485d697f6c85799cf2c0a0f32c961844744d83 1013B 4ac5c27dc3fb2288fc163a214782f06657a98d 945B 52c694aa07440b8680df3993f8bd50b1a3f08b 202B 603fac2c3d7733f29129a9908d40f215d5203f 923B 641b858fc6ce7e5e999dcc039ecedcc0f10c17 1KB 65ca750cdc2bbf34ff8cf2b6b419202a7e84f3 260B 66c8eab62aea48bc763fa386c9f4ffe1da60c1 316B 69ae7964e9ad0eaa405b6cdb0dcb4292113f1d 2KB 6c09df722f894e5db80bbb2e497087d6b4c1d8 1KB 6c1c0d470000d9bb38ebb21b66829e05df10fb 1KB 736c69efe9c984e08075ec7d287d237302eef8 1KB 80fe86ef9ed0ac0f92b5810ef4c96bce265ea1 80KB 84db87885c26f4948f13dde866307f7d6d6143 727B 88c797e839143f204d1eca53c646ee4988a9e4 1KB 89b23df5fec7da451680768e31099514047b65 296B 8cf756efe4cbe4525300703f8af3f56bd30a4a 2KB 8e21314b46dca693e86ad209e4de98ed8caf37 26KB 8f26bd0c75d0fe94e9c9268aad6d6da1b205ae 991B 91c98865768ba4bbc9a4199d3408d7b94ee6ca 316B 9785aca9928ecd8609a5a52951f7787502f17f 801B 9820f16a2d5ed336eea6c2dcaaa41c725112fc 2KB a69494acf823da720ba8668256a8b6182a33e2 81B b04f264f0667391b2118165ea9aafd5f9aa7f8 166B b08366585744cccdf9bce22cb51b3b2fdda8b3 392B b52e4d0ab1d82b01b884425881d78b5c6126ca 1KB b65042d4fb31bca770a1b222bbcaa55e961e5f 88B b695f8aa7d254be9157e3af20c1ebf7f20ae77 758B baadad76ab2d8b9a56367e3af5f13dce9e9d9e 164B bc04182155f317f17da93dc8f4128954a8db1e 145B be02408dbc9df1174abff639ca80cb50172d62 1KB c039694f5c05393f2c7c8f1d4d2ec364fba7c4 371B c1a4b43886c9b3786a16f77cb46a8c053d5f7e 1018B c42a12d0aef9a77d6754cc54c9c39745cdcfa9 177B c6ae5fb5c49368bf7511f96afe5c5d939af578 111B c8a13fecdfa1c2adf06f0fb3674790e2346fa5 464B ca09c5dae1f1e5df0970dec73a8b67ed3fa2fa 1KB ce6001413f8a03150ebe521cc7ec2db4aa9b64 709B ced4f4f855e6695361d5911ca99c363c0e2298 150B config 350B allaw.cur 9KB allaw.cur 9KB d02cfcfffec210f75877e94cdad6076d41cd28 2KB d051c2e5bb4c13a0e175596ed16036dabf02e8 1KB d2e1231a95a6ba3fdc29626861266f59c78709 432B d300e00c8be4e526a890aa50d52a22630a73ff 80B d523f6c9bc97ffb03121839208ce450d4f607d 1KB dc53d7d7185e48b84fb694d8b1c58da44adcde 103B dcad756b06ccebff444a2b80199065aec75643 62KB de5a9bd8495b8c76fceed3ccc5868354bfb563 112B de61ab110a81d2fd4f9e05787755c54b58eb40 316B de74938af6eb738ca96da1b059e836ac0f352f 446B description 73B e0e14f806f53d3bc7927a5b2c0528224a78330 493B e45ef26728d291b5cf54a9d79c83ce65a311ef 316B e7b14f4341aa03e20a5f932029b2e73ee31f7c 898B ecc513cd6e931ea7fd2625e3dc6b050bdc3bbb 1022B ee5eb2a176912a87e80fc156e983c477843774 774B exclude 240B f028960fbfd7927b8d5e8c7fbdec0b6aec3d9f 1KB f5f6525d2a694ba9b4932101c64586c52e66cd 85B f78f9fbc0371420c4cac7ac3e6fd9cec62a812 2KB f9a6448bad0cc0977fe10b072b6402342fbcc5 833B ff8c42028a2dfefbb71d069afedf97910c0c89 411B HEAD 179B HEAD 179B HEAD 30B HEAD 21B assist.htm 237KB
index.html 2KB index 6KB assist-entry.js 153KB assist.js 153KB utils.js 8KB index.js 6KB base.js 5KB index.tmpl.js 4KB index.js 3KB index.js 3KB rollup.config.js 3KB index.js 2KB共 162 条
- 1
- 2
资源评论
W.Y.B.G
- 粉丝: 619
- 资源: 15
