Webアクセシビリティと、計測ツールの使い方

突然ですが、アクセシビリティは何かご存知でしょうか？

アクセシビリティとは「（目的の場所へ）アクセスする能力」のことを言います。
アクセスビリティの高いサイトを作る目的は、障害がある方ためだけでなくWebサイトを閲覧する際に環境により複雑さを感じてしまう方々のためでもあります。

今回は、そのユーザーの具体的なイメージと、計測ツール、デザイン時に気をつけたいことをご紹介していきたいと思います。

４つのアクセシビリティの紹介

アクセシビリティを誰のためにどう高めるのか？
4つの要素に分け、想定されるお悩みを抱えた方のイメージもご紹介したいと思います。

視覚的:

色覚特性がある人
高齢の人
読み書きが困難な人
環境により使い勝手が悪い状況にある人

聴覚的:

聴覚障害のある人
環境により使い勝手が悪い状況にある人

身体的:

マウス・キーボードを十分に動かせない人
環境により使い勝手が悪い状況にある人

認知的：

発達障害や学習障害のある人
知的障害がある人

※環境により使い勝手が悪い状況とは、視力の低い人がメガネがない状態や一時的に怪我をしてマウスが握れない状態、外出先でイヤフォンがない状態などを想定しています。

アクセシビリティチェックツール「Lighthouse」の使い方

誰のためのアクセシビリティかはわかったけれど・・・
何から対応したら良いかわからないよ！という方は、こちらのチェックから始めてみると良いかもしれません。

「Lighthouse」とはGoogleが提供する無料のオープンソースのツールです。
ウェブサイトの品質やパフォーマンスを測定し、改善するための情報を提供してくれます。
初心者でも使いやすく、ウェブサイトの最適化に役立つツールです。

Lighthouseの使い方

ブラウザのchromeを開きます。
次に、拡張機能ページを開いて青いボタン「Chromeに追加」をクリックします。

追加が完了したら「Generate report」をクリックします。
クリックすると1分程度画面が切り替わりませんが、そのままで大丈夫です！

英語で結果が出てきますので、わかりにくい場合はブラウザの翻訳機能を使うのがおすすめです！

Lighthouseを使うとわかること

パフォーマンス:

ウェブサイトの読み込み時間やパフォーマンスに関する評価を提供します。遅い読み込みやボトルネックとなる要素を特定することができます。

アクセシビリティ:

ウェブサイトのアクセシビリティに関する評価を提供します。障害を持つ人々や特定の環境での利用者にとって、ウェブサイトがどれだけ使いやすいかを測定します。

ベストプラクティス:

ウェブ開発のベストプラクティスに基づいて、ウェブサイトの品質をチェックします。セキュリティ、HTTPSの使用、最適化などに関するアドバイスを提供します。

SEO（検索エンジン最適化）:

ウェブサイトのSEOに関する評価を提供します。検索エンジンでの表示やランキングに影響を与える要素を確認できます。

使用状況の評価:

ウェブサイトの使用状況に関する評価を提供します。利用者がどのようにウェブサイトを利用しているかや、改善のための提案を示します。

これらの評価結果を元に、ウェブサイトの品質を向上させるための具体的なアドバイスや問題の特定に役立つ情報が提供されます。これにより、ユーザーエクスペリエンスの向上、読み込み速度の改善、セキュリティの確保など、ウェブサイトの最適化が可能となります。

アクセシビリティチェックツールは完璧ではない

ここまでご紹介しましたが、チェックツールで判断できるものは、ごく一部であり、人の目で実際に確認しないと判断できないものも多いのが現実です。
ツールの評価を優先するのではなく、実際にユーザーを理解し、コンテンツを把握した状態で、何が最適で優先すべき内容なのかを判断する必要があります。

サイト制作時に気をつけたいデザインに関するアクセシビリティ

では実際にツールで判別できないようなデザイン部分では、どのような点を気をつけるべきでしょうか？
おしゃれなサイト、トレンドに寄せたサイトなど・・・
魅力的なデザインが多くありますが、Webサイト上では利用するユーザーに配慮したデザインを行うことが望ましいと考えられます。以下一部をご紹介します。

• コントラストを高く保ち、情報を読みやすくする
• 基本としてはGoogle推奨サイズを守り、読みやすさを確保する
• 明瞭なナビゲーションメニューや情報の階層構造をデザインし、ユーザーが目的のコンテンツに簡単にアクセスできるようにする
• 一貫性のあるデザインを心がける。意味のない複雑なレイアウトや情報の過剰な使用を避け、ユーザーが情報を理解しやすいデザインを追求する
• タップやクリックしやすいボタンサイズと適切な配置を設計する

おまけ：文字サイズ拡大はデバイスに任せるべき？

少し前までは、サイトに文字サイズ拡大ボタンを設置しているwebサイトをよく見かけましたが、最近はほとんど減ってきているのではないでしょうか。
その理由として、ブラウザやデバイスで文字の拡大・縮小ができることも認知され、文字を大きくして読みたいユーザーは、すでに設定を終えており、一概には言えませんが特定のサイトだけで文字を拡大する動作をすることはあまり必要でないように考えられます。

makeshopでユーザーに使いやすいサイトを作るなら
猫の手にご相談ください！

猫の手は、makeshopでユーザーに使いやすいサイトを作りたい方々に専門的な支援を提供します。
シンプルなデザインと直感的なナビゲーション、レスポンシブなデザイン、魅力的な視覚要素、使いやすいストア機能など、ユーザーエクスペリエンスの向上に注力します。
私たちはユーザーが簡単に目的の情報や商品にアクセスできる魅力的なサイトを作りたいと常に考えております！
ぜひお悩みの際は猫の手ご相談ください！スタッフ一同、全力でお手伝いいたします！