> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# アクセシブルなウィジェットを作成する

> Widget Studio のアクセシビリティチェッカーを使用してアクセシビリティの問題を検出・修正し、WCAG 2.1 AA に準拠したウィジェットを作成します。

<Note>
  アクセシビリティチェッカーは現在、ベータユーザーのみが利用できます。
</Note>

スクリーンリーダーやキーボードナビゲーションに依存する訪問者は、ウィジェット内で実際の障壁に直面することがあります。たとえば、アクセシブルな名前が設定されていない要素、コントラスト要件を満たさないテキスト、境界が視覚的に示されていないコントロールなどです。Widget Studio のアクセシビリティチェッカーは、こうした問題がないかウィジェットをスキャンし、[WCAG 2.1 AA](https://www.w3.org/TR/WCAG21/) 標準に照らして評価することで、ウィジェットを公開する前に問題を解決する機会を提供します。チェックはウィジェットの作成中いつでも実行できます。

## ウィジェットのアクセシビリティを確認する

ウィジェットのアクセシビリティを確認するには、Widget Studio のヘッダーにあるアクセシビリティアイコンをクリックします。Kameleoon がウィジェット内で見つかったアクセシビリティの問題を検出して一覧表示します。

![ウィジェットで検出されたアクセシビリティの問題を一覧表示する Widget Studio のアクセシビリティパネル](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-an-accessible-widget/accessibility-checker.png)

## アクセシビリティの問題を修正する

検出された問題は、次の 2 つの方法で修正できます。

* **Fix all with AI**:Kameleoon が一覧表示されたすべての問題を自動的に解決します。
* **Edit elements manually**:リストから対象の要素を選択し、自分で編集します。

## ARIA ラベルを追加する

スクリーンリーダーが各要素の目的を識別できるようにするには、編集サイドバーの **ARIA label** プロパティを使用します。要素の機能を簡潔に説明するテキストを入力します。たとえば、閉じるボタンには「ポップインを閉じる」のように入力します。

## 有効化する前にアクセシビリティを確認する

ウィジェットを有効化すると、アクセシビリティを確認するよう促すポップアップが表示されます。ウィジェットを有効化する前にアクセシビリティチェッカーを実行し、WCAG 2.1 AA 標準を満たしていることを確認してください。