レッスン内容
ウェブは誰にでもアクセス可能であるべきです。しかし、実際には視覚障害、低視力、視覚障害、聴覚障害、難聴、認知、学習、モビリティの障害を持つ人々など、アクセシビリティが考慮されていないために利用者体験が悪化することがあります。
世界の約15％の人口が障害を持っており、これはアクセシビリティが考慮されていないデザインのためにユーザーエクスペリエンスが悪化する10億人以上を意味します。
ウェブ上のアクセスの困難さは、障害やツールの不足に起因するのではなく、アシストティクノロジー（AT）と干渉するデザインが原因です。ATには、デジタルワールドとのやり取りを支援する設定とデバイスが含まれます。
ATの例：
- スクリーンリーダー：テキスト、ボタン、画像などのページ要素を音声または点字に変換する（視覚障害、聴覚障害、低視力、認知または学習障害のある人々向け）
- 拡大: 低視力のある人々のために画面上のオブジェクトのサイズを拡大する
- キーボード: モビリティに制限のある人々のためにマウスの代わりにキーボードコマンドを使用する
- 音声入力: モビリティに制限のある人々のためにマウスとキーボードの代わりに音声を使用してウェブを閲覧する
ウェブ上での公平性を確保するための道のり - 良いデザインと支援技術
Webflowはよりアクセス可能なウェブを構築することを約束し、この取り組みは主にウェブコンテンツアクセシビリティガイドライン（WCAG）のベストプラクティスを心に留めるコミュニティと共に働くことに依存しています。
WebAIMは100万のホームページを分析し、98％が回避可能なアクセシビリティの障壁を持っていることがわかりました。最近、最も一般的に使用される要素をアクセスしやすくするための更新を行いました。私たちは、バリアを取り除くための更新を行うために皆様を招待したいと思っています。今すぐ、今すぐ始めましょう！
ウェブサイトとウェブ全体をよりアクセス可能にするために、高い影響を持つ変更をいくつか見てみましょう。
明確で記述豊かな順序立てられた見出しの使用
構造のないウェブコンテンツは、誰にとっても圧倒的で使い物になりませんが、認知障害を持つ人やスクリーンリーダーを使用する人にとって特にそうです。見出しはコンテンツを整理し、読者をサイト内を案内します。
見出しはページをスキャンし、本文を読まずにコンテンツの明確な目的と概要を簡単に把握できるようにする必要があります。
やめるべきこと：
- 視覚的な違いを示すために見出しのレベルを使用しない
- 規制に従うためだけに見出しのテキストを使用しない
行うべきこと：
- ページごとに目的を説明するH1を1つだけ使用する（またはページに複数の目的が本当にある場合のみ複数のH1を使用する）
- 順序に従って見出しをネストする（たとえば、H2の下にH3を入れる）
コンテンツを見出しで整理し、Webflowで見出しをスタイリングする方法の詳細については、Webflow Universityの「高度なウェブタイポグラフィ」ビデオレッスンのこのセクションをチェックしてみてください。
WCAG参照： 成功基準2.4.6：見出しとラベル
推奨される色のコントラスト比を適用する
テキストと背景の十分な色の対比は、視覚障害を持つ人を含むすべての人々にとって、サイト上の体験と可読性を向上させます。WCAGは、テキストのサイズに基づいた最適なコントラストを示しています。対比とは、2つの色の明るさ（または輝度）の違いで、1:1（例：白い背景に白いテキスト）から21:1（例：白い背景に黒いテキスト）までの範囲があります。
AA（最小）向けの色のコントラストガイドライン
- テキストと画像は4.5:1の比率を持つ必要があります
- 大きなテキスト（18ポイントまたは14ポイントの太字）は、3:1の比率が必要です
AAA（強化）向けの色のコントラストガイドライン
- テキストと画像は7:1の比率を持つ必要があります
- 大きなテキスト（18ポイントまたは14ポイントの太字）は、4.5:1の比率が必要です
Webflowの組み込みの色の対比分析ツール
Webflowのカラーピッカーから、サイト上のテキストの対比比率を直接確認できます。これにより、テキストの対比比率だけでなく、その対比比率に対応するWCAGのレベル評価も表示されます。
テキストのコントラスト比をチェックし、アクセシビリティ基準を満たしていることを確認する。
コントラスト比の曲線パターン
右側のパレットの下にあるパレットの下にあるプレビューアイコン（目のアイコン）を切り替えることで、WCAGのAA、AAA、およびFailの評価のカーブを表示できます。対比比率の曲線パターンは、色相と不透明度の飽和度と明るさのすべての組み合わせをテストして計算されます。色相または不透明度を調整すると、曲線が移動するのを見ることができます。暗い背景に対する明るいテキストは、パレットの左上にAAAの評価を表示し、右下にFailを表示し、その逆も同様です。
興味深いことに、色のコントラスト分析ツールは、2つの色（対比）の輝度差を計算するアルゴリズムを使用し、テキストサイズに対するWCAGガイドラインに対する評価を行います。アルゴリズムは太字テキストが小さくても読みやすい場合に調整を行います。小さなテキストは、読みやすくするためにより高い輝度差が必要です。
WCAGレベルの評価は、背景の色、フォントのサイズ、太さ、色に基づいており、クリックするとヘルパーテキストが表示される「質問記号」アイコンをクリックすると説明されます。（このコントラスト比セクションは、テキスト要素のティポグラフィカルカラーを編集するときにのみ表示されます。）
注意: WCAGのコントラスト比ガイドラインは画像（ロゴを含む）には適用されませんが、目立つテキストを含む画像には4.5:1の比率を適用するのがベストプラクティスです。ただし、テキストの画像は視覚障害を持つ訪問者にとって理解しにくく、しばしば不可能です。できる限りスタイル化されたテキストを使用してください。
Webflow Universityの高度なウェブタイポグラフィのビデオレッスンで色のコントラストの重要性について詳しく学びます。
WCAG参照: 成功基準1.4.3：コントラスト（最小）、成功基準1.4.6：コントラスト（強化）、成功基準1.4.5：テキストの画像
Webflowの組み込みのビジョンプレビュー（Vision preview ）
視覚障害は多くの人々に影響を与えます。ただし、視覚障害を経験しない場合、デザインが視覚障害のある人がどのように見えるかを想像することは難しいことがあります。
WebflowのVision preview を使用すると、視覚障害のある人がウェブサイトを表示する方法をシミュレートできます。このツールを使用すると、デザインワークフローの初めに、デザイン内の重要な情報が色だけで伝えられていないことを確認できます。
注意: Vision preview の使用は視覚障害の近似表示を提供します。自分自身の視力、使用する照明、画面のキャリブレーション、およびオペレーティングシステムの設定などの要因は、プレビューの正確さに影響を与える可能性があります。
Vision preview のオプションにアクセスするには、Designerの上部にあるCanvas settingsをクリックします。
Canvas settings モーダルメニューの下部からプレビューする視覚障害のタイプを選択してください。
以下から選択できます：
- 赤緑色盲（Red-green color blindness）（緑弱、緑盲、赤弱、赤盲のプレビュー）
- 青黄色盲（Blue-yellow color blindness）（青弱、青盲のプレビュー）
- フルスペクトル色盲（Full spectrum color blindness）（色弱、モノクロームのプレビュー）
- 焦点の障害（Focus impairment）（ぼんやりとした視覚のプレビュー）
選択した視覚障害は、Canvas設定の右側にアイコンで示されます。
視覚障害の視点からデザインのプレビューを停止するには、再び「Canvas settings」をクリックし、Vision previewをNoneに変更します。
注意：Safariのバグのため、ビジョンプレビュー（Vision preview）はAppleのブラウザでは利用できません。このバグは、Safariがiframesに対してurl()値を持つCSSフィルタを適用しないことに関連しています。WebflowはこのバグをAppleに報告しましたが、追跡番号は提供されていませんでした。代替策として、FirefoxとChromeブラウザでビジョンプレビューを使用できます。
明確で見やすいフォームフィールドラベルとヘルプテキストの使用
フォームフィールドラベルは、フォームフィールドの機能や目的を説明するために使用され、フォームのアクセス可能なナビゲーションには重要です。フォーム要素には、サイト訪問者がフィールドに入力を始めると消えるインフィールドプレースホルダテキストがあると、誰でも（認知障害の有無に関係なく）どの情報がフィールドに属するかを覚えるのが難しくなります。シンプルな解決策は、常に表示されるフォームラベルとヘルプテキストを使用することです。
Webflowでは、完全にアクセス可能なフォームを作成するには現在、カスタムソリューションが必要です。ラベルが適切にグループ化され、関連するフォームフィールドに関連付けられるように、デザイナーでLabel（ラベル）要素をIDとカスタム属性を使用して作成できます。
アクセス可能なフォームラベルを作成する手順：
- フォームフィールドを選択します（例：Input、Text area、Selectなど）。
- Element settingsを開きます（キーボードでDを押します）。
- フォームフィールドにIDを割り当てます。
- Label（ラベル）を選択し、Element settings > Custom attributesを開きます。
- 「プラス」アイコンをクリックします。
- Label（ラベル）に、名前を「for」とし、フォームフィールドに割り当てたIDと一致する値を持つカスタム属性を付けます。
- 保存をクリックします。
重要: フォームフィールドのIDが一意であることを確認してください（つまり、複数の要素で使用されていないこと）。
関連するラベルとフィールドをグループ化して、フォーム要素を再利用することもできます。
Webflowでラベルとフィールドをグループ化する手順：
- Add panelを開きます（キーボードでAを押します）。
- フォーム要素にDiv blockをドラッグします。
- 関連するラベルとフィールドをDiv blockにドラッグします（ラベルをフィールドの上に配置することを忘れないでください）。
これでDiv blockをコピー（MacではCommand + C、WindowsではControl + C）し、フォームに貼り付けること（MacではCommand + V、WindowsではControl + V）ができます。フォームフィールドに新しいIDを付け、ラベルのカスタム属性を更新して再利用してください。
入力フィールドの外側に明確なラベルがあると、サイト訪問者がフィールドの目的を思い出しやすくなります。また、視覚障害のあるサイト訪問者のための色のコントラスト設定にも適しています（プレースホルダーテキストは通常、明るい色です）。また、スクリーンリーダーに適切なラベルを提供することもできます。
WCAG参照: Success Criterion 2.4.6: Headings and Labels
意味のあるボタンとリンク名を使用する
スクリーンリーダーは、ページ上のすべてのリンクの概要を訪問者に提供できます。リンクがリスト内で文脈から外れて読まれるとき、読者に伝える重要な情報は次のとおりです：
- リンクとは
- どこに移動するか
しないこと
- リンクを「もっと見る」、「このページ」、「ここをクリック」などの一般的な用語に埋め込まないこと
- ハイパーリンクとして生のURLを使用しないこと
すること
- リンクを、リンクが読者をどこに連れて行くか、なぜそこに行きたいかを伝える明確で具体的な言語で埋め込むこと
- リンクが高帯域幅のメディア（PDFやビデオなど）を開く場合、その情報をリンクテキスト内で示すこと
ページ上の有用でないリンクをスクリーンリーダーがどのように伝えるかの例については、Webflow Universityの高度なウェブタイポグラフィビデオレッスンのリンクセクションをご覧ください。
詳細については、WebAIMのリンクに関する記事をご覧ください。
WCAG参照: Success Criterion 2.4.4: Link Purpose (In Context), Success Criterion 2.4.9: Link Purpose (Link Only)
思慮深い動きとアニメーションを使用する
特定のウェブページのアニメーションや点滅コンテンツは、前庭器官障害や光過敏症を持つ人々の健康と幸福に悪影響を及ぼすことがあります。これには、運動病や発作を引き起こす可能性が含まれます。デザインに取り組む際には、アクセシビリティを最初から考慮し、予期せぬまたは過度な動きや点滅から害を及ぼさない安全なアニメーションを作成することが最善です。
しないこと：
- 1秒間に3回以上点滅や点滅を伴うアニメーションを作成しないこと
- 急激なまたは予期せぬ動きを含めないこと
- 重要な情報を伝えるために動きを使用しないこと
すること:
- 有害な点滅コンテンツを取り除くこと
- アニメーションがユーザビリティにポジティブな影響を与えることを確認すること（例：アニメーションがユーザーを主要なコンテンツに誘導する）、ただし、アニメーションを削除または削減するユーザー向けの代替手段も提供すること（例：動く画像ではなく静止画像を使用すること）
- 動きを無効にすることを選択したユーザーにも貴重な情報が失われないようにすること
- 自動的に開始し、他のコンテンツと並行して5秒以上続く移動または点滅要素を一時停止および/または停止するためのコントロールを提供し、表示すること（例：スライドカルーセル）
Webflowの背景ビデオ用の組み込み再生/一時停止設定
背景ビデオは、注意を引くかサイト訪問者を引き込むのに役立つことがありますが、認知障害、運動病、または前庭器官障害を持つ人々にとっては気が散ったり、害になったりすることもあります。この点を考慮して、Webflowの組み込みの背景ビデオで再生/一時停止ボタン設定を使用して、サイト訪問者が背景ビデオコンテンツを一時停止または再生するためのコントロールを提供できます。
この機能を有効にするには、Background video settingsでInclude play/pause buttonを切り替え、再生/一時停止ボタンの外観をカスタマイズすることもできます。詳細については、背景ビデオでの再生/一時停止の切り替えに関するレッスンをご覧ください。
デザインの確認
デザインが低い動きでどのように表示されるかをテストするには、デバイスやブラウザで低い動き設定を切り替えることができます。低い動き設定を有効または無効にする方法についての詳細を学んでください。
WCAG参照: Success Criterion 2.2.2: Pause, Stop, Hide, Success Criterion 2.3.3: Animation from Interactions
ユニークな要素IDを使用する
デザイナーや開発者は、アクセシビリティのためにサイトを最適化したり、カスタム・コードでサイトの機能を拡張したりするために、一意の識別子（ID）を使用します。IDは、リンク、スクリプト、（CSSによる）スタイリングに役立ちます。
ただし、複数の要素で同じIDを使用すると、スクリーン・リーダーが誤動作する可能性があります。スクリーン・リーダーは、共有されたIDを持つ最初の要素だけをターゲットにするため、スクリーン・リーダーのユーザーが後の要素にアクセスできず、ウェブページを適切にナビゲートできないからです。
要素の重複したIDを特定して修正する方法について詳しく学びたい場合は、当社のAuditパネルレッスンの重複要素IDセクションをご覧ください。
WCAG参照: Success Criterion 4.1.1: Parsing
レスポンシブなテキストサイズを使用する
ブラウザは、ウェブサイトのベーステキストサイズを調整したり、コンテンツを拡大したり、サイトをより快適に表示サイズを拡大したりするための組み込みの方法を提供しています。ただし、ピクセル（px）単位でスタイル設定されたテキストは、ブラウザのテキストサイズ設定を無視し、テキストの拡大を妨げ、ユーザーエクスペリエンスを低下させます。 "user-scalable=no"または "maximum-scale=1.0"の値を持つ "viewport"メタタグを追加することは、コンテンツを表示するためにユーザーがズームインするのを防ぐこともあります。
アクセス可能な読書体験を作成するには、root ems（rem）ユニットを使用してテキストサイズを指定します。 Remは、サイト訪問者によって定義されるベーステキストサイズに対して相対的であり、サイト訪問者のブラウザの設定を尊重します。
しないこと：
- ピクセル（px）ユニットでテキストサイズをスタイル設定しないこと
- "viewport"メタタグに "user-scalable"または "maximum-scale"の値を追加しないこと
すること：
- テキストサイズをremユニットでスタイル設定すること
Webflowの組み込みのテキストズームプレビュー
Webflowのテキストズームプレビューを使用すると、テキストズームを使用するサイト訪問者向けにデザインがどのように表示されるかをシミュレートできます。
Text zoom previewにアクセスするには、Designerの上部にあるCanvas settingsをクリックします。
プリセットのテキストサイズ（例：9px、24px、32px）を選択するか、それらを切り替えます。他のテキストサイズをプレビューするには、入力の中をクリックするか、入力にフォーカスを当てて、上矢印キーと下矢印キーを押してください。
テキストズームを使用したデザインのプレビューを停止するには、Canvas settingsを再度開き、Resetをクリックします。
注意: テキストズームプレビューは、カスタムコードを使用してHTMLタグにfont-sizeプロパティが適用されている場合には機能しません。回避策として、代わりにBody (All pages)タグにフォントサイズを追加できます。
WCAG参照: Success Criterion 1.4.4: Resize Text
すべての重要な画像に代替テキストを含める
代替テキスト（またはオルタナティブテキスト）は、画像の簡単な説明であり、画像を表示できない場合に、その画像を理解するのに役立ちます。代替テキストは、視覚障害のある人や視覚障害のある人にとって、画像コンテンツを理解するのに役立ちます。また、画像ファイルが読み込まれていない場合や、ユーザーが画像を表示しないように選択した場合にも、画像の代わりに表示されます。
任意の画像に代替テキストを追加するには：
- Assets panel を開きます（キーボードでJを押します）。
- 代替テキストが必要な画像の上にカーソルを合わせると表示される設定の "cog" アイコンをクリックします。
- Descriptive フィールドに説明を書きます。
この代替テキストは、このアセットがサイト内でデフォルトで使用される場合にいつでも使用されます。
また、純粋に装飾的な画像（つまり、特定の目的を持たず、ウェブページの任意の部分に情報やコンテキストを追加しない画像）を装飾用としてマークし、スクリーンリーダーが無視するようにすることもできます。
画像を装飾用としてマークするには：
- sset panelを開きます（キーボードでJを押します）。
- 代替テキストが必要な画像の上にカーソルを合わせると表示される設定の "cog" アイコンをクリックします。
- Decorative をクリックします。
代替テキストの一般的なガイドライン：
- 重要な画像（ロゴを含む）には代替テキストを含める
- 重要な視覚的特徴を強調する簡潔な説明を書く
- 周囲のテキストを繰り返さない
- "画像" や "写真" といった言葉を省く
- 純粋に装飾的な画像の場合、スクリーンリーダーがそれをアナウンスしないように、代替テキストフィールドにスペースを追加する
例として、"Disabled and Here" の写真家が以下のストック写真に提供した代替テキストを示します： 「有色人種の6人の障害者がコンクリートの壁の前で微笑みながらポーズをとっています。 5人の人が後ろに立っており、中央に黒人女性が立って「disabled and here」と書かれたチョークボードを持っています。 車椅子の南アジア人が前に座っています。」
テキストが常に含まれるようにするため、動的な画像（コレクションリスト内の画像など）に代替テキストをAsset managerに含めることをお勧めします。ただし、画像をプロジェクトに追加する際に、画像のコンテキストが特定のインスタンスに対して異なる場合にも、代替テキストを追加できます。
詳細やヒントについては、WebAIMの代替テキストの書き方に関する記事をご覧ください。
WCAG参照: 成功基準 1.1.1: 非テキストコンテンツ
アクセシビリティを共有の優先事項に
Webflowは、コース、製品のアップデート、将来の監査ツールを通じてアクセシビリティの取り組みをサポートし続けています。