アクセシビリティ：カスタムウェブアプリケーションに ARIA 属性を追加する
4分
ARIA 属性は、スクリーンリーダーのような支援技術に要素のセマンティクスに関する追加情報を提供します。サイト上のカスタム要素またはアプリケーションに ARIA 属性を追加することができます。
ARIA 属性は、要素のネイティブ HTML でアクセスできない場合にカスタム要素やアプリケーションにアクセスできるようにする方法を定義するため、重要です。
重要：
この機能は、ARIA 属性を必要とするカスタムアプリケーション / 要素を持っているユーザーを対象としています。サイトにこれらをお持ちでない場合は、ARIA 属性を編集する必要はありません。
ARIA 属性を追加する
サイトのほとんどの要素には、すでに ARIA 属性がハードコーディングされています。しかし、カスタムアプリケーションを作成している場合は、アクセシビリティのために独自の ARIA 属性を追加することができます。
Wix Studio エディタ
Wix エディタ
Wix Studio エディタで開発者モード（Velo by Wix）を有効にして、要素に属性を追加します。Velo ではコーディングの追加、データベースの構築などが可能です。
- エディタ左側で「コード」 を選択します。
- 該当するアプリケーションまたは要素を選択し、「その他のアクション」アイコン をクリックします。
- 「アクセシビリティ」を選択します。
- 「新しい属性」を選択します。
- ドロップダウンメニューから属性を選択します。
- ラベルを入力するか、レベルまたは値を選択します。
- 「追加」を選択します。
を選択します。
をクリックします。
下記の要素に ARIA 属性を追加することができます：
要素 | プロパティ |
|---|---|
ライトボックス | 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 属性に関するリクエストがある場合は、[お知らせください。
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 | 都道府県 | 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 | 都道府県 | 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 | 都道府県 | true, false |
aria-label | string | |
aria-labelledby | Relationships | ID_REF (space separated items) |