こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて発信いたします。
WixLearn 第3回のPlay Make an accessible themeではホームページを作成するにあたって、配色やテキストはどのようなものを選べばより、多くの人にとって見やすく、理解しやすいものになるのかについて解説します。
今までのWix Learn アクセシビリティ講座要約
SECTION1:Add color theme
Wix でサイトを構築する際には、アクセシビリティを考慮することが重要です。 これにより、能力に関係なく、すべての訪問者がサイトのコンテンツにアクセスして楽しむことができます。
サイトを閲覧したり、サイト内を移動するのに、下記のような対応が必要な訪問者がいる場合があります。
音声情報への対応 耳が聞こえない、耳が聞こえにくい、または聴覚情報の処理が困難な人は、音声に頼ることができません。
代わりに、トランスクリプト(※1)やキャプション、手話などの視覚的およびテキスト情報が必要な場合があります。
認知的な対応 学習障がいや認知障がい（失読症、ADHD、自閉症など）のある人は、コンテンツ構造やレイアウトの一貫性に頼る場合があります。
※1トランスクリプト 音声を文字に変換する文字起こし機能や、その結果として得られる文字起こしデータそのものを指します。
すべての訪問者が平等にサイト内を移動し、楽しむことができるようにしましょう。
「サイトデザイン」→「サイトのスタイル」→「カスタマイズ」に移動すると、「色」と「テキスト」というオプションがあります。
必要に応じて「カラースタイル」の「変更」をクリックすると、沢山のカラースタイルが用意されています。
カラースタイルのボックスにあるのは、スタイルの全ての色です。
それぞれの色の右側に色調の調整ツールがあり、それぞれのベースカラーには5つの色調があります。
ここに1～25の数字を当てはめるとします。
この場合に重要になるのは１・４・５・８番の色です。
1番は背景色、5番はメインテキストの色、8番はアクションの色で、ホームページのスタイルに合わせたボタンを配置する場合、ボタンはこの色になります。
4番はアクセントカラーで、アプリをダウンロードした時などに使われます。
カラーパレットに色を追加したいときは、ボックスにマウスオーバーして色を編集し、16進コードを変更します。
視力に制限のある訪問者は、サイトページの前景と背景の違いを見分けにくい場合があります。
アクセシビリティを向上させるために、下記を推奨しています：
テキスト色と背景色のコントラストを、通常のテキストでは 4.5：1、大きなテキストでは 3：1 の比率に変更しましょう。
グラフィックとユーザーインターフェースコンポーネント（フォーム入力枠、プレースホルダなど）のコントラスト比は 3：1 以上にしましょう。
レベル AAA(※1)では、通常のテキストの場合最低 7：1、大きなテキストの場合 4.5：1 の高いコントラスト比が必要です。
※1 適合レベルについて ・適合レベルA：アクセシビリティ確保に最低限必要なレベル。 ・適合レベルAA：総務省や他国の法律・ポリシーでも推奨されているレベル。 ・適合レベルAAA：適合レベルAAを発展させた基準。 達成要件が厳しく細かいため、一般的に求められるレベルではない。
注意
大きなテキストとは 14ポイント（約 18px）以上の太字、または 18ポイント（約 24px）以上と定義されています。
カラーコントラストをテストする
Contrast Checker など、文字表示色と背景色を比較し色のコントラストをテストするサイトやブラウザが多数あります。
背景画像上のテキスト色のコントラストを確認する場合、背景色を選択しテストを実施出来る Colour Contrast Analyser を推奨します。
サイトにグラフやデータを表示している場合
ハイコントラストカラーは、サイトにデータを表示するのに最適です。
ただし、他のインジケータ（テクスチャやパターンなど）を使用して情報を区別することもおすすめします。
SECTION2:set up a text theme
Wixでは数多くのフォントを提供しており、独自のフォントをアップロードして使用することもできます。
「テキスト」をタップすると、設定しているテキストスタイルがわかります。
一部のフォントは他のフォントより読みやすいため、サイトで使用するフォントが簡単に読めるようにすることが重要です。
明確で読みやすいフォントを選択することで、視覚障がいやディスレクシア（読字障がい）のある訪問者に役立ちます。
サイトで使用できるフォントの数を制限し、同じテキストブロックに複数の書体を含めないようにしましょう。
テキストスタイルを設定するときはSerif (セリフ)ではなく、Sans-Serif (サンセリフ)を選ぶことをお勧めします。
Serifフォント（例: GaramondやTimes New Roman）は、装飾がついているため、装飾が多すぎるとユーザーの視認性や認識に負担をかける可能性があります。
一方、Sans-Serifフォント（例: Helvetica Bold、Roboto、Avenir）は、装飾が少なくシンプルで視認性が高いため、特にウェブサイトではおすすめです。他にもTahoma、Verdana、Open Sansなども適しています。
どうしてもSerifフォントを使用したい場合は、メインタイトルやキャッチコピーなど、特定の要素に限定して使用すると効果的です。
例えば、Inknut Antiquaのようなフォントでアクセントをつけるのも一つの方法です。
ただし、ページ全体に多用するのは避けた方が良いでしょう。
文字の曖昧さと複雑さのバランスが取れたフォントを選択しましょう。
文字はお互いに簡単に識別しやすいものであると同時に、シンプルなパターンや形であることが望ましいです。
可能な限り小さいフォントサイズは避けましょう。 テキストは 14ピクセル以上にしましょう。
フォントの文字、単語、行の間に十分なスペースがあることを確認しましょう。 これにより、テキストがコンパクト化されず、簡単に読むことができます。
斜体、大文字、取り消し線などの書式付きテキストは、視覚障がいや読字障害のある訪問者には読みにくい場合があることに注意しましょう。
特にライトウェイトフォントを使用する場合は、テキストと背景の色のコントラストに注意しましょう。
詳細はこちらをご覧ください。
テキストの配置を念頭に置きましょう。 両端揃えのテキストには、読みやすさを損なう可能性のあるスペースのバリエーションが含まれています。 左から右の言語が読みやすいので、テキストを左に揃えることをお勧めします。
テキストブロックと段落は、簡単に読め、区別しやすいように、その間や周りに空白を入れましょう。
行の文字数が多すぎたり少なすぎたりすると、読みやすさに影響するため、可能な限り 50文字から 120文字の範囲で入力しましょう。
WixLearn 第1回のUnderstand web accessibilityはこちら
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
Comments