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

ST3標頭

規則識別碼

ST3

規則名稱

標頭 (網頁)

規則類型

原子規則

規則說明

內容必須提供平台支援的邏輯和分層標頭結構。

無障礙要求對應

網站無障礙規範

  • 2.4.10 區段標題 (檢測等級AAA)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於結構與標題內容。

期望

以下檢查均正確:

  • 所有視覺標頭/表頭元素均表示為標頭/表頭(在作業平台的限制內);
  • 所有表頭均採用邏輯結構(僅HTML內容)。

假設條件

標頭的一般含義是指標頭和將標頭添加到不同類型的內容中的其他方式。

此成功準則涵蓋寫作中的各個部分,而不涉及使用者界面元件。成功準則4.1.2涵蓋使用者界面元件。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

標題指定使用 UIAccessibilityTraitHeader特徵,不過須注意此特徵僅適用於iOS6及以上版本,且無法設置標題級別。

目前Android未提供原生地識別標頭的特定方式。

一種”偽”標頭的作法,提供文本為TextView,並且使用 android:contentDescription屬性指出該本文為標頭,TalkBack使用者將聽見該文本。注意目前沒有提供使用者可以直接在標頭之間導航的方式,即使提供此作法,此方法僅為提供使用者識別標頭與非標頭文本。

使用標頭(h1-h6)元素將內容結構化,確保每個頁面僅有1個h1,且彥標頭結構上沒有落差(如沒有h2,即不使用h3)

成功範例原始碼

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

{

       if (section == 0)

{

       return NSLocalizedString (@"Weather", @"Section header for Weather area of table");

}

else if (section == 1)

{

       return NSLocalizedString(@"Warnings", @"Section header for warnings area of table");

}

else

{

// Unknown section - log error, return safely

return nil;

}

}

 <TextView

    android:text="[My Heading]"

    android:contentDescription="[MyHeading], heading"

    />

 <h1>The United Kingdom</h1>

  <h2>England</h2>

    <h3>London</h3>

    …

    <h3>Birmingham</h3>

    …

    <h3>Manchester</h3>

    …

  <h2>Northern Ireland</h2>

    <h3>Belfast</h3>

    …

    <h3>Larne</h3>

    …

    <h3>Coleraine</h3>

    …

  <h2>Scotland</h2>

    <h3>Edinburgh</h3>

    …

    <h3>Glasgow</h3>

    …

    <h3>Aberdeen</h3>

    …

  <h2>Wales</h2>

    <h3>Cardiff</h3>

    …

    <h3>Swansea</h3>

    …

    <h3>Rhyl</h3>

    …

失敗範例原始碼

UITableView 有幾個區段沒有標頭。

-

<div class="heading">Local Weather</div>

<div class="subheading">Today's Forecast</div>

<div class="subheading">Tomorrow Forecast</div>

<div class="subheading2">Tomorrow's Allergy Forecast</div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 檢查每個頁面/螢幕並找到任何視覺標頭/表頭。
  3. 確定標題/標題在平台中是否可能。
  4. 驗證是否有實際的標題。
  5. 驗證標題/標題是由螢幕報讀軟體宣布的。
  6. 驗證所有標頭均已具邏輯結構。這僅適用於HTML內容。

參考詞彙:無

變更記錄:
20200817-第1次編撰。
20190824-的2次編撰,根據109年07月22日討論,原為必要檢核點修改為選項檢核點。

參考資源:

  1. Headings, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G88: Providing descriptive titles for Web pages, Techniques for WCAG 2.0。