これは夏のブログリレー2023 34日目の記事です。
こんにちは、21B SysAd班のmehm8128です。

今回は部内SNSであるtraQの、a11yの現状について書いていこうと思います。
本当はあまり書くことなくて別の記事にしようと思っていたのですが、他に特に書くこともなかったので頑張って書いてます。

まず、僕が前に読んだa11yの本を提示しておきます。これ1冊読んだら最低限の考え方とか知識とかは身につくので、とてもおすすめです。
Webアプリケーションアクセシビリティ──今日から始める現場からの改善 (WEB+DB PRESS plus) | 伊原 力也, 小林 大輔, 桝田 草一, 山本 伶 |本 | 通販 | Amazon

とは言ってもページ数が多いこともあり、こんな記事が出ています。
「Webアプリケーションアクセシビリティ」どこから読む？｜ymrl
参考にしてみてください。僕は1,2,3,5,8,4みたいな順で読んだ気がします。

本編

まず、a11yとは

a11yが保証されているというのは、様々な状況におかれているユーザーが最低限そのサービスを利用できるということです。ここでいう様々な状況というのは身体の障害などに加えて、利用する端末、一時的な使いづらい状況なども含まれます。

と、前に出したテストの記事で書いていたので、そのまま引用します。
traPは500人規模のサークルなので、もちろんtraQを使うユーザーは様々な状況に置かれています。そのユーザー全員が快適にtraQを使えるように、a11yは保証していかなければなりません。

現状

現役のtraP部員のフロントエンドメンバーがa11yをちゃんと考えるようになったのは、僕が知る限り最近です。そのため、改善しようとtraQのコードを眺めたときはここ改善できそう、という箇所がたくさんありました。さすがに全部直すのは難しいのですが、パーツごとに改善PRを出したり、新機能をつけるときはできるだけa11yにも配慮したコードを書く&レビューのときも改善できそうなところは指摘する、ということをしています(もちろんまだ一部の開発メンバーだけですが)。

具体例

各パーツの用語はここになんとなく載ってます。
https://github.com/traPtitech/traQ_S-UI/blob/master/docs/architecture.md#mainpage-のコンポーネントの構造

ナビゲーションバーの改善

https://github.com/traPtitech/traQ_S-UI/pull/4025
メインの目的は、キーボード操作可能にすることです。
現状だと、各チャンネルへのリンクがdivタグに@mousedownをつけたものになっていて、tabindexなどもついていないので、キーボード操作ができない状態です。そこを、リンクなので正しくrouter-linkを使うことによってキーボード操作ができるようにしようとしています(まだマージできていませんが)。もちろん、a11yという観点でいうとキーボード操作できるようにする目的は手が不自由でマウスを自由に操作できない人だったり、一時的に利き手が塞がっていて上手くマウスが操作できないといった人でも使えるようにするための改善なのですが、単純にキーボードで操作できた方が便利という声があるので、改善に取り組んでいます。
他にもPRの説明文に書いてあるように、aria-属性が正しく付与されていないものや、それに関連してスクリーンリーダーで適切に読み上げられていないものなど、キーボード操作以外にもa11yの観点から問題のありそうなものをいくつか修正しました(PRの説明文に色々書いてあるので読んでみてください)。PRが大きくなってしまっているのは反省点ですが...。
今までフォーカスできなかったところがフォーカスできるようになったのはよいのですが、フォーカスしたときにUIが変わらないと分かりづらいので、いい感じのUIを入れられなかった部分は今後デザインチーム(後述)に相談しようと考えています。

チャンネルヘッダーに新機能追加

https://github.com/traPtitech/traQ_S-UI/pull/4044
こちらもまだマージできていないですが...。
チャンネルヘッダーから、関連チャンネルにアクセスできるようになります。
traQは現在、チャンネルが階層構造になっており、1つのチャンネルから複数の子チャンネルを生やすことができます。しかし、ナビゲーションバーからその子チャンネルなどに移動するのが大変なときがあるので、ヘッダーから気軽に子チャンネルと兄弟チャンネルに移動できるようにしてもらいました(UIはPRの説明文にあるgif参照)。
ポップアップということで、キーボード操作時のフォーカスの移動にかなり気を配って実装されていることが分かります。それと同時に、ポップアップの中にタブがあるので、そちらは矢印キーでの移動などもできるようになっています。

オンラインインジゲーターの視認性の向上

https://github.com/traPtitech/traQ_S-UI/pull/4038
実装というよりは、デザインメインのものです。
traPのSysAd班には、各サービスのデザインを担当するデザインチームが存在します。
デザインチームについてのブログ記事を紹介しようと思ったけどなかったので、書いてもらえたらあとで貼ります。
デザインチームは現在、主にtraQのデザインやデザインシステムの構築、その他サービスに1人ずつ担当を配置したりして、開発メンバーと一緒にデザインを考えています。

今回のデザインの修正は、僕が「オンラインインジゲーター見づらいな」と思い、traQのフィードバックチャンネルに書いたことから始まりました。
traQには全サービスのフィードバックを自由に書き込める(テンプレートはあります)チャンネルがあります。そこでバグの報告や、機能追加などの提案をします。僕がまだtraQの開発チームに所属していなかった頃なのでここに書きましたが、開発チームのメンバーは基本的に自分でissueを立てます。

これを見たデザインチームがFigmaで色々と議論などをして、デザインを作ってくれたので僕が実装し、現在レビュー待ちという状態です。

before

after

オンラインインジゲーターの色が変わったことにより、背景色とのコントラスト比が1.28から1.71になりました(普通はChromeの拡張機能で簡単に算出できるのですが、z-indexの関係で拡張機能のポップアップをクリックしようとするとユーザーモーダルが閉じてしまい、算出できませんでした。なので、色を入力すると算出してくれるサイトを利用しました)。また、一部の錐体の機能が弱く、色の違いを見分けられない場合がある人も、ある程度見分けやすくなりました(protanopia, deuteranopia, tritanopiaといった分類で、Chrome拡張機能で普通ならシミュレーションできます。なおtraQの場合、z-indexの関係で...なので、画像をアップロードするとシミュレーションしてくれるサイトを利用してみました)。もちろん、色だけで状態を表示するのはよくないので、今回の改善で「オンライン」という文字も表示されるようになりました。

終わりに

以上3つの例を見てきましたが、まだまだ改善点はあったり改善に取り組める開発メンバーが少ないということもあり、今後より多くの人がa11yを意識した開発をしていけたらと思います。

明日の担当はYHz_ikiriくんです、お楽しみにー