跳到主要內容
  • 字級
:::|

ST2分組元件

規則識別碼

ST2

規則名稱

分組元件

規則類型

原子規則

規則說明

可控元件,以分組進行呈現時,聚焦宣告須表示為同一整體結構,非單一控件。

無障礙要求對應

網站無障礙規範

  • 4.1.1 語法分析 (檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於結構與標題內容。

期望

所有複合物件、元件和控件都不表示單個元件,而是聲明為一個整體。

假設條件

當前沒有任何假設。

無障礙支援

此規則沒有已知的主要無障礙功能支援問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

將彼此靠近的相關控件分組,以便在視覺上顯而易見它們彼此相關。透過將isAccessibilityElement屬性用於標籤並將其值設置為false,可以從VoiceOver滑動焦點順序中移除表單標籤,以避免重複報讀。確保關聯的表單控件包含accessibilityLabel與視覺標籤的文本匹配。

將彼此靠近的相關控件分組,以便在視覺上顯而易見它們彼此相關。例如,在LinearLayouts中嵌入相關控件的群組。

使用原生HTML和相關的WAI-ARIA分組標記對相關控件進行分組。例如使用:

  • fieldset和legend元素將相關的表單控件分組。
  • figure和figcaption元素將圖片和相關標題分組。
  • nav元素對導航鏈結進行分組。 使用列表標記將相關(非格式)項目的列表分組。

在WAI-ARIA方面,使用頁籤面板標記語法來標記頁籤導航插件。使用tree view標記語法來標記可擴展/可折疊的樹狀插件。使用工具欄標記語法將相關的樣式控件(例如:粗體、斜體和下劃線)分組。

成功範例原始碼

[myVisibleLabel.text = @"Your first name"];

[myVisibleLabel.setIsAccessibilityElement:NO];

[myRelatedTextField.setIsAccessibilityElement:YES];

[myRelatedTextField.setAccessibilityLabel:@Your first name"];

--

<fieldset>

  <legend>Billing address</legend>

  <label for="billing-street">Street</label>

  <input type="text" id="billing-street">

  <label for="billing-city">City</label>

  <input type="text" id="billing-city">

  <label for="billing-county">Country</label>

  <input type="text" id="billing-county">

  <label for="billing-postcode">Postcode</label>

  <input type="text" id="billing-postcode">

</fieldset>

 

<fieldset>

  <legend>Delivery address</legend>

  <label for="delivery-street">Street</label>

  <input type="text" id="delivery-street">

  <label for="delivery-city">City</label>

  <input type="text" id="delivery-city">

  <label for="delivery-county">Country</label>

  <input type="text" id="delivery-county">

  <label for="delivery-postcode">Postcode</label>

  <input type="text" id="delivery-postcode">

</fieldset>

失敗範例原始碼

[FNLabel setText:NSLocalizedString(@"First Name", @"Label title")];

[FNLabel setIsAccessibilityElement:YES];

[FNField setAccessibilityLabel:FNLabel.accessibilityLabel];

 

<!-- Example 1 - tabs -->

<ul>

    <li><a href="#s1" class="selected">Read</a></li>

    <li><a href="#s2">Watched</a></li>

</ul>

<section id="s1" class="showing">...</section>

<section id="s2">...</section>

 

<!-- Example 2 - figure with caption -->

<img src="clouds.jpg" alt="cloudy" ... />

<img style="position:relative; left:-10px;" src="sun.jpg" alt="sunny" ... />

<p>Partly sunny</p>

 

<!-- Example 3 - tree view -->

<ul>

    <li><img src="expanded.jpg" alt="expanded" /><a href="...">TV Shows</a><span class="offscrn"> level 0</span></li>

</ul>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 識別頁面上的所有複合物件、元件和控件。
  3. 驗證複合物件、元件和控件是否在適用的情況下作為一個單元宣告,例如滑塊控件應顯示為滑塊,而不是向上按鈕、向下按鈕和指示器。

參考詞彙:無

變更記錄:
20200817-第1次編撰。
20190824-的2次編撰,根據109年07月22日會議討論,修正說明。

參考資源:
Grouped elements, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。