支付寶小程序組件 無(wú)障礙訪問(wèn)·aria-component

無(wú)障礙訪問(wèn)

aria 屬性是 WAI-ARIA 標(biāo)準(zhǔn)提供無(wú)障礙訪問(wèn)動(dòng)態(tài)、可交互 Web 內(nèi)容的技術(shù)規(guī)范。從 基礎(chǔ)庫(kù) 1.18.0 版本開始，小程序架的部分基礎(chǔ)組件支持 aria 屬性，可滿足視障人士對(duì)于小程序的無(wú)障礙訪問(wèn)需求。

支持 aria 屬性的小程序組件有：

• view
• text
• icon
• button
• label
• checkbox
• switch
• image
• radio

常用 aria 屬性

role

aria 屬性的核心是 role 屬性，該屬性表示組件的語(yǔ)義角色。 例如當(dāng) role 屬性設(shè)置為 img 時(shí)，組件聚焦后讀屏軟件會(huì)朗讀出 圖像 ；設(shè)置為 button 時(shí)，聚焦后讀屏軟件會(huì)朗讀出 按鈕 。

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

示例中的按鈕用 view 組件實(shí)現(xiàn)，role 屬性設(shè)置該 view 組件表達(dá)按鈕的語(yǔ)義，當(dāng)讀屏軟件聚焦該 view 組件的時(shí)候，會(huì)識(shí)別出這個(gè) view 組件是個(gè)按鈕，朗讀出 按鈕 確定按鈕。

小程序采用 AXML 語(yǔ)法，失去了 HTML 中許多具有語(yǔ)義的標(biāo)簽，如 H1 、 article 、 header 等，這些標(biāo)簽可配合讀屏軟件，將更多語(yǔ)義信息提供給用戶使用。在小程序中，開發(fā)者可以使用 role 屬性增強(qiáng) view 組件的語(yǔ)義，達(dá)到和使用 HTML 標(biāo)簽開發(fā)一樣的效果。

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

<article>
  <h1>文章標(biāo)題</h1>
  <h2>第一章</h2>
  <p>第一段落。。。</p>
</article>

對(duì)于小程序而言，盡管沒(méi)有對(duì)應(yīng) article 、h1 、h2 等標(biāo)簽的組件，但是通過(guò)帶有 role 屬性的 view 組件，一樣可以達(dá)到效果，如：

<view role="article">
  <view role="heading" aria-level="1">文章標(biāo)題</view>
  <view role="heading" aria-level="2">第一章</view>
  <view>第一段落。。。</view>
</view>

當(dāng)讀屏軟件聚焦到 文章標(biāo)題 的 view 組件時(shí)候，會(huì)朗讀 文字標(biāo)題 標(biāo)題1 ；當(dāng)聚焦到 第一章 的 view 組件時(shí)候，會(huì)朗讀 第一章 標(biāo)題2。標(biāo)題2 中的 標(biāo)題 就是 role 提供的語(yǔ)義信息，而 2 是由 aria-level 屬性設(shè)置的。 aria-level 屬性屬于 aria 屬性，它提供額外信息，示例中 aria-level 表達(dá)標(biāo)題級(jí)別。

部分 role 屬性的值需要 aria 屬性配合使用才能生效。如 role="img" 時(shí)，必須配置 aria-label 屬性，否則讀屏軟件會(huì)忽略 role 屬性。

aria-label

aria-label 可以代替組件內(nèi)的文本內(nèi)容，例如：

<view aria-label="aria-label內(nèi)容">組件文本內(nèi)容</view>

當(dāng)聚焦到此處時(shí)，讀屏軟件會(huì)朗讀出 aria-label內(nèi)容 ，而組件內(nèi)原有的文本內(nèi)容會(huì)被忽略。

aria-label 還可以配合不帶文本內(nèi)容的組件使用，表示該組件附帶的文本信息，聚焦后系統(tǒng)會(huì)自動(dòng)朗讀出來(lái)。例如 image 組件，可以使用 aria-label 增添圖片的描述信息。

<image src={{src}} role="img" aria-label="風(fēng)景畫" />

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

<view style="background-image:url(./bg.jpg);" role="img" aria-label="風(fēng)景畫"></view>

一些視覺效果較強(qiáng)的組件（如 image），僅讓讀屏軟件朗讀出語(yǔ)義，對(duì)視障用戶意義不大。通過(guò) aria-label 屬性對(duì)這些組件的內(nèi)容提供文字說(shuō)明，朗讀出的內(nèi)容會(huì)變得更完整，效果更佳。

aria-labelledby

一些組件和其他組件是有關(guān)聯(lián)的，需要一起朗讀才能表達(dá)出完整的含義。例如 checkbox 組件，往往需要一個(gè) text 或 view 組件承載該 checkbox 選中的文字內(nèi)容。此時(shí)可用 aria-labelledby 屬性關(guān)聯(lián)兩個(gè)組件，讀屏軟件會(huì)在讀完當(dāng)前組件的內(nèi)容后，繼續(xù)朗讀 aria-labelledby 指向的組件中的內(nèi)容。

<label>
  <checkbox aria-labelledby="content"/>
  <text id="content">復(fù)選框內(nèi)容</text>
</label>

實(shí)例中的 checkbox 組件獲得焦點(diǎn)之后，讀屏軟件會(huì)朗讀出 未選中 復(fù)選框內(nèi)容 復(fù)選框。 aria-labelledby 的值是其他組件的 id 屬性，組件 id 屬性必須是唯一的，列表渲染的時(shí)候請(qǐng)勿給組件設(shè)置重復(fù)的 id。

aria-checked

aria-checked 表示 checkbox、switch 等組件是否被選中。聚焦到這些組件后，讀屏軟件將朗讀組件的選中狀態(tài) 未選中 或者 已選中 ，告訴用戶當(dāng)前組件的選中狀態(tài)。

小程序原生組件，已預(yù)內(nèi)置了該屬性，如：

<label>
  <checkbox aria-labelledby="content" value={{checked}}/>
  <text id="content">復(fù)選框內(nèi)容</text>
</label>

若使用 自定義組件 開發(fā)的 checkbox 、 switch 等組件，需要使用 aria-checked 屬性，才能使得讀屏軟件獲取組件選中狀態(tài)。例如，一個(gè)自定義 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>

示例中，設(shè)置 my-checkbox 組件 role 屬性的值為 checkbox ，并將組件的選中狀態(tài) checked 賦值給 aria-checked 屬性，當(dāng)讀屏軟件聚焦到該自定義組件時(shí)，可以朗讀出該組件的選中信息。 該屬性也同樣適用于 switch 、 radio 等組件。

aria-expanded

aria-expanded 表示可折疊的組件的展開信息，適合對(duì)有折疊功能的組件使用，如折疊菜單、帶折疊的下拉菜單等。使用 aria-expanded 屬性，可讓讀屏軟件朗讀組件的展開狀態(tài)。

其他aria屬性

了解更多 aria 屬性請(qǐng)參考 WAI-ARIA 。

相關(guān)信息

無(wú)障礙一詞來(lái)自英文 Accessibility ，是指任何人（無(wú)論是健全人、殘疾人，還是老年人、孩子）可在任何時(shí)候、任何場(chǎng)景使用或者訪問(wèn)。標(biāo)準(zhǔn)化組織（如W3C、WAI）制定了 WEB 領(lǐng)域無(wú)障礙的標(biāo)準(zhǔn)，支付寶小程序依據(jù)現(xiàn)有標(biāo)準(zhǔn)，提供了支付寶小程序無(wú)障礙訪問(wèn)功能。

無(wú)障礙標(biāo)準(zhǔn)

Web 內(nèi)容無(wú)障礙指南 (WCAG) 是由研究無(wú)障礙的專家制定的一組指導(dǎo)原則和最佳實(shí)踐，目的在于有條理地向大家闡釋無(wú)障礙性的含義和最佳實(shí)踐。

可訪問(wèn)富互聯(lián)網(wǎng)應(yīng)用（WAI-ARIA） 是一個(gè)為殘疾人士等提供無(wú)障礙訪問(wèn)動(dòng)態(tài)、可交互 Web 內(nèi)容的技術(shù)規(guī)范，為瀏覽器、媒體播放器、輔助技術(shù)的開發(fā)人員以及Web內(nèi)容開發(fā)者定義了可以獲得更廣泛跨平臺(tái)可訪問(wèn)性的方法。

小程序的無(wú)障礙功能支持 WAI-ARIA 部分屬性，開發(fā)者可以配合 WCAG 中總結(jié)的最佳實(shí)踐，開發(fā)出更易為廣大有無(wú)障礙需求人士使用的小程序。

啟動(dòng)視覺無(wú)障礙功能

iOS 系統(tǒng)和安卓系統(tǒng)提供了視覺無(wú)障礙特性，為盲人或視力不好的用戶提供讀屏功能，能夠朗讀出用戶所觸摸、選擇、激活的內(nèi)容。

• iOS：設(shè)置 > 通用 > 輔助功能 > 旁白，開啟旁白功能。
• 安卓：安卓系統(tǒng)的讀屏功能名為 talkback，將其開啟即可。（不同品牌的 Android 手機(jī)中，開啟 talkback 功能位置不一樣，請(qǐng)根據(jù)手機(jī)對(duì)應(yīng)的幫助手冊(cè)查找 talkback 功能的開啟方式。）

在開啟語(yǔ)音讀屏功能的手機(jī)中，讀屏功能聚焦到小程序的組件時(shí)，會(huì)朗讀出組件的內(nèi)容。