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

转自:腾讯ISUX (http://isux.tencent.com/ten-steps-enhance-web-accessibility.html)

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

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

欢迎讨论。完。

时间: 2024-10-08 10:09:02

【转】10步大幅提升网站可访问性的相关文章

Web标准及网站的可用性、可访问性

学习前端的过程中到处充斥着Web标准.可用性.可访问性这些词,那么到底它们指的是什么呢? 一.什么是Web标准 简单的说,Web标准就是我们在学习前端中接触最多的HTML.CSS.JavaScript三者的集合.网页主要分三个部分:结构(Structure).表现(Presentation).行为(Behavior).对应的标准也分三个方面:结构化标准语言---XHTML和XML,表现标准语言---CSS,行为标准---对象模型DOM和ECMAScript等. 为什么要制定这些标准,这些标准有什

教你10步闯进google play排行榜前列

    1.正视最高榜单的价值 我们需要了解排名对你的游戏的价值,进入前20名你的游戏获得每日至少1万5千的安装量,而前10名获得至少2万5千的安装量.通过奖励性广告网络而获得这些流量需要你每日支付至少2500美元的费用,而如果你选择采取非奖励性方式,你每天的费用甚至会高达1万美元. 2.理解Google Play排名算法 虽然谷歌没有公布goole play具体算法,但根据多年的经验,我们大概可以了解进入排行版前列的一些重要因素: 因素一:发布时间 新应用在时间上一定拥有优势,因为玩家总是希望

可点击的icon按钮 无障碍 ARIA 可访问性

最简单: <input type="image" src="email.png" width="14" height="14" alt="Email"> 使用 css sprites的话: <style> .email-btn { width: 14px; height: 14px; background: url(activities.png) 0 -85px no-repeat;

谈谈运行稳定性好效率高的千万级大型网站系统架构性分析

千万级的注册用户,千万级的帖子,nTB级的附件,还有巨大的日访问量,大型网站采用什么系统架构保证性能和稳定性? 首先讨论一下大型网站需要注意和考虑的问题. 数据库海量数据处理:负载量不大的情况下select.delete和update是响应很迅速的,最多加几个索引就可以搞定,但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题.另外在高UPDATE的情况下,更新一个聚焦索引的时间基本上是不可忍受的.索引和更新是一对天生的冤家. 高并发死锁:平时我们感觉不到,但数据库死锁在高并发的

SElinux解决web网站无法访问

SElinux解决web网站无法访问工具/原料centos 6.5系统httpd web服务器 SELinux 设置为enforcing:强制模式,代表 SELinux 运作中 方法/步骤1. 1setroubleshoot用于把SELinux 的错误讯息与克服方法记录到 /var/log/messages 与 /var/log/setroubleshoot/* 里头,所以一定要启动该服务.所以我们先来安装.输入一下命令安装.# yum install setroubleshoot setrou

使用express vpn导致国内网站无法访问的问题

一直在付费使用express vpn,网速很快. 但是最近发现一个问题,使用express vpnFQ之后,国外的网站访问正常,但是国内的网站却无法访问. 我的使用环境:win 10, 使用express vpn dns, expess vpn auto connect. 为了找到原因,在express vpn连接上的条件下,打开cmd窗口,依次ping baidu.com和163.com,结果为找不到域名对应的IP地址. 然后我再关闭express vpn连接,重新ping,发现IP地址解析正

web标准的可用性和可访问性

在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量.可用性好意味着产品质量高,是企业的核心竞争力. 可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好.二是代码是否容易被人理解,是否容易修改和增强功能.可维护性和可复用性.可扩展性等

Effective Item - 使可访问性最小化

模块设计是否良好,有个重要的因素在于,相对外部模块是否隐藏内部数据以及实现细节. 设计良好的模块会隐藏实现细节,并将API与其实现隔离开来. 模块之间通过API进行通信,对于内部工作情况互不可见. 即,封装(encapsulation)——软件设计的基本原则之一. 为什么要封装? 通过封装可以有效地接触各个模块之间的耦合关系,使这些模块可以独立地开发.测试.优化.使用.理解和修改. 即: 可以增加开发效率,模块可以并行开发. 封装可以减轻维护的负担,可以更有效的进行优化,且不会影响其他模块的正确

使类和成员的可访问性最小化

本文涉及到的概念 1.使类和成员的可访问性最低的意义 2.类和成员的几种可访问性 3.其它注意事项 4.最后的原则 1.使类和成员的可访问性最低的意义 信息隐藏(information hiding),封装(encapsulation)的概念 一个模块对外部模块隐藏其内部数据和其他实现细节,也就是将它对外提供的API与它的实现细节清晰地隔离开来,它与其他模块的只通过API进行通信,其他模块不需要知道该模块内部的工作情况. 使用类和成员的可访问性最低的意义 a.可访问性越低,一个类对外暴露的信息就