无障碍开发系列之开发建议

欢迎访文我的博客YangChen’s Blog

这将是无障碍开发系列的最后一篇文章，对一些开发中的琐碎点做些总结。

HTML规范建议

html这块的问题大部分是我们开发过程中的不规范导致的，如果规范化的使用HTML标签基本上问题都不大，有些问题还是要说一下

图片添加替代文本

写img标签时一定要加上替代文本，也就是alt属性里内容。它的作用就是焦点到这个图片时，读屏器会读出alt里的内容，这样能让视障朋友理解图片想要表达的信息。例如：<img src="../logo.png" alt="logo">

使用并正确的使用标题

标题指的就是h1到h6标签。在写页面的时候，有时为了图方便可能用的不多或者不用标题。这在实际开发中是不正确的，标题是一个网页的基本构成要素，它够了网页信息的层级关系，正确的使用标题能够提高页面的可访问性。例如：
h1元素可能包含网页或网站的标题，h2可能表示该网页的标题。这不仅有助于屏幕阅读器用户浏览，而且使页面易于明眼用户阅读。

在使用标题时要注意一下几个原则：

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

表单书写的规范化

表单的无障碍支持往往是页面无障碍化的一个重点，所以规范化的表单书写规范能够减少很多不必要的麻烦和无用功，在实际开发中，回炉改造及bug中最多的一块也是表单这块。表单这块应注意以下一个方面：

• 表单中的元素一定要有label标签，例如：
  
<label for="firstname">First Name:</label>
<input name="firstname" id="firstname"type="text" />

• 对于一些其他情况，例如靠图片来传递表单信息的，例如：也要为这个input添加label，并将label用隐藏可访问的形式隐藏起来，这样读屏器在焦点到这个input时仍能解释出来这个输入框是干什么的。隐藏可访问的方法参考无障碍开发系列之隐藏内容访问
• 规范化的表单结构
  即时用的ajax也要在表单外面套上form标签，对于一个域要用fieldset包裹起来，域的标题用legend声明，不想显示出来，可以隐藏起来但不能缺少。另外还有label这也是不能少的，之所以要这么标准是因为读屏器可是要靠这些标签来理解网页，写的越规范越有利于解决读屏器兼容性问题。一个标准化的表单示例：

<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元素包裹起来，例如：

<select>
    <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
    </optgroup>
</select>

• 不推荐隐式表单标记，推荐显示标记
• 表单要尽可能短。不要问你不需要的信息。

添加ARIA Landmark Roles

利用ARIA Landmark Roles能够让读屏器知道这个元素是干嘛的，提高页面的解析能力，值与这个aira有专门的文章介绍过，可以看一下无障碍开发系列之WAI-ARIA示例如下:

<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>

使用列表元素

对于列表信息的展示要使用列表元素，不要使用div堆叠起来，示例如下:

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

规范化使用表格

规范化的表格使用可不是table下面直接tr、td的这么简单，我们在使用表格的时候往往会忽略很多细节，这些细节在无障碍开发中是不能缺少。例如要添加summary属性声明表格内容和结构；添加caption表格标题；表头元素用th而不是td；如果表头在顶部行，控制下面的单元格，scope的属性值设为col。如果表头在左边列，控制右侧的单元格，则属性值为row。一个标准化的表格如下：

<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>

功能建议

所有功能必须键盘可操作。

这个不用多说了，凡是click事件一定要有对应的键盘事件，有时候还要单独设置键盘事件，这个依据情况自己调整吧

页面顶部提供一个可以跳过头部导航。

实现方法：
- 将导航放在body元素内，并且是第一个元素，例如：

<a id="skippy" class="sr-only sr-only-focusable" href="#content">
    <div class="container">
        <span class="skiplink-text">Skip to main content</span>
    </div>
</a>

需要注意以下几点：

• 保证所有页面内有对应的跳转元素，例如id="content"的元素。
• id="content"的元素必须是页面内主要内容所在的容器元素。
• id="content"元素需要加入tabindex属性：
• 不要使用display:none将导航设置上隐藏可访问，只有获得焦点时才可以显示，这里可以参考下Bootstrap的效果

最后

这块就先说这么多吧，这块写的不是很全，有些参考文章中提供的建议在开发中没有用到，但并不是说没有用途，后面如果还有无障碍开发的项目，就继续补充下吧。

参考文章

25 Ways To Make Your Website Accessible
增强网站可访问性的25种方法