header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

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

4分
ARIA 属性は、スクリーンリーダーのような支援技術に要素のセマンティクスに関する追加情報を提供します。サイト上のカスタム要素またはアプリケーションに ARIA 属性を追加することができます。
ARIA 属性は、要素のネイティブ HTML でアクセスできない場合にカスタム要素やアプリケーションにアクセスできるようにする方法を定義するため、重要です。
重要:
この機能は、ARIA 属性を必要とするカスタムアプリケーション / 要素を持っているユーザーを対象としています。サイトにこれらをお持ちでない場合は、ARIA 属性を編集する必要はありません。

ARIA 属性を追加する

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

下記の要素に ARIA 属性を追加することができます:

要素
プロパティ
ライトボックス
label
テキスト
ボックス
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 属性を編集する

カスタムアプリケーションに属性を追加したら、「アクセシビリティ」アイコン  でいつでも編集および更新できます。このアイコンは、属性を接続した要素に自動的に追加されます。

属性を編集する方法:

  1. サイトビルダーで要素 / アプリケーションを選択します。
  2. アクセシビリティ」アイコン  を選択します。
  3. 該当する属性にマウスオーバーして「もっと見る」アイコン  を選択します。
  4. 編集」を選択します。
  5. 必要な変更を加え、「編集内容を保存」を選択します。

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 属性は削除されません。