こんにちは。FASTCODINGデザイナーの七転び八重子です。
アクセシビリティ対応！完璧ですか？
昨今、公的機関のWebサイトだけでなく、一般サイトにもその対応が広まっています。
一昔前は、身体的制限のある方に向けた対応というイメージがありましたが、デバイスの多様化や、使用する側の環境も様々になり、より多くの人にWebサイトの情報やサービスを利用してもらう為には、なくてはならない対策です。
この機会に、どんな作業をしたら「アクセシビリティ対応をした」と言えるのか、改めて勉強してみようと思います。今回は、具体的な実装の前に、基礎をおさらいしてみます。ちなみに、ファストコーディングでは、WebアクセシビリティはSEOの観点からも重要だと考えています。Webサイトのリニューアル時に合わせて、対応を考えてみてはいかがでしょうか？
アクセシビリティとは
Webを利用するすべての人が年齢や身体的制約、利用環境などに関係なくWebにアクセスできること。
例えば、
・高齢で目が悪く、文字が見づらい。
・屋外でスマホで見ていて、画面が普段よりも見づらかった。
・コンタクトレンズや眼鏡を忘れて、文章が読みづらかった。
・マウスが壊れたが、キーボードだけでは操作しづらかった。
・視覚障害があり、音声読み上げソフトを利用しているが、目的の情報を探すまでに時間を要した。
など様々な状況が考えられ、それら全てに対応していこうというのが、「Webアクセシビリティ」の基本的な考えです。
３つのガイドラインがある
ウェブアクセシビリティという品質を確保する為に、細かく決められたガイドラインが主に３つあります。
・JIS規格：「JIS X 8341-3:2016」 （2004年-2016年改定）
・W3C：「Web Content Accessibility Guidelines（WCAG）2.１」 （2010年-2018年改定）
・国際規格：「ISO/IEC 40500:2012」 （2012年）
３つもあるのかよ！と思うかもしれませんが、安心してください。
2016年に３つのガイドラインでで内容が完全に統一されています。
その後、201年6月にW3CがWCAG2.１を発表しています。
このガイドライン、サイト内の説明がややこしく、１から全て理解するのは大変です。
参考サイトから役立つページをピックアップ
Webアクセシビリティに関するサイトは多岐に渡ります。その中でも、個人的に便利だなと思うサイトとそのサイト内のピックアップしたココみて！と思うページをまとめてみました。
・WCAG 2.0 解説書（WCAG 2.0 を理解して実装するためのガイド2016年）
WCAG 2.0の内容を翻訳しています。
・JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）
これは一番分かり易くて個人的に超絶おすすめです。
・HTML5 Accessibility
主要ブラウザにおけるHTML5の要素や属性のサポート状況、検証結果を公開しています。英語のサイトですが、シンプルに分かりやすいです。
SEOとWebアクセシビリティ
Webアクセシビリティ対策をほとんど意識せず、特別な対策はしていないにもかかわらず現状のサイトはアクセシビリティをある程度確保できている。こういったパータンって結構多くあります。
それは、検索エンジン（ロボット）に対してSEOの観点から、画像の代わりとなるテキスト情報（代替テキスト、alt属性）を指定したり、ロボットがアクセスした際、文書の構造が適切に伝わるように、タイトルや見出しなど、HTMLの文書構造を適切にマークアップするなどの施策が行われているからです。
マシンリーダビリティ
コンテンツをロボットが読み易くする事を「マシンリーダビリティ」と呼びます。
検索エンジンのロボットやスクリーンリーダーは、人の目を持たないプログラムです。SEOの目的でマシンリーダビリティを向上すれば、支援技術でアクセスしやすいものになり、結果的にアクセシビリティ向上につながるのです。
検索結果が重要視される
Webで何かを探そうとするユーザーは、年齢や身体的制限があるないにかかわらず、まず検索エンジンで検索する事がほとんどです。
例えば、お店のアクセス情報を知りたいと思った時、まずはお店の名前で検索します。次にサイト内のナビゲーションに「アクセス」「所在地」などの項目がないか探しますが見当たらない事もあります。その場合は検索エンジンに戻り、「店舗名 アクセス」のように検索し直します。すると、ほとんどの確率で情報がヒットするでしょう。
このように、サイト内のナビゲーションが使いにくければ、検索エンジンで直接探すほうが早く効率的な場合があります。
つまり、SEO対策を考慮したコーディングはアクセシビリティにも良い結果をもたらしてくれるわけです。
最後に
今回は、Webアクセシビリティの基礎を勉強しました。ファストコーディングでは、SEOに強い効果を期待できるセマンティックコーディング（Semantic Coding）を標準で実施しております。
HTMLに意味を持たせることで、検索エンジンが読み取りやすいコード＝SEMで重要となるターゲットキーワードに合致しやすい最適なマークアップとなります。
また、検索結果に詳しい情報を表示できるようになる構造化データの実装や、ご納品するすべてのページにおいてGoogle Pagespeed Insightsでのチェック／高得点化を標準で行っております。
弊社のSEOに最強のHTMLコーディングを是非ご体感ください。
