SmartHR Tech Blog

SmartHR 開発者ブログ

SmartHRのアクセシビリティ 2021年の取り組みと2022年の進め方

あけましておめでとうございます、SmartHRのプログレッシブデザイングループの @masuP9 です。

本記事では2021年のSmartHRのアクセシビリティの取り組みを振り返り、2022年の進め方についてチラっとご紹介していきます。

SmartHRにとっての2021年はアクセシビリティの専門家が入社し、その取り組みが加速した年でした。ほとんどのプロダクトでアクセシビリティの改善が行われただけでなく、継続的にアクセシビリティの品質を担保する仕組みづくり、多言語対応、またプロダクト以外でもアクセシビリティの改善が行われました。

目次
  1. アクセシビリティの専門スキルを持つ人の入社
  2. プロダクトはもちろんガンガン改善中!
  3. ブランディング・マーケティングのアウトプットのアクセシビリティ改善
  4. 2022年も進み続けます!

アクセシビリティの専門スキルを持つ人の入社

手前味噌ですが、アクセシビリティの専門スキルを持つ@masuP9(私)とアクセシビリティエンジニアの辻さん(@maverick)の二人が入社しました。私は2020年から技術顧問としてアクセシビリティの推進と啓蒙を手伝っていましたが、入社してよりスピード感を持って進められています。

SmartHRにアクセシビリティの専門家がデザイナーとして入社しました!

また9月にはアクセシビリティエンジニアで、自身も全盲の視覚障害当事者である辻さんが入社しました。

辻さんが入社することのインパクトは凄まじく、入社する前から社内のSmartHRのアクセシビリティへの意識を高めるほどでした。辻さんの採用プロセスが進んでいくごとに、日程調整ツールや採用時に利用する説明資料、契約書類のアクセシビリティを、人事を中心に見直し、改善しました。

「俺の」シリーズで社内のアクセシビリティ意識が爆上げ

さらに辻さんは入社後、間を置かずに「俺の」シリーズという勉強会を開催し社内のアクセシビリティ意識を爆上げしています。「俺の」シリーズとは、社内向けにSmartHRの様々な機能をスクリーンリーダーを使って操作する様子を配信するイベントです。

人事評価機能をスクリーンリーダーで操作している辻さんとそれを見守る人事評価開発チームの面々。スクリーンリーダーで読み上げられている箇所がハイライトされ、読み上げられている内容がログとして表示されている。

俺の人事評価の様子

「百聞は一見にしかず」ということわざのとおり、高いアクセシビリティが必要な利用者がどのように自分たちの製品を使っていて、どんな不便や不都合があるかを目の当たりにするのがアクセシビリティの必要性を認識するのに一番良いように思います。

この「俺の」シリーズには、開発者だけではなくセールスやカスタマーサクセス、マーケティングのメンバーも多く参加してくれています。SmartHR社の全社員があらゆることを「自分ごと」にしていく強さを感じる出来事でもありました。

「SmartHRは目の見えない人でも使えるんですよ!」

この「俺の」シリーズとあわせて、辻さんにSmartHRの従業員の方が使う機能を一通りスクリーンリーダー(NVDA)で検証してもらいました。その結果、不便な点はありつつも機能ごとの主要なタスクは完遂できる品質にあることが判りました。これまでのアクセシビリティ品質の向上が、一定の結果を出せたということでもあります。

このことで、社外の人に「SmartHRは目の見えない人でも使えるんですよ!」という説明がされているのを聞くようになりました。アクセシビリティとUIに力を入れていることが、端的でわかりやすく説明できるようになった手応えを感じました。

オフィス・社内環境のアクセシビリティ向上

辻さんの入社は、社内の意識、プロダクトだけでなくオフィスや社内環境のアクセシビリティ向上も促進されています。

社内報や社内のドキュメントの画像に代替テキストが付与されはじめています。特に新型コロナワクチン職域接種2回目の副反応状況をまとめてみた|株式会社SmartHRは力作?です!

辻さんが利用する社内のウェブサービスについても、色々と開発元にフィードバックを送っています。特にDocBase(ドックベース)さんは色々と改善いただきありがとうございました!

また全社で集まるような会議では、UDトークを用いた字幕を提供するようになりました。経営状況をオープンに共有する場を支える、SmartHRコミュニケーションデザイナーの工夫

プロダクトはもちろんガンガン改善中!

プロダクトも継続的に改善が行われています。リリースノートに「アクセシビリティ」のカテゴリを追加したところ、2021年は21件の改善がリリースノートに掲載されていました。リリースノートに掲載されていない改善もたくさんあります。

ウェブアクセシビリティ簡易チェックリストの活用

おおよそWCAG 2.0のシングルA相当のチェックが簡単に行えるチェックリストを作成しました。このチェックリストを作ってから、プロダクトの開発チームが自発的にチェックし、改善に至っているケースを見かけます。

ウェブアクセシビリティ簡易チェックリスト | プロダクト | SmartHR Design System

Google Spread Sheet のスクリーンショット。確認項目とその詳細、参考URL、適用、結果、担当者、メモを入力する箇所がある。

ウェブアクセシビリティ簡易チェックリストのためのスプレッドシート

特に分析レポート開発チームではチーム全体でチェックと改善を行い、様々な改善が行われました。また一番新しい機能である人事評価では、開発の初期段階からアクセシビリティの品質の担保を意識されていました。

その成果か、「俺の人事評価」でもリリース後すぐに目的となるタスクが完了できるなど、一定の品質で提供できています。

ウェブアクセシビリティ方針の策定とSmartHR UI のアクセシビリティ試験結果公開

これらのプロダクトのアクセシビリティを支えているのが、サービス間共通で利用しているUIライブラリのSmartHR UIです。

このSmartHR UIを対象にSmartHRのウェブアクセシビリティ方針を策定し、WCAG 2.0・JIS X 8341-3:2016のシングルAを目指して改善と試験を行いました。試験は8月と12月に2回実施しました。試験結果としては残念ながら完全に準拠できず一部準拠となりましたが、かなりの問題が解決されています。

SmartHR Design Systemのウェブアクセシビリティ方針ページのスクリーンショット。ウェブアクセシビリティ方針 SmartHRのウェブアクセシビリティ方針です。社会の非合理を作り出さず、一人でも多くの人が価値ある仕事に取り組めるようなプロダクトを目標にしています。社会の非合理をつくりださない SmartHRは「社会の非合理を、ハックする。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。そのため働く人の権利や仕事の楽しさについて考え、一人でも多くの人が価値ある仕事に取り組めるようなプロダクトを目標にアクセシビリティの向上に取り組んでいます。具体的には「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」、に加えて「Web Content Accessibility Guidelines 2.1」に対応することを目標としています。

SmartHR Design Systemのウェブアクセシビリティ方針

プロダクトは原則、SmartHR UIを用いて開発されているので、SmartHR UIをアップデートしていくだけでアクセシビリティがどんどん高まっていく体制ができています。

勉強会・登壇

プロダクトの改善が自発的に行われていく中で、専門家まかせではなく、開発者のアクセシビリティのスキル獲得も自発的に行われています。

2020年から続けられていた「わいわいWAI-ARIA(WAI-ARIA Authoring Practices輪読会)」によるアクセシブルなUI実装のスキル獲得は、SmartHR UIに限らず各プロダクトのアクセシビリティを高めています。

またSmartHRヘルプセンターとプロダクトの文言を担うUX ライティンググループでは、Ameba Accessibility Guidelinesの輪読会が行われています。理解可能にあたる項目はもちろんのこと、それ以外も貪欲にスキル獲得していっています。プロダクトに関わる全員の意欲が高いことがわかると思います。

また年末に行われたReact Conf 2021では、フロントエンドエンジニアのTafuさんが「Accessible Japanese Form Components with React」というタイトルで登壇しました!React Conf 運営からもアクセシビリティ!ええやんええやん、と言われたとか言われてないとか。アーカイブもあり、日本語翻訳字幕もありますので是非ご覧ください!

多言語対応

またSmartHRでは多言語対応にも力を入れています。2021年はより多くの画面を多言語でも閲覧可能にしただけでなく、ヘルプページも従業員の方が見るページを中心に多言語対応を進めました。

多言語対応は、アクセシビリティの取り組みとは別に行われていましたが、この度多言語対応の責任者がデザイナーチームに異動となり、より多くの人が使えるようにするためのデザインとして取り組んでいます。

ブランディング・マーケティングのアウトプットのアクセシビリティ改善

2021年は、マーケティングのアウトプットでもアクセシビリティ向上の取り組みが進められました。SmartHRでは年間を通して多くのマーケティング・ブランディングに関わる制作物が生まれています。なかでも、特設ウェブサイトを中心にアクセシビリティが考慮されました。

特に働くの実験室(仮)のウェブサイトでは、ビジュアル表現のコンセプトとアクセシビリティのコンフリクトが起きていたところを、コミュニケーションデザイナーやコンセプトオーナーと初期から表現を検討することにより一定の品質を担保できたように思います。

ウェブサイトだけでなく、すべての制作物に対して品質の取り組みが進められています。特にカラーユニバーサルデザインについて多くのアウトプットがありました。

特にカラーユニバーサルデザインについて多くのアウトプットがありました。

SmartHRの制作物はどう見える?「色覚検証ワークショップ」開催レポート

また営業資料やプレゼンテーションで用いられるスライドのテンプレートにおいても、多分にアクセシビリティの向上がされています。

スライド・資料 | アイコン | SmartHR Design System

フォント・カラーガイドのスクリーンショット。仕様を推奨するフォントや色が示されている。フォントは游ゴシック体、色では視認性の観点からテキストにブランドカラーを使わないよう注意喚起されている。

デザインシステム内のフォント・カラーガイド。スライド内で使用を推奨しているフォントやカラーの規定を記載しています。

4枚のスライドのスクリーンショット。グラフごとに各項目の数値を色に頼らずに見分けやすいようなレイアウトや配色の推奨セットと見分けにくい非推奨パターンが例示されている。

グラフのガイド。色に頼らずに見分けやすいような推奨色の組み合わせと見分けにくい非推奨の例を示しています。

2022年も進み続けます!

大盛りだった2021年のアクセシビリティ改善。この記事では紹介できなかった改善も多くありました。ですがさらにまだまだ改善をすすめていく必要があります。

2022年、SmartHRを社会インフラとすべくアクセシビリティと多言語対応を進める専門組織「プログレッシブデザイングループ」を立ち上げてよりアクセシビリティを進めていきます。

プログレッシブデザイングループは、アクセシビリティ、多言語対応を中心に「エッジユーザーの使える」に責任を持つチームです。働くすべての人を後押しするために、理想的なユーザーだけでなく、障害を持っていても、日本語を使えなくてもSmartHRを「使える」。それを実現し、より新しい価値を生み出していきます。

プログレッシブデザイングループについては、また別途紹介する記事を書く予定です。2022年のSmartHRのアクセシビリティについてもご期待ください!