キカガク プラットフォームブログ

株式会社キカガクのプラットフォームブログです。エンジニアやデザイナー、プロダクトマネージャーなどが記事を書いています。

トップ > アクセシビリティ導入の第一歩やってみた

アクセシビリティ導入の第一歩やってみた

キカガク プラットフォーム部 エンジニアの岸です。

私は Web という技術が好きで、中でも アクセシビリティ に関心があります。
アクセシビリティ とは、システムやサービスがどれだけ幅広い状況で利用できるかを示す言葉です。Web アプリケーションのアクセシビリティの向上に取り組むことで、障害の有無や利用している環境、デバイスの違いによらず、誰もがそのサービスを使えるようにできます。

私が入社した時点では、プラットフォーム部にはアクセシビリティに関する知識はほとんどありませんでした。
そこで昨年 10 月に中途入社してからの約 4 ヶ月（執筆時点）でアクセシビリティを組織へ浸透させていくために行った取り組みを紹介します。

取り組んだ内容のほとんどは、私の愛読書である 『Web アプリケーションアクセシビリティ――今日から始める現場からの改善』 の第 7 章、「アクセシビリティの組織導入」の内容を参考にしたものです。

はじめに

やったこと

アクセシビリティに興味があることを言ってみた

最初は本当に小さなことです。

入社してすぐの頃から、「前職ではこういうことをやってて〜、アクセシビリティとか興味あるんですよね〜。」など、自分の興味のある技術領域を話すような機会があればアクセシビリティという単語を出していました。
単純に自己紹介の一部ではありましたが、 まず他のメンバーが「アクセシビリティ」という単語を（意味が分からずとも）聞いたことがある、という状態を作る ことには意義があります。

というのも、私が他の人に知識を伝えるときに意識していることがあります。以前見かけた以下のツイートで説明されていたことです。

新しいことを理解するには、新しい情報をスムーズに「外挿」できることが大事という話です。
知っている知識から遠く離れたことを理解するのは難しいので、基礎知識を持っている（持ってもらう）ことが必要です。

最初から全く知らない情報を知るのは難しいので、まず「名前だけ知ってる」という状態を作ることが重要です。そうしておくことで、具体的な知識を知ってもらう際のハードルを下げることができます。
特に、会社組織のように長期的に関わる場合は、数週間〜数ヶ月のスパンでじわじわと取り組むことができます。

勉強会を行った

プラットフォーム部では、 毎週メンバーがテーマを持ち寄って開催している勉強会 があります。そこで 「アクセシビリティってなんだ？」というテーマの勉強会を開催 しました。

まずは「アクセシビリティという言葉の定義」からはじめ、「アクセシビリティの必要性」、「我々の事業・サービスとどうつながるのか」などを話しました。
この勉強会ではアクセシビリティという言葉を理解してもらうに留め、具体的な方法については追って話すこととしました（別のタイミングで HTML に関する勉強会を開催しました）。

ミッションとのつながり

弊社は 「あるべき教育で人の力を解放する」 というミッションを掲げています。

人の力が解放された社会では、（中略）人はより自由に生き方を選択でき、人は未来を自由に創ることができ、人は未来に希望を持ち、発展していくことができる https://www.kikagaku.co.jp/company

自由に生き方を選択できる社会を作るには、障害の有無・環境の違いに関わらず、誰もが使えるサービスにする必要があると考えています。 そういった話を交えながら、私達の事業とアクセシビリティのつながりを話しました。

資料を残す

勉強会の資料は Notion で作成しました（弊社では全社的に Notion で情報を残しています）。
社員がアクセスしやすい場所に資料を置くことで、後からも見返すことができるようにしました。

細かいことですが、 質疑応答もその Notion ページ内に記入欄を設けて対応 しました。聞いている間に質問があれば記入しておいてください、と案内して、最後にまとめて回答しました。
Zoom のチャットや口頭で受け付けることもできたのですが、資料として残すことで、その日に参加できなかったメンバーや今後入社するメンバーでも質問を含めて確認できるようにしました。

アクセシビリティの雑談チャンネルを作った

Slack に「z-アクセシビリティ」というチャンネルを作りました（弊社では雑談用のチャンネル名には z- をつけるルールがあります）。
投稿しているのは今のところほぼ自分ですが、どの投稿にも複数人がスタンプでリアクションをくれるので投稿の励みになっています。
アクセシビリティ関連の記事やイベント情報を共有することが多いです。

『Web アプリケーションアクセシビリティ』にもありましたが、チャンネル名は「a11y」のような略語ではなく、「アクセシビリティ」という命名にすることで知らない人にもできるだけわかりやすくしました。
また、エンジニアが新しく入社した時に案内するチャンネルのリストにも名前を忍ばせたので、今後入社する人にも入ってもらおうと思っています。

支援技術を試す会 ＆ 小さな改善をした

プラットフォーム部では半年に 1 回の頻度で「開発合宿」というイベントがあります。普段リモートで作業している地方のメンバーも含めて、部のメンバー全員がオフラインで集まる機会です。
そのときに、まとまった時間がないと取り組めないプロダクトの改善に取り組む時間を取ったので、そこで我々のチームはアクセシビリティ改善をテーマにしました。

キーボード操作してみる

まずは問題点を見つけるために、プロダクトをいくつかの状況で操作してみました。

キーボードでの操作を試し、 Tab キーでフォーカスが移動し、 Enter Space キーで操作できることを体験してもらいました。

主要な機能はキーボードで使用できることが確認できました。
あまり意識せずともキーボード操作に問題がなかったのは、弊社のプロダクトで Chakra UI をコンポーネントライブラリとして使っていることは要因の 1 つです。Chakra のライブラリ側でアクセシビリティが考慮されている部分が多く、問題となる部分はあまりありませんでした。
しかし、一部スタイルをカスタマイズしているパーツにおいて、フォーカスリングが見えない（打ち消されている）問題がありました。
他にも、フォームのバリデーションエラーがあってもフォーカスが移動せず、該当箇所がわかりくい問題もありました（これはキーボード操作の場合だけでなく、マウス操作でも影響がある問題です）。

スクリーンリーダーを使ってみる

エンジニアメンバーは MacBook を使っているので、VoiceOver を使ってもらいました。
オフラインで集まったタイミングでできてよかったです（オンラインだと、起動のコマンドや操作のコマンドを伝えるのが難しいのと、音声の配信の管理が難しいので…）。

リストとして表現されているものの、ul li でマークアップされていないので件数が読み上げられない要素や、不適切に role が設定されていることで正しく読み上げられない要素、 ラベルがなく読み上げられないアイコンを発見できました。

小さな改善をしてみる

ここまでに見つかった問題から、取り組めそうなポイントを見つけます。
以下のような観点で選択します。

  • 修正の難易度が低いもの
  • 修正の効果が大きいもの（共通コンポーネントなど、1 ヶ所直せば多くの箇所が直るようなもの）
  • 効果を体験しやすいもの

実際修正に取り組んだのは以下のようなものです。
項目ごとに分担して進めました。

  • フォーカスリングを表示する
  • リストを ul li でマークアップ
  • フォームのバリデーションエラーがあった場合にフォーカスを移動させる
  • ラベルのないアイコンボタンにアクセシブル名を追加
  • 検索結果の「10 件」が「10」と「件」で分かれて読み上げられてしまう問題を修正
  • ランドマークロール（main nav）の指定
  • 不適切な role 属性の削除

改善をアピールする

最後に、他のチームにも向けて改善内容を発表しました。
正しく読み上げられない状態と修正後の状態のビフォーアフターを比較して見せると、「おおー」という声も上がり、改善の効果を感じてもらえたと思います。

効果

アクセシビリティを組織へ浸透させていく初期の段階はかなり成功したと感じています。
これには、入ったばかりの自分の発信を受け入れてくれる会社の風土・部のメンバーの受け入れ力の高さも背景にあります。感謝！🙏

自分自身がアクセシビリティに関する知識を持っていることを知ってもらい、それを共有できたことで、次のような効果がありました。

  • 他のエンジニアの実装時や、デザインの段階でも「アクセシビリティの観点で問題ないですか？」と聞いてもらえるようになった
  • 実装の際に HTML 構造を意識して書いているメンバーが増えた

おわりに

この記事のタイトルを「第一歩」としている通り、まずはアクセシビリティという言葉を導入した段階です。
把握しきれていないものも含めて、キカガクのプロダクトにはまだまだ多くの改善点があります。
今後も継続的に、少しずつアクセシビリティ改善に取り組んでいきます！