无障碍开发微信小程序学习笔记

本文最后更新于：2022年3月31日 下午

无障碍开发微信小程序学习笔记

无障碍开发参考ARIA - 无障碍 | MDN (mozilla.org)

一些关键词的解释：

  • 走查：即walk-through，动词，开发人员模拟软件执行。
  • 热区：界面中可交互的部分。
  • ARIA：即Accessible Rich Internet Applications，是一组属性，使残障人士更容易访问Web。

ARIA

ARIA是一种给html标签添加辅助语义的技术，来自W3C的网络无障碍计划。ARIA分成三部分：roles、states、properties。

  • roles：标识控件是什么
  • states：标识控件目前的状态（可用、不可用、禁用）
  • properties：标识控件的属性（可拖动、可点击等）

使用ARIA的例子1–状态变化

开发者应该使用ARIA来标识不同的控件，然后用CSS选择器来控制元素可见度，而不是用自定义类名，比如这是一个单选框组件的实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
  <li id="sans-serif"
      class="menu-item"
      role="menuitemradio"
      tabindex="-1"
      aria-controls="st1"
      aria-checked="true">Sans-serif</li>
  <li id="serif"
      class="menu-item"
      role="menuitemradio"
      tabindex="-1"
      aria-controls="st1"
      aria-checked="false">Serif</li>
  ...
1
2
3
4
5
6
li[aria-checked="true"] {
  font-weight: bold;
  background-image: url('images/dot.png');
  background-repeat: no-repeat;
  background-position: 5px 10px;
}
1
2
3
4
5
6
7
8
9
10
11
var processMenuChoice = function(item) {
  // 'check' the selected item
  item.setAttribute('aria-checked', 'true');
  // 'un-check' the other menu items
  var sib = item.parentNode.firstChild;
  for (; sib; sib = sib.nextSibling ) {
    if ( sib.nodeType === 1 && sib !== item ) {
      sib.setAttribute('aria-checked', 'false');
    }
  }
};

使用ARIA的例子2–可见度变化

1
2
3
4
5
6
7
8
9
10
<div class="text">
    <label id="tp1-label" for="first">First Name:</label>
    <input type="text" id="first" name="first" size="20"
           aria-labelledby="tp1-label"
           aria-describedby="tp1"
           aria-required="false" />
    <div id="tp1" class="tooltip"
         role="tooltip"
         aria-hidden="true">Your first name is optional</div>
</div>
1
2
3
div.tooltip[aria-hidden="true"] {
  display: none;
  }
1
2
3
var showTip = function(el) {
  el.setAttribute('aria-hidden', 'false');
}

ARIA roles

使用：aria-roles="xxx"，列出了文档中完成的roles，忽略部分描述文章结构的role。

roles 解释 roles 解释
button 按钮，对应<button> switch 开关
checkbox 多选框，对应<label> radio 单选框
listbox 选择列表，对应<select> option 选择列表下的item
link 超链接，对应<a> progressbar 进度条
slider 滑动选择 textbox 输入框
gridcell grid下的单元格，对应<td> cell row下的单元格
rowgroup 多个行的组合 rowheader 行标题
table 表格，对应<table> row 行
tabpanel 选项卡内容 tab 选项卡本身
tablist 包裹tab的选项卡列表

表格实例

table是不能交互的，展示数据的表格；而grid是排版上的可以交互的表格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 不可交互table -->
<div role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81">
  <div id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none">ARIA Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--可交互grid-->
<table role="grid" aria-labelledby="id-select-your-seat">
  <caption id="id-select-your-seat">Select your seat</caption>
  <tbody role="presentation">
    <tr role="presentation">
      <td></td>
      <th>Row A</th>
      <th>Row B</th>
    </tr>
    <tr>
      <th scope="row">Aisle 1</th>
      <td tabindex="0">
        <button id="1a" tabindex="-1">1A</button>
      </td>
      <td tabindex="-1">
        <button id="1b" tabindex="-1">1B</button>
      </td>
      <!-- More Columns -->
    </tr>
    <tr>
      <th scope="row">Aisle 2</th>
      <td tabindex="-1">
        <button id="2a" tabindex="-1">2A</button>
      </td>
      <td tabindex="-1">
        <button id="2b" tabindex="-1">2B</button>
      </td>
      <!-- More Columns -->
    </tr>
  </tbody>
</table>

进度条实例

1
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

选项卡实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="tabs">
  <div role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
          First Tab
        </button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
          Second Tab
        </button>
    <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
          Third Tab
        </button>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>