WEBLIC LLC

ブログ

障害者差別解消法の改正法案にみるウェブアクセシビリティ

Web制作

2024年2月26日

ウェブアクセシビリティ

2024年4月からは、民間のウェブサイトに関しても、障害のある人を含むすべての人が情報にアクセスしやすいように、合理的配慮を行うことが法的に要求されるようになります。そこで今回はウェブアクセシビリティとは何なのか改めて確認していきます。

障害者差別解消法の改正法案とは

障害者差別解消法の改正法案は、社会のデジタル化が進む中で、障害を持つ人々が情報にアクセスする際の障壁を低減する必要性が高まっていることに対応するために提出されました。この改正は、障害のある人々がインターネットを含む情報通信技術を利用する上で直面する課題を解消し、彼らが社会のさまざまなサービスに平等にアクセスできるようにすることを目的としています。具体的には、ウェブアクセシビリティの基準を満たすことにより、ウェブサイトやアプリケーションがより使いやすく、アクセスしやすいものになることを促す内容が含まれています。

ウェブアクセシビリティとは

ウェブアクセシビリティは、Webコンテンツやサービスを、障害のある人々も含め、すべての人が容易に利用できるようにするための設計原則と技術です。これは、画面読み上げソフトウェアを使用する視覚障害者、音声認識ソフトウェアを使用する運動障害者、や易しく理解できるコンテンツを必要とする認知障害を持つ人々など、多様なニーズに対応するためのアプローチを含みます。アクセシビリティの向上は、HTMLの構造的な意味付け、ARIA(Accessible Rich Internet Applications)の使用、キーボードナビゲーションのサポート、適切なカラーコントラストの確保など、技術的な実装を通じて達成されます。これらの実践は、Web Content Accessibility Guidelines (WCAG) などの国際的なガイドラインに基づいており、Webの包摂性を高めることを目指しています。

ウェブアクセシビリティの例

文字と背景のコントラスト比を高くする

目が不自由な人や色覚に障害のある人でもテキストを読みやすくするため、文字と背景の色の差をはっきりさせます。これは、黒字に白背景を使うなど、シンプルな変更で実現できます。

コントラスト比を高くするには色そのものもそうですが、大きさや太さを変えることによってコントラスト比を高めることができます。

単語の文字間にスペースや改行を使わない

テキストを読みやすくするためには、不必要なスペースや改行を避けることが重要です。特に、名前や単語の中にスペースを入れると、画面読み上げソフトでは誤った読み上げをしてしまう可能性があります。

現在ではCMSでクライアント様にて記事を投稿する機会が多いと思いますが、そこでよく見られるのが、インデックスを揃えるためにわざと改行するパターンがあります。この場合、使用しているブラウザ幅によって見え方が変わってくるので意図した見た目にはなりません。不要な改行は無くし、パラグラフごとに改行するのが望ましいです。

キーボードだけで操作できるようにする

キーボードだけを使ってすべての機能にアクセスできるようにすることで、手が不自由な人やマウスの使用が難しい人でもWebサイトを使いこなせます。

近年ではインタラクティブなサイトも増えているため、特にモーダルウィンドウの制御をキーボードだけで操作できるようにする必要があります。

画像にはalt属性(代替テキスト)をつける

画像にテキストの説明を加えることで、視覚障害のある人が画像の内容を理解できるようにします。これは、画像が読み込まれない時にも役立ちます。

リンクであることを認識しやすくする

リンクは、テキストの色や下線を使ってはっきりと区別できるようにします。これにより、リンクを見つけやすくなり、クリックしやすくなります。

色だけで情報を区別しない

色だけで情報を伝えると、色覚障害のある人にはその情報が伝わりにくくなります。そのため、色以外の方法も使って情報を伝えることが重要です。

特にお問合せフォームの必須項目に※印を赤くする場合がありますが、これではウェブアクセシビリティとしては不足です。こういった場合は、項目横に必ず『必須』とわかるようにしましょう。

映像コンテンツには字幕をつける

聴覚障害のある人も映像コンテンツの情報を得られるように、字幕を提供します。これは、音声の内容を文字で読めるようにするものです。

これらの改善点は、Webをより使いやすく、アクセスしやすいものにするために重要です。全ての人が情報に平等にアクセスできる世界を目指して、Webアクセシビリティの実践は不可欠です。

ads

関連記事

Web制作

Dreamweaver CC 2017で自動作成されるcssファイルを作らない方法

エディタをDreamweaver CC 2017に乗り換えて少し気になったことがあります。それはSa...

2017年3月23日

Web制作

Webブラウザで現在地が取得できない原因

弊社で管理しているサイトでGoogle MapsのAPIを使って、現在地を取得するサービスがあります...

2016年11月8日

Web制作

TwitterでOGP画像が表示されない時の対処法

Twitterで記事をシェアしたときに、期待したOGP画像が表示されないことはありませんか?この記事...

2023年8月1日

Web制作

VirtualBoxでGuest Addsinionsをインストールしても画面サイズが変わらない場合の対処法

弊社の制作環境はMacで、制作したサイトのIEチェックはVMwareもしくはVirtualBoxにイ...

2017年3月8日

Web制作

アイコンを軽量化して、Webサイトの表示速度を速くする

Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加すると...

2023年9月7日

  • ads

  • カテゴリー

  • 本日、 1人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog

    ads

    Designed by WEBLIC合同会社