增强网站用户体验的25种方法

随着web使用量的增加和人们网络意识的增强,用户体验(或“通用设计”)变得更加重要。用户体验不仅取决于一个网站的代码,还受网站设计和内容的影响,这就是为什么可访问性、标准和用户体验关系如此紧密。

网页用户体验是一个庞大的课题,已自成一个领域。 但不要被它吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。这是一种高明的(smart)设计和开发方式。

让我们来看看建立一个无障碍网站的25个重要技术。

1.一致的布局和结构

为了帮助用户快速和轻松地浏览您的网站,你应该提供一个一致的布局和结构。页面的主要元素——banner、navigation、sidebar侧栏,在整个网站中应该出现在的相同位置 。他们也应该标记一致,如使用同一标题结构(heading structure)。这有利于认知障碍者和使用屏幕阅读器(用来处理屏幕上的内容,并大声读出)的用户访问。

2.为图片添加替代文本

不幸的是,虽然替代文本已是家喻户晓,但它常常被忽视或不正确使用。图像元素的alt属性为图片提供了文字描述。当图片不可见时——如碰到盲人用户、搜索引擎、图像禁用和坏链情况时,可以通过alt文本来访问图片的“内容”。下面是替代文本的一些最佳做法

  1. 如果文本嵌入在图像中,将文本添加到alt属性。
  2. 装饰性图片应该由CSS处理。如果不能由css处理,应加空alt属性(例如<img src=”decor.jpg” alt=”” />)。这不仅能通过验证,还能告知辅助技术该图片不包含任何意义。
  3. 对于某些图片,如图表和插图等,需要更长的描述。有多种方法可以添加长描述,例如:在行内增加内容,使用“D – Link”(译者注:D表示description,该链接的链接文本为D,表示链接至详细描述页面 ,如<a href=”detail.html”>D</a>),或使用longdesc属性(译者注:HTML5已废弃longdesc 属性)。
  4. 如果一个链接只包含图像内容,那么alt文本应描述链接的功能,而不是图像本身。

3.使用页面标题

页面标题是一个网页的基本构建块。如前所述,它能为HTML文档提供一个一致的结构。例如,H1元素可能包含网页或网站的标题,H2可能表示该网页的标题。这不仅有助于屏幕阅读器用户浏览,而且使页面易于明眼用户阅读。标题也有利于SEO(但不要滥用标题,谷歌会发现并惩罚你滴!)。

切勿仅依靠​样式 (如加粗,增加字体大小)来创建标题。始终使用H1至 H6元素,然后使用css修改其外观。如果用户代理不能解析CSS,标题通常默认显示一种格式,可以维持文档的视觉结构。

错误:<span style=”font-size:2em”> <b>我的网页标题</b> </span>

正确:<h1>我的页面标题</ H1>

4.正确使用标题

标题也经常使用不正确。标题使用混乱,跳级使用标题。将你的文档想象为一份大纲,以下是一些指导原则:

  • 每个页面只给一个H1元素(除非你使用HTML5)。
  • H1的内容与网页标题相似。
  • 按顺序使用标题。例如,H1应该是第一个,H4应该在H3之后。
  • 不要跳级使用标题。举例来说,不要从H2跳至H4。

关于标题和文档结构的更多信息,请查看WebAIM的文章创建语义结构 。

5.跳过链接

锚链接将光标从页面的一个区域移动到另一个区域,“跳过”链接是一种特殊类型的锚链接。它对键盘用户非常有益,允许键盘用户跳过大块的内容和链接,特别是导航菜单。跳过链接通常放置在页面顶部并指向主要内容,用户访问新页面时不必每次都浏览banner和导航。鉴于现在的导航条链接数目较多,这样可以节省一点时间。

千万不要使用display:none属性隐藏跳过链接,因为屏幕阅读器也无法读取这些内容。让它可见,但如果你非要把它藏起来,可以用CSS给它一个负边距(或类似的东西),当链接获取焦点时将它显式。Web Standards Project在其网站上很好的使用了该方法。

ARIA和HTML5提供了导航方法,跳过链接就过时了。但是,在这些新技术得到更广泛的支持(和标题更好地执行)之前,在页面顶部加上一个或两个跳转链接仍然是良好的做法。

<body>
<a href="#mainContent">Skip to main content</a>
<div>[banner]</div>
<div>[navigation]</div>
<div id="mainContent">[page content here]</div>
</body>

6.链接内容

由于一些辅助技术会在一个单独的网页展示链接,链接文本的内容是非常重要的。这听起来简单,但有时可能具有挑战性。下面的规则不仅有利于增强可访问性,同样对可用性和搜索引擎优化也是有意的:

  • 一个链接在脱离语境时仍然有意义;
  • 链接文本在它出现的页面上应该是唯一的(即不同资源不要使用相同的链接文本);
  • 链接文本千万不要使用“点击此处”或“更多”;
  • 不要使用一个长URL作为链接文本(屏幕阅读器会全部读出来,用户会很烦躁的)。

下面的文字,用户必须折回来去理解链接的去向。

不好: To learn more about the bat species, click here.

下面的更加简洁,即使脱离上下文也有意义。

好多了:If you’re interested, learn more about thebat species. 。

7.链接感知

如果一个链接不是以默认方式打开时,应告知用户,即在同一浏览器窗口的网页之外打开。包括链接在新窗口打开,链接至非HTML文件,如PDF和视频文件。

告知用户的方式有多种,根据残疾类型和浏览器支持程度使用一种或多种方式。

你可以使用下面的代码在链接至PDF文件的链接旁边显示一个图标。注意的是,除了作为一种视觉提示,图标包含一个alt属性,链接拥有一个title属性,两者可提供补充信息:

<a href="about_bats.pdf" title="open PDF document"> <img src="icon_pdf.png" alt="PDF
document" />learn about bats</a>

8.谨慎使用title属性

title属性用于添加补充信息很方便,但它仍只是补充。当书写标题文本时,即“tooltip”,假设前提是用户不会总是看它。许多屏幕阅读器默认情况下不能识别title属性,大多数用户无法感知到。正如我们上一节看到的,我们可以使用title属性之外的方法表明一个链接的目标异与寻常。

9.保留下划线

仅仅因为你可以,并不意味着你应该。在这种情况下,链接不要乱用下划线。网络上表明文本是超链接的惯例就是下划线,不要删除它。赞成下划线的观点在这个看似古老的辩论中已逐渐失去地位,因为无障碍意识的缺乏和创作“最好”设计的激烈竞争。

谈到无障碍,保留下划线的主要原因是这样的链接对色盲用户仍然是可见的。当下划线被去除而且链接颜色对比度不够时,即使是我也很难将链接和纯文本区别开。如果一个网页中文字是黑色和链接是深蓝色或紫色,即使可以区分两者,但对眼睛会造成很大的压力。

导航菜单可以例外。只要链接的功能对用户是显而易见的,移除下划线是可以的。

另外,不要对纯文本使用下划线。如果你想强调一个词,请使用强调元素(<em>)。

10.表单

要使Web表单可访问,就要标记(label)字段。大多数段已经被标记,因此只要把label元素附加到相关文字上就可以了。赋予字段一个唯一的ID,并通过label元素的for属性引用该ID。如下下例:

<label for="firstname">First Name:</label> <input name="firstname" id="firstname"type="text" />

这是一个“显式”标记的例子。你也可以使用一个“隐式”标签(即无需使用for和id属性),但它会更严格,因为表单元素必须要包含在label元素内。查看HTML label的规范

另一个有用的技术是设置fieldset和legend,尤其当表单很长时。fieldset 将表单元素组合在一起,legend给表单组命名。这使得表单更容易阅读、浏览和填写。在下面的例子中,字段first name和last name被分组在name下,address 和city 字段分组在location下:

<form action="foo.php">
<fieldset>
<legend>Name</legend>
<label for="firstname">First Name:</label> <input name="firstname" id="firstname"
type="text" />
<label for="lastname">Last Name:</label> <input name="lastname" id="lastname" type
="text" />
</fieldset>
<fieldset>
<legend>Location</legend>
<label for="address">Address:</label> <input name="address" id="address" type=
"text" />
<label for="city">City:</label> <input name="city" id="city" type="text" />
</fieldset>
</form>

其他建议:

  • 在很长的下拉列表中,使用optgroup元素将相关条目分组。
  • 除了使用label元素,你也可以将表单字段和文本标记关联起来,通过使用ARIA的aria-labelledby属性。
  • 服务器端和前端都要验证表单。
  • WCAG2不推荐使用隐式表单标记,推荐使用显式标记 。
  • 表单要尽可能短。不要问你不需要的信息。
  • 说明提示信息如果不包含在特定表单元素内,辅助阅读设备处在表单模式下就可能读不出来。例如,提示用户该字段是“必填项”的说明应该包含在label内。

11.键盘可访问所有链接

许多人是不使用鼠标的。一些辅助技术依赖于键盘输入或虚拟键盘而不是鼠标或指针设备。出于这个原因,链接不应要求只有鼠标才可访问。一定要遵从标准,链接应当是拥有href属性的a元素。

这似乎是显而易见的,但是在网络中总能碰到这类错误代码。这是Plain Old Semantic HTML (POSH,译者注:倡导使用通过验证的、语义的、无障碍的、结构良好的HTML)和逐步增强(PE)(见本文第15节:“三层”)的理念。执行POSH和PE的最好方式是确保链接可通过键盘访问(同样会带来其他的好处)。

为了增强链接的行为,可以为链接添加了一个钩子,如class或ID;然后使用JavaScript通过DOM来访问这个钩子。这样HTML仍保持语义、轻量和整洁。 下面有几个提示:

  • 不要使用双击处理程序(onDblClick),因为键盘不能执行这个行为。
  • 如果您使用onmouseover和onmouseout JavaScript处理程序,同时使用onfocus和onblur以适应键盘。
  • 如果你必须使用JavaScript,把链接的tabIndex值设为-1将其插入到tab序列中。TabIndex为0时事件div可被键盘访问。

12.显示链接焦点

当链接获得焦点时突出显示它们(视觉上)。这可以指示明眼键盘用户他们在页面上的位置。同样,鼠标悬停时提供视觉反馈。切勿使用css删除链接的默认外框——a{outline:0}——除非你移除了链接功能。CNN是一个很好的反例 。使用tab在其网站上浏览,你会很快迷失方向,因为你看不到获得焦点的链接的视觉提示。相比之下, Accessible Twitter保留了默认的外框,并为表单域和按钮事件增加了独特的焦点效果。

13.添加ARIA Landmark Roles

无障碍富互联网应用( ARIA )是一个相对较新的W3C规范,提供了使现代应用程序对辅助技术可访问的方法。作为第一步,尝试在文档里加入“landmark roles”。这是描述网页片断(sections)的特殊属性,如内容区,导航和搜索。这为屏幕阅读器用户提供了一个很好的浏览方式(虽然ARIA在一些屏幕阅读器-浏览器组合中没有完全支持)。在下面的例子中,4个landmark roles创建了一个基本的网页结构:

<div role="banner">
[header content]
</div>
<div role="navigation">
[nav content]
</div>
<div role="main">
[main content]
</div>
<div role="c​​ontentinfo">
[footer content]
</div>

ARIA的更多信息,请阅读Opera开发者网站上的“ Introduction to WAI ARIA“。

14.验证标记

验证HTML和CSS对可访问性是有益的。虽然不一定要非常完美,但通过验证是终极目标。 无效的HTML或CSS会给辅助技术带来问题,即使在浏览器中的表现是好的。

下面是验证代码的更多好处:

  • 健壮的网页更容易在各种浏览器和设备中工作。
  • 易于维护一致编码的页面更容易创建、维护和解决问题。
  • 可靠的网页渲染和执行更可信。
  • 通过验证的代码更容易支持浏览器和设备的未来版本。

记住,技术上的通过验证的文档并不能保证其可访问性。一个完全通过验证的文档,如果它的语义完全是错误的话,将损害文档的可访问性。例如:标题结构不合理,使用blockquote来缩进文字,在布局表格中使用summary属性。为了验证您的代码,你可以使用W3C的标记验证服务CSS校验服务。许多开发者工具上,如由The Paciello Group开发的Web Accessibility Toolbar,提供这些服务的快捷方式。

15.三层分离,逐步增强

为了有效地实施标准,使网站更易于访问,你必须通过使用HTML、CSS和JavaScript,把内容、样式(或表现)和行为分离。这是前端开发的三个层次。这种分离也使渐进增强 (PE)更加可行,渐进增强使网站在旧浏览器和技术上优雅降级。

“Hijax”(Jeremy Keith)是渐进增强的一个很好的例子,即使JavaScript不可用时,使网页仍具有AJAX的功能。一个伟大的经验法则是:“从一开始就计划AJAX,但最后实施。”要了解更多Hijax,请阅读2006年keith的演讲:“ Hijax:AJAX逐步增强 。“

16.列表使用list元素

听起来很简单,但列表经常被标记错误。无序列表、有序列表和定义列表(注:HTML5称为描述列表)用来标记列表。无序列表(<ul>)适用于普通的项目符号列表和导航链接。有序列表(<ol>)基本上是编号列表,用于显示一个过程的步骤。当编写一个无序列表时,不要把符号图片内嵌在内容中。而是用CSS定义样式。

错误:

<p><img src="bullet.jpg" />Burger King<br />
<img src="bullet.jpg" />Taco Bell</p>

正确:

<ul>
<li>Burger King</li>
<li>Taco Bell</li>
</ul>

定义列表(<dl>)是由定义条目(<dt>)和定义数据(<dd>)组成。通常,一个条目被分配一个或多个数据元素。一个明显的例子就是词汇表:单词被标记为定义条目,其定义则是定义数据。下面是一个定义列表显示三种标记语言的缩写和全称:

<dl>
<dt>SGML</dt>
<dd>Standard Generalized Markup Language</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XHTML</dt>
<dd>Extensible HyperText Markup Language</dd>
</dl>

有时一个词可以有一个以上的定义,反之亦然。下面单词“theater”的列表,它的替代拼写和多种定义:

<dl>
<dt>Theatre</dt>
<dt>Theater</dt>
<dd>A building, part of a building or outdoor area for housing dramatic
presentations, stage entertainments or motion-picture shows.</dd>
<dd>A theatrical or acting company.</dd>
<dd>A place of action; field of operations.</dd>
</dl>

17.不要仅使用色彩来传达意思

许多人都有一定的视力障碍,比如色盲。据报道,美国男性中百分之七有某种形式的色盲。所以,你不能仅使用颜色传达意思。比如“选择红色按钮”,这样的说明对辨识这种颜色有困难的用户是没有帮助的。相反,确保每一条指令是指目标对象的一个特定的非色彩特征,如它的形状(如八角形)或文字(如”stop”)。另一种方法是对目标对象添加形状,如八角形,或者纹理。想要了解更多信息和解决方案,请查看我们是色盲We Are Colorblind) 。

18.色彩对比

确保你的设计有足够的颜色对比,这对低视力和色盲用户有益。WCAG 2.0 AAA级要求最小对比度为7:1,AA级的建议是4.5:1或更高。这些比率是根据前景色和背景色的色彩亮度公式计算而来的。下面是一些可用来检查颜色对比度的工具:

19.正确标记数据表格

编码恰当可以使数据表对所有人都可访问。首先给表格添加caption元素或summary属性,两者都添加更好。caption元素是表格的标题,summary属性描述表格的内容和结构,通常只有屏幕阅读器用户可以访问(其与HTML5的相关性目前正在讨论之中。)

标记表格表头单元格使用<th>而不是普通的<td>。然后,为表头单元格添加scope属性。如果表头在顶部行,控制下面的单元格,scope的属性值设为col。如果表头在左边列,控制右侧的单元格,则属性值为row。这里有一个很好的例子,来自文章“Bring on the Tables “:

<table summary="The number of employees and founding years of some
imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th scope="col" abbr="Company">Company Name</th>
<th scope="col" abbr="Employees">Number of Employees</th>
<th scope="col" abbr="Founded">Year Founded</th>
</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>3000</td>
<td>1973</td>
</tr>
</table>

在复杂数据表格中(比如多级表头),在单元格中要添加headers和id属性。关于这个技术的更多信息,请访问 Web Usability查看Complex Data Tables

此外,即使使用table布局一个页面或页面的一部分不会直接访问性,但最好使用纯CSS,而表格留给表格式数据使用。

20.声明变更内容

网页上的内容动态变化时一定要提醒用户。ARIA Live Regions是一个相对较新的技术,它可以很容易的为屏幕阅读器用户处理这种任务。为内容可能更新的元素添加aria-live属性。属性值可选off,,polite 和 assertive。默认值是off,所以一定要明确设置此值。

你可以将变化通知给明眼用户,通过使更新内容的背景逐渐消失,或者使用JavaScript生成一个提示覆盖在内容上。

总之,在自动重新加载页面或页面跳转至其他页面之前一定要告知用户。

21.关于Flash…

根据屏幕阅读器用户的反映, 在网络上Flash是最难访问的技术之一。Adobe已经竭力使创建可访问的Flash内容 成为可能,但坦白说,开发人员在实践中很少使用它。

有节制地使用Flash,并竭力使你的Flash内容可访问。如果做不到的话,就要提供一个访问内容的替代方式。

“ Assistive Technology Boogie “(链接到Flash文件)是一个很好的具有可访问性的flash。这个flash可以通过键盘操作,提供了标题,还有一个音频描述。

22.提供音频文本

给所有音频提供文本,以帮助耳聋或有听力障碍的用户。音频文本也有其他的好处:用户可以选择访问内容的方式。用户的设备可能没有音频功能,或他们的喇叭或耳机赶巧坏了。也可能用户在图书馆或者不可喧哗的工作场所。更何况,音频文本对SEO 是非常有益的。

标记音频文本有多种方法,被广泛采用的方法是使用一个定义列表。说话者的名字标记为定义条目(dt),说话者的话语标记为定义数据(dd)。

<dl>
<dt>Mark</dt>
<dd>How are you?</dd>
<dt>Jane</dt>
<dd>I’m fine, thank you.</dd>
</dl>

HTML5曾创建了dialog元素,但后来又去掉了。目前规范建议使用段落元素来标记会话。

23.提供字幕

你应该为视频和多媒体内容提供同步字幕,理由和提供音频文本一样。这里有一些资源可帮助你入门:

24.恰当的语言

“恰当的”语言通常意味着易于理解的语言。如果说“有趣”和“诙谐”的意思一致的话,那应该使用前者。易于理解的语言对有认知障碍和非母语的用户是有帮助的。下面是一些提示:

  • 写短句子;
  • 写短的段落;
  • Favor the active over the passive voice;
  • 避免使用行话,俚语和成语;
  • 解释技术术语;
  • 提供不常见缩略语的全名。

当然,对于涉及技术或复杂主题概念的网站来说,比如火箭科学,”恰当“比”易于理解“更重要。要了解更多信息,请参阅SlideShare上的由4 Syllables制作的“ Web Accessibility for Writers “。

25.使用多种方法测试

使用多种方法来测试一个网站的可访问性。也不要仅仅依靠自动化工具,因为你应该检查的很多东西在本质上是主观的,如语言、tab顺序和链接文本。测试一个网站的最好方法来是让有辅助技术经验的用户使用它。

下面是需要做的一些事情:

  • 拔掉你的鼠标,只用键盘来浏览网站;
  • 至少在两个自动化测试工具上检测网站,如WAVE , Cynthia SaysA-Prompt ;
  • 使用前面提到的色彩对比工具;
  • 禁用css和JavaScript,查看网站内容;
  • 检查标题结构;
  • 在多个浏览器和设备上浏览网站;
  • 使用一种web无障碍工具条;
  • 使用单眼阅读诸如颜色语言,方向性语言(“上方”,“向左”)的内容
此条目发表在资源分类目录,贴了标签。将固定链接加入收藏夹。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注