2023年上期に従業員サーベイ機能で行ったアクセシビリティ改善内容を振り返る〜WCAG検証の話メインで〜

こんにちは。プロダクトエンジニアのshiraです。
この記事では2023年上期に従業員サーベイ機能で行ったアクセシビリティ改善内容を紹介します。

対象読者

アクセシビリティに興味がある人
SmartHRに興味がある人

従業員サーベイ機能とは

従業員サーベイ機能とは、従業員のエンゲージメントやキャリア希望、ハラスメントの有無など組織や従業員の状態を可視化する機能です。

2023年上期に行ったアクセシビリティの改善について

2023年上期は以下の改善を行いました。

従業員サーベイ機能全体
- FlashMessage（アクセシビリティの課題があるコンポーネント）の置き換え
  - 参考：通知UIを改善している話
従業員がサーベイに回答する画面
- 簡易チェックリストを使ったチェックの結果明らかになった改善事項の改善（入力要素とラベルの関連付けなど）
- WCAG 2.1 各達成基準の検証（以後、記事内ではWCAG検証と表記します）

FlashMessage置き換えに関してはLTで話したスライドがあるのでリンクを掲載しています。本記事ではWCAG検証を中心にふりかえりたいと思います。

WCAGとは

WCAGとは Web Content Accessibility Guidelines の略称で、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅しているガイドラインです。

参考：Web Content Accessibility Guidelines (WCAG) 2.1 - 概要

WCAG検証を行った理由

前提として以前からアクセシビリティ向上のための取り組みを行っており、その一環で従業員がサーベイに回答する画面を対象に簡易チェックリストによるチェックを行ったことがありました。

チェックの結果わかった課題改善を行いつつ、次に何をやるか検討した際、以下を候補に挙げて検討しました。

管理者が使う画面の簡易チェックを行う
従業員が使う画面でWCAG検証を行う

検討の結果、利用者は管理者より従業員の方が圧倒的に多いため、従業員が使う画面の品質向上に引き続き注力していくことにしました。

WCAG検証の経験はあったのか

チームはアクセシビリティへの関心が高い状態でしたが、WCAG検証に慣れている人はいませんでした。

ただ、ありがたいことにSmartHRにはアクセシビリティスペシャリストが在籍しています。

アクセシビリティスペシャリストというのはアクセシビリティを専門とした職能の方で、全社のあらゆるアクセシビリティ向上を推進してくれています。

迷ったり悩んだりするとすぐアクセシビリティスペシャリストに聞ける環境だったので、経験がなくてもなんとかやっていけそうだなと思いました。

WCAG検証をどのように進めたか

試行錯誤の結果、以下形式で進めました。

参加者
- 必須：私とアクセシビリティスペシャリスト1名（maihaさん）
- 任意：チームメンバー誰でも
時間
- 完了するまで毎週1時間実施
進め方
- 1回に達成基準3〜4つ検証することを目安にした
- 前半でその日検証する達成基準の内容を確認し、検証できる状態にした
  - 曖昧な点や疑問、実際の確認手順も確認し、不明点は毎回同席していただいているアクセシビリティスペシャリストの方に聞いて極力その場で解消した
- 検証対象は2ページで検証は私とアクセシビリティスペシャリストの方2名で分担して実施した
- 検証中も不明点があればすぐ聞いて進めた
- 基本思考発話しながら画面を共有して検証を実施
- チームメンバーは質問などがあればslackのスレで質問してもらう
  - 検証中の達成基準関連であれば基本時間内に回答、別の話題であれば時間外に回答するようにした（期待値調整を行って実施）
- 検証結果はスプレッドシートにまとめた
- 検証結果のスプレッドシートとは別に作業メモを残した
  - 達成基準に関するメモ、参考リンク、何をもってOK/NGとしたか、使ったツール、OKだけど改善したほうがいい箇所や判断に迷った点などを記録した

うまくいかなかったこと

実は上記形式に落ち着くまでは時間を30分に設定していました。また、検証時間内に行うことの目的を絞れていなかったためなかなか検証が進みませんでした。

WCAG検証を実施するにあたって、参加したいというチームメンバーの声が多かったため、誰でも参加できるように設定したのですが、「検証を進めること」「チームのアクセシビリティをリードする人（今回の場合私がその役割です）の理解を深めること」「参加者全員が同じレベル感で理解しながら進められること」のすべてを同時に行おうとしたことによって、全てが中途半端になっていました。

2、3回実施したところでこのままでは進まないと感じ、やり方を見直し、上記の形式に落ち着きました。

WCAG検証結果

WCAG検証結果は SmartHR Design System のサーベイに回答するアクセシビリティ検証の結果 - 2023年6月で公開しています！

WCAG検証後見つかったNGが1件ありましたが、検証後すぐに修正・リリースを行ったので現状NGは0件となっています。

また、NGではないが改善したほうが良い箇所もいくつか見つかったので、その点も改善予定です。

WCAG検証を終えた感想

適切にマークアップしておけばAはわりと満たせるなと感じました。適切にマークアップするとマシンリーダブルになり、アクセシブルになるので、改めて大切にしていきたいと思いました。

また、普段はアクセシビリティというと個人的にはスクリーンリーダユーザーやキーボードユーザーなどを意識しがちだったのですが、その他の視点で考慮すべきことを知ることができました。

あとは、WCAGは意図的に抽象的にかかれていることで理解が難しかったり、判断に迷うことが多いと感じるのですが、具体的に書かれていない部分はどうしても解釈が人によってブレやすいと思いました。だからこそ知見共有や意見交換が重要だと思ったし、検証結果の根拠をしっかり記録しておくこと必要があると感じました。

チームメンバーの感想

最後に、半年間の取り組みにおいてチームメンバーからフィードバックをもらったので紹介したいと思います。（文脈が伝わりにくい部分や公開できない内容を一部微調整していますが、ほぼそのまま掲載しています。たくさん感想書いてくれたチームの皆さん...好きです☺️ありがとう。。）

良かった点

WCAG検証会のオープン開催
- maihaさんの解説付きで各項目に対するプラクイティスや、失敗事例の考え方がわかった
- 立場に問わず、誰にとっても不便な状況なのは、よくはないけどそれはそれで平等という考え方とか学びだった
- 従業員サーベイというプロダクトに閉じず、アクセシビリティの考え方の基礎のアップデートができた
チームへの逐次報告&対応箇所の起票
- テストだけじゃなくて改善に繋げてマジで最高だった
- こういうテスト系ってやって満足する現場多いと思うので感謝しかない
アクセシビリティマスター養成講座内容の共有・WCAG検証の実施報告
- 毎週着実に改善が進んでいることや、知見や考え方をチームに少しずつ共有してもらったのがとてもよかった！
- 実際に自分たちが触っているプロダクトの問題点ベースでコミュニケーションが取れたので、単なる講座とかよりもアクセシビリティへの興味なども湧きやすく、自然と知識に繋がった気がする
- 毎週報告することでWCAG対応へのいい意味でのプレッシャーも生まれて、実現の助けにもなったりしたんじゃないかなとも思った
WCAG関連の知見の共有
- 今までアクセシビリティに関してはなんとなく他の人がいっていることベースでしか知らなかったけど、WCAGという体系的な知識を元に色々共有してもらったのでアクセシビリティに関する知見が深まった
従業員回答画面の状態を知ることができた
- 前に辻さんに触ってもらっていい評価をいただいたので辻さん観点から大体大丈夫そうなのはわかっていたけど、基準に沿って検証を行ったことはなかったので実際どういう状態でどういう課題があるのかを認識することができた
非推奨コンポーネントの撲滅への寄与
- FlashMessageはプロダクトデザイングループでも使わないことが決まっており、どう撲滅するかで足踏みしている中で、アクセシビリティの文脈でずいずいっと対応して貰えるありがたさがヤバかった、サイコーだった。
アクセシビリティ文脈でのデザインへのフィードバック
- チームへの共有文脈は他の方も書いているので、別の文脈で話すと、アクセシビリティ文脈でデザインの気になりを提起してくれたり、フィードバックをくれたのは大変良かった。

改善すると良さそうな点

アクセシビリティマスター養成講座内容の共有
- 共有のとき、興味深かった・面白かった・活かせそうみたいな点のみピックアップ的な感じでやるとよりよかったかも😉
  - それか、WCAGのオープン検証でいくつか事例ピックアップするみたいなのでも面白そう
基準も大事ですが、「俺の従業員サーベイ」で古に辻さんにテストしてもらったけど、もしかしたらもう一回当事者の方のテストしたらさらに生きた改善になったかもしれない
WCAGの検証をやれる人を増やしてもよかったかも
- 基本shiraさんに任せっきりで、検証をオープンにしてもらっていたもののそこまで多く参加できていなかったので実際自分が同じようにやれるかというと厳しい
- 一部のテストを他の人にやってもらうみたいなのもあってもよかったかも
WCAGの検証をチームでできるようになるとよかった
- ある程度共有している前提がありつつも、今回shiraさんが異動することで（補足：shiraは7月から別チームに異動しました）、経験の伝承ができない状態になってしまったので、メンバーで入れ代わり立ち代わりできるようになっているとよかったかも（いそがしくて会に出れなかったりした自分が言うのもおこがましいですが、、ありがとう、ありがとう）