ウェブアクセシビリティ

Web accessibility

ウェブアクセシビリティ規格に対応したページ制作

今、日本では総人口に対する高齢者の割合がどんどん増加しており、世界でも有数の「超高齢社会」となっています。
また、近年様々な要因により障害者の人口も増加傾向にあります。
ケイズ・アートオフィスでは高齢者や障害者を含めて誰もが閲覧しやすいホームページを作成し、
誰もが活躍できる社会を実現するためにウェブアクセシビリティ規格に対応したホームページの制作を行います。

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

住宅建築の分野などで、よく「バリアフリー」という言葉を耳にしませんか?

「障害や障壁がない」ことを意味する言葉です。

例えば、手摺を設置したり、車椅子が通れるスペースを十分に確保したり、段差をなくしてスロープにしたり、ホームエレベーターを設置したりした住宅のことを「バリアフリー住宅」と呼ぶことがありますよね。

バリアフリー住宅を言い換えると

「高齢者や障害者が暮らしやすいように配慮された住宅」と言うことができます。

 

「ウェブアクセシビリティ」はホームページ版のバリアフリーです。

「高齢者や障害者が閲覧しやすいように配慮されたホームページ」を実現するために

例えば、テキストのサイズを変更できるようにしたり、色のコントラスト比を一定以上確保したり、キーボードだけでもホームページ内のコンテンツを操作可能にします。

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

ウェブアクセシビリティにはWCAG(Web Content Accessibility Guidelines)という国際的なガイドラインが存在します。

日本には、そのWCAGを日本版にしたJIS X 8341-3:2016 というJIS規格が存在し、この規格が通称「ウェブアクセシビリティ規格」と呼ばれています。

障害者差別解消法が2016年4月1日より施行され、自治体などの行政機関では、ホームページをこの規格の一定以上のレベルに準拠させることが法的義務となりました。

民間事業者にも努力義務が課せられており、できる限りウェブアクセシビリティに配慮してホームページを作成するように努めなければなりません。

ウェブアクセシビリティに対応したホームページの例

テキストのサイズ変更ボタン

一番読みやすいテキストサイズに自分で調整することができる機能です。

 テキストサイズを変更しても読みにくくなったり文字が途中で切れて読めなくなることはなく、それらを考慮してデザイン&実装をいたします。

 ※WCAG2.0 1.4.4 テキストのサイズ変更(AA)

01

色のコントラスト比を一定以上に

ページの背景色と文字色に似通った色を使用すると、読みにくくなってしまいます。

背景色と文字色のコントラスト比を一定の値以上にすることで、文章の読みやすさを確保します。

マウスオーバー時など、テキストの状態が変化したときにもそのコントラスト比を満たすよう注意して実装します。

 ※WCAG2.0 1.4.3 コントラスト(AA)

02

キーボードだけでもホームページ内の全てのページを閲覧できる

キーボードのTabキーを押すと、ページ内のリンクを辿ることができます。

この機能を利用して、どのページからでも全てのページに到達できるように、サイトを制作いたします。例えばリンクが隠されていて通常見えない位置にある(ハンバーガーメニュー等)場合でも、Tabキーを押すだけで隠されたリンクが現れるように実装します。

03

背景色変更ボタン

ページの背景色は「白」が見やすいという人もいれば「黒」の方が見やすいという人もいます。

 ページに背景色を任意に変更できるボタンをつけて、どちらのニーズにも答えられるように実装いたします。

もちろん背景色に合わせて文字色も読みやすいコントラスト比になるように自動的に調整されます。スマホ等で閲覧時にもし端末が「ダークモード」の場合は自動的にホームページの背景色を暗くさせることもできます。

04

動きを停止可能にする

一般的なホームページではスライダー等「動き」のあるコンテンツをよく見かけますが、動きのあるものを追うことが困難な人や、動きがあることによって注意を逸らされてしまう人にとっては、それは障害となります。

スライダー等継続する動きに対しては「停止ボタン」を設けて、いつでも動きをストップさせることができるようにします。

05

We want to spread the harmony with people through design.