アクセシビリティ：カスタムウェブアプリケーションに ARIA 属性を追加する | サポートセンター

アクセシビリティ：カスタムウェブアプリケーションに ARIA 属性を追加する

読了時間：4分

ARIA 属性は、スクリーンリーダーのような支援技術に要素のセマンティクスに関する追加情報を提供します。サイト上のカスタム要素またはアプリケーションに ARIA 属性を追加することができます。

ARIA 属性は、要素のネイティブ HTML でアクセスできない場合にカスタム要素やアプリケーションにアクセスできるようにする方法を定義するため、重要です。

重要：

この機能は、ARIA 属性を必要とするカスタムアプリケーション / 要素を持っているユーザーを対象としています。サイトにこれらをお持ちでない場合は、ARIA 属性を編集する必要はありません。

エディタのほとんどの要素には、すでに ARIA 属性がハードコーディングされています。しかし、カスタムアプリケーションを作成している場合は、アクセシビリティのために独自の ARIA 属性を追加することができます。

エディタで属性を追加する

Editor X で属性を追加する

要素	プロパティ
ライトボックス	label
テキスト	label, role heading, status, alert], live, relevant, atomic, hidden, current, level
ボックス	label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden
ストリップ	label, tabindex, role [heading, status, alert], live, atomic, hidden, current
リピーター	label, role [heading, status, alert]
テキストボタン	tabindex, pressed, expanded, haspopup

より多くの要素に ARIA 属性を追加できるよう、日々取り組みを行っています。特定の ARIA 属性に関するリクエストがある場合は、[お知らせください。

カスタムアプリケーションに属性を追加したら、「アクセシビリティ」アイコン

でいつでも編集および更新できます。このアイコンは、属性を接続した要素に自動的に追加されます。

属性名	カテゴリー	トークン
tabindex		0, -1
role		token: according to definition in primitive
aria-level		int
aria-live	Live	token: polite, assertive
aria-multiline	詳細	true, false
aria-multiselectable	詳細	true, false
aria-pressed	State	true, false
aria-relevant	Live	token: all, additions, removals, text
aria-activedescendant	Relationships	ID_REF
aria-atomic	Live	true, false
aria-autocomplete	詳細	true, false
aria-controls	Relationships	ID_REF
aria-current	State	step, page, true, false
aria-describedby	Relationships	ID_REF (space separated items)
aria-expanded		true, false
aria-haspopup	Relationships	dialog, menu, true, false
aria-hidden		true, false
aria-invalid	State	true, false
aria-label		string
aria-labelledby	Relationships	ID_REF (space separated items)

重要：

アクセシビリティの詳細設定はいつでもオフにすることができ、オフにしても ARIA 属性は削除されません。

この記事では下記を説明します：