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

DT3調整文字尺寸

規則識別碼

DT3

規則名稱

調整文字尺寸

規則類型

原子規則

規則說明

確認文字可以放大到200%而不會失去內容或功能性。

無障礙要求對應

網站無障礙規範

  • 1.4.4 調整文字尺寸 (檢測等級AA)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於可辨識設計內容。

期望

以下檢查均正確:

  • 可以更改畫面比例而不會遺失對內容的瀏覽。
  • 尊重預設的文字大小。
  • 調整大小後,內容會正確重排並根據需要滾動。

假設條件

如果滿足以下任何假設,則此規則可能不會導致失敗:

  • 頁面上沒有其他可用於調整文本大小的機制,可用於將文本大小調整為200%,而不會遺失資訊或功能。這包括在瀏覽器中調整字體大小,或在頁面中調整大小的JavaScript機制。
  • 文本節點不能被透過限幅溢出而不會遺失資訊,除了文本節點與祖先節點與aria-hidden屬性設為true時,或當已經應用特定的風格,以確保文本乾淨地裁切(文本溢出、換行或隱藏的文本)。
  • 儘管成功準則1.4.4調整文字尺寸未明確指出必須將最大視窗大小調整為200%,但假定視窗大小適用為1280 x 1024。在成功準則1.4.10 Reflow之下,明確提及1280 x 1024 視窗大小。

無障礙支援

  • iOS/Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:一些使用者代理將aria-hidden屬性值區分大小寫。

測試案例:

作業系統

iOS

Android

HTML

範例說明

使用者可以使用iOS中的縮放功能縮少/放大內容,但此僅允許使用者在任何時候縮放特定的螢幕區域,為讓使用者更改應用程式的文字尺寸,應使用Dynamic Type支援使用者介面元件,如UILabel與UITextView。

頁面縮放透過Android的放大手勢進行原生地處理,然而,此僅允許在任何時候縮放特定的螢幕區域,因此,使用相對文字單位(sp,scale-independent pixels)支援Android內建的文字調整大小的功能。

使用相對單位(ems)指定字體與容器尺寸,採用響應式設計方法,將使頁面的布局依據裝置螢幕的尺寸進行調整。

避免將maximum-scale=1.0用於頁面的 meta元素,因此作法將造成使用者無法使用雙指縮放手勢(注意:儘管從iOS 10開始,如果使用此屬性,使用者也將可以使用雙指縮放手勢),正確做法如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

成功範例原始碼

 UIFont *myHeaderText = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];

 

UIFont *myBodyText = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

<TextView android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textSize="20sp" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0">      

 

Resize content based on the viewport size: 

 

@media only screen and (min-width: 32em) {

  …

  h1 {

    font-size: 1.5em;

  }

  p {

    font-size: 0.8em;

 

@media only screen and (min-width: 50em) {

  …

  h1 {

    font-size: 2em;

  }

  p {

    font-size: 1em;

失敗範例原始碼

--

--

<meta name="viewport" content="user-scalable=no" />

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;">

 

<style>

body {

       overflow: hidden;

}

</style>

 

<iframe scrolling="no"></iframe>

測試程序

  1. 開啟網頁或啟動應用程式。
  2. 驗證使用者介面可縮放。
  3. 驗證放大(縮小)後的內容仍然可以無障礙使用。
  4. 更改裝置預設文字大小。
  5. 驗證頁面/螢幕上文字調整大小並正確重排。
  6. 驗證未禁用滾動。

參考詞彙:無

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

參考資源:

  1. Content resizing, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width, Techniques for WCAG 2.0。