SmartHR Tech Blog

SmartHR 開発者ブログ

エンジニアが挑戦できる、SmartHRのアクセシビリティへの取り組み

エンジニアが挑戦できる、SmartHRのアクセシビリティへの取り組み

こんにちは!SmartHRプロダクトエンジニアのhimiです。
スキル管理機能の開発チームに所属しており、普段の業務では主にフロントエンドの実装を担当しています。

先日アクセシビリティ本部のメンバーのサポートを受けながらWCAG達成基準の検証を実施したので、その様子や試験の結果を紹介します!
SmartHRならではのエンジニアがスペシャリストのサポートを受けながらアクセシビリティに積極的に取り組める環境を知っていただければ幸いです。

WCAGとは

WCAG(Web Content Accessibility Guidelines)はWebアクセシビリティを実現するための国際基準です。
検証を行うことで、視覚や聴覚、認知などに障害がある人々がプロダクトにアクセスしやすいかを確認できます。
アクセシビリティの達成レベルとして「A」「AA」「AAA」の3段階があり、ユーザーがコンテンツにどれくらいアクセスしやすいかの目安になります。

なぜ試験をしたのか

スキル管理機能のアクセシビリティを社外にも公開し、障害のある方でも使えることを知ってもらうためです。
SmartHRのプロダクトのアクセシビリティ検証結果は以下のページで公開しており、誰でも確認できます。
機能ごとの検証結果 | アクセシビリティ | SmartHR Design System

また個人的にアクセシビリティに興味があり、自分が開発しているプロダクトのアクセシビリティを検証することへのモチベーションもありました。
SmartHRに入社する前から興味はあったのですが、会社で開催されていたアクセシビリティマスター養成講座に参加したり、他チームの取り組みを知る中で、もっとアクティブに取り組んでいきたいと思うようになり、今回試験を実施することにしました。

試験の内容

期間

2024年8月下旬から開始して、2024年10月上旬に全ての項目の検証が完了しました。

メンバーと役割

試験は以下のメンバーで行いました。

  • himi(プロダクトエンジニア)
    • 役割:試験の進行管理、試験を行う
  • yoriさん(アクセシビリティテスター)
    • 役割:試験を行う
  • maihaさん(アクセシビリティスペシャリスト)
    • 役割:WCAG達成基準の解説
  • たじまんさんDaichiさん(アクセシビリティエンジニア)
    • 役割:WCAG達成基準の解説、NG項目の修正

試験対象と試験項目

スキル管理機能のうち「申請を提出する」プロセスと、「コースを受講する」プロセスの2つで利用する画面を対象としました。
試験項目については、レベルAの項目は全て、レベルAAについては4項目を試験項目としました。

進め方

毎週木曜日と金曜日に1時間ずつ時間を取り、全てオンラインで試験を実施しました。
進行は毎回以下のような流れでした。

  • 前半30分でその日検証する項目の達成基準を読み込む(2〜3個程度)
  • 後半30分でその日読み込んだ項目の検証を実施

Zoomでオンライン会議をしている。参加者は5名。「WCAG達成基準 3.3.2: ラベルまたは説明を理解する」の解説ページが画面共有されている。
試験をしている様子

試験の結果

以下のページから確認可能です。
スキル管理 | 機能ごとの検証結果 | SmartHR Design System

結果としては一点不適合な項目がありました。SmartHRが開発しているOSSのコンポーネントライブラリSmartHR UI由来の問題だったのですが、アクセシビリティエンジニアのDaichiさんに修正していただき、現在は全て適合しています🎉
fix: FormControl内のInputFileのアクセシブルネームに可視ラベルを含める by daiHash · Pull Request #5056 · kufu/smarthr-ui

感想

WCAGの試験を行うのは初めてだったのですが、アクセシビリティ本部のメンバーにサポートしていただいたおかげで短い期間で試験を終えることができました。試験中にわからない事があった場合、具体例を用いながら丁寧にわかりやすく説明していただけたおかげで、WCAG達成基準への理解が深まりました。
不適合が殆どなかったのは、SmartHR UIでコンポーネント単位のアクセシビリティが担保されていることと、チームの開発フローの中にウェブアクセシビリティ簡易チェックリストを利用したアクセシビリティの検証を組み込んでいたことが主な要因だと思います。

また、実際に試験を実施して「WCAGに準拠すること」が目的になってはいけないと思いました。
目的はあくまでも「誰もが使いやすいサービスを提供する」ことであって、試験はその目的に対して現時点の進捗を確認したり、抜けている観点が無いか確認する作業に過ぎないです。
中にはWCAGに準拠していたとしても、障害のある人にとって使いやすいとは言い切れないケースもありました。
「WCAGに準拠していればそれで良い」という考え方は危険で、本来の目的である「誰もが使いやすいサービスを提供する」ことを常に意識したいと思いました

そして、勤務時間をアクセシビリティの試験に使うことについて快く受け入れてくれたチームのメンバーにも大変感謝しています。
アクセシビリティにリソースを割くことへの前向きな姿勢もSmartHRの特徴の一つです。
SmartHRのコーポレートミッションである「労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。」の誰もがには当然障害のある方も含まれており、全社的な取り組みをコーポレートミッションが牽引してくれているように感じています。

We Are Hiring!

SmartHRでは一緒にアクセシブルなプロダクトを作っていく方を募集しています!
少しでも興味があれば、是非カジュアル面談のお申し込みからよろしくお願いします。

hello-world.smarthr.co.jp

open.talentio.com

open.talentio.com