アクセシビリティ女子：てげてげアクセッシぶる★（エンジニア編）【序章】

キーワード：

初めまして！フロントエンド・エンジニアの佐古です。
プランニング部のチームリーダーで、一児の母です。宮崎出身という理由で魔法少女のようなタイトルをつけられてちょっと…恥ずかしいです…。

さて！「webアクセシビリティ（以下、アクセシビリティ）」について、ルート・シーのアクセシ女子が語るというこの画期的？な企画、第2回は私からエンジニア目線で語らせていただきます！

「序章」では、アクセシビリティ対応をすると、普段のweb制作とこういうフローが変わってくるというところをお伝えしようかなと思います。

ガイドラインが命

アクセシビリティ対応のオーダーが来たときに、一番最初にしなければならないことは「ガイドラインを読み込む」です。ディレクターやデザイナーたちとともに読み込むと、お客さまごとに力を入れておられるところが違ったり、内容が古いということなんかが見えてきます。

実はガイドラインにもちょっとしたブームのようなものがあって、「スキップリンク」のように今では必須とされていないものが記載されていることがあるんです。ルート・シーではそれらを一件ずつチェックし、お客さまに再制定をご提案しています。

ちなみにガイドラインは「JIS規格」や「WCAG」という規格を基に作成されています。
「JIS規格」と「WCAG」の違いや、「ガイドラインなんてない」というお客さまはどうするか…？など、【ガイドライン編】についてはきっと寺澤が後日記事にしてくれるはずです！

ガイドラインのポイント

最初に「どこまでやるか」をしっかりと決めておくことがとにかく重要です。方針が明確になっていないと、制作過程やサイトの品質に問題が発生してしまいます！

画像やalt属性の問題

画像というと「弱視や色覚に障がいがある方のためのコントラスト比」が真っ先に思い浮かぶかもしれませんが、アクセシビリティ対応ではalt属性も重要になってきます。

通常のwebサイト制作では、基本的に私たちエンジニアやコーダーが適したalt属性を入れていますが、画像が見えない人にも画像の内容が伝えられるようにする「アクセシビリティ対応のalt属性」となると、一筋縄ではいきません！

ちなみに「コントラスト比」は障がいの有無にかかわらず、「モニターの発色が悪い」や「明るい外光の下」といった状況化でも見えやすいようにするということがアクセシビリティ対応なのです。

これも後日【画像編】で書こうと思っていますので、お楽しみに！

画像やalt属性のポイント

画像が見えない人にも画像の内容が伝えられるようにするalt属性は、ディレクターが文面を指定する作業が必要になってきます。

キーボードだけで動く？

アクセシビリティ対応では、基本的にキーボードだけで操作が完結することが望ましいとされています。それがなぜなのかはまた後日詳しく書こうと思いますが、モーダルウィンドウ、アコーディオンメニュー、ハンバーガーメニューなどがEnterキーで開き、ESCキーで閉じることができるか？を確認しながら制作します。