フロントエンド弱者のPOがウェブアクセシビリティ勉強会をやってみた

本稿はJCB Advent Calendar 2025の12月9日の記事です。

こんにちは。JCBデジタルソリューション開発部 JCB Link(ジェーシービーリンク)チームでプロダクトオーナーをしている原田です。

開発者の頃はインフラ、バックエンドを中心に育ちフロントエンド開発経験の浅い私が、ウェブアクセシビリティについて学んだことをJDEPの内部で勉強会をやってみました。という記事になります。

ウェブアクセシビリティについての基礎知識だけでなく、JDEPが立場やプロダクトを超えてフラットに勉強会を開催している組織だということが伝われば本望です。本稿では、勉強会自体の進め方と、実際に話した内容、それぞれについてご紹介します。

1. 勉強会の進め方と参加者の属性

参加者の属性

JDEPに所属する各チームのPO/SM/DEVの様々なロールの方、アプリチーム/QA/SRE/アーキテクト/デザイナー。新卒からベテランまで、40名弱の多様な方々が参加しました。JDEPでもユーザー接点となるプロダクト開発を多数行っているため、みなさん興味のあるテーマだったようです。

勉強会の進め方

今回の勉強会では、講義を聞くという受動的な学びで終わりにするのではなく、能動的な学習による知の定着。SECIモデルでいうならば内面化フェーズとして、形式知(講義での学び)を暗黙知(個々のノウハウ)に変えることまでを狙いとし、以下の流れで進めました。

  1. ウェブアクセシビリティの最低限の知識を揃えるための簡単な座学を実施。
  2. 参加によるウェブアクセシビリティをテーマにしたディスカッションを実施。

以降では、実際に勉強会で説明した座学の内容やディスカッションの様子をご紹介します。

2. 座学(入門知識)

アクセシビリティとは

Accessibility = Access[近づく・アクセスする] + Ability[能力・できること]

つまり、アクセスのしやすさであり、サービス、プロダクトの使いやすさのことです。

ユーザビリティと似ていますが、それよりも幅広い利用状況や様々な利用者を前提としているものがアクセシビリティです。

「アクセシビリティ」と聞くと障がいのある方向けの対応を想起される方もいらっしゃるかもしれませんが、アクセシビリティは万人のためのものです。例えば、老眼で文字が見えづらくなった人向け。怪我をして一時的に松葉杖をついている人。地方の人や東京に住む人など。万人のためのものです。

ウェブアクセシビリティとは

名前の通りウェブのアクセシビリティのことです。障がいのみではなく、利用環境や年齢その他理由にかかわらずウェブで提供されている情報やサービスを利用できること。またはその到達度を意味しています。

ウェブアクセシビリティを確保できている状態とは

ウェブアクセシビリティを確保できている状態として、『ウェブアクセシビリティ導入ガイドブック』(デジタル庁)には次の状態となることが望ましいと記載されています。

  • 目が見えなくても情報が伝わる・操作できること
  • キーボードだけで操作できること
  • 一部の色が区別できなくても情報が欠けないこと
  • 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること

また、World Wide Web(ウェブ)/HTTP/HTML/CSSなどの考案者であり、ウェブの父と呼ばれるティム・バーナーズ=リー(Tim Berners-Lee)氏は、1997年10月22日にはWorld Wide Web Consortium (W3C)にて以下のことを提唱しています。

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." 「ウェブの力は、その普遍性にあります。障がいの有無にかかわらず、誰もがアクセスできることが不可欠です」

インターネットやウェブで使用されている技術は開発思想として、誰でも使えることを念頭に開発されるということ。JDEPで開発しているウェブプロダクトも、だからこそアクセシビリティを確保することが大切ということですね。

恩恵を受ける人とは

『令和4年生活のしづらさなどに関する調査』(厚生労働省)を元にすると、日本だけで少なくとも415.9万人が恩恵を受けるとのことで、その数は年々増加傾向にもあるようです。

例えば、視覚障がいのある人がよく使うものとしては・・・。

  • スクリーンリーダー(画面読み上げソフト)
  • 点字ディスプレイ
  • 文字拡大
  • 画面拡大
  • 色反転

一時的な障がいの例としては・・・。

  • 眼鏡を忘れて文字がよく見えない。
  • 利き手を怪我してマウス操作ができない。

など。本記事では割愛しますが、勉強会では『ウェブアクセシビリティ導入ガイドブック』(デジタル庁)を参考とした具体例も紹介しました。

一般的によくある誤解

こちらも、『ウェブアクセシビリティ導入ガイドブック』(デジタル庁)を元に知識の共有会を行いました。

  1. 補助のための機能を設置すれば、アクセシビリティが確保できるという誤解。 ウェブサイトや情報システムに補助機能を付けるよりも前に、利用者がそれぞれのデバイスの設定機能で変更しようとしている文字サイズや色変更に対応できるような実装や、読み上げて意味が伝わるようにコンテンツを作成すること、操作がきちんとできるように実装することを優先することが大切です。
  2. 自動チェックツールを使ってページやサイト全体をチェックして改修することだけがアクセシビリティ向上の方法であるという勘違い。 ツールで検知できるのは3割程度までであり、ウェブアクセシビリティは基本的に 「人がチェックをする必要がある」 ということ。

実際の勉強会では、これらの基礎知識の他にJCB社内で平準化されている『ユーザビリティ・アクセシビリティ(UAガイドライン)』や、WAICことウェブアクセシビリティ基盤委員会が公開しているJIS X 8341-3:2016 達成基準 早見表(レベルA & AA)など、実務で参照すると良いノウハウについてもご紹介しました。

3. JDEPメンバーで意見交換してみた

上記で紹介したような前提知識を学習した後に、ランダムに振り分けられた5~6人ごとのグループに分かれて、私の用意した設問についてディスカッションしました。

[問1] これまでのキャリアでウェブアクセシビリティ観点での不具合改修をしたことある?

まだ経験のない若手メンバーに対して、経験されたことのある方が当時のお話しされている場面が多々見受けられました。

[問2] 普段ウェブアクセシビリティを確保するためにチーム、個人ではどんなことしている?

上段の学習パートでもご紹介した、JCB社内で平準化されている『ユーザビリティ・アクセシビリティ(UAガイドライン)』について会話されているグループから、普段のテストについて踏み込んだ会話をしているグループもありました。

[問3] どういうことをすれば、できればもっと良くなる?

  • ウェブアクセシビリティ観点を満たしたUIパーツがあると開発品質上がりそう。
  • お金も、時間も有限の中で両立って大変だけどやらないといけないよね。
  • ToC向けとToB向けのプロダクトで求めらるものに違いがあるのか。
  • ブラウザの特性や早見表の存在は知っておいた方が良い。

など。すぐに答えが出なかったり解決まで時間がかかる課題もありますが、気づき、考え続けることが大切なのではないかと私は思っています。

※画像はディスカッションの様子です。詳細の文字がギリギリ読み取れないサイズかと思いますが、雰囲気だけでもお伝えします。

4. おわりに

今回の勉強会を通じて、JDEPメンバーがウェブアクセシビリティについて考えるきっかけを(少しは)作ることができたのではないかと思います。

今後もアクセシビリティに限らず、どうすれば良いプロダクトになるのかを考えながら開発に携わっていければと思います。

そして、チームや立場を越えてユーザーのために、より良いプロダクトをつくるために話し合いができるJDEPは素敵だなと改めて思ったのでした。

「採用募集中です!」のお知らせ

最後に、JCBでは我々と一緒に働きたいという人材を募集しています。 詳しい募集要項等については採用ページをご覧下さい。

©JCB Co., Ltd. 20︎21