「アクセシビリティ」にワクワクした

はじめまして、人事労務freeeのアプリケーションエンジニアをしている19新卒のスポーンです。去年は内定者のアドベントカレンダーを企画したので、よかったらそちらも読んでみてください。

この記事はfreee Developers Advent Calendarの13日目です

アクセシビリティという概念を知った

新卒研修の中に「アクセシビリティ研修」というスケジュールがあり、当時何をやるんだろうとぼんやり考えていました。全盲エンジニアのMaxさんがアクセシビリティとは何か、freeeでやる意義とは何かを伝えてくれる研修で、そこで初めてアクセシビリティという概念を知りました。

僕は今まで全盲の人が身近にいなかったので、彼らがどうやってPCやスマホを扱っているかもそれを支えるWebアクセシビリティという概念もすべてが新鮮でワクワクしたものでした。

誰もがプロダクトを使えるようにする技術、というのはfreeeのコンセプトである

アイデアやパッションやスキルがあればだれでもビジネスを強くできるプラットフォーム

にまさに合致しており、取り組む意義が強いと感じました。

フロントエンド技術として純粋に楽しい

学生時代にフロントエンドに興味を持ってVue.jsでの開発やReact.jsの開発、UXの向上などをやってきた自分にとっては音声読み上げに対応することや、色弱の人でも快適に使えるように色を調整したりボタンをわかりやすくすることはワクワクします。

さらに、普段何気なく使っているOSSのライブラリでも音声読み上げに対応できていないものもあったりして、敷居が高くなりがちなOSSのコミットの入り口としても最適です。

開発合宿で取り組んでみた

freeeでは開発合宿という一泊二日で普段のタスクと関係なく、自分が好きなテーマで開発をできるイベントがあります。 developers.freee.co.jp

何に取り組もうか考えていた時に、「年末調整のアクセシビリティ対応をやってみるか」と思いつきました。

既存実装では確認モーダルが住宅ローンや保険料を入力した時に出るのですが、フォーカスが枠内に当たらないためモーダルが出たことすら音声読み上げでは分かりません。

このままでは音声読み上げユーザーは自分だけで年末調整を完了することができず、大変不便です。さらに年末調整に入力する情報ってプライベートな情報しかないので、他の人にお願いするのもプライバシー的に嫌ですよね。

せっかく年末調整が簡単に行える機能があるのに音声読み上げで使用しているだけで使えないのは非常にもったいないです。

原因はModalのfocusがおかしい

フォーカスが当たらない要素にフォーカスを当てるにはtabindex属性を設定します。しかし、それでは解決しませんでした。

onClick ハンドラが発火し、モーダルが描画されたタイミングで対象のDOM要素に.focus()で当てて上げればよいのですが人事労務freeeで使用されているReact.jsは仮想DOMなので CreateRef() またはReact Hooksを使用している場合useRefを呼び出してDOM要素の参照を作成し .focus()を呼び出す必要があります。

ただ、レンダーのタイミングが別のコンポーネントが干渉していたのか上手く動作せず、 setTimeout(hoge, 0) と0ミリ秒を指定して遅延させてあげることで回避してあげられます。