提升网 站可访问性方法 济南网站建设
  注:网站越 来越重视用户体验,对于做 网站的人员来说是否了解过一些可以增加网站可读性的Tips? 今天腾讯ISUX的温总 向大家分享可提升网站访问性的10个步骤,每一步都可以在20分钟内完成,这篇文章也可以在20分钟内看完。

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

  第一步,检查<title></title>,不允许空,不允许过长,简洁明了。

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

 

  第二步,提供文字替代方案。

  走查网 页上所有的图片、iframe、object,检查这 些元素是否填写了适当的alt属性或者title属性的值,看看这 些值是否可以描述这些元素的内容或者目的;heading元素是否标记了内容,而不仅 仅是图片或者背景图片。

 

  第三步,检查表单。

  是否有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上。如果你 通过一个按钮触发了一个组件窗口,在关闭 这个组件窗口的时候,请把焦 点重新移动回到触发这个窗口的按钮上。

  第十步,填写一 个简单的链接到之后,作为第一个内容元素。

  标记的 内容是简要的说明,说明你 在这个页面上提供的快捷键。然后这 个链接可以指向一个更加丰富的无障碍帮助页面,并且给这个链接设置accesskey=0。

标签: 济南网站建设 济南网站优化 济南网站推广 济南手机网站 转载请注明来自http://www.

  • QQ咨询:
  • 手 机:13105316892(马经理)
  • 电 话:13105316892
  • 邮 箱:1070239262@qq.com
友情链接:    欢乐棋牌app   下载炸金花游戏   久盛棋牌首页   吉林福彩网   淘彩网下载app