支付宝小程序组件无障碍访问·aria-component

无障碍访问

aria 属性是 WAI-ARIA 标准提供无障碍访问动态、可交互 Web 内容的技术规范。从基础库 1.18.0 版本开始，小程序架的部分基础组件支持 aria 属性，可满足视障人士对于小程序的无障碍访问需求。

支持 aria 属性的小程序组件有：

常用 aria 属性

role

aria 属性的核心是 role 属性，该属性表示组件的语义角色。例如当 role 属性设置为 img 时，组件聚焦后读屏软件会朗读出图像；设置为 button 时，聚焦后读屏软件会朗读出按钮。

<view class="button" onTap="defaultTap" role="button" aria-label="确定按钮">确定按钮</view>

示例中的按钮用 view 组件实现，role 属性设置该 view 组件表达按钮的语义，当读屏软件聚焦该 view 组件的时候，会识别出这个 view 组件是个按钮，朗读出 按钮确定按钮。

小程序采用 AXML 语法，失去了 HTML 中许多具有语义的标签，如 H1 、 article 、 header 等，这些标签可配合读屏软件，将更多语义信息提供给用户使用。在小程序中，开发者可以使用 role 属性增强 view 组件的语义，达到和使用 HTML 标签开发一样的效果。

例如，一篇文章的html代码如下：

<article>
  <h1>文章标题</h1>
  <h2>第一章</h2>
  <p>第一段落。。。</p>
</article>

对于小程序而言，尽管没有对应 article 、h1 、h2 等标签的组件，但是通过带有 role 属性的 view 组件，一样可以达到效果，如：

<view role="article">
  <view role="heading" aria-level="1">文章标题</view>
  <view role="heading" aria-level="2">第一章</view>
  <view>第一段落。。。</view>
</view>

当读屏软件聚焦到 文章标题 的 view 组件时候，会朗读 文字标题标题1 ；当聚焦到 第一章 的 view 组件时候，会朗读 第一章标题2。标题2 中的标题就是 role 提供的语义信息，而 2 是由 aria-level 属性设置的。 aria-level 属性属于 aria 属性，它提供额外信息，示例中 aria-level 表达标题级别。

部分 role 属性的值需要 aria 属性配合使用才能生效。如 role="img" 时，必须配置 aria-label 属性，否则读屏软件会忽略 role 属性。

aria-label

aria-label 可以代替组件内的文本内容，例如：

<view aria-label="aria-label内容">组件文本内容</view>

当聚焦到此处时，读屏软件会朗读出 aria-label内容 ，而组件内原有的文本内容会被忽略。

aria-label 还可以配合不带文本内容的组件使用，表示该组件附带的文本信息，聚焦后系统会自动朗读出来。例如 image 组件，可以使用 aria-label 增添图片的描述信息。

<image src={{src}} role="img" aria-label="风景画" />

aria-label 也使用于使用 role 属性的 view 组件，如下：

<view style="background-image:url(./bg.jpg);" role="img" aria-label="风景画"></view>

一些视觉效果较强的组件（如 image），仅让读屏软件朗读出语义，对视障用户意义不大。通过 aria-label 属性对这些组件的内容提供文字说明，朗读出的内容会变得更完整，效果更佳。

aria-labelledby

一些组件和其他组件是有关联的，需要一起朗读才能表达出完整的含义。例如 checkbox 组件，往往需要一个 text 或 view 组件承载该 checkbox 选中的文字内容。此时可用 aria-labelledby 属性关联两个组件，读屏软件会在读完当前组件的内容后，继续朗读 aria-labelledby 指向的组件中的内容。

<label>
  <checkbox aria-labelledby="content"/>
  <text id="content">复选框内容</text>
</label>

实例中的 checkbox 组件获得焦点之后，读屏软件会朗读出 未选中复选框内容复选框。 aria-labelledby 的值是其他组件的 id 属性，组件 id 属性必须是唯一的，列表渲染的时候请勿给组件设置重复的 id。

aria-checked

aria-checked 表示 checkbox、switch 等组件是否被选中。聚焦到这些组件后，读屏软件将朗读组件的选中状态 未选中 或者 已选中 ，告诉用户当前组件的选中状态。

小程序原生组件，已预内置了该属性，如：

<label>
  <checkbox aria-labelledby="content" value={{checked}}/>
  <text id="content">复选框内容</text>
</label>

若使用自定义组件开发的 checkbox 、 switch 等组件，需要使用 aria-checked 属性，才能使得读屏软件获取组件选中状态。例如，一个自定义 checkbox 组件的 axml 代码：

<view class="my-checkbox" role="checkbox" onTap="handleTap" aria-checked="{{checked}}" aria-labelledby="myCheckboxText">
  <icon type="{{checked ? 'success' : 'clear'}}" size="12"/>
  <text id="myCheckboxText">
    <slot>
    </slot>
  </text>
</view>

示例中，设置 my-checkbox 组件 role 属性的值为 checkbox ，并将组件的选中状态 checked 赋值给 aria-checked 属性，当读屏软件聚焦到该自定义组件时，可以朗读出该组件的选中信息。该属性也同样适用于 switch 、 radio 等组件。

aria-expanded

aria-expanded 表示可折叠的组件的展开信息，适合对有折叠功能的组件使用，如折叠菜单、带折叠的下拉菜单等。使用 aria-expanded 属性，可让读屏软件朗读组件的展开状态。

其他aria属性

了解更多 aria 属性请参考 WAI-ARIA 。

支付宝小程序组件无障碍访问·aria-component

无障碍访问

常用 aria 属性

role

aria-label

aria-labelledby

aria-checked

aria-expanded

其他aria属性

相关信息

无障碍标准

启动视觉无障碍功能

支付宝小程序组件 无障碍访问·aria-component

无障碍访问

常用 aria 属性

role

aria-label

aria-labelledby

aria-checked

aria-expanded

其他aria属性

相关信息

无障碍标准

启动视觉无障碍功能

支付宝小程序组件无障碍访问·aria-component