W3C 网站上有一个模块叫 WAI,全称是“Web Accessibility Initiative”,直译就是“网页无障碍倡议”,致力于推广、提升网页无障碍访问体验。里面有一个 Design & Develop 模块,分别从写作者、开发人员、设计人员、音视频资源的角度提供了提升网页无障碍访问的 Tips。
作为一名开发者,在阅读 Tips for Developing 的时候,觉得很受用,于是在此对原文做了部分翻译,希望能够帮到需要的朋友们。
每小节下,都给了对应的扩展资源。点进去查看,会看到非常丰富、详尽和平易近人的介绍。
为表单控件关联一个标签
标签可以通过两种方式与表单控件做关联:
- 通过
<label>
标签 - 通过 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》。
逻辑顺序匹配代码顺序
这怎么理解呢?看下面一块页面渲染。
如果页面结构如下,就是不建议的(图片位于标题之上):
<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%;
}
}
更多资源:
- Resize text 1.4.4 (Understanding 1.4.4)
- Consistent Identification 3.2.4 (Understanding 3.2.4)
- Small Screen Size
- Describes how alternative views of zoomed pages can be helpful
为非标准交互元素提供语义支持
如果需要实现自定义组件(比如手风琴效果、自定义按钮),那么可以使用 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'));
});
效果如下:
人机验证
如果不是必须请不要使用。如果使用,请尽量简单,避免给用户带来困扰,可以遵循以下的几点建议:
- 提供两种以上的验证方式
- 提供可绕过验证码的人类代表(human representative)访问
- 不向授权用户使用验证。
更多资源:Inaccessibility of CAPTCHA
(正文完)
广告时间(长期有效)
我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。
(完)