身近な課題から考えるwebアクセシビリティ

こんにちは。Gaji-Labo 横田です。外出中にスマホのデータ容量を使い切り、データ通信の通信速度が低速モードになることがあります。また、アクセス数の多い混雑したサイトを閲覧することもあります。そんな時 webアクセシビリティに直面します。

サイト内の画像やテキストの表示が遅延する

先日、wifi が使えない環境でスマホのデータ通信の速度が低速モードになったことがありました。また、外出先でアクセスが混雑したサイトを閲覧する機会がありました。それらの環境下、手元のスマホで何が起きるかといいますと、webサイトの読み込みが遅延してなかなかページが表示されません。そしてページ内の多くの画像が読み込まれず、テキストのみが表示された状態になります。

この例では、その場所に行く方法を確認したかったのですが、高速道路についての内容が画像のみになっており、その画像が読み込まれないので経路を確認することができませんでした。

この例では、webフォントを使用しているためテキスト自体の表示に時間がかかり、内容を確認することができませんでした。

Gaji-Labo の受託開発では、情報を画像で表現する場合は alt 属性で代替テキストを入れることをデザインの段階でご提案したり、テキストそのものを前後の文脈から素案としてご用意し、ビジネス側でブラッシュアップいただくこともあります。運用上、代替テキストを入れることが難しいケースや代替テキストを空にしたほうがよい判断もしますが、上記例のように、閲覧者にとって重要と思われる情報は、画像と併用してテキストも掲載できると、アクセシビリティが向上するのではと思います。

また、webフォントの利用が適切か、フロントエンドサポートの視点でメリットとデメリットをお伝えしたりもします。アクセスが過度に集中することが見込まれるケースなどでは、上記例のような事象をもとに、プロジェクトに関わるチーム全体で議論する場を作ることも、大事な開発工程の一部と考えています。

webアクセシビリティは自分ごと

最近、社内のテックシェアでも HTML やアクセシビリティのトピックが挙がりました。webアクセシビリティの話題になると、障がいを持つ方向けに語られることがありますが、今回の実例のように webアクセシビリティを向上することは障がいを持つ方だけでなく、利用者全体にとってのメリットになります。webアクセシビリティを向上させるには、上記のような小さく見える事案を、フロントエンドからひとつひとつていねいに捉え、提案し、開発に反映することです。webアクセシビリティを自分ごととして捉え、エンドユーザーと顧客のビジネスをつなぐフロントエンド受託開発のプロとして、知見を共有していきたいと思っています。