我们在浏览网页的过程中，经常会遇到一些页面对无障碍支持并不是很友好，比如元素没有标签、没有焦点、焦点错乱、角色朗读错误等，这时我们首先想到的是联系该网站的管理员，呼吁他们对网站进行无障碍优化，已达到让所有人都能无障碍的访问该网站。而无障碍改造也是需要一定的时间以及相关人力投入的，加上有些公司对无障碍的认识程度不够，因此并不是所有网站都能很快的对该网站做无障碍支持。
在对该网站进行无障碍优化之前，如视障人士需要访问该网站，我们可使用js脚本临时的为页面元素添加无障碍属性，从而提高视障人士对网页的浏览体验。
什么是DOM？DOM是W3C标准。同时也定义了访问诸如XML和HTML文档的标准。DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。dom提供了诸多的方法和属性，已便于操作页面的所有元素节点，在js中使用dom可通过ID、名称、类名、元素类型以及元素索引等访问到页面上任意一个元素，进而为该元素添加无障碍属性。
下面将通过几个百度首页的范例来了解js如何为网页元素添加无障碍属性。
1.为百度首页的搜索框添加Aria-label属性，当屏幕阅读器聚焦到搜索框时可朗读出搜索框的输入提示。
实际问题：百度首页的搜索框没有输入提示，屏幕阅读器聚焦到搜索框时朗读为“wd”可编辑文本，导致用户很难理解该编辑框的作用。
预期结果：当屏幕阅读器聚焦到搜索框时可朗读为：“请键入搜索关键词”可编辑文本。
关键属性：aria-label给非文本元素添加内容描述，如果一个非文本元素需要让屏幕阅读器用户知道元素的功能、传达的信息，需要给元素添加替代文本，如图形按钮、编辑框、组合框等，可以通过aria-label属性给元素提供适当的替代文本。
优化步骤：首先打开百度首页（https://www.baidu.com），等待页面加载完毕，然后聚焦到地址栏，输入如下js代码：
javascript:vardoc=document.getElementById("kw");doc.setAttribute("aria-label","请键入搜索关键词");void(0);
按下回车键确定，接着使用tab键聚焦到搜索框，此时屏幕阅读器可朗读为“请键入搜索关键词”可编辑文本。
2.为百度首页的账号登录添加键盘焦点以及设置元素角色
实际问题：百度首页的账号登录没有tab焦点，用户无法通过tab键聚焦到用户登录。
预期结果：可使用tab键聚焦到“账号登录”链接。
关键属性：tabindex属性添加/忽略元素焦点，role属性可设置元素的角色。
优化步骤：首先打开百度首页（https://www.baidu.com），等待页面加载完毕，然后点击页面上的“登录”链接，聚焦到地址栏，输入如下js代码：
javascript:vardoc=document.getElementById('TANGRAM__PSP_10__footerULoginBtn');doc.setAttribute('tabindex','0');doc.setAttribute('role','link');void(0);
按下回车键确定，接着使用tab键可聚焦到“账号登录”链接。
3.为百度首页的二维码图片添加替代文本
实际问题：百度首页的二维码图片没有替代文本，只朗读为“图片”，用户无法知道图片的含义。
预期结果：使用屏幕阅读器聚焦到二维码图片时可朗读为”二维码“图片。
关键属性：alt可为<img>添加替代文本，html的<img>是图片，屏幕阅读器不能朗读图片内容，如果要让用户知道图片传达的信息、图片的功能，可以通过alt属性给图片添加替代文本。
优化步骤：首先打开百度首页（https://www.baidu.com），等待页面加载完毕，然后点击页面上的“登录”链接，聚焦到地址栏，输入如下js代码：
javascript:vardoc=document.getElementsByTagName("img");for(i=0;i<doc.length;++i){if(doc[i].getAttribute('class')=='tang-pass-qrcode-img'){doc[i].setAttribute("alt","二维码");break;}}void(0);
按下回车键确定，接着使用光标键聚焦到二维码图片，听取朗读内容。
4.为百度首页的“关闭”链接添加内容描述，当屏幕阅读器聚焦到该链接时可朗读为“关闭”链接
实际问题：百度登录浮层的“关闭”链接错误的朗读为“TANGRAM__PSP_4__closeBtn”链接。
预期结果：使用屏幕阅读器聚焦到“关闭”链接时可朗读为“关闭”链接。
关键属性：aria-label给非文本元素添加内容描述，如果一个非文本元素需要让屏幕阅读器用户知道元素的功能、传达的信息，需要给元素添加替代文本，如图形按钮、编辑框、组合框等，可以通过aria-label属性给元素提供适当的替代文本。
优化步骤：首先打开百度首页（https://www.baidu.com），等待页面加载完毕，然后点击页面上的“登录”链接，聚焦到地址栏，输入如下js代码：
javascript:vardoc=document.getElementById('TANGRAM__PSP_4__closeBtn');doc.setAttribute('aria-label','关闭');void(0);
按下回车键确定，接着使用tab键聚焦到“关闭”链接。
5.为百度首页的每个搜索结果以及上一页、下一页添加快捷键，当按下alt+x可在每个搜索结果之间跳转。按下alt+z可在上一页以及下一页之间跳转
无障碍问题：百度搜索结果页面没有提供键盘快捷键用以在各个板块或区域之间跳转，视障用户通过屏幕阅读器按照从上到下从左到右的顺序浏览页面内容，若内容较多，则会导致用户浏览该页面的时间过长。
预期结果：可使用键盘(alt+x)在每个搜索结果之间跳转，(alt+z)在上一页和下一页之间跳转。
关键属性：accesskey属性可为元素添加快捷键，用以快速的跳转到该元素上。
优化步骤：在百度首页聚焦到搜索框，输入关键词，点击搜索，等待加载出搜索结果后，聚焦到地址栏，输入如下js代码：
javascript:vardoc=document.getElementsByTagName('h3');for(i=0;i<doc.length;++i){vard=doc[i].getElementsByTagName("a");if(d.length>0){d[0].setAttribute("accesskey","X");}}varpager=document.getElementsByClassName('n');for(i=0;i<pager.length;++i){pager[i].setAttribute("accesskey","z");}void(0);
此时可按下alt+x在每个搜索结果之间跳转，alt+z在上一页或下一页之间跳转。
以上是较为常见的几个网页内容无障碍问题，更多的wai-aria属性请参看：http://www.w3.org/WAI/standards-guidelines/aria/
事实上此类WAI-ARIA无障碍属性应当在网页开发之初开发人员就需要考虑并使用，JS动态临时修改也只是方便到了自身，无法覆盖到所有访问该站点的障碍用户。编写该教程不在于教大家临时修改代码解决燃眉之急，本文目的是呼吁网页开发人员将无障碍属性应用到实际开发工作当中，时时拥有无障碍的意识，让障碍用户也能轻松无障碍上网。
本文参考源为“无障碍实验室”
