专栏首页Thinks10步大幅提升网站可访问性
原创

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。

第一步,检查<title></title>,不允许空,不允许过长,简洁明了。<title></title>是第一个可以访问到内容的元素,所以一定要非常重视。当用户切换浏览器Tab标签的时候,一定最先听到<title></title>标记的内容。Title一定要能代表当前页面的主题。这里的要求和SEO最佳实践几乎一致。

第二步,提供文字替代方案。走查网页上所有的图片、iframe、object,检查这些元素是否填写了适当的alt属性或者title属性的值,看看这些值是否可以描述这些元素的内容或者目的;heading元素是否标记了内容,而不仅仅是图片或者背景图片。比如,下图可以标记为“腾讯ISUX公共帐号二维码”。

第三步,检查表单。是否有label标签,这些label的for属性是否通过填写相应表单元素的id来彼此绑定;label的标签包裹的范围是否足够大,一致鼠标很容易的就能操作到;表单元素在被聚焦的时候是否有清晰的视觉反馈;提交和重置按钮以及图片按钮是否标记了文字或者在title中写明了该按钮的作用。强调一下,比如一个按钮的样式是一个放大镜,那么替代文字的内容一定不是“放大镜”,而是“搜索”。

第四步,使用heading做信息架构。辅助技术,特别是读屏软件,一般都会提供一个快捷键h,按h按键,焦点即可在heading之间切换,从而提高浏览效率。减轻读屏软件用户了解当前页面内容的障碍。虽然HTML5允许heading之间的嵌套,但是我绝对不推荐。

第五步,是否有blur()。辅助技术一般都是依靠焦点来获取内容,所以这个事件从本质上就使得辅助内容无法获得应用了此方法的元素。this.onfocus=this.blur()这个是最傻的一句代码了。

第六步,按Ctrl+或者command+查看页面是否可以被缩放。也许你因为某个效果使用了font-size-adjust:none,或者在viewport中设置了禁止用户缩放,从而使得页面无法缩放。老年人和使用11寸高档笔记本的老板可是非常喜欢使用放大页面的功能的。

第七步,添加landmark角色。这个是成本最低的方法了,添加的方法就是给相应功能的元素添加role这个属性,并赋予响应的landmark值。一共有8个值,一般你只能用到6个:banner(banner)、complementary(辅助内容区)、contentinfo(网站信息和版权)、form(表单)、main(主内容区)、navigation(导航区)、search(搜索区)。如果一个表单,他仅仅是提供搜索功能,那么就将role设置为search,而不是form。

第八步,设置快捷键。1是指向首页的那个链接。Esc是停止播放音视频,是停止,不是暂停。这两个按键是迄今为止最能达成共识的快捷键了。另外,挖掘当前页面的最重要的一个功能,是最重要的。然后在这个功能开始的元素或者包装元素上设置一个快捷键,按照顺序的话,就是2吧。accesskey=2。不要将同一个值设置给多个元素,也不要使用字母作为快捷键。另外聚焦的事件不要单单依赖浏览器本身,请使用js或者相应的键盘事件,然后聚焦给相应的元素。

第九步,触发界面转换需设置焦点。比如,点击一个按钮,弹出了一个模态或者非模态的弹窗(不是浏览器弹窗),利用js把焦点移动到这个窗口的第一个有内容的DOM上;再比如,点击“返回首页”按钮,如果仅仅是链接的是#或者改变类似scrollTop的值,那么也一定利用js将焦点移动到这个页面的第一个有内容的DOM上。如果你通过一个按钮触发了一个组件窗口,在关闭这个组件窗口的时候,请把焦点重新移动回到触发这个窗口的按钮上。

第十步,填写一个简单的链接到<body>之后,作为第一个内容元素。标记的内容是简要的说明,说明你在这个页面上提供的快捷键。然后这个链接可以指向一个更加丰富的无障碍帮助页面,并且给这个链接设置accesskey=0。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用户体验杂谈(2)

    当设计师不是用户的时候,我们就需要做一件事情,那就是联想,通过一个中间的事物、一个贴近的事物去理解什么是云,设计对于云的定位是什么?用户关注的是什么?设计要处理...

    RP道貌不岸然
  • SEO简易规范

    最通用和安全的SEO规范 Title: l 采用倒装的格式 l 当前页面 – 父级 – 父级的父级 – 腾讯云 注:如果大于四级,请拉群协商;翻页不算级别;...

    RP道貌不岸然
  • 腾讯网新闻底层页无障碍代码细节

    本周一部署在新闻频道并得到可反馈和升级。 现已部署在新闻频道、财经频道、体育频道、娱乐频道、公益频道。 主要针对于盲人用户使用的屏幕阅读器在阅读新闻底层页(新闻...

    RP道貌不岸然
  • 想要隐私?试试这个功能强大的热门匿名操作系统

    Whonix是一款免费的开源桌面操作系统,它的主要优势就在于自身所具备的高度安全性和隐私保护性。该系统基于Tor和Debian GNU/Linux实现,并且引入...

    FB客服
  • ADO.NET 实体框架概述

    随着.NET Framework 3.5 SP1和Visual Studio 2008 SP1的正式发布。ADO.NET 实体框架正式来到开发人员的面前,它使开...

    张善友
  • GPU加速分子模拟

    用户2493118
  • 细说shiro之五:在spring框架中集成shiro

    特别地!Shiro使用了日志框架slf4j,因此需要对应配置指定的日志实现组件,如:log4j,logback等。 在此,以使用log4j为日志实现为例:

    2Simple
  • 超大触摸屏设计的7大注意事项

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

    奔跑的小鹿
  • 响铃:渴望刷屏级传播,“套路”用户到底有无套路?

    无论是公关狗、广告人、还是营销大师(以下统称营销人),都有同一个梦想:做出下一个“百雀羚”1931一样的“爆款”。

    曾响铃
  • 数组、List和ArrayList的区别

     有些知识点可能平时一直在使用,不过实际开发中我们可能只是知其然不知其所以然,所以经常的总结会对我们的提高和进步有很大的帮助,这里记录自己在工作之余的问题,持续...

    Rekent

扫码关注云+社区

领取腾讯云代金券