Webflowで効率的にアクセシビリティを攻略する方法

Webサイトを作るとき、文字の読みやすさやキーボードだけでの操作を確認できていますか？
Webflowには、制作中に文字サイズや見え方を確認する機能があります。この記事では、remを使った文字サイズ、色だけに頼らない情報の伝え方、キーボードフォーカスの3点を紹介します。

これらはアクセシビリティを確認するための出発点です。ツールのプレビューや単位の選択だけで適合が保証されるわけではありません。画像の代替テキスト、見出し構造、フォームのラベルなども含め、実際の操作と合わせて確認しましょう。Webflowのaltテキスト設定方法も参考になります。

フォントサイズにREMを使うべき理由とWebflowでの確認方法

remはルート要素の文字サイズを基準にする相対単位です。利用者の文字サイズ設定を考慮した設計に役立ちます。

pxとremの違い

pxは絶対的なサイズを指定し、remはルート要素の文字サイズを基準にします。ブラウザの文字サイズ設定への追従を考える場合、remなどの相対単位が役立ちます。一方、ブラウザのページ全体の拡大と、文字サイズ設定の変更は別の操作です。

ブラウザの既定の文字サイズは、利用者が変更できる場合があります。サイト側でルートの文字サイズを固定している場合などは、設定変更が期待どおりに反映されないこともあるため、実際のブラウザで確認することが大切です。

たとえばルートの文字サイズが16pxの場合、1remは16pxに相当します。文字サイズを大きくしたときに、文章が切れたりボタンからはみ出したりしないかを確認しましょう。remを設定するだけで、すべてのテキストが必ず拡大するわけではありません。

Text zoom previewで拡大表示を確認する

WebflowのCanvas settingsにはText zoom previewがあります。通常のキャンバスでは、キャンバスバーのブレークポイント幅をクリックして設定を開きます。コンポーネント編集や拡張表示では、Canvas settingsアイコンから開く場合があります。Text zoom previewの値を変更し、文字の拡大に合わせてレイアウトを確認します。

1remと16pxを指定した例では、ルート文字サイズのプレビューを変えると、remの文字とpxの文字で変化の仕方を比べられます。表示が重なったり、要素からはみ出したりしないかを確認し、必要に応じて余白やサイズを調整してください。実際のブラウザや端末での確認も行います。

色覚多様性に配慮した配色とコントラストの確認

色だけで状態を区別せず、文字やアイコンも併用します。文字と背景、操作部品の境界について、十分なコントラストを確認することも大切です。

色だけに頼らない情報設計

色の見え方には個人差があります。赤と緑が区別しにくい方や、明るさの差が小さいと情報を見分けにくい方もいます。たとえば入力エラーは、赤い枠だけで示すのではなく、エラー内容のテキストも添えると伝わりやすくなります。

Vision previewは、色に依存したデザインに気づくための手がかりになります。シミュレーションだけで実際の見え方を完全に再現したり、コントラストの適合を判定したりはできません。数値の確認と実際の利用状況での検証を組み合わせます。

WebflowのVision previewで色覚シミュレーションを行う方法

Canvas settingsの「Vision preview」から表示を切り替えると、色の見分け方が異なる場合のデザインを確認できます。たとえば赤と緑の違いに頼っていないか、文字と背景を見分けられるかをチェックします。

色覚のシミュレーションを見ながら、重要な情報が色だけで表現されていないかを確認します。合わせて文字と背景のコントラストを測定し、文章やアイコンで状態を区別できるようにしましょう。

キーボード操作に対応したフォーカスアウトラインの設計

キーボードだけでもリンクやボタンを順に操作でき、現在位置が分かることを確認します。

フォーカスアウトラインとは

キーボードでページを操作するときは、Tabキーなどでリンクやボタンにフォーカスを移します。フォーカスアウトラインは、現在どの要素を操作できるかを視覚的に示す手がかりです。

アウトラインが見えないと、キーボード利用者が現在位置を把握しづらくなります。outlineを消す場合も、代わりに明確に見えるフォーカス表示を用意することが必要です。

WebflowでフォーカスアウトラインをFocused（keyboard）Statesで設定する方法

対象のリンクやボタンを選択し、StyleパネルのStatesから「Focused (keyboard)」を選びます。Outlineの色や太さを設定し、対象の周囲にフォーカスが見えるようにします。

背景とのコントラストと、隣の要素に隠れないことを確認します。Webflowのプレビューだけでなく、公開前の確認環境でもTabキーを使い、操作順序、リンク先、フォーカス表示を確かめましょう。

まとめ

Text zoom preview、Vision preview、Focused (keyboard)は、文字の拡大、色の見分けやすさ、キーボード操作を確認する手がかりです。それぞれのプレビューを使ったうえで、実際のブラウザ・端末でも操作を試します。

アクセシビリティは、文字サイズや色だけで完了するものではありません。画像のalt、見出し、フォーム、操作順序なども確認し、必要に応じて専門的な検証を行いましょう。公開前の作業はWebflow公開前の設定チェックも参考になります。

参考資料

• Canvas settingsの公式ヘルプ