#2」が開催されました。Web技術の発展とともに多様化し始めているフロントエンド領域。さまざまなノウハウを持つエンジニアたちが、自身の知見を語ります。トークセッション「freeeのアクセシビリティ、いまとこれから」では、freee株式会社の伊原力也氏が登場。「一人から始めるWebアクセシビリティ」と題して、自社サービスにおけるアクセシビリティ設計の知見を語ります。伊原力也氏(以下、伊原):ちょっと意識が出てきたところで、「今どうなっているのか?」に迫っていきたいと思います。freeeですが、サイトとアプリがいっぱいあるなかで、有名なのは会計freeeだと思うんですけど、サイトにしても、例えば公式サイトもあるし、ヘルプページもあるし、実はfreeeはコーポレートカードを出していたり、開業応援パックなどもやっています。あと、会社もコーポレートサイト、採用ブログ、開発者ブログ。オウンドメディアも2つあります。全部見きれていないんですけど、そういったものがあったり、それのモバイルアプリ版があったりするので、かなり広いんです。「これ、全部いきなりやるの無理だよね」ということで、「まずはちょっと的を絞ってチェックしていかなきゃ」となります。大きく分けて、「Webサイトのチェックというのをまずやってみよう」となりました。Checksという、「とりあえず最低限チェックするとしたらここでしょう」というドキュメントがあるので、「これを使って、みんなでチェックしてみましょう」と、ちょっとワークショップっぽいことをやっています。実際に公式サイトのアクセシビリティチェックをしてみました。意外に、マークアップをちゃんとしている気配が強いんですね。見出しのレベルが飛んだりとか、リンクが画像とテキストで2つに分かれていて、同じテキストになっているとか、そういう軽微なものはあるんですけど、意味不明になっているものはそんなになかった感じでした。画像に代替テキストが入っていない、ファイル名が入っている、他の代替テキストがコピペされて入っている、というパターンが生じているのは散見されました。1つは、コーポレートカラーが青というか紺なんですけど、そこからバリエーションを出そうとして明るいほうに振る。すると水色のテキストが出てきて、これがコントラストチェックをすると引っかかるとか。あと、フォームのエラーが、ちょっと伝わらない可能性があるとか。いうことがあって、実は他の公式サイト以外でも、だいたいこの傾向があるというのがわかりました。(スクリーンを指して)例えばこれ、読み上げられない図ですね。この〇、×が、空のi要素です。i要素ということで、もう「なるほど」という感じだと思うんですが、Webフォント、アイコンフォントを使って出しています。中の要素は空なので、それが読み上げられないことがある。すると、「ちょっと比較ができないよね」という話がでます。あと、こういう画像化文字があって、そこに対して代替テキストが入っていなかった、とかです。それから、ヘルプですね。ヘルプのキャプチャも、ヘルプの文言としてはけっこう丁寧に説明しているんですが、このキャプチャに対してaltがない。空なので、そもそも画像があること自体に気付けなかったりする、という状況があります。このエラーが出ると、視覚的には赤くなって吹き出しも出てわかりやすいんですけど、ここがスクリーンリーダーでは読まれない。どこかが間違っているんだけど、どこが間違っているのかわからない、ということが起きています。全盲のアクセシビリティ専門家はfreeeアプリをどうとらえているのか「じゃあ、アプリケーション側はどうなのか?」というところを見ていきたいと思います。私は、これはやっぱりユーザー側に聞こうと思いました。中根(雅文)さんという、アクセシビリティについて調べてみるとよく名前が出てくる方がいらっしゃいまして、アクセシビリティの専門家で、かつ、全盲でスクリーンリーダーを利用されていて、なんと4年前からfreeeユーザーなんです。これはこの人に聞くしかないと思い、聞いてみました。辛口の方なので、インタビュー1時間半ボコボコになったということがあったんですけど(笑)。(会場笑)先に良いほうから言うと、「機能は優れている。紙を取り扱うことが難しいような我々こそが、こういうfreeeを使っていきたいと思えるものである」ということなんですね。中根さんはエスパーみたいな方で、画面が見えないのに「ここはタグだね」とか、「カルーセルだね」とか、「アコーディオンだね」と言える人なんですけど、その人がかなり試行錯誤しないと使えないというのが現状です。それで、(現状の問題点としては)読み上げない場合がある、アイコンにラベルがない、フォームの入力項目とラベルが紐付いてなかったり、ボタンが押せなかったりする。逆に「それでどうやって切り抜けてるんだ?」という話もあるんですけど、切り抜けられないわけではない。その理由は後述します。ホームアイコン、家のアイコンがあるんですが、ここも先ほど申し上げたように、i要素で中身が空なので、そもそも読み上げることができない。あと、このアコーディオンを開くと、ちょっと見にくいんですけれど、下矢印が付いてます。これを触ると、マウスだとアコーディオンが出るんですが、これはいわゆるdivボタンなので押せない。それから、ラベルなんですが、これが非常に惜しいんです。label要素でマークアップはされているんですけどfor属性がない。その中にinput要素がなく、紐付けできていないので、例えばこのダイアログに関しては、ラベルをひと通り読んだ後にフォームコントロールを読み上げる、というような挙動になってしまっています。いうのが組み合わさると、例えばここの勘定科目、ちょっと見にくいんですけど、グレーのバーになっているところは実はtr要素で、そこをマウスクリックすると下のところが開きます。このフォームコントロールがラベルと紐付いてなくて、サジェストがWAI-ARIAに対応してないので、ここは読み上げられない。ここが読み上げられないと、このテキストを完全一致でここに書かないといけない状況になって、使うのがしんどくなってくるんです。あとは、ここはフォーカスリングが出てますけど、こちらではアウトラインが出てなくて、見えてる人でキーボードのユーザーが使えなくなっている、という組み合わせが起きています。私、自社のプロダクトに対してこんなに指摘をしていって、つぎに会社行くの怖いんですけど(笑)、続けます。(会場笑)iOS版の利便性と改善点とはじゃあ、なんで切り抜けられてるのかというと、「iOS版が存在するから」だったんです。iOS版は、「絶対使うだろう」という機能に絞られていたり、画面内要素が絞られていたりするので、比較的全容を把握しやすい。ネイティブアプリのつくり方が適切なので、ボタンが押せないというケースがなく、概ね先には進める。似たような課題があって、たまに読み上げない、たまにラベルが関連付いてない、たまに操作しづらい、というのがあるんです。......ちょっとお待ちください。ハムノイズが出ますが。これ、iOSの読み上げです。(音声読み上げソフトを起動する)読み上げ:......取引を登録、ボタン、レシート作成、ボタン、確定申告を始めましょう、2月の収支......。伊原:けっこう読んでくれるんですね。読み上げ:......合計、0、0、0、0......。伊原:でも、ここはちょっと縦読みになっちゃう。