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

キーワード:

  • アクセシビリティ
  • フロントエンド・エンジニア
  • コーディング
てげてげ アクセッシぶる★(エンジニア編)

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

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

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

ガイドラインが命

ガイドラインのイメージ図

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

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

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

ガイドラインのポイント

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

画像やalt属性の問題

画像のイメージ図

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

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

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

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

画像やalt属性のポイント

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

キーボードだけで動く?

キーボードのイメージ図

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

キーボード操作のポイント

完成してからキーボードで動くかをチェックしても遅いので、常に確認しながらコードと戦うことが重要です!

スクリーンリーダー(音声読み上げソフト)と格闘

スクリーンリーダーのイメージ図

アクセシビリティ対応と言えば、スクリーンリーダー(音声読み上げソフト)対応だと思っている方も多いはず。

ルート・シーではVoiceOverとPC-Talkerの2種類の読み上げソフトに対応したコーディングをしています。もちろん2つのソフトがいつも同じ挙動をするわけではなく…早くおともだちになれるようがんばりたいです。これら2つのソフトの違いなどは、また詳しく書いてみたいと思います。

スクリーンリーダー(音声読み上げソフト)のポイント

今までどおりのコーディングだと画面表示の順番に読み上げてくれないという問題が出てきました。こちらも今後詳しい記事を書いてみたいと思います。

まとめ

ササッと挙げてみただけでも、アクセシビリティ対応には通常の制作と比べ、注意しなければならないことがたくさんあります!エンジニアとしてできることはもちろんですが、ディレクターやデザイナーと協働することが重要ですね。

今後は上記項目についての深掘り記事を書いていこうと思っていますので、更新はルート・シーFacebookページで確認してくださいね!一緒にアクセシビリティを学びましょう!

お問い合わせ

アクセシビリティ対応など、webに関するご相談はこちらから

お問い合わせ | web制作会社 ルート・シー

キーワード:

  • アクセシビリティ
  • フロントエンド・エンジニア
  • コーディング

< ノウハウのトップへ戻る