ウェブアクセシビリティガイドラインの関連ドキュメントを活用しよう

バーンワークス株式会社

2024年10月18日 10:11

バーンワークス株式会社の加藤です。

前回のコラム、「ウェブアクセシビリティガイドラインを理解しよう」では、ウェブアクセシビリティガイドラインとしてどのようなものがあるのか、各ガイドラインの関係性や違いなど、基礎的な部分について簡単にお話ししました。

今回のショートコラムでは、ウェブアクセシビリティガイドラインの内容を深く理解したり、具体的な実装方法について考えるのに役立つ、関連ドキュメント（補足資料）について紹介しようと思います。

今回お話しする内容は大きく下記の3点です。

関連ドキュメントって何があるの？
「解説書」で各達成基準への理解を深める
「達成方法集」から実装方法のヒント、あるいは失敗例を学ぶ

「解説書」で各達成基準への理解を深める

先に説明した通り、解説書は、WCAGを理解し、実装するための補足資料で、個人的には、ウェブアクセシビリティを学ぶ際、ガイドラインと合わせてまず最初に熟読することをお勧めする文書です。

まずは解説書に書かれている達成基準の「Intent（意図）」セクションや「Benefits（ベネフィット）」セクション、つまり、どのようなメリットがあるのかという部分を読んでみましょう。また「Examples（事例）」として紹介されているものを読むと、自分が関わるウェブサイト、ウェブコンテンツにおいて、「あの部分が該当しそうだな」といった想像ができたり、あるいは「この事例を見ると、あの部分は達成基準を満たすとは言えないかもしれない」などといった気付きがあるかもしれません。

さらに、「Sufficient Techniques（十分な達成方法）」セクションや「Failures（失敗例）」セクションは、まずは羅列されている項目名だけをひととおり見てみるとよいでしょう。

HTMLやCSS、JavaScriptといった実装技術に詳しくない人であっても、達成基準に関連する達成方法集の項目を読む程度であれば、そこまで負担はないと思いますし、特に「G」「H」「C」ではじまる項目だけでも読んでみると、なんとなく求められていることが理解できると思います。

「達成方法集」から実装方法のヒント、あるいは失敗例を学ぶ

達成方法集は、より具体的な実装方法のヒントを得ることができます。例えば、「1.1.1 非テキストコンテンツ」の達成基準に関連する達成方法として、「H37: Using alt attributes on img elements（H37: img要素のalt属性を使用する）」という項目があります。

HTMLがわかる方であれば、「img要素を使用している部分に関しては、alt属性で画像の代替テキストを提供すればこの達成基準を満たせるんだな」と理解することができます。

もちろん、代替テキストを提供する場合にもその画像が持つ意味によって例外はありますし、実際にはどのような代替テキストを提供するか、その内容（画像と「同等の目的を果たす」と解釈できるものか）の方が重要です。

また、達成方法はこれだけではないので、alt属性さえ使えばそれですべてOKという話にはなりませんが、ひとつのヒントにはなります。

一方で、失敗例はよくやってしまいがちな例がまとめられています。

例えば「完全な装飾目的で、本来は支援技術によって無視されるべき画像に対して代替テキストが与えられてしまっている」といった失敗例を見れば、「あぁ、画像だからと言って何でも代替テキストを付与すればよいわけではないのね」と理解できるでしょう。

注意しなければならないのは、達成方法集はあくまで参考例であって、ここに挙げられている実装をすべて行わなければならない、あるいはここに挙げられている実装方法以外は使用してはいけない、といった極端な理解をしないことです。

また、重要なのは達成基準をアクセシビリティサポーテッドな方法（広く一般的に利用されているブラウザや支援技術などで利用可能な実装方法）で満たすことであって、達成方法集に挙げられている実装方法を使用することではありません。手段と目的が入れ替わらないように注意しましょう。

なお、前回のコラムでも説明した通り、WCAG 2.0とJIS X 8341-3:2016は一致規格です。よって、今回紹介した解説書や達成方法集のうち、WCAG 2.0に含まれる達成基準に関するものは、JIS X 8341-3:2016を理解したり、実装方法のヒントを得るためにも使用できますので、大いに活用しましょう。

参考リンク

さて、今回のコラムはここまで。

最後までお読みいただいてありがとうございます。もし今回の内容が少しでも参考になった、気に入っていただけた、という場合はぜひフォローしていただければ幸いです。

また次回のコラムでお目にかかりましょう。

それでは。

バーンワークス株式会社のショートコラムは、バーンワークス株式会社代表の加藤が、ウェブアクセシビリティやユーザビリティ、HTMLやCSSなど、フロントエンド技術に関する話題を、あまり長くならない範囲で更新していくコンテンツです。一部は、バーンワークス株式会社の公式サイトにおいて、過去に公開されたコラムなどの内容を再編集、再構成したものも含まれます。

なるべく小難しくならないように書こうと努力はしていますが、できるだけ正確な用語を使用し、公式なドキュメントを参照しつつ書こうとすると、ちょっとわかりにくい言い回しになってしまったり、リンク先が英語のドキュメントになってしまったりすることがあります。ご容赦ください。

バーンワークス株式会社について

バーンワークス株式会社は、ユーザー体験を最大化する情報デザインとウェブアクセシビリティ対応を専門分野にサービスを提供する『ウェブアクセシビリティに強いウェブサイト制作会社』です

弊社では、より本質的な視点に立ったウェブサイトの構築、アクセシビリティ対応などの関連サービス、ウェブシステム開発などを創業以来、10年以上にわたり企業、公的機関向けに提供しています。

下記のようなサービスをお求めの企業・団体様、ぜひお気軽にご相談ください。

ウェブアクセシビリティガイドライン（JIS X 8341-3:2016 等）に適合、準拠、または配慮したウェブサイトの構築をお求めの企業・団体様
アクセシビリティ対応プロジェクトの各フェーズにおけるコンサルティングや外部アドバイザーをお求めの企業・団体様
アクセシビリティ対応実務（コンテンツ修正や改善実装）を高いレベルで遂行できる制作チームをお求めの企業・団体様
外部アクセシビリティ専門家によるアクセシビリティ試験の実施や改善提案をお求めの企業・団体様
UX、ユーザビリティ、アクセシビリティに優れたウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
CMSを活用した更新性の高いウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
ヘッドレスCMSやJavaScriptフレームワークを活用した高パフォーマンスなウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
上記のようなスキルを持ったパートナー企業をお探しの広告代理店様、システム開発会社、ウェブサイト制作会社様など

書いている人について

加藤善規（かとうよしき）

埼玉県出身（東京都生まれ埼玉育ち）。専門学校でメカトロニクスを専攻後、製造業での生産、品質管理や、全国チェーン物販店での店舗開発などに従事する傍ら、独学で学生時代から続けていた趣味が高じてIT業界に。

フリーランスによるウェブサイト制作業務等を経て、2004年より都内ウェブサイト制作会社に所属。同社取締役ウェブサイト制作部門統括。2014年、バーンワークス株式会社を設立、同社代表取締役に就任。

ウェブフロントエンド技術、およびIA（情報設計）、アクセシビリティ、ユーザビリティを主な専門分野とし、ウェブサイト制作ディレクション業務、コンサルティング業務の他、セミナー等での講演、書籍の執筆などを行っています。

好きなことはサッカー、フットサル（観戦 / プレー）、モータースポーツ観戦、インターネット、音楽鑑賞、筋トレ、ギター、腕時計鑑賞。サッカー4級審判員、ウオッチコーディネーター（上級 CWC）資格認定者。