こんにちは！Grow Group広報担当のイトウです。
Webサイトは私たちの生活において、もはや電気や水道と同じような公共インフラと言っても過言ではないでしょう。
しかし、そのインフラを誰もが同じように使えているかという問いに対し、自信を持ってイエスと言える制作現場はまだ多くありません。
そんななか、先日「ウェブアクセシビリティ」がテーマの勉強会が開催されたので、今回はその内容をお伝えします。
目次
ウェブアクセシビリティとは？
語源から考えてみる
アクセシビリティ（Accessibility）は「アクセス（Access：近づく、利用する、到達する）」と「アビリティ（Ability：能力、〜できる）」を組み合わせた造語です。
つまり、アクセシビリティとは、だれもが能力や状況に関係なくアクセスできるという意味になります。
そしてウェブアクセシビリティは、「Web」と「アクセシビリティ」を組み合わせた造語です。
ウェブアクセシビリティと聞くと、多くの人が障がい者のための使いやすさや福祉的な配慮と思いがちですが、本質的な意味は利用者の障害の有無やその度合い、年齢、利用環境にかかわらず、あらゆる人々がWebサイトで提供されている情報やサービスを利用できることを指します。
私たちはいつか必ず当事者になる
アクセシビリティがカバーする範囲は想像以上に広く、実は私たち全員が含まれているそうです！
勉強会では、以下の3つのレイヤーでターゲットが整理されました。
長期的・恒常的な障害や特性（Long-term）
- 視覚障害： 全盲（スクリーンリーダーで音声情報を得る）、弱視（画面を拡大したりハイコントラストにしたりする）、色覚特性（赤と緑、青と黄色などの判別がつきにくい）。
- 聴覚障害： 聴力が部分的、または完全に失われている。動画に字幕や手話通訳がなければ、音声情報を得ることができない。
- 肢体不自由： 手や指を自由に動かせない、震える、あるいは欠損している。マウスのような精密な操作が困難で、キーボード、音声入力、視線入力、スイッチ入力を利用する。
- 知的・発達障害： 複雑な文章や構造、あるいは動く要素や明滅する光が大きな負担やパニックの原因になることがある。
- 加齢による変化： 高齢者は視力低下（老眼）、コントラスト感度の衰え、高周波音の聞き取りにくさ、記憶力や集中力の低下など、複合的な困難を抱える可能性が高い。
一時的な機能制限（Temporary）
- 怪我や病気： 利き手を骨折してマウスが使えない、結膜炎で強い光が眩しく画面が見づらい、耳の炎症で音が聞き取りにくい。
- ライフイベント： 乳幼児を抱えていて、常に片手が塞がっている状態でスマホを操作しなければならない。
状況的・環境的な制限（Situational）
- 物理的・外的環境： 満員電車で吊り革を持っていて片手しか使えない。屋外の非常に強い日差しの下で画面が反射して見えない。駅や工事現場の騒音で動画の音が聞こえない。
- 技術的制約： 通信制限がかかっていて画像が読み込めない（この場合、alt属性のテキストが情報の命綱になる）。古いブラウザや低スペックな端末を使用している。
このように考えると、ウェブアクセシビリティはいつか、あるいは特定の状況下で『支え』を必要とする私たち自身のためのものであり、その対応は全てのユーザーにとってのユーザビリティ向上に直結しそうですね。
努力義務から「合理的配慮の義務化」へ
Web業界にとって2024年は歴史的な転換点でもあり、障害者差別解消法の改正法施行により、これまで行政機関のみに課せられていた「合理的配慮の提供（※）」が、民間企業においても努力義務として課されることになりました。
最近は行政機関や民間企業が取引・発注の条件に、ウェブアクセシビリティ対応を含め始めているそうです。
海外（EU・米国）ではウェブアクセシビリティが不十分なサイトという理由で、企業が訴えられるケースもあったとか…！
法的に整備されたことで、アクセシビリティに関する不備を放置することは、企業のガバナンスや社会的責任（CSR）の観点からも無視できないリスクとなりました。
※合理的配慮の提供について
https://www.gov-online.go.jp/article/202402/entry-5611.html
ウェブアクセシビリティ、何から始めればいいの？
ウェブアクセシビリティの品質を測るモノサシとして、国際基準である「WCAG（Web Content Accessibility Guidelines）」が存在します（ウィーキャグと呼ぶそうです）。
そして、日本産業規格である「JIS（Japanese Industrial Standards）」。
まずは2つの関係性について知ることが、ウェブアクセシビリティ向上に取り組むうえでは欠かせません。
「WCAG」と「JIS」の階層構造をマスターする
現在の主流はWCAG 2.1や2.2ですが、日本のJIS（JIS X 8341-3:2016）もこのWCAGをベースに策定されています。
国際規格（ISO/IEC 40500:2012）とも一致しており、WCAG = JISの内容は基本的に同じものと捉えてよいでしょう。
ウェブアクセシビリティ「4つの基本原則」
WCAGは具体的なチェック項目の土台として、以下の4つの基本原則を定義しています。
そして各原則のなかに、どのようなことをすればウェブアクセシビリティが達成できるのかという基準が設けられています。
知覚可能（Perceivable）
目や耳で、どんな状態でも情報を取得できること。
操作可能（Operable）
キーボードや障がい者の方が使う支援ツールへの対応ができること。
理解可能（Understandable）
利用者やブラウザなどのプログラムが、コンテンツを理解できること。
堅牢性（Robust）
スクリーンリーダーなどの支援ツールが正しく機能するようにHTML/CSSを正しく書くこと。
勉強会では各原則と達成基準の関係について、下記のような図式でも示してくれていました。
ウェブアクセシビリティの向上のためには、これらの原則と基準を意識して達成していく必要があります。
ウェブアクセシビリティの達成基準とは
では実際に、ウェブアクセシビリティに対応しよう！となった場合、どこまで達成したら対応したことになるのでしょうか。
もちろん、すべての達成基準をクリアできるに越したことはないのですが、JISでは達成基準のランクを3段階で示してくれています。
このランクは難易度という意味ではなく、アクセシビリティを確保するうえでの必要性の高さにもとづいています。
ウェブアクセシビリティ達成基準のランク
レベルA（最低限の基準：25項目）
この基準を達成していないと、サイトを閲覧できないユーザーが存在しうる状態です。
全てのWebサイトが最低限クリアすべきラインです。
レベルAA（望ましい基準：＋13項目）
この基準を達成していないと、サイトの閲覧が困難な場合があります。
法的・社会的な要請に応えるためには、このレベルAAへの対応が標準的な目標となります。
レベルAAA（発展的基準：＋23項目）
この基準を満たしていると、よりサイトの閲覧がしやすくなります。
サイト全体でAAAを達成するのは現実的に非常に困難ですが、重要なコンテンツ（利用規約やマニュアルなど）に部分的に適用することは非常に有効です。
ウェブアクセシビリティ対応の表記ルール
さらにJISでは各レベルに対して、どのくらい対応するかという度合いを3段階で示しています。
ただし、どの対応度であっても、自社の姿勢を示す「ウェブアクセシビリティ方針」を策定し、公開する必要があるとのことです。
勉強会では各対応度についてのイメージを添えながら教えてくれていました。
準拠
イメージ：達成基準を全部達成できている
一部準拠
イメージ：達成基準に対して一部達成している
配慮
イメージ：達成基準に対してなるべく頑張っている
次の章では、実際にウェブアクセシビリティ方針を公開している3つの組織について、達成事例を見ていきます。
ウェブアクセシビリティ達成事例3選
＜事例1＞ 朝日新聞社：現実的な「一部準拠」の運用
朝日新聞社は、レベルA・AAに「一部準拠」することを目標としています。
https://www.asahi.com/corporate/web_accessibility/
- ポイント： 特筆すべきは例外事項の明記です。過去の膨大なアーカイブ記事や、外部から提供されるバナー広告、そしてPDFファイルなど、現時点での対応が技術的・コスト的に困難なものを正直にリストアップしています。
- 学び： 「100点満点でないと公開してはいけない」という思い込みを捨て、現状の課題をオープンにすることが、ユーザーや社会からの信頼獲得に繋がっています。
＜事例2＞ 宇都宮市：公共組織としての「完全準拠」
自治体サイトである宇都宮市は、レベルAAに「準拠」しています。
https://www.city.utsunomiya.lg.jp/about/webaccessibility/1012231.html
- ポイント： 公共性が高い組織は、誰一人として行政サービスから除外してはならないため、厳しい準拠を目指します。
- 学び： アクセシビリティは福祉ではなく権利の保障であるという、自治体としての強い覚悟が見てとれます。
＜事例3＞ 株式会社ノベルティ：民間企業の「配慮」からのスタート
採用サイトにおいてレベルAに「配慮」することを掲げています。
https://recruit.noveltyinc.co.jp/accessibility-policy/
- ポイント： 予算やリソースが限られる中で、まずはレベルA（最低限）から、かつ配慮（できる範囲で）と宣言することで、無理のない継続的な取り組みを行っています。
- 学び： 最初から高いハードルを設定して挫折するよりも、等身大の宣言から始める方が、制作現場への浸透もスムーズになります。
クイズで学ぶ、ウェブアクセシビリティ対応の基本例
勉強会では、ウェブアクセシビリティ対応の基本例をクイズ形式で出題・解説してくれました。
ここでは実際に出題されたクイズのうち、3つをご紹介します。
Q1：コントラストについて
こちらの答えは、1が正解です。
テキストまたは文字画像は、背景色に対して少なくともコントラスト⽐ 4.5 : 1 以上が必要となります。
また⽂字サイズや太字などによっても求められる要件が変化します。
Q2：フォームについて
こちらの答えは、2が正解です。
プレースホルダーは補助的で、⽀援技術では⼗分に認識されません。
ラベルは⾳声読み上げ機能の対象になり、視覚・聴覚的にも常に情報を提供できます。
Q3：リンクテキストについて
こちらの答えは、2が正解です。
1の「詳しくはこちら」だけでは、リンク先の内容がスクリーンリーダー利⽤者や検索エンジンには伝わりにくく、さらに複数の「詳しくはこちら」が並ぶページでは、どれがどの内容なのか区別できなくなってしまいます。
そのためリンクテキストには「何について詳しく⾒るのか」といった、内容を具体的に⽰すテキストにすることで、⾳声読み上げユーザーが内容を理解しやすかったり、視覚的にも、どのリンクなのか直感的に分かるというメリットがあります。
最後に
勉強会の後も質問が活発に飛び交い、「ウェブアクセシビリティの観点からするとこっちの表示が良いのはわかるが、デザイン的にはこう表示した方が易しいのではないか？」などの議論もありました。
ウェブアクセシビリティの各達成基準をクリアするための方法は、状況によって様々な角度からの対応方法が考えられることもあり、一概にこの対応方法が絶対正しいと言えない部分もあるようです。
私たちGrow Groupとしても今後も模索していきながら、サイト制作現場での提案に活かしていきたいと思います。
