网站易用性

易用性的几条原则：

  1. 易理解：单单凭观察，用户能否在几秒内就知道网站是做什么的，以及知道如何采取行动。
  2. 易操作：用户初次接触网站时，是否可以很轻松的完成任务，是否可不用帮助文档就能使用网站。
  3. 易学习：通过简单的帮助文件，用户能否顺利解决遇到的问题。
  4. 效率性：用户熟悉网站功能或界面后，是否可以快速完成任务。
  5. 出错率：在使用网站过程中，用户操作出现的错误有多少，这些错误有多严重，用户从错误中恢复是否容易。
  6. 满意度：用户使用这个网站（功能、设计等），是否有较高的满意度。
  7. 易分享：等

增加易用性的几种方法

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

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

几种方法：

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

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

<span title="前端界"></span>

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

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

2. 添加基本的 Landmarks

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

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

3. 增强 focus 定义

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

4. 定义必填表单项

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

5. 避免"点击此处"

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

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

补充

补充：易用性的本质是"降低任何一种用户的理解、操作、学习成本"——既包括普通用户，也包括读屏用户、键盘用户、移动端用户。

易用性与可访问性的关系

  • 易用性面向所有用户：交互是否高效、直觉
  • 可访问性面向障碍人群：屏幕阅读器、键盘操作、对比度等

两者互为补充：好的可访问性往往也提升普通用户的体验，例如清晰的 focus 样式对所有键盘用户都友好。

现代实践

  • 颜色对比度 ≥ 4.5:1（正文）
  • 按钮最小点击区域 ≥ 44×44 px
  • 关键操作键盘可达
  • 表单字段有可见 label 与错误提示
  • 提供"跳过导航"链接

来源整理自：我的有道云笔记