教你简单10步大幅提升网站可访问性

   第一步

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

  第十步

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

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

  欢迎讨论。

时间: 2024-07-30 15:27:13

教你简单10步大幅提升网站可访问性的相关文章

利用CSS改善网站可访问性

css|访问  利用CSS改善网站可访问性    作者: BUILDER.COM来源: www.BUILDER.COM类型: 翻译     最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.     像那时建构的很多网站一样,我的客户的网站使用了Cascading Style She

测试网站可访问性的工具

  你设计网站的最重要目标之一就是让网站可以吸引尽可能多的访客,但是你了解过你网站真正的可访问性(亦称无障碍性)了吗?色盲访客能是否能正常访问?网页上的所有脚本是否能正常运转?你的颜色可能总体上看来不错,但是对比色的差异能否足够以保证网页的易读性?下面这12个工具正好是设计来回答这些文的,可以肯定的是如果你正在考虑网站可访问性这件事情的时候,这些工具都值得你经常使用,虽然他们可能每次都给你同样的答案. 忠告:尽管这些工具都很有用而且可以帮你辨别出很多问题,你永远不能太迷信他们给出的所有建议,更多

简单几步做到网站的全面推广

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 很久没写文章了,今天有空闲着给大家献丑了.早几天在A5首页看到图王推荐的<SEO攻略>杨帆 著,马上就买了回来.看了感觉不错,大家可以支持下扬帆大哥.下面我们说下如何简单几步做到全面推广! 早在几个月,我就发现我的网站流量统计经常看到一些不熟悉的网站来路,而且流量可观,相信你也尝试过这种情况,但是是否和我说的一样,就看看我解释下吧

利用CSS改善网站可访问性(2005-02-21 10:13:09)

css|访问 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配. 像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要

妙用CSS来改善网站可访问性

css|访问 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.   像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的

网站重构:利用CSS改善网站可访问性

css|访问|网站重构   最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.   像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是C

改善网站可访问性,通过修改及利用CSS实现

css|访问 一个客户的旧网站需要更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.   像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一. 问题

利用CSS样式表改善网站可访问性

最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配. 像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一. 问

PS教你简单8步打造双重曝光效果

  双重曝光效果在很多海报和图片上都可以看到.这种效果由两张叠加的图片构成.通过复杂的叠加做出惊艳的效果,这种例子已经很多,通常是人脸同自然景观的叠加.我一直想在PS中做一次尝试,现在终于有时间来做一个教程. 在这个教程中,我将会展示如何用PS打造双重曝光效果.过程很简单,但是细节需要花时间用心打磨. 步骤1 打开Photoshop ,新建文件.我用A4的大小.选择一个人像的照片.我用的是Shutterstock 的素材.这是一个年轻的金发美女,戴着时尚的眼镜,穿着休闲的衬衫,人像置于金属背景之