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

ST4容器與地標

規則識別碼

ST4

規則名稱

容器與地標

規則類型

原子規則

規則說明

容器應用於描述平台支援的頁面/螢幕結構。

無障礙要求對應

網站無障礙規範

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

適用性

適用於結構與標題內容。

該檢核點排除Android版本。

期望

以下檢查正確:

頁面由適當的容器構成:

  • HTML頁面宣告頁面各部分的適當容器具有ARIA等效地標。
  • iOS頁面容器可以作為地標並可導航。
  • Android頁面容器可以作為地標並可導航。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用原生控制器如 UINavigationController、UITabBarController與UISplitViewController組織螢幕內容,可方便VoiceOver使用者在螢幕的區段之間導航。

目前Android未支援原生應用程式內容器之間的導航機制,儘可能透過單次單一元素的導航。

使用ARIA地標角色或HTML5區段元素指出常見的頁面內容區段(例如主要內容區、導航、頁頭與頁尾)。

WAI-ARIA地標角色包括:banner、navigation、search、main、complementary、article、section、contentinfo。

HTML5元素包括:header、nav、main、aside、article、section、footer。這些元素具有預設的地標角色,不需要設置ARIA角色屬性。

成功範例原始碼

--

--

 <div id="header" role="banner">

  <div id="navigation" role="navigation">

    <ul>

      <li><a href="…">Home</a></li>

      <li><a href="…">About Us</a></li>

      <li><a href="…">Contact Us</a></li>

    </ul>

  </div>

</div>

<div id="mainContent" role="main">

  <h1>Home</h1>

  …

失敗範例原始碼

 

 

<div id="header">

    <div id="logo">...</div>

    <h1>BBC</h1>

    <div id="nav">

        <ul>

            <li>Weather</li>

            <li>Sport</li>

            <li>Travel</li>

        </ul>

    </div>

</div>

<div id="content"> ...</div>

<div id="related-content"> ...</div>

<div id="footer">

    <p>BBC 2012</p>

    <ul> ... </ul>

</div>

測試程序

  1. 啟動螢幕報讀軟體。
  2. 驗證使用容器將頁面結構化:
    • 對於HTML頁面必須具有適當的區段元素,或非語義容器具有ARIA地標角色,對於頁面的每個部分具有等效的ARIA地標。
    • 對於行動Safari中的HTML頁面,必須透過在“指針(Rotor)”選單中選擇“地標”來導航具有等效ARIA地標的頁面的每個部分。
    • 對於行動Chrome中的HTML頁面,必須透過在本機上下文選單中選擇“標頭和地標”來導航具有等效ARIA地標的頁面的每個部分。

參考詞彙:無

變更記錄:
20200817-第1次編撰。
20190824-的2次編撰,根據109年07月22日討論,於適用性排除Android作業系統。

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