🐕

アクセシビリティを気にし出したきっかけと、2020年の振り返り

2020/12/18に公開

アクセシビリティ

idea

この記事はトレタ Advent Calendar 2020 の19日目の記事です。

はじめに

今年は私にとってアクセシビリティ元年と言える年だったように思います。
この記事では、今年やったことをまとめておきたいと思います。

きっかけ

JSConf JP のセッション

アクセシビリティへの興味が高まったきっかけは、2019年のJSConfJPで聞いたアクセシビリティのセッションでした。とても熱量のあるセッションで印象に残るものでした。

それ以前から、 "キーボード操作ができた方が良い" とか、 "labelをクリックするとフォームの要素にフォーカスが当たった方が良い" とか、よく知られていることは知っていました。しかし、アクセシビリティに関して体系的に学んだことはありませんでした。

私は、 "ユーザーにより良い体験を提供したい" という思いでフロントエンドエンジニアをやっているのですが、アクセシビリティに疎いことはそれに反していると感じました。逆に言うと、アクセシビリティに関して知り、実践していくことで目指す状態に少なからず近づくと思いました。

ユーザー体験向上のために大切なことは色々とありますが、その一つとしてアクセシビリティの知識を身に付けたいとこの時強く思いました。

UIレビュー、実装、コードレビューにおける迷い

一方、実務でも課題を感じる場面がありました。例を挙げると、

独自UIのマークアップに迷う
実装、レビューでの指摘観点が個人によってばらついており、迷いが発生する
上記の結果、品質がばらつく（ここでは、アクセシビリティ観点の品質のことを言っています）

といったものです。これらには何か指標を設けた方が、迷いが減り工数削減できる上、品質も安定すると思いました。

また、UIのレビューや相談で、実装面のコメントはできるが、使いやすさに対してのコメントが「一般的に」とか「直感的に」など経験や感覚から来るものもあり、その根拠を明確に示せる指標をあまり持っていなかったように思います。そうした場面で、アクセシビリティ規約にあるようなわかりやすい基準を盛り込めると、一つの力強い根拠となり、より良いレビューができるようになると思いました。

こういった様々なきっかけがあり、アクセシビリティへの興味が日々強まっていきました。

モチベーション

きっかけを踏まえて、モチベーションをまとめておきます。
私のエンジニアとしての日々のモチベーションは

ユーザーにより良い体験を提供したい

と言う想いです。

そのため、アクセシビリティに関していうと、

アクセシビリティの観点を踏まえたUI検討ができること
アクセシビリティの観点を踏まえた実装・レビューができること
上記を自然にやっていけるような仕組みを少しずつでも取り入れていくこと

を目指しています。

ここではアクセシビリティに焦点を当てて書いていますが、他にも気にすることはたくさんありますし、私はアクセシビリティ専門のエンジニアではありません。そのため、色々迷いもありました。

取り組む上での迷い

スタートアップでは、少人数でスピード感を持って開発を進める場面があります。そうした場合ではやはり、リリースまでに動くものを作ることを優先し、その後段階的にブラッシュアップしていくことが多いのではないでしょうか。

エンジニアはみんなそうだと思いますが、（と言うか、エンジニアに限った話ではないですが、）実現したいことを実現するために日々必要なこと、新しいことをキャッチアップしていると思います。自分自身も、直近の業務で必要なことを優先的に日々キャッチアップしています。そんな中でアクセシビリティのキャッチアップに時間を割くことは自分の今のスキル、今の業務、スタートアップという会社の性質にマッチしているのだろうか...？という気持ちが度々湧いてきては、迷っていました。

特に、人を巻き込んで良いのだろうか？ということに対しての迷いが強かったような気がします。

やったこと

興味があると言いつつ、2020年の前半はほとんど何もできていませんでした。人を巻き込んで良いのか？という迷いから、アクセシビリティの向上は個人的な目標として掲げていたのですが、なかなか進捗させることができませんでした。

2020年前半を振り返った時、やっていきたいと言っておきながらやれていないことにモヤモヤしました。しかしこのまま個人的な目標としているだけじゃ進捗しないと感じ、社内で興味がある人を探そうと思いました。それからやってきたことは以下のようなことです。

社内で仲間探し

ひとまずフロントエンドエンジニア内で声かけし、アクセシビリティを考える会を発足（勝手に名付けた）
アクセシビリティ雑談用slackチャンネル作成
社内テックトークでアクセシビリティの基本の話のLTを実施
フロントエンドエンジニア以外でも興味ありそうな方を勧誘

slackチャンネルを作ることで、アクセシビリティの記事をシェアしあうようになりました。声かけによって、興味を持っている人がどのくらいいるのか、というのがわかった面でもとても良かったです。

やはり、一人でやっていこうとするとなかなか難しいけど、ある程度興味が近い仲間を集めて話していくことで、モチベーション維持や進捗にもつながると感じました。

インプット

書籍、ドキュメント、他社事例、勉強会

インプットとしては、書籍を読んだり、都度必要なドキュメントを読んだりしてきました。
また、他の組織での取り組み記事を読んだり、勉強会に参加するなどしました。

私がお勧めしてもらった書籍を載せておきます。

質問会

社内のある方が、アクセシビリティ本著者の方とつながりがあるということで、その方を招いたカジュアルな質問会を設けてくださいました。インプット初期の段階ではありましたが、ざっくばらんに質問させていただくことで、今後の取り組みのヒントを得ることができました。これも、一人ではとてもできないことだったので、一緒にやっていく方がいることは本当にありがたいなと思いました。

アウトプット

LT、技術ブログ

既に紹介しましたが、社内テックトークで、アクセシビリティとは？という基本的な話を話しました。
- このLTきっかけでアクセシビリティに関してよく知らなかった人に対して、知るきっかけを提供できたかと思います。
- また、私自身ががアクセシビリティに関して興味があることを知ってもらう機会になったと思います。
社外のイベントでもLTを行いました
- これにより、アクセシビリティ向上に取り組んでおられる方などからTwitterでリアクションをいただけたりして、モチベーション維持にもつながったように思います。
- LTで話したことに対して、+aの情報なども得られたりしたことも面白かったです。
- 元々社外イベントでLTをすることはほとんどなかったのですが、何かの分野の初心者であっても、積極的にアウトプットしていくことで、色んな情報を得られるきっかけになることを体験できました。
- LT駆動勉強にもなりました
アドカレにもアクセシビリティネタを書きました。

業務でやって行けたら一番良いと思いますが、こうしたLT駆動や、アドカレのような締め切りがある技術ブログ駆動によってこれまでの振り返りや、気になっていた点の調査など進めることができました。

実務での実践

実務でもいくつかアクセシビリティ向上のための取り組みを実施することができました。私が携わっているプロジェクトのチームは、アクセシビリティの重要性を感じている方々が割と多いと思います。そのため、アクセシビリティに関する課題を挙げる人は偏ってはいませんでした。以下はチームで行った改善の具体例です。

プロダクトA（大規模プロダクト）

モーダルダイアログ表示時、モーダルダイアログ内のみにフォーカスが当たるよう修正
iPad Safariにおけるhover時のスタイルを無効化
labelとフォームコントロール対応づけの見直し
リストボックス、コンボボックスにおけるキーボード操作の見直し
リンク文言の見直し（「こちら」などの文言）
img要素にalt属性がないものの見直し
button要素でマークアップされていないボタンの見直し
TSLintのアクセシビリティルールを追加

プロダクトB（新規プロダクト）

TSLintのアクセシビリティルールを追加

今後やっていきたいこと

最後に、理想てんこ盛りですが今後やっていきたいことを書いておきます。

デザイナーと一緒にアクセシビリティを学ぶ
- 実は、人を巻き込むことへの迷いがまだ消えていないこともあり、デザイナーへの声かけを躊躇していました。なかなか踏み切れない中、このアドカレを書いていて気持ちが高まった勢いで、輪読会の提案をしました。興味がある方がいらっしゃれば、と声かけしたところ、デザイナーの皆さんに参加したいと言っていただけました。来年実施予定です。嬉しい。
- 既存プロジェクトをスクリーンリーダーで読み上げてみたり、アクセシビリティの観点からテストしてみることで、具体的な課題を把握して行けたらと思っています。
デザインシステムに組み込む
- 社内ではデザインシステムの話も出ているため、そこにもアクセシビリティの観点を反映させていけたら良いなと思っています。
自動的にチェックしていく仕組みを増やす
- すごい方達が作ってくださってるすごいツールを組み込んで、アクセシビリティチェックの自動化を少しずつでも進めたいと思っています。今は難しいですが、将来的にはなるべくプロジェクト初期から入れていけると、後の修正工数を削減できるため、そうして行けるのが理想です。
- ツールがもしマッチしない場合は、自分たちのサービスに合った、大事にしたいルールだけ独自で実装するのもありだなと思っています。
- すごい方達が作ってくださっているツールに乗っかるだけでなく、何かしらの形で貢献できたら良いなぁ...とふんわり思っています。
たまったノウハウをフロントエンドチームにシェア
- フロントエンドチームに対しては、ノウハウが溜まるたびにシェアして行けたらと思っています。
- つよつよのメンバーに囲まれているので、自分の存在がwinwinだと思ってもらえるような価値を提供していけたらいいなぁと思っています。

まとめ

色々迷いはありますが、できることから、できる範囲でやっていくことが現実的かなと思っています。また良い報告ができるよう2021年も取り組んでいきたいと思います。

おわり。