freeeの開発情報ポータルサイト

国内最大級デジタル情報アクセシビリティカンファレンス「Japan Accessibility Conference vol.2」に登壇してきた

f:id:ryo_abe:20190720164412j:plain
Japan Accessibility Conference vol.2 に登壇するfreeeのメンバー(©noblejasper

こんにちは、freeeでiOSアプリ開発をしているabeです。

2019年7月20日にAbema Towersで開催された Japan Accessibility Conference digital information vol.2 (以下、JAC)に、freeeのアクセシビリティーおじさん達(nakaneさん, ymrlさん, melonさん, abe)で登壇してきました。 (iharaさん、nobjasさんは運営スタッフとして参加)

japan-a11y-conf.com

prtimes.jp

Japan Accessibility Conference(JAC)とは

Japan Accessibility Conference vol.2 のメイン画像

JACは、アクセシビリティに関わっている人やコミュニティにスポットライトをあてたいという思いから、企業内でアクセシビリティに関わっている人などの有志によって運営されているイベントです。 日本におけるアクセシビリティの盛り上がりを可視化する目的で、2017年11月に開催された第一回目に続き、二回目となる今回は、「デジタルインフォメーション」をテーマに、デジタルアクセシビリティに軸をおいた会となりました。

【イベントレポート】日本最大級のアクセシビリティイベント「Japan Accessibility Conference - digital information」開催|freeeのプレスリリース

日本最大級のアクセシビリティーイベントとのことで、当日は約300名が来場され、日頃企業内でアクセシビリティーにまつわる活動に取り組れている方々の話や障がい者当事者の話など、24名のスピーカーによる14のセッション がありました。 freeeは前回のvol.1に引き続きスポンサー もさせていただきました。

(前回の様子) developers.freee.co.jp

freeeはこんなことを話してきました

nakaneさんがファシリテーターをしている様子
nakaneさんがファシリテーターをしている様子(©noblejasper

freeeでは全盲エンジニアがiOS/Android/WebUIエンジニアにダメ出しした結果と題し、nakaneさん: ファシリテーター、パネラー: ymrlさん/melonさん/abeで、日頃のアクセシビリティー対応を進める過程でnakaneさんから受けたフィードバックや、それぞれのエンジニアのアクセシビリティーにかける思いなどをパネルディスカッション形式で話してきました。

www.youtube.com

スライド

(以下、各テーマごとにパネルディスカッションの内容)

これまでどんなフィードバックが(nakaneさんから)ありましたか?

  • ymrl(WebUI)
    • アイコンに代替テキストがセットされていないためスクリーンリーダーで読み上げられない(社内用語:「虚空を探る」
    • フィードバック:「チェックボックスがある(らしい)んだけど読み上げられない。スタイルの問題かな?」
    • スタイルシートでチェックボックスの幅を0にして、独自のチェックボックスを実装するテクニックがある
    • だが、NVDAでは幅0のチェックボックスを読み上げらなくなるということにnakaneさんからのフィードバックで気がついた
  • abe(iOS)
    • フィードバック:「iOSの人事労務アプリで半休って取れないの?まだ未実装なのかな?」
    • 半休の機能は実装されており、VoiceOverも対応済みだった
    • セルをタップすると半休や出勤などの勤怠の種類を選べるセレクトボックスが表示されるのだが、タップできることにnakaneさんは気づけず、その機能がないと思ったとのこと
    • (後日談だが、そのセルがタップできることはaccessibilityHintというヒントを使って読み上げられていたが、nakaneさんはヒントをoffにしていたため読み上げられていなかったことが判明した。とはいえ、セルのタイトルがデフォルトで「出勤」となっていためボタンと認識しにくかったのが原因とも言える)
  • melon(Android)
    • フィードバック:「Androidの人事労務アプリが全然読み上げられないみたいなんだけど、なんでだろ??」
    • 読み上げは正しくできていたが、読み上げるまでに1秒ほどかかっていたため読み飛ばしてしまっていた
    • 読み上げる文字量が多いと読み上げるまでに時間がかかる模様。読み上げる文字量をバラして調整した

開発の中でアクセシビリティーを意識するようになったのはいつ頃からですか?

パネルディスカションで melon さんが話している様子
パネルディスカションでmelonさんが話している様子(©noblejasper

  • melon(Android)
    • 去年の夏ころにAndroidの人事労務freeeのTalkBack対応を初めたのがきっかけ
    • それまで意識したことがなかったためそんな世界があるのかとハッとした
  • abe(iOS)
    • アクセシビリティーはお金がある海外の企業が取り組むものだと思い込んでいた
    • iharaさんやnakaneさんがjoinされたことがきっかけに
    • 調べてみると情報量が少なかったため、自分が情報を発信していくと界隈で目立てそうだなと思った
  • ymrl(WebUI)
    • freeeに入った5年半前から出来ることは取り組んでいた
    • ただ、「手を加えることでどれくらいのことが出来るようになるのか」や「やれていないとどれくらいの人が困るのか」といった実感はなかった
    • そのため気になるところにaria-labelを差し込んでみたりなどはしていたが、周りに強くやろうよと言ってこなかった
    • そんな中、nakaneさんが入社される前にダメ出し会をやってもらった際に、「ここがダメだとこれが出来ないのか」、「ここが出来てるからここが使えてるのか」といったことが見えてきて、そこから急激にちゃんとやらんとあかんと思い始めた
  • nakane
    • やはり近くに当事者がいるというのは影響が大きいと言えそうです
    • 当事者は使えないというフィードバックだけでなく、ここは使えてるよというフィードバックも大事そうですね

アクセシビリティーを意識した開発に必要な情報はどのように集めていますか?

  • ymrl(WebUI)
    • 自分が狙った情報が無いのでnakaneさんに聞いてしまう
    • あとは自分でとにかく試す
    • また、ほとんど場合、jsを使わずにHTMLのみで構成されているものであればReactでも出来るはずなので、Reactでの実装といった観点では調べてない
    • そもそもReactをやってる人でアクセシビリティーに興味がある人はあまりいなさそう
  • abe(iOS)
    • VoiceOverにおける情報というのはほとんどない
    • やはりApple公式のAPIリファレンスや、WWDCのaccessibilityのセッションが情報源になる
    • 標準的な画面ではなく、カスタムされた画面だと途端に読み上げられなかったりする
    • 会計iOSアプリのとある画面のVoiceOver対応に困っていたら、解決したいことがWWDCでまんま話されていた
  • melon(Android)
    • Google公式のリファレンスを情報源に対応している
    • 基本的にはこれである程度読み上げられる
    • だが、nakaneさんに見せると「これでは良くないね」といったフィードバックをもらう
    • そこからは情報は無いのでnakaneさんに確認してもらいながらトライアンドエラーで試していく

アクセシビリティー改善に取り組んでみて直面した難しさはどんなところですか。また思っていたより簡単だったことはありますか?

  • ymrl(WebUI)
    • 難しさ
      • MacのVoiceOverで検証しているが、nakaneさんはNVDAを使用しているため挙動が異なることがあった
      • 一方では大丈夫だが一方ではうまく動かない、といったことがあって一筋縄ではいかないなと感じた
    • 簡単さ
      • 前述の虚空についてはパターン化されているため、やり方が分かればあとは展開していくだけ
  • abe(iOS)
    • 難しさ
      • アクセシビリティー対応にのみ時間を割けるわけではなく、OKRタスクやbugfix等の通常業務ももちろん抱えているため、作業時間の確保が難しい

最近取り組んだことで自慢したいことありますか?

パネルディスカションでymrlさんが話している様子
パネルディスカションでymrlさんが話している様子(©noblejasper

  • ymrl(WebUI)
    • ブランディングチームが作った配色パレットを使って、2色の全組み合わせからコントラスト比を計算する巨大なGoogleスプレットシートを作った
    • これによりコントラスト比が足りていない組み合わせがひと目で分かるようになった

最近悩んでることはありますか?

  • melon(Android)
    • デザイナーやエンジニアなど、皆のアクセシビリティーに対して意識合わせが難しい

最後に一言

パネルディスカションでabeが話している様子
パネルディスカションでabeが話している様子(©noblejasper

  • ymrl(WebUI)
    • デザインシステムを使ってコンポーネントを配置したら勝手にアクセシブルになっているような仕組みを実現するぞ
  • abe(iOS)
    • iOSのVoiceOver対応は簡単だぞ!凝ったような画面になると途端に読み上げられなくなったりするのでコマ目に確認すると良いですよ
    • VoiceOverは健常者にとっても便利だよ。記事を読んだりするのが捗ります
  • melon(Android)
    • 人事労務freeeのTalkBack対応はできているが、会計がまだなので完璧にしていきたい
    • 親切だねと言われるようなアプリにしていきたい

他にも様々なセッションがありました

当事者への質疑応答セッションの様子
当事者への質疑応答セッションの様子(©︎shizooo85

精神・発達障がい者が社会活動に参加するにあたっての課題や取り組みについての紹介や、色弱の方が語る色の重要性についてのお話であったり、障がい障当事者との質疑応答など、さまざまなアクセシビリティーに関連するセッションがありました。

(ぞくぞくと動画が上がっているようです。その他の動画はこちら

懇親会がメインと言っても過言ではない

懇親会の料理
懇親会の料理(©︎cure_tomoki

懇親会では障がい当事者の方々との交流はもちろん、普段アクセシビリティーに取り組まれてる人同士の悩みの相談やセッションでは聞けなかった細かな取り組みについてなどお酒を交わしながら伺うことができました。

懇親会で交流している人たちの様子
懇親会で交流している人たちの様子(©︎cure_tomoki

JACでは各セッションの最後には質問タイプはもちろんありますが、懇親会ではより突っ込んだ話が聞くことができるため、むしろ懇親会の方が重要なのではと感じました。

まとめ

我々は他のセッションとは異なり、パネルディスカッションという形式でやったことで、あまり型にハマらず各々が思い思いに話したいことを話せたかなと思います。また日頃社内の方々とアクセシビリティーについて話すことはありますが、JACを通じて社外のアクセシビリティーに取り組んでる方々のお話や、さまざまな障がいを抱える方々のお話を伺うことができ、とても刺激になりましたし、やってかなければならん!という気持ちがより強くなりました。 アクセシビリティーやってくぞーーー!!