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

CP1漸進式功能

規則識別碼

CP1

規則名稱

漸進式功能

規則類型

原子規則

規則說明

以漸進式方式構建應用程式和網站,以確保使用者在離線或支援不完整時仍有功能體驗。

無障礙要求對應

網站無障礙規範

  • 4.1:相容性
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於相容性設計內容。

期望

以下檢查均正確:

  • 所有內容在每個裝置與作業系統皆可取得。
  • 所有功能在每個裝置皆可取得,或當特定的功能未被裝置或作業系統支援時提供相等的功能。

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用available屬性提供舊版iOS的備援方法。例如,UIStackView僅從iOS 9.0才能使用,如果應用程式也以舊版iOS為目標,則使用 if…else提供備援方法。

使用SDK_INT變數作為功能的偵測。

避免瀏覽器偵測的使用,取而代之,採取漸進式增強方法,藉由專注於基本結構與內容優先,然後在其上面增加更多的功能。因此,舊版裝置的使用者仍可使用應用程式的基本元件、內容與功能,而較新裝置地使用者,將獲取與其作業系統相關的進階功能。

更多細節,參考Cutting the Mustard for techniques to determine browser capabilities|

成功範例原始碼

// Example 1 - checking a class is available

if (NSClassFromString(@"UIPopoverController")) {

    // Do something

}

 

// Example 2 - OS version detection

if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion){10, 0, 0}]) {

  // Cool new feature that iOS 10 supports

 } else {

  // Fallback to something less cool, but that will work on iOS 9 and below

}

 if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

  // Code for a feature that only works in Honeycomb and above

} else {

  // Fallback for users of Honeycomb and below

}

<!-- Example 1 - HTML content that does not rely on JavaScript or CSS enhancement to function -->

<a href="page2.html"> Next Page </a>

 

<!-- Example 2 - Content that is displayed with or without JavaScript -->

<script>

    // embed game or media player

</script>

<noscript>This content requires Javascript to be enabled.</noscript>

 

<!-- Example 3 - check if a Javascript method or property is available -->

if("geolocation" in navigator) { ... }

 

<!-- Example 4 - check if CSS rules are supported -->

@supports (display: flex) and (transition: .5s) {

  .box { display: flex; transition: .5s; }

}

失敗範例原始碼

--

--

<!-- Example 1 - JavaScript based link -->

<a onclick="nextPage();"> Next Page </a>

 

<!-- Example 2 - content that is only available with JavaScript and no fall-back explanation -->

<script>

    // embed game or media player

</script>

測試程序

  1. 識別可能依賴於JavaScript的內容和功能。
  2. 在未支援JavaScript或停用JavaScript的裝置或行動瀏覽器、或輔助技術,執行應用程式或網站。
  3. 驗證內容是否可用,或提供有關為何不可用的訊息。
  4. 驗證功能是否可用。

參考詞彙:無

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

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