这篇文章将解释如何制作谷歌浏览器插件。
通过浏览器插件，改变网页的无障碍问题，让视障用户上网更轻松。
以前我写过一篇文章是关于使用js代码动态适配网页内容无障碍的，主要是通过在浏览器地址栏输入JS代码，从而改变网页元素的属性，达到无障碍的效果。
但是这种方式在实际使用中并不是很方便，而且每次刷新页面都要手动执行js代码，非常麻烦。
那么，有没有办法自动加载脚本代码，为页面元素自动添加无障碍属性呢？
最近在学习Chrome插件的过程中，想到可以通过编写Chrome插件自动执行无障碍脚本，让页面元素自动添加无障碍属性，让视障人士更好地浏览网页。
我们以一个简单的Chrome插件为例，向大家展示如何编写一个无障碍插件，改变页面元素的属性，让web元素达到无障碍的效果。
首先，我们创建一个新文件夹，并将其命名为“demo”
然后在demo文件夹中创建三个新文件，即:
manifest . jsonbackground . html accessibility . js
一. manifest.json
这个文件是一个清单文件，每个Google Chrome插件应该包含以下清单内容:
{ " background ":{ " page ":" background . html "//后台加载的HTML文件}，" content _ scripts ":[{ " js ":[" accessibility . JS "]，//要执行的JS文件" matches ":[" http:* " file://* "]//匹配URL} ]，" name ":"Accessible plugin "，//插件的名称" version": "1.1.0 "，//
二。background.html
这个文件是一个加载在Google Chrome后台的HTML页面。这个插件主要用于加载Accessibility.js
代码如下:
可访问的插件
三。accessibility.js
这个文件就是我们要写的js代码文件，用来改造网页的无障碍问题。
让我们以为测试对象，重点关注js代码文件的内容:
{ var host = window . location . host；如果{//确定是否是主页URL//在主页上的搜索框中添加描述性文字//使用aria-label属性，可以在非文字元素中添加内容描述。如果一个非文本元素需要让屏幕阅读器用户知道该元素的功能和信息，就需要给该元素添加替代文本，如图形按钮、编辑框、组合框等。aria-label属性可用于为元素提供适当的try { var kwElt = document . getelementbyid；kw ELT . set attribute；}catch{}}if{//确定是否是注册页面的URL。//为注册页面的“登录”链接设置选项卡焦点，并将控件的角色设置为“链接”。//使用tabindex属性，可以添加/忽略元素的焦点，role属性可以设置元素的角色。请尝试{ var loginbtn = document . getelementbyid；log in BTN . set attribute；log in BTN . set attribute；}catch{}//在注册页面添加“账户智能客服”标签。//使用aria-label属性。aria-label可以向非文本元素添加内容描述。如果一个非文本元素需要让屏幕阅读器用户知道该元素的功能和信息，就需要给该元素添加替代文本，如图形按钮、编辑框、组合框等。，它可以通过aria-label属性向元素提供适当的信息。请尝试{ var elts = document . getelementsbytagname；for { if = = = ' mod-new-reg-service '){ elts[I]。setAttribute打破；} } } catch { } })；
至此，我们的插件已经写好了。
接下来，你需要将插件加载到谷歌Chrome中，然后才能使用它。
不过在加载插件之前，我们先来体验一下搜索框、登录和账户智能客服控制元素的无障碍体验:
1.打开主页，将焦点放在带有选项卡的搜索输入框上。此时，屏幕阅读器显示:可编辑文本。
如果不在这个搜索框中添加描述性属性，视力有障碍的用户很难理解这个编辑框的功能。
2.在首页点击“登录”->“立即注册”进入注册页面，使用tab键尝试聚焦“登录”链接。原来登录链接没有tab键焦点，所以我们不能用tab键来聚焦登录链接。
3.在首页点击“登录”->“立即注册”进入注册页面，使用tab键聚焦“账户智能客服”链接。结果发现“账户智能客服”没有标签，只读作“链接”
我们来试试加载这个插件后的效果:
打开谷歌Chrome浏览器，这里推荐Chrome开发板。
在地址栏输入:chrome://extensions。
进入扩展页面，选择“开发者模式”，然后点击“加载解压后的扩展”按钮，弹出浏览页面，浏览到“demo”文件夹并选中。
所以我们的插件被加载了。
接下来，我们来试试效果:
1.打开主页，tab键聚焦在搜索输入框上。此时，屏幕阅读器显示:“请键入搜索关键字”作为可编辑文本。
2.在首页点击“登录”->“立即注册”进入注册页面。使用tab键关注“登录”链接。
3.在首页点击“登录”->“立即注册”进入注册页面，使用tab键聚焦“账户智能客服”，发现链接已经正确读作“账户智能客服”
这样就可以给一些无障碍性差的网页添加无障碍属性，让视障人士更好的上网。
好了，今天的分享到此结束。最后，希望广大web开发工程师能够将无障碍属性应用到实际的开发工作中，时刻拥有无障碍的意识，让残障用户也能轻松上网。
