IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 设计

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

Missage.com 2013-08-08 23:36:28 累计浏览 4,937 次
本机暂存
标签 Accessibility Usability UX Design Web Standards

嗯，WebAIM团队博客的一篇关于网站易用性的文章，比较基础，简单翻译一下：

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标签，还有th、col、scope等。

所以简单来说，表头换成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://wave.webaim.org/

译自：http://webaim.org/blog/10-easy-accessibility-tips/，请尊重版权，转载请注明来源，多谢～～

译文：http://www.qianduan.net/everyone-can-use-10-website-usability-tips.html

同分类推荐文章

  1. 如何写好设计文档？ （2026-06-23 08:00:00）
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking （2026-06-16 23:00:00）
  3. The Benefits Of Cognitive Inclusion In UX Research （2026-06-10 18:00:00）

查看更多 设计 文章 →

建议继续学习

  1. Web表单设计之注册表单 （累计阅读 8,883）
  2. 用色彩打造专业的视觉效果 （累计阅读 7,235）
  3. 视觉设计师应该略懂交互 （累计阅读 6,088）
  4. 深度解读网站用户体验三要素（3）：别让我烦 （累计阅读 5,646）
  5. 这些反人类设计，你肯定也碰到过 （累计阅读 5,631）
  6. 行进在产品经理的路上 （累计阅读 5,043）
  7. 浅谈如何留住用户 （累计阅读 4,967）
  8. 在程序员的眼里，用户是这样使用他们开发的软件的 （累计阅读 4,929）
  9. 产品细节、用户体验和学习的态度 （累计阅读 4,725）
  10. Google User Experience （累计阅读 4,387）