开箱即用的网站可访问性提升指南

21CTO社区导读：本篇文章介绍什么是网站可访问性、残障人士如何访问网站；然后提供一些开箱即用的建设无障碍网站的操作指南，让你能够立即在项目中使用；最后介绍了如何检测网站的可访问性。

什么是网站可访问性

网站可访问性指的是残障人士 (包括全盲和低视力、失聪和听力衰退、学习障碍、精神局限、行动受限、语言障碍、光敏性以及多重残障) 在使用网站时不会遇到障碍，也就是说他们可以认知、理解网站、在网站上导航以及与网站组件进行交互。

残障人士如何访问网站

残障人士大概可以分为视觉障碍、听觉障碍、肢体障碍和认知障碍四大类。每类群体都有特定的访问网站的方式和页面要求。

视觉障碍

主要包括色盲、色弱和全盲和视力衰退等。全盲用户主要靠读屏软件来接收页面信息；色盲和色弱的用户对页面色彩要求比较高，包括颜色的选择和对比度的使用；视力衰退的用户有时需要放大页面上的文字和图片来阅读。

听觉障碍

主要包括耳聋或者听力衰退等。这类用户对页面上的一些音频信息有一定的要求，包括音频内容的可暂停、音量的调节、音频字幕等。

肢体障碍

主要是肢体残缺。这类用户主要借助一些软件或者硬件来访问网站，比如手臂残疾者借助一些物体敲击键盘来访问我们的网站。这就对我们网站的键盘可访问性有很高的要求，其中包括能通过键盘聚焦页面的交互组件、触发相应的键盘事件来进行交互、快速导航到主要内容区域等。

认知障碍

主要包括学习障碍和聚焦障碍、语言障碍、精神局限等。这类用户需要页面内容清晰易懂、能够重复多次阅读、内容可以灵活调节，这就要求我们页面上一些滚动区域的内容可以随时停止和重启、一些复杂的内容的能够配以简单易懂的说明文字、相同的链接使用相同的文字、页面上动画的设计不会引起用户不适等。

让你的网站无障碍

清晰的网站结构

1、通过 ARIA 中的 role 或者 HTML5 中语义化的标签

、

等来为页面提供 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、为标签提供 lang 属性；

4、当页面内容的语言与标签语言不同时，使用 lang 属性为内容标明语言；

5、尽量保证 DOM 顺序和视觉顺序一致；

6、页面缩放时能保证内容排版的正常阅读；

7、页面中必须包含一个元素，并且不能为空；</span><br /> <br /> <span style="font-size:15px">8、移除页面上的 i 和 b 标签，用 css 实现加粗等样式。要强调的词、短语和句子，请用 em，strong 实现；</span><br /> <br /> <span style="font-size:15px">9、最大化兼容当前和未来的用户代理(包括辅助技术)；</span><br /> <br /> <span style="font-size:15px">10、为页面提供一个无障碍帮助文档的链接，用于说明页面无障碍使用方法；</span><br /> <br /> <span style="font-size:15px">11、为页面上的非文字内容提供替换文本，如图片，ASCII，SVG， Charts，Graphs 等；</span><br /> <br /> <span style="font-size:15px"><strong>Form</strong></span><br /> <br /> <span style="font-size:15px">1、form 表单里面的表单元素必须有一个独一无二的 label。一般通过 label 配合 for，id 使用或者aria-label，aria-labelledby 实现；</span><br /> <br /> <span style="font-size:15px">2、如果页面上有多个表单，submit 和 reset button 必须是独一无二的；</span><br /> <br /> <span style="font-size:15px">3、Invalid 的表单输入值使用 aira-invalid 属性标识非法性；</span><br /> <br /> <span style="font-size:15px">4、必填元素使用 required 或 aria-required 来标识；</span><br /> <br /> <span style="font-size:15px">5、错误信息提示：为关联的表单输入项添加 aria-describedby 链接到错误提示或者使用 ARIA 中的 role = alert 或 Live Region；</span><br /> <br /> <span style="font-size:15px">6、input = images 必须有 alt 或者 titile 属性，且不为空；</span><br /> <br /> <span style="font-size:15px">7、输入框的描述文字或者错误提醒里面应提供正确例子和格式说明；</span><br /> <br /> <span style="font-size:15px">8、使用 fieldset 和 legend 为表单内容提供说明文字；</span><br /> <br /> <span style="font-size:15px"><strong>Table</strong></span><br /> <br /> <span style="font-size:15px">1、使用 th 来定义 row 或者 column 中数据的标题；</span><br /> <br /> <span style="font-size:15px">2、数据表格必须有 name 和 descption 且不能相同。使用 caption、summary、title、aria-label、aria-labelledby 等属性实现；</span><br /> <br /> <span style="font-size:15px">3、尽量不要使用 table 布局，仅用于数据展示；</span><br /> <br /> <span style="font-size:15px"><strong>Link 和导航</strong></span><br /> <br /> <span style="font-size:15px">1、链接应该聚焦在本页面，如果需要在新窗口打开页面需要提前告知用户该行为；</span><br /> <br /> <span style="font-size:15px">2、使用 aria-label，aria-labelledby 或 title 为链接提供说明文本，描述去向；</span><br /> <br /> <span style="font-size:15px">3、链接的描述文字必须是独一无二的，相同的链接描述文字应该一致；</span><br /> <br /> <span style="font-size:15px">4、如果一个链接包含一个图片和文字，并且 alt 中的内容和文字类似/相同，那么 alt 的属性应该为空；</span><br /> <br /> <span style="font-size:15px">5、保证不会的用户不知情的情况下刷新和跳转页面；</span><br /> <br /> <span style="font-size:15px"><strong>Image</strong></span><br /> <br /> <span style="font-size:15px">1、为 img 标签提供替换文本，使用 alt 或者 aria-labelledby 等属性；</span><br /> <br /> <span style="font-size:15px">2、纯装饰性图片提供 alt = “”，role = “presentation” 或者用 background-image 实现；</span><br /> <br /> <span style="font-size:15px">3、避免提供与相邻链接或文字类似/相同的 alt 文字，造成冗余；</span><br /> <br /> <span style="font-size:15px">4、为一组图片的第一个 item 提供替代文本，比如商品评分star图片组</span><br /> <br /> <span style="font-size:15px">5、提供图片验证码的替代文本，并提供针对不同类型感官直觉的输出方式，如语音验证码</span><br /> <br /> <span style="font-size:15px">6、有背景图片的应该提供图片缺失或者不可用时的背景色</span><br /> <br /> <span style="font-size:15px"><strong>Hn</strong></span><br /> <br /> <span style="font-size:15px">1、每个页面应该有且仅有一个 H1 标题且包含在 main 区块或者 banner 区块；</span><br /> <br /> <span style="font-size:15px">2、同级标题的内容必须是独一无二的，不能相同；</span><br /> <br /> <span style="font-size:15px">3、H 标签里面必须包含可视性文本，H2 ~ H6 中除了 img 的 alt 属性外，还应该包含文字内容；</span><br /> <br /> <span style="font-size:15px">4、标题合理嵌套，方便屏幕阅读器理解文档结构，如 H2 嵌套 H3，不要跳级嵌套；</span><br /> <br /> <span style="font-size:15px"><strong>键盘可访问性</strong></span><br /> <br /> <span style="font-size:15px">1、提供可以直接导航到主内容区域的链接和快捷键；</span><br /> <br /> <span style="font-size:15px">2、用 Tab 导航时，获取 focus 的顺序必须有意义，尽量和视觉效果保持一致，且在获取焦点时样式上要和未获得焦点的元素不同；</span><br /> <br /> <span style="font-size:15px">3、页面上所有的交互功能必须可以通过键盘来完成。不要使用双击处理程（onDblClick），因为键盘不能执行这个行为。鼠标事件要提供对应的keydown、keypress、keyup、onfocus 等事件；</span><br /> <br /> <span style="font-size:15px">4、不要有键盘陷阱，保证用户不会被困在某个弹窗里（不能退出）或者迷失焦点元素里。可以使用 tabindex = “-1” 从 Tab 顺序中移除一个元素；</span><br /> <br /> <span style="font-size:15px">5、为页面上的公有区域比如公共导航，提供可以直接跳过的快捷键；</span><br /> <br /> <span style="font-size:15px">6、保证提供的页面快捷键不会和浏览器标准快捷键相冲突；</span><br /> <br /> <span style="font-size:15px">7、保证所有的 menu 子菜单可通过键盘打开并在其中导航；</span><br /> <br /> <span style="font-size:15px"><strong>多媒体和动画</strong></span><br /> <br /> <span style="font-size:15px">1、音频必须要有配套的可替换文字和描述文字；</span><br /> <br /> <span style="font-size:15px">2、音频内容在页面加载时自动播放，超过 3s 的内容要让用户可以自主的暂停和重启内容；</span><br /> <br /> <span style="font-size:15px">3、页面上不要出现闪动频率高于 3 次/s 的内容，以免引起不适；</span><br /> <br /> <span style="font-size:15px">4、如果用户的交互是受时间限制的，需要提供一个方式让用户可以关闭，调整这个时间限制；</span><br /> <br /> <span style="font-size:15px">5、滚动内容或者自动更新的内容在页面加载完成自动开始，更新或移动频率低于 5s 时，需要提供一个可以停止和重启的功能；</span><br /> <br /> <span style="font-size:15px"><strong>检测网站的可访问性</strong></span><br /> <br /> <span style="font-size:15px">建站完成之后，可以使用一系列的测评工具对页面的可访问性进行检测。其中包括使用测评插件、键盘可访问性检测、内容检测、屏幕阅读器、其他方式等。</span><br /> <br /> <span style="font-size:15px"><strong>测评插件</strong></span><br /> <br /> <span style="font-size:15px">目前比较流行的测评插件有 Chrome 的 WAVE，Firefox 的 Accessibility Evaluation Toolbar 。</span><br /> <br /> <span style="font-size:15px"><strong>键盘检测</strong></span><br /> <br /> <span style="font-size:15px">在只是用键盘的情况下访问网站。</span><br /> <br /> <span style="font-size:15px"><strong>内容检测</strong></span><br /> <br /> <span style="font-size:15px">缩放浏览器 75% ~ 200% 进行检测，看页面上信息展示是否完整。</span><br /> <br /> <span style="font-size:15px"><strong>屏幕阅读器</strong></span><br /> <br /> <span style="font-size:15px">使用主流的阅读器主要包括 JAWS， NVDA， VoiceOver 来阅读网站。</span><br /> <br /> <span style="font-size:15px"><strong>其他方法</strong></span><br /> <br /> <span style="font-size:15px">邀请身边的残障朋友使用网站等。</span><br /> </p> <blockquote> <p><span style="font-size:14px">作者：饿了么前端[size=12]（zhuanlan.zhihu.com/ElemeFE）</span>[/size]</p> </blockquote> <p></p> <div class="entry-readmore"><div class="entry-readmore-btn"></div></div> <div class="entry-copyright"><p>原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/industrynews/256203.html</p></div> </div> <div class="entry-tag"><a href="https://blog.ytso.com/tag/%e6%b5%8f%e8%a7%88%e5%99%a8" rel="tag"># 浏览器</a><a href="https://blog.ytso.com/tag/chrome" rel="tag">Chrome</a><a href="https://blog.ytso.com/tag/css" rel="tag">CSS</a><a href="https://blog.ytso.com/tag/firefox" rel="tag">FireFox</a><a href="https://blog.ytso.com/tag/html" rel="tag">html</a><a href="https://blog.ytso.com/tag/%e5%9b%be%e7%89%87" rel="tag">图片</a></div> <div class="entry-action"> <div class="btn-zan" data-id="256203"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner"> <div class="entry-bar-info entry-bar-info2"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="256203"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a> <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="256203" data-qrcode="https://blog.ytso.com/industrynews/256203.html"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i> </a> <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i> </a> <a class="meta-item linkedin" data-share="linkedin" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-linkedin"></use></svg></i> </a> <a class="meta-item facebook" data-share="facebook" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-facebook"></use></svg></i> </a> <a class="meta-item twitter" data-share="twitter" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-twitter"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> <div class="entry-page"> <div class="entry-page-prev j-lazy" style="background-image: url('https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/17/20220518034252550.png"> <a href="https://blog.ytso.com/tech/pnotes/256202.html" title="Redis 高可用架构最佳实践" rel="prev"> <span>Redis 高可用架构最佳实践</span> </a> <div class="entry-page-info"> <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span> <span class="pull-right">2022年5月18日 16:49</span> </div> </div> <div class="entry-page-next j-lazy" style="background-image: url('https://blog.ytso.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/17/20220518034331991.jpg"> <a href="https://blog.ytso.com/tech/pnotes/256204.html" title="HBase在滴滴出行的应用场景和最佳实践" rel="next"> <span>HBase在滴滴出行的应用场景和最佳实践</span> </a> <div class="entry-page-info"> <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span> <span class="pull-left">2022年5月18日 16:53</span> </div> </div> </div> <div class="entry-related-posts"> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-list"><li class="item"> <a href="https://blog.ytso.com/industrynews/258597.html" target="_blank" rel="bookmark"> <span>无需任何电线和插头，任何时间地点无线充电！新的电力传输技术发布！</span> </a> <span class="date">2022年5月21日</span> </li><li class="item"> <a href="https://blog.ytso.com/industrynews/210154.html" target="_blank" rel="bookmark"> <span>Opera 成为了第一个内置 VPN 服务的浏览器</span> </a> <span class="date">2021年12月9日</span> </li><li class="item"> <a href="https://blog.ytso.com/tech/bigdata/274659.html" target="_blank" rel="bookmark"> <span>sqlserver 跨服务器left join 查询</span> </a> <span class="date">2022年7月16日</span> </li><li class="item"> <a href="https://blog.ytso.com/tech/pnotes/258334.html" target="_blank" rel="bookmark"> <span>Laravel 框架获得上一条和下一条文章</span> </a> <span class="date">2022年5月20日</span> </li><li class="item"> <a href="https://blog.ytso.com/download/215274.html" target="_blank" rel="bookmark"> <span>HyperSnap v8.16.16 破解便携版</span> </a> <span class="date">2021年12月21日</span> </li><li class="item"> <a href="https://blog.ytso.com/industrynews/258088.html" target="_blank" rel="bookmark"> <span>阿里总监谢纯良，讲透《阿里中台架构实践与思考》，PPT+音频！</span> </a> <span class="date">2022年5月20日</span> </li><li class="item"> <a href="https://blog.ytso.com/download/164143.html" target="_blank" rel="bookmark"> <span>创造狮，一个创意工作者导航书签[Web]</span> </a> <span class="date">2021年9月19日</span> </li><li class="item"> <a href="https://blog.ytso.com/tech/aiops/244104.html" target="_blank" rel="bookmark"> <span>windows共享不同用户访问不同文件夹不同权限</span> </a> <span class="date">2022年4月11日</span> </li><li class="item"> <a href="https://blog.ytso.com/tech/pnotes/260838.html" target="_blank" rel="bookmark"> <span>网站设计制作过程中会出现哪些问题？</span> </a> <span class="date">2022年5月24日</span> </li><li class="item"> <a href="https://blog.ytso.com/tech/pnotes/259157.html" target="_blank" rel="bookmark"> <span>如何制作Favicon动画</span> </a> <span class="date">2022年5月21日</span> </li></ul> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/industrynews/256203.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://blog.ytso.com/login">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="wpcom-btn btn-primary btn-xs submit">提交</button></div></div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_search"><form class="search-form" action="https://blog.ytso.com" method="get" role="search"> <input type="search" class="keyword" name="s" maxlength="100" placeholder="输入关键词搜索..." value=""> <button type="submit" class="submit"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-search"></use></svg></i></button> </form></div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-none"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-174931" class="menu-item menu-item-174931"><a href="https://blog.ytso.com/contribute">欢迎投稿</a></li> <li id="menu-item-174930" class="menu-item menu-item-privacy-policy menu-item-174930"><a rel="privacy-policy" href="https://blog.ytso.com/privacy-policy">隐私政策</a></li> <li id="menu-item-174934" class="menu-item menu-item-174934"><a href="https://blog.ytso.com/privacy">使用协议</a></li> <li id="menu-item-174932" class="menu-item menu-item-174932"><a href="https://blog.ytso.com/terms-of-service">服务条款</a></li> <li id="menu-item-174936" class="menu-item menu-item-174936"><a href="https://blog.ytso.com/copyright">版权声明</a></li> </ul> <div class="copyright"> <p>Copyright © 2006-2025 YTSO.COM 版权所有 <a href="http://beian.miit.gov.cn">鲁ICP备15002310号-3</a> Powered by <a href="https://www.wordpress.com" target="_blank" rel="noopener">WordPress</a></p> <p>免责声明：本站信息来自互联网收集分享，版权归原创者所有，如果侵犯了您的权益，请发邮件给39941211@qq.com通知我们删除.</p> <p><audio style="display: none;" controls="controls"></audio></p> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-0" style="bottom:20%;"> <div class="action-item j-share"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/justnews\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/blog.ytso.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/blog.ytso.com\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","lightbox":"1","post_id":"256203","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@400;500&display=swap","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://blog.ytso.com/wp-content/themes/justnews/js/main.js?ver=6.19.6" id="main-js"></script> <script type="text/javascript" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/js/icons-2.8.9.js?ver=2.8.9" id="wpcom-icons-js"></script> <script type="text/javascript" src="https://blog.ytso.com/wp-content/themes/justnews/themer/assets/js/comment-reply.js?ver=6.19.6" id="comment-reply-js"></script> <script type="text/javascript" id="wpcom-member-js-extra"> /* <![CDATA[ */ var _wpmx_js = {"ajaxurl":"https:\/\/blog.ytso.com\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/blog.ytso.com\/wp-content\/plugins\/wpcom-member\/","max_upload_size":"67108864","post_id":"256203","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/blog.ytso.com\/login","register_url":"https:\/\/blog.ytso.com\/register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}}; /* ]]> */ </script> <script type="text/javascript" src="https://blog.ytso.com/wp-content/plugins/wpcom-member/js/index.js?ver=1.7.16" id="wpcom-member-js"></script> <script type="text/javascript" src="https://blog.ytso.com/wp-content/themes/justnews/js/wp-embed.js?ver=6.19.6" id="wp-embed-js"></script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://blog.ytso.com/industrynews/256203.html", "url": "https://blog.ytso.com/industrynews/256203.html", "headline": "开箱即用的网站可访问性提升指南", "image": "http://ytso-blog-oss-img.oss-accelerate.aliyuncs.com/wp-content/uploads/2022/05/17/20220518034317887.jpg", "description": " 21CTO社区导读：本篇文章介绍什么是网站可访问性、残障人士如何访问网站；然后提供一些开箱即用的建设无障碍网站的操作指南，让你能够立即在项目中使用；最后介绍了如何检测网站的可访…", "datePublished": "2022-05-18T16:51:27+08:00", "dateModified": "2022-05-18T16:51:27+08:00", "author": {"@type":"Person","name":"ItWorker","url":"https://blog.ytso.com/profile/6","image":"https://www.gravatar.com/avatar/6df03c999e95426b05365f195d44dfe61c00d7b16a0e8441c10d281fcb0d3c3f?s=96&r=g"} } </script> </body> </html>