[译] Web 可访问性建议(开发者版)

376 阅读7分钟

W3C 网站上有一个模块叫 WAI,全称是“Web Accessibility Initiative”,直译就是“网页无障碍倡议”,致力于推广、提升网页无障碍访问体验。里面有一个 Design & Develop 模块,分别从写作者、开发人员、设计人员、音视频资源的角度提供了提升网页无障碍访问的 Tips。

作为一名开发者,在阅读 Tips for Developing 的时候,觉得很受用,于是在此对原文做了部分翻译,希望能够帮到需要的朋友们。

每小节下,都给了对应的扩展资源。点进去查看,会看到非常丰富、详尽和平易近人的介绍。

为表单控件关联一个标签

标签可以通过两种方式与表单控件做关联:

  1. 通过 <label> 标签
  2. 通过 WAI-ARIA 属性

举例:

<!-- 通过 <label> 标签:<label> for 对应 <input> 的 id -->
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>

<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
<!-- 通过 WAI-ARIA 属性:这里使用了 aria-label,会被 screen reader 和其他辅助设备读取  -->
<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>

更多信息,可以查看教程《Forms Tutorial: Labeling Controls》

图片的 alt 属性

如果网页里的图片是做信息、功能展示使用的,要确保添加了 alt 属性描述;如果是装饰性图片,则可留空(alt="")或写进 CSS 代码。

举例:

<!-- (1) -->
<p>
	<img src="dog.jpg" alt="Dog with a bell attached to its collar.">
	Off-duty guide dogs often wear ...
</p>
<!-- (2) -->
<p>
	<a href="…">
		2012 Annual report and accounts
		<img src="html5logo.png" alt="HTML"> (43KB)
	</a>, also available in
	<a href="…">
		<img src="worddocument.png" alt="Word document"> (254KB)
	</a>
	or
	<a href="…">
		<img src="pdfdocument.png" alt="PDF"> (353KB)
	</a>
	format.
</p>

更多信息,可以查看教程《Images Tutorial》

标记网页语言

使用 <html> 标签的 lang 属性标记网页中使用的主要语言。

<html lang="en">

如果页面局部使用了别的语言,则可以特别指定:

<p>You'd say that in Chinese as <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>

更多信息,可以查看《Declaring language in HTML》这篇文章。

使用标签传达语义和结构

为标题、列表和表格使用合适的标签。HTML5 也引入了一些额外语义标签,像 <nav><aside>,用来更好的构建网页。或者使用 WAI-ARIA 的 role 传达标签语义,比如用 role="search" 标记搜索功能模块。

<!-- 使用标签传达语义和结构 -->
<section>
  <article>
    <h2>Superbear saves the day</h2>
    <time datetime="2015-08-07">7 Aug 2015</time>
    <p>The city's favorite bear yet again proves his mettle by rescuing a young cat from a tree. Witnesses say that Superbear's efforts were not appreciated by the feline, who inflicted some minor scratch wounds on his rescuer.</p>
    <aside>
      <h3>Related Articles</h3>
      <ul>
        <li><a href="#">Bear receives key to city</a></li>
        <li><a href="#">Superbear stands for mayor</a></li>
      </ul>
    </aside>
  </article>
</section>
<!-- 使用了 WAI-ARIA 的搜索控件 -->
<form action="#" method="post">
  <div role="search">
    <label for="search">Search for</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Search records by customer id or name</div>
    <button type="submit">Go</button>
  </div>
</form>

更多信息,可以查看教程《Page Structure Tutorial》《Tables Tutorial》

表单验证信息

为用户要填写的表单,提供输入建议和校验。

<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel"
       pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
       aria-describedby="phone-desc">
<p id="phone-desc">For example, (02) 1234 1234</p>

更多信息,可以查看教程《Validating Input》

逻辑顺序匹配代码顺序

这怎么理解呢?看下面一块页面渲染。

image.png

如果页面结构如下,就是不建议的(图片位于标题之上):

<img src="images/trainer.png" alt="...">
<h3>Space trainers</h3>
<p>Space...</p>
<a href="...">Add to cart</a>

更好的组织结构如下:

<h3>Space trainers</h3>
<img src="images/trainer.png" alt="...">
<p>Space...</p>
<a href="...">Add to cart</a>

如何组织内容结构,让它与逻辑顺序更加符合?可以查看这里的教程:www.w3.org/WAI/WCAG21/…

响应式设计

使用响应式设计(responsive design)令页面在不同缩放状态和视口大小的情况下都能很好的适配,比如在移动设和平板电脑上。此外,当字体大小增加超过 200% 时,还要避免水平滚动发生、内容被剪切等情况出现。使用渐进增强(progressive enhancement)功能确保核心功能都是可用的。

举例(使用媒体查询实现响应式导航):

/* On narrow viewports, make the navigation full width */
@media screen and (min-width: 25em) {
  #nav {
    float: none;
    width: auto;
  }
  #main {
    margin-left: 0;
  }
}

/* On wider viewports, put the navigation on the left */
@media screen and (min-width: 43em) {
  #nav {
    float: left;
    width: 24%;
  }
  #main {
    margin-left: 27%;
  }
}

更多资源:

为非标准交互元素提供语义支持

如果需要实现自定义组件(比如手风琴效果、自定义按钮),那么可以使用 WAI-ARIA 来提供功能信息。比如  role="navigation"aria-expanded="true"。当然,可能还需要借助一些额外的 JS 代码,来实现自定义组件的行为,比如打开 & 折叠内容、响应键盘事件等。

<nav aria-label="Main Navigation" role="navigation">
  <ul>
    <li><a href="...">Home</a></li>
    <li><a href="...">Shop</a></li>
    <li class="has-submenu">
      <a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
      <ul>
          <li><a href="...">SpaceBear 6</a></li>
          <li><a href="...">SpaceBear 6 Plus</a></li>
      </ul>
    </li>
    <li><a href="...">MarsCars</a></li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

更多资源:

确保所有交互元素都是键盘可访问的

特别是在做交互元素时,还要考虑键盘访问,像菜单、鼠标悬置信息、可折叠的手风琴或媒体播放器这类交互元素。可以使用 tabindex="0" 将正常不接收聚焦的元素(像 <div><span> 等)添加到用于交互导航序列中,使用 JS 脚本捕获和响应键盘事件。

下面举了一个菜单的例子:

// 令菜单按钮支持响应键盘事件和 tab 键访问
var buttonExample = document.getElementById('example-button');

buttonExample.addEventListener('keydown', function(e) {
  // Toggle the menu when RETURN is pressed
  if(e.keyCode && e.keyCode == 13) {
    toggleMenu(document.getElementById('example-button-menu'));
  }
});

buttonExample.addEventListener('click', function(e) {
// Toggle the menu on mouse click
  toggleMenu(document.getElementById('example-button-menu'));
});

效果如下:

GIF.gif

人机验证

如果不是必须请不要使用。如果使用,请尽量简单,避免给用户带来困扰,可以遵循以下的几点建议:

  • 提供两种以上的验证方式
  • 提供可绕过验证码的人类代表(human representative)访问
  • 不向授权用户使用验证。

更多资源:Inaccessibility of CAPTCHA

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)