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

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

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

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

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

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

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

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

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

表現を使用すると、静的テキスト（例：「詳細はこちら」など）と動的コレクションフィールド値（例：「Willis McSmoot」など）を結合させて、画像ごとに異なる代替テキストを表示させることができます。こうすることで、訪問者は支援技術を使用して画像の目的を理解できるようになります。

「画像」フィールドに接続しているギャラリーでは、各画像に代替テキストを設定することが重要です。CMS コレクションには、画像の代替テキストに使用する専用の「テキスト」フィールドを作成してください。ギャラリーをデータセットに接続する際は、「代替テキストの接続先」ドロップダウンを、該当する代替テキストフィールドに接続してください。これにより、スクリーンリーダーがギャラリー内の画像を「読む」ことができるようになり、アクセシビリティが向上します。

「メディアギャラリー」フィールドにギャラリーを接続すると、動的アイテムページにアイテムに関する複数の画像や動画を表示することができます。ギャラリーを接続する際は、コレクション内の「メディアギャラリー」フィールド内で、各メディアファイルの代替テキストを直接追加することができます。コレクションで、該当するアイテム横の「メディアギャラリー」フィールドをクリックすると、各メディアファイルに代替テキストを追加することができます。そこで、各ファイルのタイトルと詳細を入力することもできます。これにより、スクリーンリーダーが画像や動画の内容を伝えることができるようになり、すべてのユーザーがメディアのコンテンツにアクセスできるようになります。

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

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

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

変化するコンテンツが表示される要素のみ、追加する必要があります。「次のアイテム」や「前のアイテム」ボタンをコンテナに追加する必要はありません。

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

これは、訪問者がコンテンツをフィルターするための入力要素、またはコンテンツを収集するための入力要素をクリックする場合に該当します。訪問者が、表示されているアイテム数を変更できる場合は、アイテム数を表示するテキスト要素をコンテナに追加して、スクリーンリーダーが変更内容を読み上げられるようにしてください。

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

アクセシビリティの観点から、「フィルターを適用」ボタンを追加することをおすすめします。このボタンを使用すると、訪問者がクリックするまでコンテンツはフィルターされません。これにより、ユーザーが一度に適用する前に複数のフィルターを設定したい場合に、特にユーザーエクスペリエンスが向上します。

パジネーションバーをよりアクセスしやすくするには、バー自体とそのボタンの両方にアクセシビリティ名を追加してください。これらの名前は画面には表示されませんが、画像読み上げソフト（スクリーンリーダー）には不可欠で、ユーザーはページ内を移動する方法を理解することができます。たとえば、パジネーションバーに「ページナビゲーション」という名前を付け、「次のページ」、「前のページ」などのボタンに分かりやすい名前を割り当てたり、コンテンツに基づいてカスタマイズしたりすることができます（例：「次のストーリー」または「前の商品」など）

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