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

ST1單一頁面標題

規則識別碼

ST1

規則名稱

單一頁面標題

規則類型

原子規則

規則說明

所有頁面或螢幕標題必須唯一且清晰可辨。

無障礙要求對應

網站無障礙規範

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

適用性

適用於結構與標題內容。

期望

以下檢查正確:

每個頁面/螢幕必須具有唯一的上下文相關標題:

  • 對於HTML,螢幕報讀軟體會顯示並報讀唯一性的title元素。
  • 對於Android和iOS,標題會顯示在螢幕頂部,並由螢幕報讀軟體報讀。

假設條件

該規則假定「成功準則2.4.2 網頁標題」不要求文檔僅包含一個title元素,也不是head文檔元素的子元素。儘管在HTML中無效,但是HTML 5.2規範中描述多個標題以及head元素外部的標題應該發生的情況。因此,這些驗證議題均不會導致WCAG的一致性問題。不管2.4.2網頁標題是否要求,讓本規則失敗,也代表將不滿足2.4.2成功準則。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

確保每一螢幕/視圖的頂部含有可見的標題。

使用 UIAccessibilityTraitSummaryElement與 UIAccessibilityTraitHeader提供標題的特徵。

當螢幕/視圖開啟時,使用UIAccessibilityPostNotification將焦點移到文字上。

如果使用導航列,利用setTitle提供頁面標題。

如果透過可見文本表示呈現在頁面上的標題,將android:label屬性用於該文本。本方法對視覺與無視覺(TalkBack)的使用者皆有助益,皆能感知到標題。

使用title元素提供每個HTML頁面個別的頁面標題。頁面標題通常應使用與頁面上主要層級標題(h1)的文字相同,但此將取決於應用程式與頁面本身的上下文脈絡,故此非強制性。

成功範例原始碼

UINavigationItem *item=[[UINavigationItem alloc] initWithTitle: NSLocalizedString (@"BBC Weather", @"Title for navigation item")];

Example 1:

setTitle("BBC Weather")

 

Example 2:

<activity

  android:name = ".myApp"

  android:label="BBC Weather";

</activity>

 <html lang="en">

    …

    <title>BBC Weather</title>

    …

  </html>

失敗範例原始碼

UINavigationItem *item=[[UINavigationItem alloc] initWithTitle:@"BBC"];

<activity

android:name=".myApp"

android:label="BBC"></activity>

or

setTitle("BBC");

<title>BBC</title>

測試程序

  1. 檢查網站/應用程式上每個頁面/螢幕的標題。
  2. 驗證標題是否存在:
    • 對於HTML,必須由螢幕報讀軟體報讀一個獨特的title元素。
    • 對於Android和iOS,標題必須出現在螢幕頂部,並由螢幕報讀軟體報讀。

參考詞彙:無

變更記錄:20200817-第1次編撰。

參考資源:

  1. Unique page/screen titles, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G130: Providing descriptive headings, Techniques for WCAG 2.0。