Webアクセシビリティの基本を学ぼう!

  • このエントリーをはてなブックマークに追加


近年Webサイト制作時に求められる『Webアクセシビリティ』。

正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。
自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。
一緒にWebアクセシビリティについて学んでいきましょう。

そもそもWebアクセシビリティってなに?

Accessibility』はweb関連で日本語で翻訳したときに「アクセス可能性」「アクセスのしやすさ」などの意味があります。
Webアクセシビリティ対応は高齢者やハンディキャップのある方などに向けた部分も大きいですが、ネットに接続する条件は人それぞれなため、例えばマウスが使えない・ネットワーク環境が遅いなど、様々な状況に置かれている人を想定する必要もあります。

また、Webアクセシビリティは多くの国や地域で法的に義務付けられていたりします。
例えば、アメリカ合衆国では、公共機関や民間企業はWebサイトをアクセシビリティ対応する必要があります。

日本では法的な義務まではありません。
ただ、2024年4月1日の『障害者差別解消法』の改正により、以前よりも対応が強く求められるようになりました。

そのため、例えば自治体のサイトなど色々な方が訪れる可能性のあるサイトは対応しておくのが無難です。

また、Webユーザビリティとも混同されがちですが、ものすごく簡単に言うと
  • Webアクセシビリティは様々な人が根本的に情報自体にアクセスできるようにすること
  • Webユーザビリティはサイトの特定のターゲット層が目標を達成できて、満足度が高くなるようにすること
  • となります。
Webアクセシビリティ対応はサイト作成の基礎、土台となります。

それでは基本的な対応内容について簡単に紹介していきます。

基本的な対応内容

色のコントラストをはっきりさせよう

基本ではありますが、色のコントラストははっきりさせましょう。

デザインの作成時は以下のようなサイトでチェックの必要があります。
自分ではコントラストをはっきりさせていると思っても、チェックをしてみると意外とクリアできていなかったりします。
見栄えの問題などもありますが、Webアクセシビリティ対応が必要な場合はこのあたりをきちんとクリアしていきましょう。

文字サイズを変更できるようにしよう

PC表示の時はユーザーが見やすい文字サイズで閲覧できるように、サイト上に文字サイズを変更できるボタンを設置しましょう。
個人的にここ最近参考になった方法はこちら
cookieまではいかなくてもセッションで保存できる方法なので使い勝手がいいなと思います。

文字を大きくした際に思ったよりも崩れた…ということもあるので、コーディングの際には気を付けて作業を進めていきましょう。

できるだけテキストベースを心がける

先ほどの文字サイズ変更に関連して、例えば普段だったら画像で作りそうな箇所も、対応できる範囲であればHTMLのテキストベースで作成しましょう。
音声読み上げにも対応しやすくなります。

さすがにテキストの装飾を凝っているものは難しいですが、簡易な画像+テキスト程度は対応してみましょう。

画像にはaltを心がけよう

こちらもHTMLの基本にはなりますが、画像にはaltを心がけましょう。
音声読み上げで大事な要素となります。
altの内容についてはタイトルや、画像の詳細を表すテキストを入れていきましょう。

iframeにtitleを付けよう

画像と違って忘れがちですが、iframeにもtitleをtつけるようにしましょう。
例えばyoutubeの動画であれば動画名、Googleマップであればマップのどの位置のマップか、などを記載しましょう。

なるべくリンクには下線を付けよう

リンク部分にはなるべく下線を付けるようにしましょう。
クリックできるかどうか、ユーザーにすぐにわかってもらえるようにするためです。
もしデザイン的に厳しい場合、テキストの色を変えたり、アイコンを付けたり工夫をしましょう。

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

キーボードのTabキーを押下した時に、リンクやinputなどのフォーム入力要素にフォーカスがあたるようにしましょう。
Enterキーを押下するとトリガーになって、リンク先に飛ぶことができるなどの確認も必要です。
リセット系のcssでtab操作の際のアウトラインの表示がなくなっていることもあるので、念のため確認しておきましょう。


まだまだ細かい部分はありますが、まずは基本となりそうなアクセシビリティ対応をご紹介しました。

コーディング時に心がけていればクリアできる部分も多いので、念頭に置いて作業を進めると効率的です。

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。