ウェブアクセシビリティの事例解説【スケッタブル | 株式会社ジェイシーサプライ】

こんにちは！株式会社ノベルティのアクセシビリティエンジニアです。

ノベルティでは、全ての案件でウェブアクセシビリティの向上に取り組んでいます。

「ウェブアクセシビリティ」について初めて聞いた、という方はこちらの記事を読んでみてください。

ウェブアクセシビリティとは？｜なぜ対応が必要なのかわかりやすく解説

今回は私たちが過去に制作したサイトを通して、ウェブアクセシビリティ向上の取り組みをご紹介します。

こちらは株式会社ジェイシーサプライの施工業者を結ぶマッチングサービス、スケッタブル。

制作実績紹介ページはこちら

こちらのサイトは、アクセシビリティに配慮したWebデザインギャラリーサイトであるAAA11Yにも掲載されました。嬉しい限りです！

スケッタブルのウェブアクセシビリティの取り組み8選

それでは、スケッタブルで気をつけて制作したポイントをご紹介します。

画像の代替テキストを設定

画像の代替テキストとは、写真やイラストなどの画像で提供される情報と「同等の役割」を担うテキストのことです。

たとえば、HTMLのimg要素にalt属性を指定してテキストを設定することで、画像に代替テキストを付与することができます。

スクリーンリーダーで画像にアクセスしたときに、このalt属性が正しく設定されていないと、ユーザーは画像の情報にアクセスすることができません。

また、通信環境が悪い場合や画像の読み込みに失敗した場合には、画像の代わりに、alt属性に設定された代替テキストが表示されることがあります。

仮に災害時など、通信状況が悪い中で重要な情報が画像のみに掲載されていたとしたら、どうなるでしょうか。

（そもそも、重要な情報を画像のみに掲載することは推奨されませんが…）

たとえ画像が表示されていないときでも、画像に適切な代替テキストが設定されていれば、必要な情報を代替テキストで伝えることができます。

画像の代替テキストは、スクリーンリーダーのユーザーに限らず、すべてのユーザーにとって欠かせない大切な情報源です。

スケッタブルでは、画像に代替テキストを設定し、ユーザーがどんな環境でも画像の情報にアクセスできるようにしています。

HTMLのセマンティクスを意識したマークアップ

HTMLを正しく記述することで、構造が明確になり、情報の文脈や関係性を正しく支援技術に正しく伝えることができます。

気を付けるポイントの一例としては以下になります。

• 適切なHTML要素でマークアップされている
• フォームコントロールにラベルや説明文を関連付ける
• 視覚的なレイアウトはCSSで調整し、構造の意味づけはHTMLで行う
• ARIA属性は補助的に使用し、基本はHTMLのセマンティクスで構造を示す

スケッタブルでは、HTMLのセマンティクスを大切にして、構造の意味づけに配慮しています。

キーボードで操作できるように

ウェブサイトを閲覧・操作するユーザーは、マウスを使用する人だけではありません。

たとえば視覚に障害のあるユーザーは、スクリーンリーダーと併用してキーボードを操作し、情報にアクセスすることが多くあります。

また、運動機能に障害のあるユーザーの中には、マウス操作が負担となる場合もあり、キーボードを使うことで身体的な負担を軽減しながら操作することが可能です。

スケッタブルでは、モーダルダイアログやアコーディオン、ドロワーメニューなどのカスタムUIをキーボードだけでも操作できるように実装しています。

また、モーダルダイアログやドロワーメニューをキーボードで操作する際に、視覚的に隠れている背後の要素にフォーカスが移動しないよう制御することで、使いやすさを担保しています。

自動再生のコンテンツに一時停止・再生ボタンを設置

自動で再生されるコンテンツがある場合には、一時停止、停止、または非表示にできる機能を設ける必要があります。

なぜなら、以下の重大な事象を引き起こす原因になりかねないためです。

• 静止したテキストを素早く読むのが苦手な人や、動く物体を追うのが苦手な人にとって、読みにくくなる場合がある
• 一部の人にとって深刻な注意散漫を引き起こす可能性がある
• 注意欠陥障害のある人は、点滅するコンテンツに気を取られ、ウェブページの他の部分に集中するのが難しくなる

また、動くコンテンツを操作したり、テキストを読んだりするために必要な時間は、人によって異なりますよね。障害があってもなくても、停止・再生を操作できることで全てのユーザーにとって使いやすくなります。

スケッタブルでは、自動再生のカルーセルに一時停止・再生ボタンを設置し、ユーザーのタイミングで一時停止・再生できるようにしています。

主要なコンテンツには見出しを配置

見出しを適切に使用することで、そのページが何について書かれているのかを把握することができます。

見出しがない場合、まずそのページが何を示しているのか、どんな内容なのかを理解するのが難しくなります。

さらに、ページ内に見出しを設けることで、スクリーンリーダーユーザーは見出しジャンプ機能を使って、より効率的に目的の情報へアクセスできます。

スケッタブルでは、各セクションに見出しを配置し、ユーザーにとってわかりやすい情報構造を意識しました。

ページの内容を示すタイトルを設定

ページのタイトルをきちんと設定することで、ユーザーはブラウザのタブや検索結果から、ページの情報に簡単にアクセスできるようになります。

また、スクリーンリーダーは、ページを開いて一番最初にページのタイトルを読み上げます。ページ遷移した際にも、自分がいるのがどのページか、すぐにわかりますね！

スケッタブルでは、全てのページでtitle要素を使用し、ページの主要な内容をタイトルに設定しています。

リンクのテキストからリンク先の内容がわかる

リンクのテキストには、「詳しくはこちら」や「もっとみる」などの曖昧なテキストは避けて、リンク先のページタイトルを表すようなものを使用します。

リンクテキストを明確にすることで、ユーザーは遷移先の内容を把握でき、クリックするかどうかを判断できます。

スケッタブルでは、リンクのテキストはリンク先のページタイトルを使用して「○○をみる」という形にし、ユーザーにわかりやすくしています。

フォームの入力欄には可視ラベルがあり、適切に実装されている

フォームには可視ラベルを設け、ラベルや説明文によって入力欄の主題や目的を明確に説明することが重要です。そうすることで、ユーザーはその入力欄にどのようなデータの入力が求められているのかを知ることができます。

ラベルや説明文は入力欄の近くに配置することが望ましいです。

拡大鏡を使用しているユーザーは可視範囲が限られるため、ラベルと入力欄が近くにあると、どの項目にどんなデータを入力すればよいのかが分かりやすくなります。

また、発達障害のあるユーザーにとっても、どの項目に対する説明なのかを視覚的に理解しやすくなります。情報を探す負担が減り、入力ミスの防止にもつながります。

このように、視覚的な配置の工夫は重要ですが、コード上でもラベルと入力欄の関連を正しく示すことが欠かせません。

フォーム要素が適切にマークアップされていると、スクリーンリーダーが入力欄にフォーカスした際に、ラベルや説明文のテキストもあわせて読み上げられます。これにより、スクリーンリーダーユーザーも、その入力欄が何を求めているのかを正確に把握できます。

スケッタブルのフォームでは、可視ラベルや説明文を入力欄の近くに配置し、適切なマークアップを行なっています。

ひとりでも多くの人が使えるウェブサイトを

今回は、株式会社ジェイシーサプライが提供する、施工業者と依頼主をつなぐマッチングサービス「スケッタブル」におけるアクセシビリティの取り組みをご紹介しました。

ノベルティでは、ひとりでも多くの人が使えるウェブサイトを制作するために、日々アクセシビリティの向上に力を入れています。

ウェブサイトをアクセシブルにすることで、これまでサイトを使用することが難しかった方々にも使っていただけるようになり、より多くのユーザーに価値を届けることが可能になります。

この記事を通じてアクセシビリティに関心を持たれた方は、ぜひお気軽にお問い合わせください。

お問い合わせはこちら