はじめに
はじめまして。メンバーズルーツカンパニー デザイナーの松沢です。
メンバーズルーツでは、Webサイト制作の現場業務の内製化に注力しており、現在、ノーコードツールである「Studio」を活用したWebサイトの開発支援を行っております。
Webサイト制作において、デザインの美しさや機能性だけでなく、誰もが利用しやすい「アクセシビリティ」への配慮が不可欠になっています。年齢や身体能力、使用環境などに関わらず、すべてのユーザーがWebサイトの情報をスムーズに取得・利用できる状態を目指すことは、現代のWebデザインにおける重要な責務です。
本記事では、ノーコードツール「Studio」を活用して、Webアクセシビリティを向上させるための具体的な方法を、わかりやすく解説します。
Webアクセシビリティとは？誰のためのもの？
「アクセシビリティ」という言葉を聞くと、多くの方が「障害者向けの対応」というイメージを持つかもしれません。しかし、その本質は「情報へのアクセスのしやすさ」であり、コンテンツやサービスを利用できるかどうかの度合いを示す言葉です。
Webアクセシビリティとは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、Webで提供されている情報やサービスを利用できること、またはその到達度を意味します。
具体的には、次のような状態が望まれます。
- 目が見えなくても情報が伝わり、操作できること。
- キーボードだけで操作できること。
- 一部の色が区別できなくても情報が欠けないこと。
- 音声コンテンツや動画コンテンツで、音声が聞こえなくても何を話しているか分かること。
Webアクセシビリティの恩恵を受けるのは、身体障害のある方（視覚、聴覚、上肢、盲ろうなど）だけでなく、発達障害や学習障害、知的障害のある方、色覚特性のある方、そして高齢者も含まれます。加齢に伴い視力や聴力が低下したり、指先の細かい動きが難しくなったりする高齢者にとっても、アクセシビリティが確保されたWebサイトは使いやすいものとなります。
さらに、一時的または状況的に障害がある状態の人も対象となります。例えば、電車内でイヤホンを忘れた場合、眼鏡を忘れて文字が見えにくい場合、手を怪我してマウスが使えない場合なども、Webアクセシビリティの考慮対象です。
このように、Webアクセシビリティはすべての人にとっての使いやすさを向上させる取り組みなのです。
Studioが提供するWebアクセシビリティ向上の基本機能
Studioは、Webアクセシビリティ向上を当たり前にするための機能を多数提供しています。Studioが取り組むWebアクセシビリティ向上活動については、以下のページをご参考ください。
ここでは、特に重要な基本機能とその活用方法をご紹介します。
HTMLタグの適切な設定
サイトの構造を正しく伝えるために、適切なHTMLタグを設定することは非常に重要です。これにより、スクリーンリーダーなどの支援技術がコンテンツの内容を正しく理解し、ユーザーに伝えることができます。
Studioでは、ボックスやテキストに対して、以下のタグを設定できます。
- 構造を示すタグ：div, nav, header, footer, section, article, main
これらは「ランドマーク」と呼ばれ、スクリーンリーダー利用者がページ内の特定要素へ移動するのに役立ちます。
- テキスト要素のタグ：p, h1〜h6, li, span
特に、見出しタグ（h1〜h6）は、ページの階層構造を正確に表現するために重要です. 見出しはh1から順に設定し、レベルをスキップしないように注意しましょう。
- リスト要素のタグ：ul, ol, li
正しくマークアップされたリストは、スクリーンリーダーで項目数や構造が正確に伝わります。
HTMLタグを設定する際は、要素を選択し、画面右の設定パネルにある「タグ」からHTMLタグを選択することができます。
画像の代替テキスト（alt属性）の設定
視覚に障害がある人や画像が読み込めない環境の場合でも、画像の内容が伝わるように代替テキスト（alt属性）を設定することが必須です。
Studioでは、imgを選択すると、画面右の設定パネルにある「Alt」」から代替テキストを設定できます。
代替テキストは、画像の役割と同等の情報をテキストで提供することが望まれます。またSEOにも影響を与えるため、適切に設定しましょう。
- 適切な代替テキストの例：
- 写真の場合：「小型犬が喜んで飛び跳ねている画像」「東京都中央区の地図」など、具体的かつ正確な内容。
- バナーなど文字を含む画像の場合：「1000名様を無料ご招待」など、表示されている画像と同じ内容。
- 不適切な代替テキストの例：
- 「バナー画像」「画像①」「ボタン」など、内容が伝わらないもの。
- 「苺、パフェ、カフェ、東京、おしゃれ」など、SEO対策キーワードを詰め込んだ内容はスパムと判断されてしまう可能性もあります。
なお装飾目的の画像など、コンテンツと直接関係のない画像は、読み上げが不要なため代替テキストを設定しないことも考えられます。その場合、「Alt」は空欄のままで問題ありません。
公開サイトの言語設定を行う
Webサイトで使用されている言語を明示することは、翻訳ツールやスクリーンリーダーがサイト上の言語を正確に識別するために不可欠です。これにより、より正確な翻訳が提供されたり、適切な言語での読み上げが可能になります。
Studioでは、サイト全体または個別のページ単位で言語設定が可能です。
サイト全体で言語設定をする場合、「ページ」のサイト名の横にあるアイコンから「サイト設定」を開き、一番下にある「言語」から使用言語を設定することができます。
個別のページ単位で言語設定をする場合、「ページ」から個々のページをマウスオーバーするとアイコンが表示されます。アイコンをクリックして表示されるパネルをスクロールし、「言語」から使用言語を設定することができます。
大部分が日本語で一部が英語のサイトの場合、サイト全体の言語設定で日本語を選び、英語ページでは個別に英語を設定すると効率的です。
デザインとアニメーションにおけるアクセシビリティの考慮点
文字色と背景色のコントラスト比
文字色と背景色の間に十分なコントラスト比を保つことは、視覚障害者や高齢者、色覚特性のある人にとって情報を見やすくするために不可欠です。
世界的なWebアクセシビリティのガイドライン「WCAG」では、最低4.5:1以上のコントラスト比が求められています。（29pt以上、または太字24px以上の大きいテキストでは、3:1以上のコントラスト比）
「オレンジ背景に白文字」や「青背景に白文字」など、見た目と異なりコントラスト比が低く算出される場合があります。この場合、コントラスト比の数値を優先して配色を調整するか、ブランドカラーの使用方法を調整したり、コントラスト比の高い代替色を用意したりするなどの対応が必要です。
コントラスト比をチェックする際は、Google Chromeのアドオン（拡張機能）として利用できる「WCAG Color contrast checker」やAdobe社が提供する無料ツール「Adobe Color」を活用することがおすすめです。
Studioでは、頻繁に使用する色をスタイル登録することができます。コントラスト比が十分でないと判明し色を変更しなければならない場合も、登録した色スタイルを適用しているパーツは、一括で色を変更できます。
アニメーションの注意点
アニメーションはユーザー体験を向上させる一方で、アクセシビリティを損ねる要因にもなり得ます。
特に以下のアニメーションについては注意が必要です。デジタル庁が公表する「Webアクセシビリティ導入ガイドブック」でも「達成しないと利用者に重大な悪影響を及ぼすもの」として言及されています。
- 光の点滅：
光の点滅を繰り返すコンテンツは、光感受性発作を誘発する可能性があるため、1秒に3回を超える点滅は避けるべきです。
- 自動再生コンテンツの制御：
コンテンツの自動再生を可能な限り避け、3秒以上続く場合はユーザーが停止できる機能を設けましょう。カルーセルや自動で切り替わるコンテンツがある場合は、一時停止、非表示、停止の機能を設置する必要があります。動き続けるコンテンツは、他の箇所の操作や閲覧を妨げる可能性があるためです。
Studioでは、「追加パネル」の最下部から「Carousel」をドラック&ドロップすることで簡単にカルーセルを追加できます。「自動再生」をオンにする場合は、併せて「ホバーで停止」も設定するようにしましょう。
- 動き続ける要素の時間制限：
注意を引く目的の出現時アニメーションなどは、5秒以内に収めるという基準があります。
Studioでは、上部パネル「モーション」からアニメーションの時間を設定することができます。必要以上に目を惹くアニメーションは、アクセシビリティの低下につながるため避けましょう。
おわりに
Webアクセシビリティは、特定の誰かのためだけでなく、すべての人にとってWebサイトを使いやすくするための取り組みです。
Studioはノーコードツールとして、デザイン性の高さ、CMS機能の拡張、各種タグ設置への対応、アニメーション演出など、多様な機能を備えつつ、アクセシビリティ向上のための機能も積極的に提供しています。
完璧なアクセシビリティ対応は容易ではありませんが、Studioの機能を活用することで、HTMLタグの適切な設定、言語設定の明示、画像の代替テキスト設定、そしてコントラスト比やアニメーションへの配慮など、今日から実践できる対策が多数あります。
Studioはアクセシビリティ委員会を立ち上げるなど、アクセシビリティに力を入れており、今後も機能が強化されていくことが期待されます。この記事が、皆様のWebサイトが「万人のためになる」一歩を踏み出すきっかけとなれば幸いです。
最後までお読みいただき、ありがとうございました。
