アクセシビリティとは？具体例とSEOとの関係も解説

アクセシビリティは、ウェブのユニバーサルデザインのことです。2021年5月の障害者差別解消法改正（※）により、これまで民間企業にとって努力義務だったアクセシビリティの対応が義務化されることが決まりました。

この記事では、アクセシビリティとは何かと、要件、対応例、具体的に何をすればよいかというイメージを持っていただけるような内容を記載します。また、日本において義務化されるまでになった世界のアクセシビリティ対応の流れを解説します。

※当サイトでは「障がい」と記載するポリシーですが、ここでは法律の正式名称を用いています。

アクセシビリティとは

ホームページを利用している全ての人が、
心身の条件や利用する環境に関係なく、
ホームページで提供されている情報や機能に支障なくアクセスし、利用できること

外務省のホームページ「ウェブアクセシビリティ」

上記は外務省のホームページで記されているウェブアクセシビリティの定義です。

制作時、アクセシビリティを考慮する際に行うべきことは多くあります。特にスクリーンリーダーと呼ばれる、ホームページの内容を読み上げるソフトウェアの対応を強く意識する必要があります。

スクリーンリーダーは視覚障がい者など画面を見ることができない方がウェブを利用する際に用いるもので、Windows、iOS、Androidなどには標準で搭載されています。

アクセシビリティの略称について

アクセシビリティは、専門家の間ではA11Y（エーイレブンワイ）と略します。AccessibilityのAとyの間の文字数が11文字だからです。ちなみに私は専門家でしたが、そう呼んだことはありません。呼びやすさはともかく、cが2回、sが2回、iとlが見分けがつきにくい、などで「Accessibility」と書くときに慎重にタイピングしたりはしていますが、A11Yと書いても通じないですしね・・という話はさておき、次からはアクセシビリティの関連規格から、具体的な対応例などについて解説していきます。

アクセシビリティ関連規格

WCAG2.1

ウェブアクセシビリティに関わる規格として、W3C（W3Cのことはこちらの記事を参照ください）が定める「Web Content Accessibility Cuidelines 2.1（WCAG2.1）」と呼ばれる世界的なルールがあります。

参照：
WCAG2.1原文
WCAG2.1日本語訳（ウェブアクセシビリティ基盤委員会による）

WCAG2.1は以下の4つの原則（要件）があり、それぞれに細かい要件が達成基準として定められています。なお、私はWCAG2.1を日本語訳しているウェブアクセシビリティ基盤委員会の委員を務めていたことがあります。

知覚可能	情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
操作可能	ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。
理解可能	情報及びユーザインタフェースの操作は理解可能でなければならない。
堅牢	コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢 (robust) でなければならない。

WCAG2.1の本体文書とは別に、Techniques for WCAG 2.1という達成基準を満たすための達成方法をまとめた文書があります。

参照：
Techniques for WCAG 2.1（原文）
Techniques for WCAG 2.1日本語訳（ウェブアクセシビリティ基盤委員会による）

ISO/IEC 40500

WCAG2.1の前のバージョンであるWCAG2.0をもとに、2012年に国際規格「ISO/IEC 40500」が制定されました。

JIS X 8341-3

「JIS X 8341-3」は、WCAG1.0をベースに2004年に制定されました。その後、WCAG2.0をベースに2010年に改正、2016年にはISO/IEC 40500に合わせる形で2回目の改正が行われています。ISO/IEC 40500はJIS 8341-3が合わせていたWCAG2.0に合わせる形になっているのですが、JISは国際規格に合わせることが求められているため、文言を変える必要があった模様です。

ちなみに、JISの番号8341は、「やさしい」から付けられた番号です。

政府関連機関や、大企業のホームページなどは「JIS X 8341-3」に準拠しているケースが多いと思います。「JIS X 8341-3」は、指定された検証を行うことで、準拠したということを示すことができる仕組みがあります。例えば外務省のホームページでもJISの試験結果を示しているページがあります。他のホームページでも、準拠しているところは大抵、フッターに「アクセシビリティ」のメニューが用意されているので、気になる方は探してみてください。

みんなの公共サイト運用ガイドライン

国、地方公共団体などの公的機関のホームページがアクセシビリティすることを目的とした総務省が定める「みんなの公共サイト運用ガイドライン」があります。2003年に策定、JIS X 8341-3と同じく2010年、2016年に改正されています。これもあり、日本国内においても自治体のホームページなどはアクセシビリティへの配慮がされているものが多いと思います。

アクセシビリティ関連法律

米国

米国では、古くからは「リハビリテーション法501条」があります。これは政府関連機関の調達条件を定めているものです。現在では「ADA法（The Americans with Disabilities Act）」をもとに、「利用できないことによる損害」についてエンドユーザーによる民間企業に対しての訴訟が可能です。訴訟の数は年々増えており、2018年には2,285件でその前年に比べて181%増加、その後も増加しており2019年は2,890件、2020年は3,503件、2021年は4,055件となっています。

参考：
2018 ADA WEB ACCESSIBILITY LAWSUIT RECAP REPORT

Amazon、Netflixなどの大企業が訴訟された事例は数多くあり、また歌手のビヨンセのウェブサイトがオンラインで購入できなかったことから訴訟された事例もあります。

参照：Beyonce’s Parkwood Entertainment Sued Over Website Accessibility

世界の動向

諸外国の法整備は進んでおり、フランスでも訴訟事例があります。

日本

日本においては法整備が遅れていました。障害者基本法（※）ではウェブサイトの利用に関しての要件は触れられておらず、2013年6月に制定された障害者差別解消法（※）でも、「努力義務」となっていました。2021年5月に障害者差別解消法が改正され、その公布日である2021年6月4日から起算して３年以内に、民間企業でもウェブアクセシビリティへの配慮が義務化されることとなりました。

※当サイトは「障がい」と記載するポリシーですが、ここでは法律の正式名称を用いています。

以下に改正前後の記述の比較をします。

障害者差別解消法の改正前

当該障害者の性別、年齢及び障害の状態に応じて、社会的障壁の除去の実施について必要かつ合理的な配慮をするように努めなければならない。

障害を理由とする差別の解消の推進に関する法律の一部を改正する法律

障害者差別解消法の改正後

当該障害者の性別、年齢及び障害の状態に応じて、社会的障壁の除去の実施について必要かつ合理的な配慮をしなければならない。

障害を理由とする差別の解消の推進に関する法律の一部を改正する法律

日本民間企業のアクセシビリティ対応状況

総務省の「令和2年通信利用動向調査報告書（企業編）」によると、企業のホームページでJIS X 8341-3に準拠している企業はわずか5％弱です。

一方で次のグラフはGoogleトレンドという、特定の検索キーワードの検索ボリューム推移を確認できる無料ツールで、「アクセシビリティ」の検索ボリューム推移を調べた結果です。

法改正を境目に、検索ボリュームが2倍程度増加していることが読み取れます。アクセシビリティへの意識の高まりが感じ取れますね。

アクセシビリティの配慮ポイントと対応例

アクセシビリティの配慮ポイントはもちろんスクリーンリーダー対応だけではありません。以下に配慮ポイントと、対応例を示します。

身体機能	対応ポイントと対応例
視覚	画像など視覚的情報だけで情報を伝えないこと。 主にスクリーンリーダー（画面読み上げ）対応。
色覚	色だけで情報を伝えないこと。 例えばグラフの凡例は色だけで違いを示さず、形も変えるなど。
聴覚	音声だけで情報を伝えないこと。 動画など、伝えられるべき音声へのテキスト（キャプション）の表示など。
運動機能	重要な機能は操作が可能であること。 例えば、上肢障がい者のことなどを配慮してマウスだけでなくキーボード操作も可能にすること。
認知	認知の難しい情報提示の仕方をしないこと。 例えば、動くテキストはユーザー自身で止められるようになっていること。

アクセシビリティ対応内容

アクセシビリティに対応するには、上記のような大まかな要件だけでなく、その中の細かい要件を知る必要があります。要件に詳しくないと、十分な対応は難しいでしょう。例えば、「操作可能」という原則（要件）の中に、次のような達成基準があります。

セキュリティのために時間制限を設けるとした場合、制限時間内に達成が難しいユーザーのために制限時間について「解除」「調整」「延長」のいずれかが可能である（WCAG2.1の2.2.1項の意訳）。

こういったものは、私のように要件に詳しい人が監修していればよいのですが、スクリーンリーダー対応については、時間がかかるかもしれません。それも私がコーディングする場合は標準で対応しているのですが、大規模なサイトになると一人でコーディングするわけにもいかず、詳しい人が検証し、修正指示を出すというやり方になると思います。
何をする必要があるのかというと、基本的にはHTMLの仕様に準拠することです。スクリーンリーダーなどのユーザーエージェントは、HTMLの内容を参照して、それをユーザーに伝えます。文章だと判断すれば文章であることを前提に伝えますし、画像だと判断すれば、画像であることに加え、そこに記されている代替テキスト（<img alt="ここに代替テキストを書きます">）を伝えます。それが装飾画像（altをあえて空にしている画像）であれば、目の不自由な方、視覚障がい者にそのことを伝えても邪魔なだけなのでスクリーンリーダーは無視をしてくれます。また、伝えるユーザーエージェントはスクリーンリーダーに限りません。例えばブラウザでCSSをオフにすれば、代替テキストが表示されます。

もうひとつわかりやすい例を挙げると、テーブル（表組）があります。縦にも、横にも見出しが並び交差する表というのがあると思います。画面を見ることができれば、どのセルが、どの見出しとどの見出しに該当するかが分かりやすくてよいのですが、スクリーンリーダーがそれを解釈するには、見出しに印が必要になります。このページにある上記のテーブル（表組）は私によるコーディングで、対応していますので、コードが読める方はぜひ確認してみてください。

もちろん、色のコントラストのことであったり、動画にキャプションをつけることであったりと、スクリーンリーダー以外にも配慮すべきことはたくさんあるのですが、HTMLはアクセシビリティを熟考して仕様が決められているので、まずはそれを強く意識することです。

アクセシビリティとSEOとの関連性

SEOに詳しい方であれば、どこかで聞いた話だと思うでしょう。そうです、アクセシビリティに対応すれば、SEO対策のベースにもなります。

次の図は、SEMRUSHという会社が、AccessibilityChecker.orgとBuiltWithとの協力で調査をした結果を示したものです。

アクセシビリティの対応をしたところ、

• 12%のサイトはトラフィックが増え、
• 73.4%のサイトは自然検索流入が増え、
• 66.1%のサイトが50%以上自然検索流入が増えた

という結果が生まれたということです。

Googleは検索順位を決めるのに、目で見て判断してるでしょうか？少なくともほとんどはそうでないはずです。スクリーンリーダーにしっかりと内容が伝わるようになっているということは、Googleに内容を伝えることに繋がります。

また、Googleは「ユーザーに焦点を絞れば、他のものはみな後からついてくる」の理念が先頭にあります。エンドユーザーにしっかりと伝わる内容になっているかの判断材料として、W3Cの活動に積極的に参画しているGoogleが、HTMLの仕様準拠を確認するのは当然といえます。

アクセシビリティの対応例／具体例

１つ具体例をお示しします。次の情報は画像を使ってません。

それだけでなく、Step1からStep3の見出しと、その中身の箇条書きとの関係を、table要素とul要素を使って構造で示しています。table要素ではなくdl要素を使う手などもあり、それはどちらでも良いと思います。

もちろんレスポンシブデザインにしていますので、PCでご覧の方は試しに、ブラウザの幅を伸び縮みさせてみてください。

画像にして、alt属性の値に代替情報となるテキストを書く、というのでもWCAG2.1はクリアするのですが、これほど視覚的に伝えている情報が多くなると、テキストだけでは伝わりづらくなりますので、構造を伝えることのできるtable要素と、ul要素を使って伝えています。

私の場合、このぐらいのものは画像を作るより、このようにHTMLとCSSを使って表現した方がむしろ時間がかからなかったりします。スマホの幅で試して、微調整というのを繰り返す回数が画像の場合の方が多くなってしまうためです。

以下のそれぞれで、SEOで差がつくのは想像がつくでしょうか？Googleは3の場合が最も内容を理解し、またユーザーにとっても分かりやすいと判断すると私は考えます。

1. 画像で作ってalt属性にテキスト情報さえ与えてない場合
2. 画像で作ってalt属性にテキスト情報でStep1からStep3の内容を書く場合
3. このようにHTMLとCSSだけで情報を伝えている場合

まとめ

私のもとにはSEOで悩みを抱える人からの相談がくるので、サイトを診断すると、ひどい状態であることが多いです。中には、すべて1枚の画像で作られたサイトというのも見たことがあります。

いやはや、よくもまあ、そんなに手を抜く方法を考えるものだと思えてしまうほどですが、

まあひどい！と憤慨してます。

そのサイトに関しては聞いたこともないような格安サーバーが使われてましたしね。それで運用費〇円とか。まあ悪徳業者ってやつですが、そういうのが多いこと、多いこと。

そもそもサーバーはセキュリティにも優れたレンタルサーバーが格安であるのですから、自社でサーバーを用意しようとするなっていう話でして、どうして悪徳業者が自社でサーバーを用意したがるかというと、解約しづらくするとか、運用費で儲けるとか、そういうことです。

ウェブほどに複雑かつ完成度の高いユニバーサルデザインというのは、他に私は知りません。私はそういうことまで考えながらホームページ制作を行っています。新しい仕様が生まれ続け、この場合はどうするのが理想的なんだろう？と探求心が尽きないので、ウェブは面白いです。

そのようなウェブを悪徳業者が汚すのが私は許せません。

ホームページ制作をお考えの方、ぜひ最初から、BringFlowerにお問い合わせください！