关于伟创 伟创新闻 伟创案例 网站套餐 联系方式
只做吸引客户的精品站!

人人都能用的10条网站易用性技巧

伟创科技 / 2013/12/19 7:07:00
[核心提示] 人人都能用的10条网站易用性技巧,比较基础,简单翻译一下。
人人都能用的10条网站易用性技巧

人人都能用的10条网站易用性技巧,比较基础,简单翻译一下:

1. 给你的logo添加替代文本

这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用户那里是你的logo。

几种方法:

1
<img src="logo.png" alt="前端界">

或者,你用背景图来实现logo的话,也可以添加title属性来实现:

1
2
<span title="前端界"></span> </code>

当然,链接+背景图的方式是最好的,但最好也加上title属性:

1
<a title="前端界">前端界</a>

2.添加基本的Landmarks

ARIA Landmark是W3C定义的一套网站可用性规则,对于网站不同的模块添加描述性的Landmark——或者直接叫role,有利于读屏软件更好的理解你的网页,从而让视障用户更好的使用你的网站。

1
2
3
<nav role="navigation"> <div id="maincontent" role="main"> <form action="search.php" role="search">

等等,具体的规则请查看W3C的建议。

3.增强focus定义

其实很多网站会用尽一切办法去掉浏览器的:focus样式,特别是对于IE浏览器,其实,浏览器默认带上:focus样式是有道理的,它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。

所以请不要去掉:focus样式,甚至,你觉得默认的样式不好看或者不统一(IE是虚线框,Webkit是高亮的实线框,并且,Safari是蓝色,Chrome是橙色)也可以自己给定义一个高亮色:

1
2
3
4
a:focus{ outline:1px solid red; background:yellow; }

如果你的产品经理或者视觉设计师坚持要去掉focus状态的话,把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。

4.定义必填表单项

aria-required属性可以定义表单中的必填项——嗯,主要还是告诉读屏软件:

1
<input type="text" name="username" aria-required="true">

5.给你的页面添加一个h1

原因很简单,不只是有利于SEO,对网站整体的可用性和可读性都很有帮助。另外,你没有代码洁癖么?

6.定义表格的表头

通常很多人习惯表格全部使用td标签,其实,表格不止有hd标签,还有thcolscope等。

所以简单来说,表头换成th标签吧:

1
<th scope="col">Date</th>

7.定义表格描述

不要简单的在表格前面/后面加个p了事了,表格有专用的caption标签可用,就像图片一样。

1
2
3
4
<table> <caption>Class Schedule</caption> <tr> ……

关于表格部分,强烈推荐重新发现HTML表格

8.避免“点击此处”

虽然这样的链接描述对普通人都无所谓,但是对读屏软件来说,是相当糟糕的,它其实是对视障用户的一种干扰。

所以,直接把链接用到正地方吧。

9.去掉tabindex

曾经,很多人用tabindex来“增强”用户体验,但是这个属性却会打乱页面的正常阅读顺序,对视障用户是灾难性的,对普通用户也未必是友善的。

所以千万不要滥用tabindex属性。

10.在线检测一下

呃,看到这里发现其实是个广告,但是如果能检测出来网站可用性问题,也是件好事情,WebAIM开发的一个网页工具,输入URL就会自动检测。
责任编辑:洛阳网络公司编辑部

尊重作者原创 除非特别声明,伟创科技所有均为伟创原创报道,转载请注明原文链接。
原文地址:http://www.lywhy.com/Design/View.asp?id=642  所属类别:整合设计
相关内容
伟创网络技术设计部分享原创干货设计之九步曲 2018/8/3
UI设计师懂点前端知识是提高效率的开始 2017/7/22
前端开发人员要如何做好自身定位 2015/12/7
资深网络设计师心态如何平静、稳定. 2015/11/30
洛阳网络公司的官网设计要求该如何设定 2015/10/15
猜你喜欢
PAR Works:别光整虚的,你们的增强现实技术弱爆了 2012/11/16
微信公众平台不是营销工具?卖萌还是晒存在感 2013/6/6
在洛阳,做网站公司如何更具有价值 2014/9/25
网站建设的三种体例,看看哪个适合你 2018/3/12
解决软件危机的途径 2012/10/5
国内视频网站的下一个爆点在哪里? 2013/3/2
临近过年伟创科技总结下2013年网站客户的需求 2014/1/9
临近洛阳首场大雪,伟创程序猿剖析如何选择稳定的网络公司 2015/11/23
网站注册页面设计常见弊端 2012/12/5
现在各大搜索界面推出整合元素 2013/8/2
伟创热点
关于我们
公司简介
我们的优势
企业文化
公司愿景
加入伟创
伟创官方博客
金牌项目
网站建设
网站优化
软件开发
整合设计
网站运营
网站套餐
基础型网站
展示型网站
商务型网站
购物、商店型网站
FLASH动画型网站
行业、门户型网站
帮助中心
客户中心
公司SEO培训
seo顾问服务
支付方式
联系我们
我们的位置
关注我们
新浪微博
腾讯微博
人人小站
QQ空间推荐
花瓣网
建站百科全书
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP备12012069号-1
Links
洛阳百科
建站百科