「Webアクセシビリティ」を究めて、よりよいプロダクト作りを目指す～エンジニアが語る技術愛＃16～

MIXIには、探究心溢れるエンジニアがたくさん在籍しています。その探究心は業務で扱う技術に留まらず、趣味で書いているプログラムだったり、個人的に研究している言語だったりと、自身の気になった技術への追求も留まることを知りません。今回は、『TIPSTAR』Webエンジニアの吉川に「Webアクセシビリティ」の魅力を語ってもらいました！

吉川勇太郎
2021年MIXI入社。エンジニアとして TIPSTAR の開発（主にWeb）に携わる。また、2022年新卒研修のフロントエンド研修講師を担当。趣味はWebGLと音楽鑑賞（ハウスミュージック）。

Webアクセシビリティは万人のもの

━━Webアクセシビリティを簡単に説明してもらえますか？

ざっくりと言えば「Webアクセシビリティ = Webの使いやすさ」で、Web開発における一種の概念です。Webアクセシビリティを向上させるために、技術でできることもあればデザインで行うものもあります。

━━エンジニアだけでなく、チーム全体で取り組むべきものなのですね

そうですね。世の中的には、まだまだWebアクセシビリティに対する理解はまだ低いかと思います。プロジェクトのスタートライン時点で、チームに共通理解を作る必要があります。私はエンジニアですが、デザインについてWebアクセシビリティの観点から指摘することもあります。

━━興味を持ったきっかけは何ですか？

Webアクセシビリティを本格的に学び始めたのは入社してからです。入社時のメンターがWebアクセシビリティに詳しくて、業務を通じて色々教えてもらいました。最初に、エンジニアの視点から仕様やデザインを考える上で、その基準としてWebアクセシビリティがあることを教えてもらいました。

個人で開発する中でも、どうしたらユーザーにとって使いやすいクライアントを作れるのだろうと考える機会があったので、Webアクセシビリティという一つの考える軸を知ったのは良かったです。

━━最初の印象はどうでしたか？
元々Webアクセシビリティという言葉自体は知っていました。ただ、当初は障がい者向けの対応や、そうした方々に使いやすくするというイメージでした。しかし調べていくと健常者であっても使いづらい、または使えないシーンが多いのに気付きました。

そうした経験もあって、今はWebアクセシビリティとはWebを使うすべてのユーザーにとっての使いやすさを追求する概念と認識しています。

アクセシビリティを通じて新しいWebの見方が得られた

━━TIPSTARの開発でもWebアクセシビリティは活かされていますか？

直近ですと、情報分析用のグラフを作る機会がありました。グラフデータにマウスを当てると詳しい情報が出るUIでしたが、キーボード操作では表示できませんでした。それはWebアクセシビリティが低いと考えて、キーボード操作向けの対応を行っています。

━━モダンなUIとのギャップを感じることはありますか？

ありますね。たとえばボタンとリンクの違いがあります。エンジニアの観点だと、ボタンとリンクの振る舞いは明確に違います。リンクは訪問済みの時は色を変えたり、フォーカスを合わせるとリンク先がブラウザの下の方に表示されます。逆にボタンの場合は有効化や無効化ができます。

そういった振る舞いの違いがあるのですが、デザインやユーザーの観点で言えば、押すと何かイベントが起きるという意味では同じものです。そうした認識の違いは、チーム内で共有しています。

━━他に社内での活動はありますか？

同じTIPSTARの開発に関わっている同期の社員とはアクセシビリティに関して情報交換をしています。適切なマークアップをする、使いやすいUIはどういったものだろうといった情報交換を通じて仲間を増やしています。

他に、新卒研修でWebアクセシビリティに関する研修を行いました。この研修資料は新卒の人だけではなく、他の人にもぜひ見てほしい内容です。

━━新卒研修はどういった内容ですか？

Google Chromeの機能で、アクセシビリティツリーという表示方法があります。これはブラウザがWebコンテンツを読み込んだ時に、Webアクセシビリティの観点からどう文書構造が構築されているかを可視化できる機能です。たとえばスクリーンリーダーなどで利用されます。

新卒研修では、このアクセシビリティツリーを体験してもらいました。実際にHTML構造を変えてみて、アクセシビリティツリーがどう変化するのかを演習を通じて学ぶものです。参加した方からは、そういった観点からWebを見たことがなかったというフィードバックをもらっています。

━━新しいWebの見方ですね

そうですね。スクリーンリーダーではアクセシビリティツリーはもちろん、アクセシビリティの情報に則って読み方が変わります。HTMLではWAI-ARIAという技術があり、アクセシビリティツリーの状態を指定できます。WAI-ARIAを使うことで、スクリーンリーダーや補助ツールの動き方をカスタマイズできます。こうした機能もぜひ知って欲しいです。

社会的責任としてのアクセシビリティ

━━アクセシビリティへの取り組みについて教えてください

社内のアクセシビリティガイドラインでは、基礎的なことをきちんとできるように定義しています。たとえば画像には代替テキストを設定する、サイズを指定することでレンダリングのガタつきをなくすといった具合です。

専用のコンポーネントが用意されていて、利用すれば適切なアクセシビリティが設定できます。構文チェックなども行われるので、全体としての品質が高まる仕組みになっています。

━━Webアクセシビリティを学び始めるのに良い情報源はありますか？

これから学ぶ人であればHTML解体新書という書籍がお勧めです。すごく基礎的なところから応用まで、幅広く書かれています。慣れてきたらGoogleが運営している[学び – web.dev]がおすすめです。ここには学習教材が数多くあり、正しい情報が得られて網羅的に学習できます。レッスン毎に分かれて教材が一通り用意されているのが良いところですね。

━━Webアクセシビリティが優れていると感じるサービスなどはありますか？

freeeさんはアクセシビリティに力を入れていますね。あと、SmartHRさんが力を入れていると感じます。中の人もアクセシビリティ界隈で有名です。エンジニア向けだとZennもアクセシビリティに優れていると感じます。

━━Webアクセシビリティを理解する上での便利なツールはありますか？

Google Chromeにはアクセシビリティのデバッグ機能が実装されています。先ほどのアクセシビリティツリーを確認したり、アクセシビリティの構成を確認できます。他にもボタンにフォーカスできるかどうか確認することもできます。

これら機能を使えば、Webアクセシビリティ観点からWebサイトを見られるのでぜひ使って欲しいです。

━━Google Chromeはアクセシビリティに関する機能が豊富ですね

アメリカの場合、アクセシビリティの担保に関して法律で決まっています。バリアフリーの考え方に似ていますが、社会的責任として企業が作るWebサイトに対してアクセシビリティが求められます。そのため、アクセシビリティを意識せざるを得ないようです。そうした点が反映されているのだと思います。

アクセシビリティの現状と未来

━━Webアクセシビリティに関する課題感はありますか？

Webアクセシビリティの認知を広げるというのはもちろんですが、どう認知してもらうかも課題だと感じています。WAI-ARIAをどう実装するかという技術的な課題もありますが、それはごく一部に過ぎません。そもそもアクセシビリティを担保しやすい仕様とは何か、そうした見た目やユーザー体験は何かと言った観点が必要だと感じます。

現在のアクセシビリティガイドラインでは、ハンディキャップがある人向けにはどうすべきかという前提になっています。しかし、本来のアクセシビリティは障がいの有無に関係なく、その恩恵が得られるものです。

━━まだまだ認識のズレがあるということですね

ストレスなく利用できるというのは、障がいの有無によりません。たとえばWebサイトがあまりに遅いとか、読み込む順番がバラバラで表示がガタつくのは誰にとってもストレスです。そういった使いづらさやストレスを解消するのは、アクセシビリティにとって大事なことです。

つまり、使いやすいプロダクトを追求することがアクセシビリティ向上につながります。その意味でもプロダクト開発に関わる多くの人たちに、正しくアクセシビリティが広まってくれると良いなと思っています。