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】古いWordPressで絵文字を使えるようにするお話

WordPressはLAMP環境で動くCMSとして昔から有名ですが、昔から使われているサイトの場合、絵文字が使えないことがあります。 今回はそういう場合の絵文字を使えるようにしてみましょう 目次1 MySQLのバージョンを調べる2 テーブルの照合順序を変更する3 最近の事情 MySQLのバージョンを調べる 使えるようにしましょうといいつつ、実は大前提があります。 それはMySQLのバージョンが5.5以降であることです。 それ未満のバージョンは「utf8mb4」にできないため、 […]

Webサイト制作

【さくらのレンタルサーバー】環境ごとにPHPのバージョンを変更するお話

最近何かとAI関係で話題の「さくらインターネット」ですが、レンタルサーバーはコスパもよく、かなり使いやすいサービスだと思います。 特にWordPressなどのLAMP環境に最適化された環境であり、PHPもいろいろなバージョンを選ぶことができます。 変更方法も簡単でコンパネからボタン一つでできるので楽ちんですね。 ただ当然なのですがマルチドメインで運用している場合もすべての環境にPHPのバージョンが一斉に反映されてしまいます。 それはそれで便利なのですが、例えばこの環境のみバー […]

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

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

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

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

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