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

4.1.2 GN1410200E 使用者介面元件應暴露名稱與角色,允許直接設定可由使用者設定的屬性,並在變更時提供通知

稽核評量碼

GN1410200E

對應成功準則

4.1.2

對應認證等級

A

對應國際技術碼

G10

類別

General

訊息

使用者介面元件應暴露名稱與角色,允許直接設定可由使用者設定的屬性,並在變更時提供通知

英文訊息

G10: Creating components using a technology that supports the accessibility API features of the platforms on which the user agents will be run to expose the names and roles, allow user-settable properties to be directly set, and provide notification of changes

G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes

G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes

ARIA4: Using a WAI-ARIA role to expose the role of a user interface component

ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component

ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used

ARIA16: Using aria-labelledby to provide a name for user interface controls

ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

規則說明

此標記技術可公開名稱及屬性,允許使用者自行設定屬性,適用於HTML或XHTML,皆須遵守此指引。

檢測說明

範例1:允許使用者自行設定屬性

  1. 使用Google Chrome瀏覽器開啟檔案。
    用Google Chrome瀏覽器開啟網頁
  2. 點選右鍵檢視網頁原始碼。
    點選右鍵檢視網頁原始碼示意圖
  3. 從程式碼中,可以自行更改選項或添加選項,且允許使用者自行設定屬性。
    更改程式碼示意圖

 

範例2:使用< aria-labelledby>在簡單文本字段

網頁呈現

搜尋欄位範例

原始碼

<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">

說明