10条网站易用性设计改进技巧
伴随着对网站用户体验的关注度普遍上升,网站易用性建设(usability)已经不是一个新鲜的话题。欧美电子商务网站普遍重视网站易用性建设,已开始系统研究易用性思想。而国内领先、成功的网站也均重视网站用户体验,腾讯、淘宝、百度、阿里巴巴……在这方面走在国内网站之先
这是WebAIM团队博客的一篇关于网站易用性的文章,比较基础,简单翻译一下:
1. 给你的logo添加替代文本
这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用户那里是你的logo。
几种方法:
1
|
<img src= "logo.png" alt= "月光宝盒" >
|
或者,你用背景图来实现logo的话,也可以添加title属性来实现:
1
|
<span title= "月光宝盒" ></span>
|
当然,链接+背景图的方式是最好的,但最好也加上title属性:
1
|
<a href= "#" title= "月光宝盒" >月光宝盒</a>
|
2.添加基本的Landmarks
ARIA Landmark是W3C定义的一套网站可用性规则,对于网站不同的模块添加描述性的Landmark——或者直接叫role,有利于读屏软件更好的理解你的网页,从而让视障用户更好的使用你的网站。
1
|
<nav role= "navigation" >
|
2
|
<div id= "maincontent" role= "main" >
|
3
|
<form action= "search.php" role= "search" >
|
等等,具体的规则请查看W3C的建议。
3.增强focus定义
其实很多网站会用尽一切办法去掉浏览器的:focus样式,特别是对于IE浏览器,其实,浏览器默认带上:focus样式是有道理的,它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。
所以请不要去掉:focus样式,甚至,你觉得默认的样式不好看或者不统一(IE是虚线框,Webkit是高亮的实线框,并且,Safari是蓝色,Chrome是橙色)也可以自己给定义一个高亮色:
1
|
a:focus{
|
2
|
outline : 1px solid red ;
|
3
|
background :yellow;
|
4
|
}
|
如果你的产品经理或者视觉设计师坚持要去掉focus状态的话,把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。
4.定义必填表单项
用aria-required
属性可以定义表单中的必填项——嗯,主要还是告诉读屏软件:
1
|
<input type= "text" name= "username" aria-required= "true" >
|
5.给你的页面添加一个h1
原因很简单,不只是有利于SEO,对网站整体的可用性和可读性都很有帮助。另外,你没有代码洁癖么?
6.定义表格的表头
通常很多人习惯表格全部使用td
标签,其实,表格不止有hd标签,还有th
、col
、scope
等。
所以简单来说,表头换成th
标签吧:
1
|
<th scope= "col" > Date </th>
|
7.定义表格描述
不要简单的在表格前面/后面加个p了事了,表格有专用的caption标签可用,就像图片一样。
1
|
<table>
|
2
|
<caption>Class Schedule</caption>
|
3
|
<tr>
|
4
|
……
|
8.避免“点击此处”
虽然这样的链接描述对普通人都无所谓,但是对读屏软件来说,是相当糟糕的,它其实是对视障用户的一种干扰。
所以,直接把链接用到正地方吧。
9.去掉tabindex
曾经,很多人用tabindex
来“增强”用户体验,但是这个属性却会打乱页面的正常阅读顺序,对视障用户是灾难性的,对普通用户也未必是友善的。
所以千万不要滥用tabindex
属性。
10.在线检测一下
呃,看到这里发现其实是个广告,但是如果能检测出来网站可用性问题,也是件好事情,WebAIM开发的一个网页工具,输入URL就会自动检测。测试了一下还不错,http://wave.webaim.org/
from:
http://lunax.info/archives/3376.html
10条网站易用性设计改进技巧相关推荐
- 人人都能用的10条网站易用性技巧
嗯,WebAIM团队博客的一篇关于网站易用性的文章,比较基础,简单翻译一下: 1. 给你的logo添加替代文本 这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用 ...
- 10条网站易用性技巧
1. 给你的logo添加替代文本 这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用户那里是你的logo. 几种方法: 1 <img src="l ...
- 使用Java和XSLT的10条技巧 (转)
使用Java和XSLT的10条技巧 这篇文章从书中选出了我认为非常重要的10条技巧.但实际上这有限的10条只是粗略的描述了什么是可能的.其中大多数都集中在Java和XSLT的组合上,而不是在XSLT( ...
- 《众妙之门——网站UI设计之道(修订版)》一1.3 制作有效用户界面的实用技巧...
本节书摘来自异步社区<众妙之门--网站UI设计之道(修订版)>一书中的第1章,第1.3节,作者[德]Smashing Magazine,更多章节内容可以访问云栖社区"异步社区&q ...
- ui设计未来十年前景_UI设计的10条诫命
ui设计未来十年前景 重点 (Top highlight) The year is approximately 1,300 BC when Moses received the 10 UI desig ...
- 交互规则_您必须永不中断的10条交互设计规则
交互规则 重点 (Top highlight) In life, there are certain rules you must never break. If you do there will ...
- 10条设计推荐系统的经验和教训
本文总结自2009年ACM推荐系统大会上Strand研究人员做的一个报告"推荐系统十堂课",在这个报告中Strand的研究人员总结了他们设计推荐系统的经验,提出了10条在推荐系统中 ...
- 10条必知的网页导航菜单设计原则
网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要.设计导航菜单的方法有许多,每个网站都必须有自己的导航菜单.想要设计出一个出色的导航菜单,设计师必须突破传统限 ...
- 掌握10条设计理念!让同事(客户)更好的了解设计
看到这篇文章感觉,不错.现在自己总结下,如下图所示: 01. 设计并不只有视觉 用户为何要使用这款应用.这款网页?怎样用?这是设计要去解决的现实问题,网站的加载速度如何?这也是设计要解决的问题. 点击 ...
最新文章
- java培训:什么是抽象类?怎么定义?
- 使用phpstorm+wamp实现php代码实时调试审计
- matlab矩阵基本操作,Matlab入门----矩阵的基本操作
- JavaScript 预解析机制
- slam特征点深度 svd_【干货】视觉SLAM面试题汇总(第二部分)
- Multisim14安装教程(下载链接在文末)
- 深度学习的GPU型号和参数选择
- moya + RxSwift 进行网络请求
- 为什么我的燃尽图没更新?
- 50欧姆系统dBm与电压的转换关系
- SegmentFault 技术周刊 Vol.30 - 学习 Python 来做一些神奇好玩的事情吧
- 分组查询:group by
- 开发通用资料——英文缩写
- 安卓的BP、AP、NV是什么意思
- 个人做的职业规划以及分析报告(转)
- 教您更改data目录名称-将DedeCMS根目录下的data目录迁移到其他目录的方法
- 计算机组装小白,自己组装电脑教程:DIY小白装机最新最详细的台式电脑组装教程图解(4)...
- 230 SQL语句‘order by’ 后面直接加数字的含义
- 基于PP-ShiTu的珍稀动物识别
- Coremail保障企业邮箱安全!《数安法》《关基保护条例》正式施行!
热门文章
- 60秒倒计时器 秒表 c语言程序,用单片机设计一个两位LED显示的秒表,按下计时键时,进行60s倒计时显示...
- 数据结构——二叉树遍历原理及方法
- 爱的力量 --- 悼 5.12 死难同胞, 愿逝者安息, 生者平安!
- 日版iphone4有锁机用激活卡激活
- 动态爱心html网页
- 用Python给头像加上圣诞帽或圣诞老人小图标
- 一周技术学习笔记(第65期)-到底是返回错误码还是返回异常信息
- 278.第一个错误版本
- java和c语言有关联吗_关于JAVA语言,和C语言有什么联系吗?
- 关于Statement和Prestatement区别