こんにちは！新卒一年目のこがです😊
エキサイト婚活などの開発を行っております。
昨年から入社したら書くぞ😤とずっと思っててようやく叶いました！よろしくお願いいたします！

はじめに

HTML5カンファレンス、Japan Accessibility Conferenceに参加してみて、弊社のエンジニアをはじめもっと多くの方にWebアクセシビリティについて知って欲しいと思いました。

本記事ではJapan Accessibility Conferenceの内容から、自分が惹きつけられた内容の一部を紹介します。

Q. あなたはWebアクセシビリティに取り組んでいますか？

A.エキサイト株式会社ではエキサイトニュースやエキサイトブログ等様々なWebサービスを提供しています。
新聞や日記を持ち運ぶことができ、アクセスしやすく役に立っていますよね！Webで何かを提供することによって携帯・発見・頑健を満たしており、このことだけでもWebアクセシブルです。

よりアクセシブルなコンテンツの例

以下のようなことを意識すると、よりアクセシブルなWebサービスを実現できるかもしれません。

画像の代替テキスト

例えば上記の画像を次のようにHTMLで記述すると、

<img src="画像URL" alt="男性">

視覚障害者などが利用するスクリーンリーダーではそのまま「男性」と読み上げられ、男性という情報以外何も伝わりません。これをより一層Webアクセシブルにするためには以下のようにします。

<img src="画像URL" alt="イラスト:窓の外のクリスマスイルミネーションを見ながら一人寂しく仕事をする男性">

いかがでしょうか。この記述だと「イラスト:窓の外のクリスマスイルミネーションを見ながら一人寂しく仕事をする男性」と読み上げられ、どんな画像かが想像しやすくなりますね！

Webサイト独自で用意している機能

東京都のサイトのヘッダには、「文字サイズ・色合い変更」、「音声読み上げ」機能があります。

これらの機能を必要としているユーザは、本当にこれらを活用しているでしょうか？そのユーザは、すでにブラウザや支援技術の機能を用いて文字を拡大したり、色を反転させているかもしれません。

文字サイズ拡大ボタンを押しても、一部のテキストしか文字サイズが変わらなかったり、レイアウトが崩れたりしませんか？このような中途半端な実装をすると、ユーザにとって逆効果になるかもしれません。

Webアクセシビリティの第一歩

W3Cによって公開されているWeb Content Accessibility Guidelines(WCAG)というWebアクセシブルなコンテンツを作成するためのガイドラインがあります。
翻訳したものがWeb Content Accessibility Guidelines (WCAG) 2.0にあります。

達成基準はレベルA・レベルAA・レベルAAAの3段階に分かれています。

• レベルA : 最低限の基準
• レベルAA : 望ましい基準
• レベルAAA : 発展的な基準

まずは、レベルAの達成を満たしたいですね！
レベルAでは音声を自動再生しない、動き続ける要素を入れない、ピカピカしないなど最低限の内容ばかりです。
きちんと見出しはh1要素を使う（×見出しっぽくフォントを大きくする）等基本的なことを満たしましょう！

チームでの取り組み

Webアクセシブルなサービスを目指すためには、エンジニアだけでなく、デザイナーやプロデューサー含めチーム全員が意識すべきだと思います。どんなWebサービスにするか、それをどのようにデザインするか、そのためにどうやって開発していくか。それぞれがする役割は違えど、同じ意識を持ってWebサービスを作り上げるとより一層達成できる項目が増えるのではないかと思います。

おわりに

Webアクセシビリティについてはまだまだ初心者ですが、初めて知ったときにはすごく惹きつけられました。（今まで知らなかった😳）
Webアクセシビリティが売上に直結するか？これについては難しい話ですが満たすことでアクセスされやすくなるのは事実です。こういったことから意識していくのは開発者としては非常に大切だなと思うので、積極的に学んでいきたいと思います。

明日はdockerについての記事です！お楽しみに！