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

NT1包容性通知

規則識別碼

NT1

規則名稱

包容性通知

規則類型

原子規則

規則說明

通知訊息必須同時可見和可聽。

無障礙要求對應

網站無障礙規範

  • 4.1.2 名稱、角色和值(檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於通知內容。

期望

以下檢查均正確:

  • 該應用程式為用於傳達訊息或錯誤的每個警告或通知提供可見和可聽提示。
  • 螢幕報讀軟體會正確報讀物件、元件或控件,包括其標籤、角色、值、狀態和狀態更改。

假設條件

假設元素的隱含角色無法滿足4.1.2 名稱、角色和值之條件。如果有無效的角色屬性,則語意的角色默認成為隱含角色,若此為元素的正確角色,本規則將失效,但4.1.2 名稱、角色和值條件仍滿足。

無障礙支援

  • iOS / Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:舊瀏覽器未支援角色屬性超過一個以上的符記,角色屬性使用多個值時,舊瀏覽器將忽略此屬性。

測試案例:

作業系統

iOS

Android

HTML

範例說明

盡可能使用標準作業系統通知。從iOS8開始,不推薦使用UIAlertView,而以UIAlertController取代。

以包容性方式提供通知,將顯示訊息或圖片結合具有無障礙標籤、振動和音訊提示音,並可能時使螢幕閃爍。

contentDescription應該用於提供自定義元素的狀態資訊。為標準平台元素提供狀態,但必須為自定義元素或複合元素設置狀態。

以包容性方式提供通知,將視覺提示與音訊和觸覺提示相結合。例如,如果使用者在表單欄位中鍵入太多字符,則除了聲音和/或振動外,還會在表單欄位的標籤中顯示錯誤。

對於使用輸入元素創建的單選按鈕或複選框之類的標準控件,這些狀態更改由瀏覽器自動提供。但是,對於圖片和其他自定義控件,這些更改必須以視覺,文字方式提供,也可以透過ARIA提供。隨著狀態的改變,應該為圖片添加新的文字替代。也可以使用ARIA,但不能完全依靠ARIA。非ARIA後備選項必須可用。

成功範例原始碼

UIAlertController* alert=[UIAlertController alertControllerWithTitle:@"Warning" message:@"Are you sure you want to quite?" preferredStyle:UIAlertControllerStyleAlert];

 

UIAlertAction* yes = [UIAlertAction actionWithTitle:@"Yes" style="UIAlertActionStyleDefault handler:^(UIAlertAction * action)

{

 // Quit the application

}];

UIAlertAction* no = [UIAlertAction actionWithTitle:@"No" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action)

{

 // Dismiss the alert and do nothing.

}];

[alert addAction:yes];

[alert addAction:no];

[self presentViewController:alert animated:NO completion:nil];

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Username" />

<EditText android:id="@+id/editText" android:inputType="text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:focusable="true"></EditText>

// ...

editText.addTextChangedListener(new TextWatcher(){

public void afterTextChanged(Editable e) {

  if (e.length() > 8) {

   // play sound

   // change label

   label.text = "Username must be 8 characters or less";

  }

}

...

<Button android:id="@+id/btnMute"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="@string/mute"

android:onClick="toggle" />

...

public void toggle(View v) {

...

   if (v.isPressed()) {

view.setContentDescription("Muted");

   }

   else

   {

view.setContentDescription("Mute");

   }

}         

<script type="text/javascript">

Function checkLength(obj) {

Var str = obj.value

  if (str.length >= 8)

  {

     document.getElementById("l1").textContent = "Create Username (max 8 characters): ERROR - must be 8 characters or less";

     document.getElementById("audio1").play();

  }

}

</script>

 ...

<audio id="audio1" autostart="">

  <source src="beep.mp3" type="audio/mp3" />

  <embed id="audio2" src="beep.mp3" autostart="false" loop="false">

  </embed>

</audio>

...

<label id="l1" for="uname">Create Username (max 8 characters):</label>

<input type="text" id="uname" onblur="checkLength(this);" />

失敗範例原始碼

UITextField* textField = [[UITextField alloc] initWithFrame:CGRectMake(30, 10, 400, 50)]];

[textField setAccessibilityLabel:@"Username (8 character maximum)"];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 400, 50)];

[label setText:@"Username"];

[textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents: UICOntrolEventEditingChanged];

...

(void) textFieldDidChange:(id)sender {

// play sound

}

...

[aCheckBox setAccessibilityLabel:NSLocalizedString(@"One", @"Button title")];

[aCheckBox setAccessibilityTraits: UIAccessibilityTraitButton];              

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Username" />

<EditText android:id="@+id/editText" android:inputType="text" android:layout_height="wrap_content" android:layout_width="wrap_content" android:focusable="true"></EditText>

// ...

editText.addTextChangedListener(new TextWatcher(){

public void afterTextChanged(Editable e) {

  if (e.length() > 8) {

   // play sound

   // change label

   label.text = "Username must be 8 characters or less";

  }

}

...

<Button android:id="@+id/btnMute"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="@string/mute"

android:onClick="toggle" />

...

public void toggle(View v) {

...

   if (v.isPressed()) {

view.setContentDescription("Muted");

   }

   else

   {

view.setContentDescription("Mute");

   }

}

<script type="text/javascript">

Function checkLength(obj) {

Var str = obj.value

  if (str.length >= 8)

  {

document.getElementById("audio1").play();

  }

}

</script>

...

<audio id="audio1" autostart="">

  <source src="beep.mp3" type="audio/mp3" />

  <embed id="audio2" src="beep.mp3" autostart="false" loop="false">

  </embed>

</audio>

...

<label id="l1" for="uname">Create Username:</label>

<input type="text" id="uname" onblur="checkLength(this);" />

 

測試程序

  1. 在未啟動螢幕報讀軟體的情況下啟動應用程式。
  2. 在應用程式內完成表單,並觸發錯誤訊息為測試依據。
  3. 識別用於指示錯誤狀態或表單完成的所有提示。
  4. 驗證是否存在其他提示(文字或視覺、音訊或振動)以提供與所傳達的訊息相同的訊息。
  5. 啟動螢幕報讀軟體。
  6. 關注可以改變狀態的單個物件、元件或控件。
  7. 確認已觸發的項目標籤與螢幕上的文字匹配或包含其他補充訊息,以幫助非可視地訪問該項目。
  8. 驗證元件的狀態是否正確聲明。
  9. 如果適用,請切換項目的狀態並確認螢幕報讀軟體報讀正確的狀態更改。

參考詞彙:無

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

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