Editor X:サイトのアクセシビリティを向上させる
読了時間:3分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
Editor X でサイトを構築する際には、アクセシビリティに配慮することが重要です。これにより、能力に関係なく、あらゆる訪問者がコンテンツにアクセスして楽しむことができるようになります。
アクセシビリティについて
ウェブアクセシビリティとは、健常者、障がい者を問わず、誰もが平等にウェブコンテンツにアクセスし、サイト内を移動、操作できる閲覧環境を整える取り組みを指します。
Wix は、サイトに必要なバックエンドのアクセシビリティ機能や設定の多くを管理していますが、ユーザー様自身がサイトに追加するコンテンツをアクセシブルなものにすることも必要です。アクセシビリティの要件は地域によって異なる場合があるため、お住まいの地域におけるアクセシビリティの準拠要件を確認することをおすすめします。
サイトチェッカーを使用する
サイトチェッカーは、Editor X が提供するスマートなツールで、ページをスキャンして重要な問題にフラグを立てます。色のコントラスト、H1 タグの欠落、文字サイズなど、アクセシビリティに関する問題もチェックします。
![Editor X のサイトチェッカーのスクリーンショット。同一のページに複数の H1 タグがある問題を検出して解決する様子が写っています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/08/14/05c846a8-5f3c-437e-b6e8-df877acb505e/cac10c5a-50e1-4be8-a4bf-5beb069b97b9.png)
代替テキストを追加する
代替テキストは、サイトのメディア要素に追加できる簡単な説明文です。これにより、スクリーンリーダーを使用している訪問者は、必ずしもコンテンツを見ることなく、その内容を理解することができるようになります。スクリーンリーダーは代替テキストを読み上げるため、必ず重要な情報を追加するようにしてください。
Wix レストランや Wix ストアなどのアプリに表示されるメディアを含め、関連するすべての画像に代替テキストを追加することをおすすめします。
![Editor X の画像設定パネルのスクリーンショット。画像を説明する代替テキストを追加する様子が写っています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/08/14/3fcae7f3-4f6f-4a77-8ae7-9dc4d55f39fc/76ad26c3-b070-4012-9874-aceea911764a.png)
ヒント:
装飾目的の画像やソーシャルアイコンなど、サイトのコンテンツに関連性のない画像に代替テキストを追加する必要はありません。
テキストの見出しタグを設定する
テキストを追加または編集する際、見出しタグが正しいことを確認してください。見出しタグは、タイトル(H1〜H6)から段落(P)までの階層構造で整理されています。そのため、適切な見出しタグを設定しておくことで、訪問者がスクリーンリーダーや Tab キーなどを使用してページ内を移動した際、コンテンツが正しい順序で表示されるようになります。
![Editor X のテキスト編集ツールバーのスクリーンショット。「見出しタグ」のドロップダウンメニューを開いている様子が写っています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/08/14/ae0bf044-38c9-4140-9883-3c136027f86e/b333f1a1-8307-49b8-bd4a-ef350358b2cf.png)
DOM(タブ)順序で要素を再編成する
Editor X では、ワンクリックで要素の DOM 順序を調整することができます。スタック、レイアウター、リピーターなどを用いた複雑なページレイアウトであっても、このオプションを使用することで、障がいのある訪問者も Tab キーを使って画面と同じ順番でコンテンツを読み進めることができるようになります。
![Editor X のレイヤーパネルのスクリーンショット。スタックで「DOM 順序を再編成」オプションを選択している様子が写っています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/10/04/44f8908a-b820-4c86-8eb1-dec380113388/e80af10c-f1f2-4855-950d-bc12d3668d9d.png)
カスタムコードを使用してアクセシビリティツールバーを追加する
アクセシビリティツールバーを追加すると、訪問者が簡単にサイトを閲覧することができるようになります。アクセシビリティツールバーは、障がいのある訪問者がサイト内を移動する際に役立ちます。多くのツールバーで、文字サイズの拡大やサイトの配色が変更できるようになっているのは、サイトのアクセシビリティを確保するためです。
Editor X には、現在アクセシビリティツールバーはありませんが、サードパーティ製のカスタムコードを使用することで、ツールバーを追加することができるようになっています。
お役に立ちましたか?
|