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を触るのが好きです。よろしくお願いします。

関連記事

プログラミング

SharePoint リストに書式の変更からJSONで記述してCSSを適用する方法

SharePointのモダンUIで、リストの書式設定をJSON形式で入力することにより、カスタムCSSを適用してみましょう。 今回は、このようなリンクリストを作成します。 WEBパーツで似たような形を作れますが、細かいCSSが調整できません。リストのWEBパーツとして複数のページで使用すると、一度の修正で全てのページに修正が適用されます。サイト内で共通で使いたいパーツをこのように使用すると便利です。 目次1 前提条件1.1 使用できるHTMLタグやCSSが限られている2 リス […]

プログラミング

SharePointで作成したサイトを別環境にコピーする方法(サイトテンプレートの使い方)

SharePointのモダンUIで作成したサイトは、サイトテンプレートを生成すると簡単に複製できます。 テスト環境で作成したサイトを本番環境に移行する場合などに使えるかもしれません。 目次1 前提条件1.1 権限の確認2 手順3 1.カスタムスクリプトを許可する4 2.サイトをテンプレートとして保存5 3.新規サイトを作成6 4.テンプレートを適用 前提条件 SharePoint Online モダンUI チームサイト サイトテンプレートがサポートされているのはチームサイトの […]

プログラミング

SharePoint Framework(SPFx)で作ったカスタムアプリをサイトに追加・公開する方法

SharePointのモダンUI向けに作成したSharePoint Framework(以降SPFx)の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。 今回はサイトに適用するまでの方法と手順をまとめました。 目次1 前提条件1.1 権限の確認2 1.パッケージ化3 2.App Catalogからアプリをアップロード、動作を確認3.1 App Catalogにアクセスし、.sppkgファイルをアップロード3.2 […]

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

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

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

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