网站无障碍工具条、无障碍_网站信息无障碍辅助工具条源码资源-CSDN文库

共162个文件

png：25个

js：20个

sample：12个

javascript

需积分: 5 98 浏览量 2023-09-20 16:09:18 上传评论收藏 636KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

网站无障碍工具条、无障碍（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

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 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

rollup.config.js 3KB

index.js 2KB

共 162 条

# 网站无障碍工具条 ## **什么是无障碍工具条？** > 网站无障碍工具条，这是一个针对于有视障、听说障碍、读写障碍、肢体障碍，机体功能衰退的老年人群或残障人士开发的一个网站辅助js插件 ![](tu1.png) ## 功能 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

评论收藏

内容反馈