ウェブアクセシビリティ ミニマムスタートのすすめ
バーンワークス株式会社の加藤です。
前回のコラムで、ウェブアクセシビリティに取り組む上で重要（というより目標とすべきもの）なのは、「ウェブアクセシビリティへの取り組みが当たり前に組み込まれた組織、制作プロセス、あるいは運用体制の構築」です。というお話をしました。
今回のコラムでは、この体制構築の話に関連して、特にウェブアクセシビリティ対応にはじめて取り組むクライアントなどにお勧めしているアプローチ、小さく始めて、徐々に対応可能範囲を拡げていく、ミニマムスタートの考え方についてお話ししようと思います。
今回お話しする内容は大きく下記の3点です。
いきなり多くのことに取り組むのは大変
小さく始めるメリット
「達成基準 1.1.1 非テキストコンテンツ」を使ったミニマムスタート
いきなり多くのことに取り組むのは大変
ウェブアクセシビリティを組織に浸透させ、長期的な取り組みとするには、最低限、次のような準備が必要と考えます。
社内ガイドラインの整備（達成基準を満たすために、具体的にどのようなデザインや実装、更新などの運用をするべきか、という社内ルールを策定する）
品質チェック体制の確立（社内ガイドラインに従ってデザインや実装、更新が行われているかをチェックし、問題があれば修正するための仕組み作り）
これら社内ガイドラインや品質チェック体制の組織への浸透（同時にガイドラインや品質チェックの仕組み自体を改善、メンテナンスしていくサイクルも回さないといけない）
例えば社内ガイドラインの整備ひとつを取り上げても、最初から運用に耐えるものを精度高く作り込むのはかなり難しいのが現実です。
最初から「適合レベル AA に該当する達成基準すべて」などといった高い目標を掲げてしまうと、ガイドラインやルールを整備したり、品質チェックの仕組みを作るだけでもかなりの労力がかかることは想像できるのではないでしょうか。組織として、ウェブアクセシビリティにはじめて取り組む場合はなおさらです。
小さく始めるメリット
そこでミニマムスタートです。
小さく始めることで初期の立ち上げスピードが速くなるのはもちろん、まずはひとつの達成基準のみに集中できるため、運用上、実際に生じた問題点も把握しやすいですし、そこから改善策や、次の取り組み時に事前に対策すべき課題などを洗い出す作業も容易になるというメリットがあります。
小さく始めることで、いわゆるPDCAを小さく早く回すことが可能になり、短期間で社内に経験とナレッジを溜めることができますし、その運用に慣れてきたら対象とする達成基準を徐々に増やして行くことで、無理なく対応範囲を拡大していくことが可能になります。
「達成基準 1.1.1 非テキストコンテンツ」を使ったミニマムスタート
具体的な達成基準を使ったミニマムスタートの例を挙げてみましょう。WCAG、および JIS X 8341-3:2016 における「達成基準 1.1.1 非テキストコンテンツ（以降、「非テキストコンテンツの達成基準」）」を使用する例です。
非テキストコンテンツの達成基準は、社内ガイドラインや品質チェック体制を最初に作る題材として、とても使いやすい達成基準です。また、画像など、非テキストコンテンツに対する代替テキストや代替コンテンツの提供は、ウェブアクセシビリティ対応として、最初に取り組みやすく、利用者にもたらすメリットも大きいという点が、この達成基準を最初に選ぶことを推奨する理由です。
まずこの達成基準を理解する必要がありますが、WCAG 2.0の日本語翻訳版から当該達成基準を引用すると、下記のように求められています。
1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)
コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 (コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照。)
時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。 (メディアに関するその他の要件は、ガイドライン 1.2を参照。)
テスト: 非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。
装飾、整形、非表示: 非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。
簡単に言えば、画像などの非テキストコンテンツ（テキスト以外のコンテンツ）に対して「同等の目的を果たす代替テキスト」が基本的には求められていて、一部例外があると。例外の代表的なものとしてはその画像など（非テキストコンテンツ）が、完全な装飾目的で意味を持たない場合などが該当するということです。
ここであまり詳しく説明しだすと長くなってしまうので、今回は、過去に弊社のナレッジブログで過去に書いた、画像の代替テキストに関する記事を掲載しておきますので参考にしてください。達成基準単体の解説はまた別の機会に掘り下げる予定です。
例えばある画像に対する代替テキストを考えるとき、達成基準の内容に照らし合わせれば、下記のような思考プロセスが必要になります。
画像は情報としての意味を持っている？
情報としての意味を持つとして、その画像は単体で利用されている？それとも他のテキストとの組み合わせや文脈の中で使われている？
ある文脈の中で画像が使われている場合、その画像が文脈の理解にどの程度影響を与えている？
その画像はリンクやボタンなどの中にある？
リンクやボタンの中で使われているとして、その画像が存在しない場合にリンクやボタンの機能を理解するのは困難になったり不可能になる？
全部に該当しないとして、それは装飾や整形目的？
などなど。
何が言いたいかというと、単純に「画像単体」だけをみて、その内容を代替テキストに入れればOK、というほど単純ではないということです。その画像がどのような文脈で使われているか、といった部分を正しく理解しなければなりません。
また、ひとくちに「画像と同等の目的を果たす代替テキスト」といっても、それがどのようなテキストになるかについては、恐らく画像を見る人によって十人十色、各人各様に変わることが想像できると思います。
つまり、「唯一絶対の正解」など存在しないことが、難しさでもあり、考える楽しさでもあるわけです。
これを踏まえて、社内ガイドラインを作ることを想像してみてください。「画像には代替テキストを付ける」「img要素にはalt属性を付ける」とだけ書いておけば終わる…… わけがないことはすぐに想像できるのではないでしょうか。
社内でウェブサイトに掲載するコンテンツの原稿を作成する人や、ウェブコンテンツの実装、更新をする人（その中には今日入社したばかりの新人さんや、はじめましての外部委託先の方も含まれるかもしれません）が代替テキストを考える際に、ある程度誰がやっても似たような代替テキストが導き出されるようなルールを考えるのはそんなに簡単なことではありません。
例えば画像の使用形態ごとにいくつかの例を挙げながら代替テキストの例を提示するような、理解しやすい内容の工夫も必要かもしれません。
これは品質チェックにおいても同じです。何かチェックシートと「img要素にalt属性が付いている」という項目だけを作って、そこに機械的にチェックを入れるだけでは、その代替テキストが適切なのかのチェックにはなりません。また、チェックシートは運用を誤ると、その項目をクリアすることだけが目的となり、手段と目的が入れ替わる結果を招きますので運用面でも注意が必要です。
このように、たったひとつの達成基準を考えただけでも、組織内で制作するウェブコンテンツの品質を一定に保つためには、チーム内で議論しながら、どういうガイドラインやルールを整備するのがよいのか、どうやって品質管理をするか、その方法はどうするのかを決めたり、実際に運用して試行錯誤するそれなりの手間と時間がかかることがわかります。
しかし、このような一見、遠回り、まどろっこしく感じるやり方が、実は長期的に見れば最も効率的、かつ失敗の少ない方法だったりもします。
ですので、もしウェブアクセシビリティに取り組みたいが、どこからはじめたらよいのか、興味がありながらも迷っている方などがいらっしゃいましたら、今回紹介した、達成基準をひとつ使っての体制構築練習をまずは試してみていただけるとよいと思います。
また、もしウェブアクセシビリティに取り組むにあたって、専門家によるサポートが必要な企業さまがいらっしゃいましたら、ぜひ弊社にご相談ください。
さて、今回のコラムはここまで。今回はじめて「ショートコラム」といえる文章の長さに収まった気がしていたのですが、文字数をみる限りそんなに変化ないですね……
最後までお読みいただいてありがとうございます。もし今回の内容が少しでも参考になった、気に入っていただけた、という場合はぜひフォローしていただければ幸いです。
また次回のコラムでお目にかかりましょう。
それでは。
バーンワークス株式会社のショートコラムは、バーンワークス株式会社 代表の加藤が、ウェブアクセシビリティやユーザビリティ、HTMLやCSSなど、フロントエンド技術に関する話題を、あまり長くならない範囲で更新していくコンテンツです。一部は、バーンワークス株式会社の公式サイトにおいて、過去に公開されたコラムなどの内容を再編集、再構成したものも含まれます。
なるべく小難しくならないように書こうと努力はしていますが、できるだけ正確な用語を使用し、公式なドキュメントを参照しつつ書こうとすると、ちょっとわかりにくい言い回しになってしまったり、リンク先が英語のドキュメントになってしまったりすることがあります。ご容赦ください。
バーンワークス株式会社について
バーンワークス株式会社は、ユーザー体験を最大化する情報デザインとウェブアクセシビリティ対応を専門分野にサービスを提供する『ウェブアクセシビリティに強いウェブサイト制作会社』です。
弊社では、より本質的な視点に立ったウェブサイトの構築、アクセシビリティ対応などの関連サービス、ウェブシステム開発などを創業以来、10年以上にわたり企業、公的機関向けに提供しています。
下記のようなサービスをお求めの企業・団体様、ぜひお気軽にご相談ください。
ウェブアクセシビリティガイドライン（JIS X 8341-3:2016 等）に適合、準拠、または配慮したウェブサイトの構築をお求めの企業・団体様
アクセシビリティ対応プロジェクトの各フェーズにおけるコンサルティングや外部アドバイザーをお求めの企業・団体様
アクセシビリティ対応実務（コンテンツ修正や改善実装）を高いレベルで遂行できる制作チームをお求めの企業・団体様
外部アクセシビリティ専門家によるアクセシビリティ試験の実施や改善提案をお求めの企業・団体様
UX、ユーザビリティ、アクセシビリティに優れたウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
CMSを活用した更新性の高いウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
ヘッドレスCMSやJavaScriptフレームワークを活用した高パフォーマンスなウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
上記のようなスキルを持ったパートナー企業をお探しの広告代理店様、システム開発会社、ウェブサイト制作会社様など
書いている人について
加藤 善規（かとう よしき）
埼玉県出身（東京都生まれ埼玉育ち）。専門学校でメカトロニクスを専攻後、製造業での生産、品質管理や、全国チェーン物販店での店舗開発などに従事する傍ら、独学で学生時代から続けていた趣味が高じてIT業界に。
フリーランスによるウェブサイト制作業務等を経て、2004年より都内ウェブサイト制作会社に所属。同社取締役ウェブサイト制作部門統括。2014年、バーンワークス株式会社を設立、同社代表取締役に就任。
ウェブフロントエンド技術、およびIA（情報設計）、アクセシビリティ、ユーザビリティを主な専門分野とし、ウェブサイト制作ディレクション業務、コンサルティング業務の他、セミナー等での講演、書籍の執筆などを行っています。
好きなことはサッカー、フットサル （観戦 / プレー）、モータースポーツ観戦、インターネット、音楽鑑賞、筋トレ、ギター、腕時計鑑賞。サッカー4級審判員、ウオッチコーディネーター（上級 CWC）資格認定者。
Blog: https://hyper-text.org/
Twitter（X）: @burnworks
Bluesky: @burnworks.bsky.social