优秀的网页前端设计的一些指标

网页的可访问性,似乎只能由前端来重视并实现。这点挺可悲,作为可用性的一部分——可访问性,居然只能由技术人员来掌控,这是我不愿意看到的。但反过来,这给前端开发工程师们新增加了一个责任,同时为如何区分优秀的前端增加了一个指标. 事情的缘由是,前两个礼拜打了个“飞的”去北京玩,见了一位在百度做前端的朋友。过去一年以来,这家伙就不停的在鼓动我去他们那个邪恶的公司。当然,见面之后就不能再当面称呼人家是邪恶的公司啦,所以我就找了个理由,说你们那个“百度盲道”做得太垃圾了。他当然就很虚心的问我为什么啦。所以我也只能很心虚的糊弄了几句,说回上海之后详细告诉他。
事情的缘由是,前两个礼拜打了个“飞的”去北京玩,见了一位在百度做前端的朋友。过去一年以来,这家伙就不停的在鼓动我去他们那个邪恶的公司。当然,见面之后就不能再当面称呼人家是邪恶的公司啦,所以我就找了个理由,说你们那个“百度盲道”做得太垃圾了。他当然就很虚心的问我为什么啦。所以我也只能很心虚的糊弄了几句,说回上海之后详细告诉他。
回来之后,就马上很虚心的翻出一本老旧的电子书——《Dive Into Accessibility》,认认真真的看了一遍。
然后惊奇的发现:
1. 虽然我没看过这本书,但里面讲的大部分,我平日里都有遵守。果然,坚持好习惯是值得表扬的。
2. 网页的可访问性,似乎只能由前端来重视并实现。这点挺可悲,作为可用性的一部分——可访问性,居然只能由技术人员来掌控,这是我不愿意看到的。但反过来,这给前端开发工程师们新增加了一个责任,同时为如何区分优秀的前端增加了一个指标。
好吧,下面我把这本Dive Into Accessibility的内容作一个摘要,看看对于可访问性,应该要注意哪些问题:
1. 标明语言(Identifying your language)
这一条的意思是,加上lang属性,如。如果其中有一段是其他的语言,就在那一段的标签上加lang属性。这一条我做得不好,以后记得。
2. 构建有意义的页面标题(Constructing meaningful page titles)
有几点值得一提:
a) 做页面时,千万不要忘记写title。我见过好多页面的title是“Untitled Document”或“新建页面”,丢脸啊~
b) title到底应该是“小标题”在前呢,还是“大标题”在前?现在的惯例似乎都是“小标题”在前,比如“影音娱乐首页_新浪网”。但我个人倒是有个看法,或许大标题在前比较好。这样当我把“新浪网_影音娱乐首页”、“新浪网_新闻中心首页”放入收藏夹时,它们会因为音序排序而呆在一起,而不是散乱在各处。当然这个也不一定,仅供参考。
c) 对于英文的标题,一定要注意尽量不要把The放在title的前面,否则你的网页在收藏夹里就会被排在T开头了。
3. 提供额外的导航辅助(Providing additional navigation aids)
这一条是说要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 这个。这个其实我知道。但是貌似对于页面里这么多链接,要都加上rel和rev属性,有点难度。
4. 先呈现主要内容(Presenting your main content first)
好啦,这就是一条典型的“指望优秀的CSS”的可访问性原则啦。把<div class=”main”>放在<div class=”side”>的前面,其实挺考验CSS技术的。一道著名的题目是:如何让侧栏固定宽度,主栏宽度自适应,同时主栏的HTML要在侧栏 的前面。我很想放在我的面试题里,可又觉得是不是太刁难了。但是,无论如何,这道题目很重要!
5. 用于跳过导航栏的链接(Skipping over navigation links)
很重要!这个在骨灰级网页标准教程《网站重构》里就提到了。只是有一点我比较怀疑,如果把skip link设为display:none,难道不怕被阅读器也忽略掉么?
6. 安全的使用颜色(Using color safely)
这条其实讲了几个要点:
a) 颜色对比要够,否则眼神不好的人看起来费劲
b) 链接的颜色,最好用蓝色(像我比较喜欢用#09c)
c) 链接最好有下划线
7. 用“真链接”(Using real links)
意思是,即便这个链接是用于触发Ajax,也要把Ajax代码片段的URL放在href里,好让搜索引擎以及阅读器等等能够爬到。关于此条,请参看土豆网首页的“挖土豆”一块。
8. 给链接加“title”属性(Adding titles to links)
这个还用说么,可用性两大重点:a的title和img的alt。
呼~~~先结束这第一回合吧。如果你对可用性感兴趣,可以详细的读一下这本“Dive Into Accessibility”,尤其是前5节。然后可以再去看看那个可恶的“百度盲道”,我接下来会专门用一篇来诅咒这个忽悠障碍人士的无良黑心产品。

网页的可访问性,似乎只能由前端来重视并实现。这点挺可悲,作为可用性的一部分——可访问性,居然只能由技术人员来掌控,这是我不愿意看到的。但反过来,这给前端开发工程师们新增加了一个责任,同时为如何区分优秀的前端增加了一个指标.
9. 定义键盘快捷键(Defining keyboard shortcuts)
意思就是定义accesskey属性。这个好说。有个关键是如何在浏览器里使用。IE里是“alt+”,并且只是将焦点移过去,要点击需要再按 enter;Firefox是“shift+alt+”,按下之后直接触发点击事件。Opera和Chrome还有Safari,我都没试出来,有知情者 请告知。
感谢aoao提供:Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc 选key
Chrome 3 alt+key

除了accesskey,其实还有一个更重要的:tabindex。有时候需要改变默认的tabindex顺序,以期得到更便利的体验。举个例子,如下格式的登陆框:
用户名
记住我
密码
忘记密码
按照默认的顺序,按下tab键,焦点会依次经过“用户名”、“记住我”、“密码”。但是似乎把“记住我”放在“密码”之后更方便,毕竟不是所有的人 都需要使用“记住我”这个按钮,尤其是多次使用这个登陆框的人,他很显然是不喜欢“记住我”。所以应该用tabindex指定如下的顺序:“用户名”、“ 密码”、“记住我”。
10. 不要打开新窗口(Not opening new windows)
文中的意思是,这样会破坏浏览器的“history”记录,从而使浏览器“后退键”无效。总算知道外国网站很少有新开窗口的缘故了吧,也总算知道为啥 XHTML标准要把a标签的target属性取消的缘故了吧。但这个似乎不符合中国用户的习惯,还值得商讨。不过有一些变通的方式可以考虑:
a) 页面上给一个选框,选择之后就自动把a标签里的target属性移除,使得所有的链接都在本页打开。
b) 新开窗口并不是到”_blank”,而是到一个指定名字的窗口,比如“new”。这样所有新开的页面都会到同一个窗口里打开,至少在这个窗口里,还是可以使用浏览器的“后退键”的。(提一下,土豆网的视频都是这样的,开到同一个新窗口里)。
11.定义首字母缩略字(Defining acronyms)
先说明一下,其实作者这里对acronym这个词理解不正确。acronym是指单词的首字母合起来成为一个新的可读的单词,这个单词未必是所有字母都大写的,比如Nato(北大西洋公约组织)。所以HTML或是CSS算不上acronym,而
DOS、BASIC这种才算。像HTML或CSS这种,应该叫abbreviation,与其对应的是<abbr>标签,但很遗憾,这个标签IE6上无效。
12. 给你的日历加上抬头(Giving your calendar a real caption)
13. 使用真正的表头(Using real table headers)
14. 为表格提供摘要(Providing a summary for tables)

把这三条合在一起说,就是要正确使用表格。其实表格的使用远比这三条更多,建议大家仔细阅读HTML权威指南。

网页的可访问性,似乎只能由前端来重视并实现。这点挺可悲,作为可用性的一部分——可访问性,居然只能由技术人员来掌控,这是我不愿意看到的。但反过来,这给前端开发工程师们新增加了一个责任,同时为如何区分优秀的前端增加了一个指标.
15. 忽略空白图片(Ignoring spacer images)
一定记得给图片加上alt属性,哪怕它为空。其原因是如果不写alt,有些阅读器会直接把它的文件名或URL读出来。
这让我想起小时候读过,说在发明数字0以前,人们都是用空位来表示的。这样就很不方便啊。所以alt=”"就相当于数字0这个伟大的发明。
16. 使用真实的列表(或者正确的把它们伪装起来)
这一条其实也是在讲如果要用图片作为列表前的icon,最好用CSS。但是没有提到为什么要用<ul>。其实这也是我一直纠结的问题:目前看 起来,除了出于“标签语义化”的原教旨主义信仰,没有更好的理由一定要用<ul>或<ol>。盼知情者告知。
17. 为图片提供替换文本(Providing text equivalents for images)
18. 为图片映射提供替换文本(Providing text equivalents for image maps
)
这两条同15。
这里我只是想说说两个题外话:
a) 到目前这个年代,<map>标签是否还有用?同样的还让我想起<applet>标签。
b) 除了alt,还有两个属性:lowsrc和longdesc。有时间我会来看看目前的浏览器对这两个属性的支持是怎样的。
19. 使用真实的水平分割线(Using real horizontal rules)
它说的是使用<hr>比使用一张装饰用的图片好。(P.S. 原来hr是horizontal rule的缩写哦,hoho)但似乎不用<hr>更好吧。
20. 使用相对字号(Using relative font sizes)
我好想遵守这个规则,但可恶的微软把宋体做得除了12px,更小的字号就不能看。不过现在浏览器都有zoom功能,相对字号或许也不像以前那么迫切需要了吧。不管怎么说,都怪IE!
21. 使用真实的标题(Using real headers)
除了SEO之外,文中提到,有浏览器是可以专门撷取文中的标题,以提供方便的文内导航。这个功能就类似word里面自动生成目录的方法。
不过有一点值得注意,<h1>标签的使用。它其实是指最能概括本页内容的文字,而不是指看起来在标题的位置的文字(比如网站顶部 LOGO)。我之前一直犯一个错误,就是把网站的LOGO作为H1。事实上,比如搜索结果页,很明显“搜索XXX,一共XXX个结果”才应该作为h1标 题。
22. 给表单元素加上label标签(labeling form elements)
这里只有一个想和大家讨论的:到底是用id和for来联系,还是直接用label标签把表单元素和文字框起来?你们的习惯是怎样的?
23. 让所有的内容都可被搜索(Making everything searchable)
这一条是个比较宽泛的产品层面的问题,这里就不作讨论了。
24. 建立可访问性声明(Creating an accessibility statement)
这个蛮好,详情还是建议看原文。我有时间也会做掉。
阅读更多
想对作者说点什么? 我来说一句

网页配色系列

2016年09月07日 4.83MB 下载

javascript学习地址

2014年04月14日 115B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭