ARIA：對話方塊角色

對話方塊是 Web 應用程式主視窗的子視窗。對於 HTML 頁面，主應用程式視窗是整個 Web 文件，即 body 元素。

使用 dialog 角色標記對話方塊元素有助於輔助技術將對話方塊的內容識別為已分組並與頁面其餘內容隔離開來。但是，僅新增 role="dialog" 並不足以使對話方塊可訪問。此外，還需要執行以下操作

• 對話方塊必須正確標記
• 鍵盤焦點必須正確管理

以下部分介紹瞭如何滿足這兩個要求。

即使對話方塊本身不需要能夠接收焦點，它仍然需要被標記。賦予對話方塊的標籤將為對話方塊內的互動式控制元件提供上下文資訊。換句話說，對話方塊的標籤充當其內部控制元件的分組標籤（類似於 <legend> 元素如何為 <fieldset> 元素內部的控制元件提供分組標籤）。

如果對話方塊已經有一個可見的標題欄，則該欄內的文字可用於標記對話方塊本身。實現此目的的最佳方法是使用 aria-labelledby 屬性到 role="dialog" 元素。此外，如果對話方塊除了對話方塊標題之外還包含其他描述性文字，則可以使用 aria-describedby 屬性將此文字與對話方塊關聯。以下程式碼片段顯示了此方法

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

焦點管理

對話方塊對如何管理鍵盤焦點有特殊要求

• 對話方塊應始終至少有一個可聚焦的控制元件。對於許多對話方塊，將有一個按鈕，如“關閉”、“確定”或“取消”。除了所需的控制元件外，對話方塊還可以包含任意數量的可聚焦元素，甚至包含完整的表單或其他容器小部件（如選項卡）。
• 當對話框出現在螢幕上時，鍵盤焦點（其控制取決於對話方塊的目的）應移動到對話方塊內的預設可聚焦控制元件。對於僅提供基本訊息的對話方塊，它可能是“確定”按鈕。對於包含表單的對話方塊，它可能是表單中的第一個欄位。
• 對話方塊關閉後，鍵盤焦點應移回它在移動到對話方塊之前所在的位置。否則，焦點可能會被丟棄到頁面的開頭。
• 對於大多數對話方塊，預期行為是對話方塊的 Tab 順序迴圈，這意味著當用戶在對話方塊中的可聚焦元素之間切換 Tab 時，在最後一個元素到達後，將聚焦第一個可聚焦元素。換句話說，Tab 順序應包含在對話方塊內並由對話方塊控制。
• 如果對話方塊可以移動或調整大小，請確保鍵盤使用者和滑鼠使用者都可以執行這些操作。類似地，如果對話方塊提供特殊功能（如工具欄或上下文選單），則鍵盤使用者也必須能夠訪問和操作這些功能。

• 對話方塊可以是模態的或非模態的。當一個模態對話框出現在螢幕上時，無法與對話方塊外部的任何頁面內容進行互動。換句話說，只要模態對話方塊顯示，主應用程式 UI 或頁面內容就會被視為暫時停用。對於非模態對話方塊，在對話方塊顯示時仍然可以與對話方塊外部的內容進行互動。請注意，對於非模態對話方塊，需要有一個全域性鍵盤快捷鍵，允許焦點在開啟的對話方塊和主頁面之間移動。

aria-labelledby

使用此屬性為對話方塊新增標籤。通常，aria-labelledby 屬性的值將是用於為對話方塊設定標題的元素的 id。

aria-describedby

使用此屬性描述對話方塊的內容。

當使用dialog角色時，使用者代理應執行以下操作

• 在作業系統可訪問性 API 中將元素公開為對話方塊。

當對話方塊正確標記且焦點移動到對話方塊內的某個元素（通常是互動式元素，例如按鈕）時，螢幕閱讀器應宣佈對話方塊的可訪問角色、名稱和可選描述，以及宣佈獲得焦點的元素。

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Subscription Form</h2>
  <p id="dialog1Desc">We will not share this information with third parties.</p>
  <form>
    <p>
      <label for="firstName">First Name</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">Interests</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" name="autoLogin" />
      <label for="autoLogin">Auto-login?</label>
    </p>
    <p>
      <input type="submit" value="Save Information" />
    </p>
  </form>
</div>

工作示例

• jQuery-UI 對話方塊

• ARIA：警報對話方塊角色
• HTML <dialog> 元素