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

アクセシビリティ:CMS のベストプラクティス

12分
CMS(コンテンツ管理システム)でアクセシビリティのベストプラクティスを実践すると、支援技術を使用するユーザーを含め、すべてのユーザーがサイトを利用しやすくなります。これらのベストプラクティスには、要素にアクセシブルな名前を付けたり、画像やギャラリーに代替テキストを追加したり、セクションやコンテナに追加した要素に ARIA 属性を設定する作業などが含まれます。

これらのベストプラクティスに従うことで、すべてのユーザーが自由に閲覧・利用できるウェブサイトを整えておくことができます。

CMS の代替テキストのベストプラクティス

代替テキストは、支援技術などを使用するユーザーが、画像やギャラリーの内容を理解するために不可欠です。代替テキストを記述する際は、AI が画像を説明しているかのように入力する必要があります。代替テキストは簡潔(125文字以内)にまとめて、「〜の画像」のような言い回しは避けてください。効果的な代替テキストを記述する方法については、「アクセシビリティ:画像とギャラリーを準備する」の記事をご覧ください。

一般的に、CMS に接続した画像には、代替テキストとして使用するコレクションフィールドを作成することをおすすめします。コレクション内を見やすくするため、画像フィールドの横に代替テキストフィールドを作成し、「代替テキスト(画像またはギャラリー名)」という名前を付けるようにしてください。装飾的な画像の場合は、通常は代替テキストは必要でないため、代替テキストは未接続のままで構いません。装飾的な画像に関する詳細は、以下のセクションをご覧ください。
画像フィールド横に、代替テキストフィールドを作成した様子を示したスクリーンショット。

通常の画像の場合

CMS に装飾以外の画像を追加する場合は、詳細な代替テキストを準備しておくことが重要です。CMS コレクションに、画像の代替テキストを表す別の「テキスト」フィールドタイプを追加することをおすすめします。代替テキストには、具体的で詳細な言い回しを使用するようにしてください。たとえば、代替テキストは「一人の女性」ではなく、「庭で花を植えている女性」のような書き方が理想的です。

エディタ内の画像をデータセットに接続する際、「代替テキストの接続先」フィールドをクリックし、作成した代替テキストフィールドを選択します。この内容は画像読み上げソフト(スクリーンリーダー)が画像とその目的を説明する際に役立つため、代替テキストを追加することでサイトをよりインクルーシブに近づけることができます。
画像の代替テキストを、コレクションのフィールドに接続している様子を示したスクリーンショット。

装飾的な画像の場合

装飾画像は通常、意味のあるコンテンツを含まず、代替テキストを必要とすることはありません。画像が装飾的な目的で使用される場合は、データセット内で代替テキストを接続解除したままにすることができます。これにより、スクリーンリーダーが画像をスキップするのを回避し、ユーザー側での不要な操作の中断を防ぐことができます。

クリック可能なボタンとして機能する画像の場合

画像リンクがデータセットのアクションに接続する場合(動的アイテムページを開くなど)、代替テキストでは画像自体ではなく、アクションを説明する必要があります。たとえば、画像をクリックするとその人のプロフィールページに遷移する場合、代替テキストは「田中さんに関する詳細はこちら」などが良いでしょう。

表現を使用すると、静的テキスト(例:「詳細はこちら」など)と動的コレクションフィールド値(例:「Willis McSmoot」など)を結合させて、画像ごとに異なる代替テキストを表示させることができます。こうすることで、訪問者は支援技術を使用して画像の目的を理解できるようになります。
表現を使用してカスタム代替テキストを作成する方法:
  1. コレクションに接続するデータセットに該当する画像を接続します。
  2. 画像を接続」パネルで「代替テキストの接続先」ドロップダウンをクリックし、「表現」を選択します。
「代替テキストの接続先」ドロップダウンを表現に接続しているスクリーンショット。
  1. 表現」欄をクリックし、必要な代替テキストを作成する関数を入力します。たとえば、以下の関数を入力して、「詳細はこちら」と名前を含む「title」フィールドを組み合わせることができます:
1CONCAT("詳細はこちら",title)

「画像」フィールドに接続しているギャラリーの場合

「画像」フィールドに接続しているギャラリーでは、各画像に代替テキストを設定することが重要です。CMS コレクションには、画像の代替テキストに使用する専用の「テキスト」フィールドを作成してください。ギャラリーをデータセットに接続する際は、「代替テキストの接続先」ドロップダウンを、該当する代替テキストフィールドに接続してください。これにより、スクリーンリーダーがギャラリー内の画像を「読む」ことができるようになり、アクセシビリティが向上します。
「メディアギャラリー」フィールドにギャラリーを接続すると、動的アイテムページにアイテムに関する複数の画像や動画を表示することができます。ギャラリーを接続する際は、コレクション内の「メディアギャラリー」フィールド内で、各メディアファイルの代替テキストを直接追加することができます。コレクションで、該当するアイテム横の「メディアギャラリー」フィールドをクリックすると、各メディアファイルに代替テキストを追加することができます。そこで、各ファイルのタイトルと詳細を入力することもできます。これにより、スクリーンリーダーが画像や動画の内容を伝えることができるようになり、すべてのユーザーがメディアのコンテンツにアクセスできるようになります。

(Wix Studio エディタのみ)「もっと見る」ボタンを別のセクションに配置する

Wix Studio エディタで「もっと見る」ボタンを追加する場合は、リピーターまたはギャラリーの少し下など、要素を別のセクションに配置してください。リピーターやギャラリーと同じセクション、またはリピーターやギャラリーの真下に「もっと見る」ボタンを配置すると、ボタンをクリックした際に要素が重なり合ってしまうことがあります。これにより、視認性やアクセシビリティが低下し、ユーザーを混乱させてしまう恐れがあります。

この問題を回避するには、「もっと見る」ボタンをリピーターやギャラリーとは異なるセクションに配置してください。このようにすることで、ユーザーが「もっと見る」ボタンをクリックした際に、要素がリピーターやギャラリーと重なることなく正しく機能し、ユーザーフレンドリーなエクスペリエンスを提供することができます。
「もっと見る」ボタンを、リピーターとは異なるセクションに配置する様子を示したスクリーンショット。
「もっと見る」ボタンを追加する方法は、以下をご参照ください:

(静的ページのみ)コンテナに「次のアイテム / 前のアイテム」ボタンを追加する

静的ページで、訪問者が「次のアイテム / 前のアイテム」ボタンをクリックすることで CMS 接続要素がコンテンツを変更できる場合は、表示要素を 1つのコンテナに追加することができます。次に、コンテナの ARIA(アクセシブルリッチインターネットアプリケーション)属性を設定して、訪問者がボタンをクリックしたときに変更されたコンテンツを画像読み上げソフト(スクリーンリーダー)に表示できるようにします。

変化するコンテンツが表示される要素のみ、追加する必要があります。「次のアイテム」や「前のアイテム」ボタンをコンテナに追加する必要はありません。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します
  2. コンテナを追加します。
  3. エディタ左側で「CMS をクリックします。
  4. あなたのコレクション」をクリックします。
  5. CMS のコンテンツを表示する要素をドラッグして、コンテナに追加します。
コンテナに要素を追加している様子を示したスクリーンショット。
  1. まだの場合は、 コーディングを有効にします
    1. 上部の「開発モード」をクリックします。
    2. 開発モードを有効にする」をクリックします。
  2. アクセシビリティ開発ツールを有効にします:
    1. エディタ上部にある「設定」をクリックします。
    2. アクセシビリティ設定」を選択します。
    3. 右側のパネルで「アクセシビリティ開発ツール」をクリックします。
    4. エディタでアクセシビリティの詳細設定を公開します」横のトグルを有効にします。
  3. CMS コレクションのコンテンツを表示する要素が追加されたコンテナを右クリックします。
  4. アクセシビリティ」を選択します。
コンテナを右クリックし、「アクセシビリティ」を選択している様子を示したスクリーンショット。
  1. 属性を追加」をクリックします。
  2. 属性」ドロップダウンをクリックし、「aria-live」を選択します。
  3. Attribute value(属性の値)」ドロップダウンをクリックし、「polite」を選択します。
  4. 追加する」をクリックします。
  5. 変更内容を公開する準備ができたら、サイトを公開します。

コンテナに「アイテム数」テキストを追加する

テキスト要素にデータセットのアイテム数を表示し、訪問者が入力要素をクリックしてアイテム数を変更できる場合は、コンテナにテキストを追加することができます。次に、コンテナの ARIA(アクセシブルリッチインターネットアプリケーション)属性を設定して、変更があった際にスクリーンリーダーがアイテム数を通知できるようにします。

これは、訪問者がコンテンツをフィルターするための入力要素、またはコンテンツを収集するための入力要素をクリックする場合に該当します。訪問者が、表示されているアイテム数を変更できる場合は、アイテム数を表示するテキスト要素をコンテナに追加して、スクリーンリーダーが変更内容を読み上げられるようにしてください。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します
  2. コンテナを追加します。
  3. データセットのアイテム数を表示するテキスト要素をドラッグして、コンテナに追加します。アイテム数について説明する別のテキスト要素(例:「結果」など)がある場合は、同様にコンテナに追加します。
  4. まだの場合は、 コーディングを有効にします
    1. 上部の「開発モード」をクリックします。
    2. 開発モードを有効にする」をクリックします。
  5. アクセシビリティ開発ツールを有効にします:
    1. エディタ上部にある「設定」をクリックします。
    2. アクセシビリティ設定」を選択します。
    3. 右側のパネルで「アクセシビリティ開発ツール」をクリックします。
    4. エディタでアクセシビリティの詳細設定を公開します」横のトグルを有効にします。
  6. テキスト要素を追加したコンテナを右クリックします。
  7. アクセシビリティ」を選択します。
コンテナを右クリックし、「アクセシビリティ」を選択している様子を示したスクリーンショット。
  1. 最初の属性を追加します:
    1. 属性を追加」をクリックします。
    2. 属性」ドロップダウンをクリックし、「aria-atomic」を選択します。
    3. Attribute value(属性の値)」ドロップダウンをクリックし、「true」を選択します。
    4. 追加する」をクリックします。
  2. 2番目の属性を追加します:
    1. 属性を追加」をクリックします。
    2. 属性」ドロップダウンをクリックし、「aria-live」を選択します。
    3. Attribute value(属性の値)」ドロップダウンをクリックし、「polite」を選択します。
    4. 追加する」をクリックします。
  3. 変更内容を公開する準備ができたら、サイトを公開します。

入力要素のアクセシビリティを向上させる

コンテンツをフィルターするように設定された入力要素がある場合、デフォルトでは、訪問者が選択するとすぐにフィルターが適用されます。「フィルターを適用」ボタンを追加して、この動作を変更することができます。

アクセシビリティの観点から、「フィルターを適用」ボタンを追加することをおすすめします。このボタンを使用すると、訪問者がクリックするまでコンテンツはフィルターされません。これにより、ユーザーが一度に適用する前に複数のフィルターを設定したい場合に、特にユーザーエクスペリエンスが向上します。
Wix Studio エディタの「フィルターを適用」ボタンのスクリーンショット。
データセットのアイテム数を表示する場合:
訪問者がアイテム数を変更する入力をクリックできる場合は、必ずアイテム数を表示するテキストをコンテナに追加してください。詳細については、この上のセクションを参照してください。

パジネーションバーのアクセシビリティを向上させる

パジネーションバーをよりアクセスしやすくするには、バー自体とそのボタンの両方にアクセシビリティ名を追加してください。これらの名前は画面には表示されませんが、画像読み上げソフト(スクリーンリーダー)には不可欠で、ユーザーはページ内を移動する方法を理解することができます。たとえば、パジネーションバーに「ページナビゲーション」という名前を付け、「次のページ」、「前のページ」などのボタンに分かりやすい名前を割り当てたり、コンテンツに基づいてカスタマイズしたりすることができます(例:「次のストーリー」または「前の商品」など)
パジネーションバーの設定で代替テキストが表示されたスクリーンショット。
ヒント:
Wix Studio エディタで「もっと見る」ボタンを追加している場合は、パジネーションバーやリピーターやギャラリーの下に表示されるものを別のセクションに配置してください。

よくある質問

一般的なアクセシビリティに関するよくある質問と回答については、以下をクリックしてください。