WAI-ARIA basics

什么是WAI-ARIA？

讓我們開始看看WAI-ARIA是什么，它可以為我們做什么。

一整套新的問題

隨著網(wǎng)絡(luò)應(yīng)用開始變得更加復(fù)雜和動態(tài)，一組新的無障礙功能和問題開始出現(xiàn)。

例如，HTML5引入了一些語義元素來定義通用頁面功能( < ; nav> ， < footer> 等)。在提供這些功能之前，開發(fā)人員只需使用 < div> 帶有ID或類，例如 < div class ="nav"> ，但這些都有問題，因為沒有簡單的方法輕松地找到特定的頁面功能，如主導(dǎo)航程序。

最初的解決方案是在頁面頂部添加一個或多個隱藏鏈接，以鏈接到導(dǎo)航(或其他任何方式)，例如:

<a href="#hidden" class="hidden">Skip to navigation</a>

但是這還不是很精確，只能在屏幕閱讀器從頁面頂部讀取時使用。

作為另一個示例，應(yīng)用程序開始具有復(fù)雜的控件，如用于選擇日期的日期選擇器，用于選擇值的滑塊等。HTML5提供特殊的輸入類型來呈現(xiàn)這樣的控件:

<input type="date">
<input type="range">

這些在瀏覽器上不能很好地支持，并且也很難對它們進(jìn)行風(fēng)格化，使得它們對于與網(wǎng)站設(shè)計的集成不是非常有用。 因此，開發(fā)人員通常依賴于生成此類控件的JavaScript庫，例如一系列嵌套的 < div> 或帶有類名的表格元素，然后使用CSS對其進(jìn)行樣式化并使用JavaScript進(jìn)行控制。

這里的問題是視覺上他們工作，但是screenreaders不能對任何東西有任何意義，他們的用戶只是被告知他們可以看到一些沒有語義的元素來描述他們的意思。

輸入WAI-ARIA

WAI-ARIA 是W3C編寫的規(guī)范，定義了一組額外的 HTML屬性，可以應(yīng)用于元素，以提供額外的語義，并提高無處不在的無障礙性。 規(guī)范中定義了三個主要特性:

• Roles — These define what an element is or does. Many of these are so-called landmark roles, which largely duplicate the semantic value of HTML5 structural elements e.g. role="navigation" (<nav>) or role="complementary" (<aside>), but there are also others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", etc., which are commonly found in UIs.
• Properties — These define properties of elements, which can be used to give them extra meaning or semantics. As an example, aria-required="true" specifies that a form input needs to be be filled in to be valid, whereas aria-labelledby="label" allows you to put an ID on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. As an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute. You can see an example of this at Text alternatives.
• States — Special properties that define the current conditions of elements, such as aria-disabled="true", which specifies to a screenreader that a form input is currently disabled. States differ from properties in that properties don't change throughout the lifecycle of an app, whereas states can change, generally programmatically via JavaScript.

關(guān)于WAI-ARIA屬性的一個重要點是，它們不影響網(wǎng)頁的任何內(nèi)容，除了瀏覽器的輔助API(屏幕閱讀器從其中獲取信息)暴露的信息。 WAI-ARIA不影響網(wǎng)頁結(jié)構(gòu)，DOM等，雖然屬性可以用于通過CSS選擇元素。

WAI-ARIA在哪里支持？

這不是一個容易回答的問題。 很難找到一個結(jié)論性資源，說明WAI-ARIA的哪些特性得到支持，以及在哪里，因為:

1. There are a lot of features in the WAI-ARIA spec.
2. There are many combinations of operating system, browser, and screenreader to consider.

最后一點是關(guān)鍵 - 要首先使用屏幕閱讀器，您的操作系統(tǒng)需要運行具有必要的可訪問性API的瀏覽器，以公開屏幕閱讀器需要完成工作的信息。 最流行的操作系統(tǒng)有一個或兩個瀏覽器，屏幕閱讀器可以使用。 Paciello集團(tuán)有一個相當(dāng)新的職位，為此提供數(shù)據(jù) - 參見 和屏幕閱讀器支持更新/"class ="外部">粗糙指南:瀏覽器，操作系統(tǒng)和屏幕閱讀器支持更新。

接下來，您需要擔(dān)心所討論的瀏覽器是否支持ARIA功能并通過其API展示它們，還需要擔(dān)心屏幕閱讀器是否識別該信息并以有用的方式向用戶展示。

1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.

在本文中，我們不會嘗試覆蓋每個WAI-ARIA功能及其確切的支持細(xì)節(jié)。 相反，我們將介紹最關(guān)鍵的WAI-ARIA功能，讓您了解; 如果我們沒有提及任何支持詳細(xì)信息，您可以假定該功能得到了很好的支持。 我們將明確提到任何例外。

什么時候應(yīng)該使用WAI-ARIA？

我們討論了一些促使WAI-ARIA早期創(chuàng)建的問題，但本質(zhì)上，WAI-ARIA有四個主要方面:

1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. <nav>), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
3. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a?result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
4. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.

有一件事要記住 - 您只應(yīng)在需要時才使用WAI-ARIA！理想情況下，您應(yīng)該始終 使用本地 HTML功能，以提供屏幕閱讀器需要的語義，告訴他們的用戶發(fā)生了什么。 有時候這是不可能的，因為你對代碼的控制有限，或者因為你創(chuàng)建的東西很復(fù)雜，沒有一個簡單的HTML元素來實現(xiàn)它。 在這種情況下，WAI-ARIA可以是一個有價值的輔助工具。

但是，再次，只有在必要時使用它！

實用的WAI-ARIA實現(xiàn)

在下一節(jié)中，我們將更詳細(xì)地討論這四個方面，以及實例。 在你繼續(xù)之前，你應(yīng)該得到一個screenreader測試設(shè)置到位，所以你可以測試一些例子，當(dāng)你經(jīng)歷。

有關(guān)詳細(xì)信息，請參閱我們的有關(guān)測試屏幕閱讀器的部分。

路標(biāo)/地標(biāo)

WAI-ARIA添加了 角色屬性 到瀏覽器，這允許您添加額外的語義值到您的網(wǎng)站上的元素，無論他們需要什么。 這是有用的第一個主要領(lǐng)域是為屏幕閱讀器提供信息，以便他們的用戶可以找到共同的頁面元素。 讓我們來看一個例子 - 我們的 website-no- 角色示例(查看實時 )具有以下結(jié)構(gòu):

<header>
  <h1>...</h1>
  <nav>
    <ul>...</ul>
    <form>
      <!-- search form  -->
    </form>
  </nav>
</header>

<main>
  <article>...</article>
  <aside>...</aside>
</main>

<footer>...</footer>

如果您在現(xiàn)代瀏覽器中嘗試使用屏幕閱讀器測試示例，您將獲得一些有用的信息。 例如，VoiceOver為您提供以下內(nèi)容:

• On the <header> element — "banner, 2 items" (it contains a heading and the <nav>).
• On the <nav> element — "navigation 2 items" (it contains a list and a form).
• On the <main> element — "main 2 items" (it contains an article and an aside).
• On the <aside> element — "complementary 2 items" (it contains a heading and a list).
• On the search form input — "Search query, insertion at beginning of text".
• On the <footer> element — "footer 1 item".

如果你去VoiceOver的地標(biāo)菜單(使用VoiceOver鍵+ U訪問，然后使用光標(biāo)鍵在菜單選項之間循環(huán))，你會看到，大多數(shù)元素被列出，以便他們可以快速訪問。

alt ="">

但是，我們可以在這里做得更好。 搜索形式是人們想要找到的一個非常重要的地標(biāo)，但是它不被列在地標(biāo)菜單中或者被視為一個顯著的地標(biāo)，超出實際輸入被稱為搜索輸入(<輸入類型 ="search"> )。 此外，一些舊的瀏覽器(最引人注目的是IE8)不能識別HTML5元素的語義。

讓我們通過使用一些ARIA特性來改進(jìn)它。 首先，我們將向HTML結(jié)構(gòu)中添加一些角色屬性。 您可以嘗試復(fù)制我們的原始文件(請參閱 ="external"> index.html 和 class ="external"> style.css )，或?qū)Ш降轿覀兊?a href="http://o2fo.com/targetlink?url=https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-</span"> roles"class ="external"> website-aria-roles example( ="external"> see it live )，其具有如下結(jié)構(gòu):

<header>
  <h1>...</h1>
  <nav role="navigation">
    <ul>...</ul>
    <form role="search">
      <!-- search form  -->
    </form>
  </nav>
</header>

<main>
  <article role="article">...</article>
  <aside role="complementary">...</aside>
</main>

<footer>...</footer>

在此示例中，我們還為您提供了一個獎勵功能 - < input&gt ; 元素已被賦予屬性 "> aria-label ，它提供了一個描述性標(biāo)簽，供屏幕閱讀器讀取，即使我們沒有包含 / zh-CN / docs / Web / HTML / Element / label"> < label> 元素。 在這樣的情況下，這是非常有用的 - 像這樣的搜索形式是一個非常常見的，容易識別的功能，添加一個視覺標(biāo)簽會破壞頁面設(shè)計。

<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">

現(xiàn)在如果我們使用VoiceOver來看這個例子，我們得到一些改進(jìn):

• The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.
• The label text contained in the aria-label attribute is read out when the form input is highlighted.

除此之外，該網(wǎng)站更有可能訪問舊版瀏覽器(如IE8)的用戶; 它值得包括ARIA角色為此目的。 如果由于某種原因，你的網(wǎng)站是使用< div> 構(gòu)建的，你必須包括ARIA角色來提供這些需要的語義！

搜索表單的改進(jìn)語義表明當(dāng)ARIA超越HTML5中可用的語義時，使得可能成為可能。 您將在下面看到更多關(guān)于這些語義和ARIA屬性/屬性的強(qiáng)大功能，特別是在非語義控件的輔助功能部分。 現(xiàn)在，讓我們看看ARIA如何幫助動態(tài)內(nèi)容更新。

動態(tài)內(nèi)容更新

加載到DOM中的內(nèi)容可以使用屏幕閱讀器輕松訪問，從文本內(nèi)容到附加到圖像的替代文本。 因此，具有大量文本內(nèi)容的傳統(tǒng)靜態(tài)網(wǎng)站對于具有視覺障礙的人來說容易獲得。

問題是，現(xiàn)代網(wǎng)絡(luò)應(yīng)用通常不只是靜態(tài)文本 - 它們往往有很多動態(tài)更新內(nèi)容，即更新內(nèi)容，而不通過像 .org / zh-CN / docs / Web / API / XMLHttpRequest"> XMLHttpRequest ， 提取或 DOM API 。 這些區(qū)域有時稱為有效區(qū)域。

讓我們看一個快速示例 - 請參閱 aria -no-live.html (也 see 它運行實時)。 在這個例子中，我們有一個簡單的隨機(jī)引用框:

<section>
  <h1>Random quote</h1>
  <blockquote>
    <p></p>
  </blockquote>
</section>

我們的JavaScript通過 XMLHttpRequest 加載一個JSON文件，其中包含一系列 的隨機(jī)引用及其作者。 完成后，我們開始創(chuàng)建 setInterval() / code>循環(huán)，每10秒將一個新的隨機(jī)引用加載到引用框中:

var intervalID = window.setInterval(showQuote, 10000);

這工作正常，但它不利于輔助功能 - 內(nèi)容更新不被屏幕閱讀器檢測，所以他們的用戶不會知道發(fā)生了什么。 這是一個相當(dāng)微不足道的例子，但只是想象如果你是創(chuàng)建一個復(fù)雜的UI，有很多不斷更新的內(nèi)容，如聊天室，戰(zhàn)略游戲UI或?qū)崟r更新購物車顯示 - 這將是不可能使用 應(yīng)用程序以任何有效的方式，沒有某種方式提醒用戶更新。

WAI-ARIA幸運地提供了一個有用的機(jī)制來提供這些警報 - > aria-live 屬性。 將此應(yīng)用于元素會導(dǎo)致屏幕閱讀器讀取更新的內(nèi)容。 如何緊急地讀取內(nèi)容取決于屬性值:

• off: The default. Updates should not be announced.
• polite: Updates should be announced only if the user is idle.
• assertive: Updates should be announced to the user as soon as possible.
• rude: Updates should be announced straight away, even if this interrupts the user.

通常，一個 assertive 設(shè)置足以讓你的更新在顯示時按順序讀出，所以如果一次更改多個東西，你最終會得到所有的更新。 只對真正高優(yōu)先級的更新使用 rude ，應(yīng)該覆蓋所有其他。

我們希望您復(fù)制 > aria-no-live.html 和 quotes.json ，并更新您的< section> 標(biāo)記，如下所示:

<section aria-live="assertive">

這將使屏幕閱讀器在更新時讀出內(nèi)容。

注意:如果您嘗試從 file:// 網(wǎng)址(例如，http://www.google.com/intl/zh-CN/)下載 XMLHttpRequest 調(diào)用，大多數(shù)瀏覽器都會拋出安全性異常。 如果你只是加載文件通過直接加載到瀏覽器(通過雙擊等)。 要使其運行，您需要將其上傳到網(wǎng)絡(luò)服務(wù)器，例如使用GitHub 或本地網(wǎng)絡(luò)服務(wù)器，例如 //www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/"class ="external"> Python的SimpleHTTPServer 。...

<section aria-live="assertive" aria-atomic="true">

aria-atomic ="true"屬性指示屏幕閱讀器將整個元素內(nèi)容讀取為一個原子單位，而不僅僅是已更新的位。

增強(qiáng)鍵盤輔助功能

如模塊中的其他幾個地方所討論的，HTML的關(guān)于可訪問性的一個關(guān)鍵優(yōu)勢是內(nèi)置鍵盤輔助功能，如按鈕，表單控件和鏈接。 通常，您可以使用Tab鍵在控件之間移動，使用Enter / Return鍵選擇或激活控件，偶爾還可以根據(jù)需要使用其他控件(例如，上下光標(biāo)可以在< ;選擇> 框)。

然而，有時你最終不得不編寫代碼，使用非語義元素作為按鈕(或其他類型的控件)，或使用可聚焦控件不完全正確的目的。 你可能試圖修復(fù)你繼承的一些壞代碼，或者你可能正在構(gòu)建一些需要它的復(fù)雜的窗口小部件。

在使不可聚焦代碼可聚焦的方面，WAI-ARIA使用一些新值來擴(kuò)展 tabindex 屬性:

• tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
• tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links.?

我們詳細(xì)討論了這一點，并在HTML輔助功能文章中顯示了一個典型的實現(xiàn) - 請參閱構(gòu)建鍵盤輔助功能。

非語義控制的可訪問性

從上一節(jié)開始，當(dāng)使用一系列嵌套的< code>< div> 以及CSS / JavaScript來創(chuàng)建復(fù)雜的UI特征時，或者通過 JavaScript，不僅可以讓鍵盤的可訪問性受損，而且如果沒有語義或其他線索，那么screenreader用戶會發(fā)現(xiàn)很難找出該功能的作用。 在這種情況下，ARIA可以幫助提供那些缺失的語義。

Form validation and error alerts

首先，讓我們重溫一下我們在CSS和JavaScript輔助功能文章中首先查看的表單示例(請參閱保持不引人注目的完整回顧)。 在本節(jié)結(jié)束時，我們顯示在嘗試提交表單時出現(xiàn)驗證錯誤時，我們在錯誤消息框中包含了一些ARIA屬性:

<div class="errors" role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>

• role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like alert() calls have a number of accessibility problems; see Popup Windows by WebAIM).
• An aria-relevant value of all instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when erros are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.

我們可以進(jìn)一步與我們的ARIA使用，并提供一些更多的驗證幫助。 如何指示字段是否需要在第一位置，年齡應(yīng)該是什么范圍？

1. At this point, take a copy of our form-validation.html and validation.js files, and save them in a local directory.
2. Open them both in a text editor and have a look at how the code works.
3. First of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk. This is normally how we mark required fields for sighted users.

   <p>Fields marked with an asterisk (*) are required.</p>

4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the aria-required attribute to given screenreaders hints that they should tell users that form inputs need to be filled in. Update the <input> elements like so:

   <input type="text" name="name" id="name" aria-required="true">
   
   <input type="number" name="age" id="age" aria-required="true">

5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this:

   <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">

<label&gt\">除了經(jīng)典的 < label>之外，WAI-ARIA還提供了一些高級表單標(biāo)簽技術(shù) element.\">; 元素。aria-label\">我們已經(jīng)討論過使用 aria-label property to provide a label where we don\'t want the label to be visible to sighted users (see the Signposts/Landmarks section, above).\">屬性，以提供標(biāo)簽，以便我們不希望標(biāo)簽對目擊的用戶可見(請參閱上面的路標(biāo)/地標(biāo)部分)。aria\">還有一些其他標(biāo)簽技術(shù)使用其他屬性，例如 aria if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and -labelledby ，如果您要將非< label> 元素指定為具有相同標(biāo)簽的標(biāo)簽或標(biāo)簽多個表單輸入，以及 aria-describedby, if you want to associate other information\">="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"class ="external"> aria-describedby ，如果您要關(guān)聯(lián)其他信息與表單輸入并且它讀出。WebAIM\'s Advanced Form Labeling article for more details.\">有關(guān)詳細(xì)信息，請參見 WebAIM的高級表單標(biāo)簽文章 。\">>

還有許多其他有用的屬性和狀態(tài)，用于指示表單元素的狀態(tài)。 例如， aria-disabled ="true "可用于指示表單字段已禁用。 許多瀏覽器將跳過過去禁用的表單字段，它們甚至不會被屏幕閱讀器讀出，但在某些情況下它們會被感知到，因此最好包含此屬性以讓屏幕閱讀器知道禁用的輸入 實際上已停用。

如果輸入的禁用狀態(tài)可能改變，那么指示它何時發(fā)生，以及結(jié)果是什么也是一個好主意。 例如，在我們的表單驗證 - disabled.html 演示中有一個復(fù)選框，當(dāng)選中時，啟用另一個表單輸入，以允許輸入更多的信息。 我們已設(shè)置了隱藏的活動區(qū)域:

<p class="hidden-alert" aria-live="assertive"></p>

使用絕對定位隱藏視圖。 當(dāng)選中/取消選中時，我們更新隱藏的活動區(qū)域內(nèi)的文本，告訴屏幕閱讀器用戶檢查此復(fù)選框的結(jié)果，以及更新 aria禁用狀態(tài)，以及一些可視指示器 太:

function toggleMusician(bool) {
  var instruItem = formItems[formItems.length-1];
  if(bool) {
    instruItem.input.disabled = false;
    instruItem.label.style.color = '#000';
    instruItem.input.setAttribute('aria-disabled', 'false');
    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
  } else {
    instruItem.input.disabled = true;
    instruItem.label.style.color = '#999';
    instruItem.input.setAttribute('aria-disabled', 'true');
    instruItem.input.removeAttribute('aria-label');
    hiddenAlert.textContent = 'Instruments played field now disabled.';
  }
}

Describing non-semantic buttons as buttons

在本課程中已經(jīng)有幾次，我們已經(jīng)提到了(以及使用其他元素偽造的輔助功能問題)按鈕，鏈接或表單元素(參見 HTML無障礙文章中的UI控件和上面的增強(qiáng)鍵盤輔助功能)。 基本上，您可以添加鍵盤輔助功能，在很多情況下，使用 tabindex 和一點JavaScript，而不會有太多的麻煩。

但是screenreaders呢？ 他們?nèi)匀徊粫吹桨粹o的元素。 如果我們測試我們的假 -div-buttons.html 示例在屏幕閱讀器中，我們的假按鈕將使用像"Click me !, group"這樣的短語進(jìn)行報告，這顯然令人困惑。

我們可以使用WAI-ARIA角色解決這個問題。 制作本地副本 "external"> fake-div-buttons.html ，然后添加 外部">角色="按鈕" 到每個按鈕< div> ，例如:

<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>

現(xiàn)在，當(dāng)你使用屏幕閱讀器嘗試這個，你會有按鈕報告使用短語，如"點擊我！"按鈕 - 更好。

Guiding users through complex widgets

還有很多其他角色可以識別非語義 元素結(jié)構(gòu)作為超越標(biāo)準(zhǔn)HTML中可用的常見UI功能，例如 "> combobox ， slider a> ， tabpanel >， 樹 。 您可以在 Deque大學(xué)代碼庫中查看一些有用的示例，以了解這些控件如何 可以訪問。

讓我們通過一個我們自己的例子。 我們將返回到我們簡單的絕對定位標(biāo)簽式界面(請參閱我們的CSS和JavaScript輔助功能文章中的隱藏內(nèi)容)，您可以在 ="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html"class ="external-icon external">標(biāo)簽式信息框示例 >(請參閱 外部">源代碼)。

此示例原樣在鍵盤輔助功能方面工作正常 - 您可以愉快地在不同的選項卡之間選擇并選擇它們以顯示選項卡內(nèi)容。 它也是相當(dāng)容易訪問 - 你可以滾動內(nèi)容和使用標(biāo)題導(dǎo)航，即使你看不到屏幕上發(fā)生了什么。 然而，這不是顯而易見的內(nèi)容是什么 - 屏幕閱讀器當(dāng)前報告內(nèi)容作為鏈接的列表，一些內(nèi)容與三個標(biāo)題。 它不會給你任何想法的內(nèi)容之間的關(guān)系。 給予用戶關(guān)于內(nèi)容的結(jié)構(gòu)的更多線索總是好的。

為了改進(jìn)這些，我們創(chuàng)建了一個新版本的示例，名為 html"class ="external"> aria-tabbed-info-box.html ( -box.html"class ="external">看到它正在運行)。 我們更新了標(biāo)簽式界面的結(jié)構(gòu)，如下所示:

<ul role="tablist">
? <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
? <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
? <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
</ul>
<div class="panels">
  <article class="active-panel" role="tabpanel" aria-hidden="false">
    ...
  </article>
  <article role="tabpanel" aria-hidden="true">
    ...
  </article>
  <article role="tabpanel" aria-hidden="true">
    ...
  </article>
</div>

新功能如下:

• New roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.
• aria-selected — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
• aria-hidden — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
• tabindex="0" — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.
• aria-setsize — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.
• aria-posinset — This property allows you to specify what position in a series an element is in. Along with aria-setsize, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.

在我們的測試中，這種新結(jié)構(gòu)確實有助于改善整體。 這些標(biāo)簽現(xiàn)在被識別為標(biāo)簽(例如，屏幕閱讀器說出"標(biāo)簽")，所選標(biāo)簽由"選擇"指示，并且標(biāo)簽名稱被讀出，并且屏幕閱讀器還告訴您當(dāng)前正在使用哪個標(biāo)簽號碼。 此外，由于 aria-hidden 設(shè)置(只有非隱藏選項卡具有 aria-hidden ="false"設(shè)置)，所以非隱藏內(nèi)容是 只有一個您可以向下導(dǎo)航，這意味著所選內(nèi)容更容易找到。

概要

這篇文章并沒有涵蓋WAI-ARIA中的所有內(nèi)容，但它應(yīng)該給你足夠的信息來了解如何使用它，并且知道一些你將遇到的最常見的模式。

也可以看看

• Definition of Roles — ARIA roles reference.
• Definitions of States and Properties (all aria-* attributes) — properties and states reference.
• Deque university code library — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.
• WAI-ARIA Authoring Practices — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.
• ARIA in HTML — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.