はじめに

フロントエンドエンジニアの @mk0812 です。自分は普段BackOfficeというチームで新規機能開発を担当しています。

2023年3月〜5月あたりで社内の有志を集めて、Webアクセシビリティの勉強会を行いました。この記事はその勉強会の振り返りをしていきます。

⁠参加者

⁠フロントエンドエンジニア: 4名　
デザイナー: 4名

⁠勉強会で使用した参考書

Webアプリケーションアクセシビリティ──今日から始める現場からの改善 (WEB+DB PRESS plus)

なぜアクセシビリティの勉強会を実施したか

私自身が今回、この勉強会の主催をやりました。私が実施した動機としましては下記にあたります。

フロントエンドの実装であまりアクセシビリティを意識してこなかった
WAI-ARIAが定めた仕様に基づくHTML属性（例: aria-label属性）をなんとなく使っている部分がある
もっと社内でアクセシビリティを広めていきたい

これらの動機を踏まえて勉強会を実施しました。

実施するにあたっての参加者の経緯

勉強会にあたってまずは人集めというところですが、上記に記載ある通り8名ほど勉強会に参加してくださりました。有志で集めた際にアクセシビリティの勉強会に参加した経緯を聞きました。

↑のようにfigjamを使ってディスカションをしながら勉強会を行った

⁠エンジニア視点

アクセシビリティ気になりつつあまりちゃんと勉強したことない
利用できるユーザを増やすためには「正しいHTMLの書き方=それがアクセシビリティにつながる」と思ったから

⁠デザイナー視点

マシンリーダブルに作るための前提知識が少ない、デザインを起こすときにどういう部分に意識すべきかわからなかった
ユーザインタビューなどのリサーチを通じて興味を持ったから

このような感じでエンジニアとデザイナーで勉強会に参加した経緯は違います。しかし今後取り組むにあたって、エンジニアとデザイナーの共通言語ができて、品質の良いデザインやコードが作れていけばいけるように頑張ろうかなと思いました。

勉強会の形式

figjamを使ってオンラインでやりました。
- 毎週1時間くらい
全8回くらいやりました。

勉強会の一例が下記のような感じです。毎回ではないですがディスカッションのテーマを考えて、BASEの今後の活動に少しでも役に立ててもらおうと工夫しました。

⁠振り返り

この勉強会で意識した点は下記2点になります。

ディスカッションの頻度を増やす
BASEの現状あるUI/UXから改善点を探る

ディスカッションの頻度を増やす

上記の「勉強会の形式」でも触れましたがディスカッションのテーマを考えて、事前にディスカッションのネタを用意しました。

下記添付画像はディスカッションの例になります。勉強会の後半部分はこのような感じで各章のテーマに沿って皆さんが「話す」「考える」「次に活かせる」といったいわゆる『参加型』を意識しました。

ディスカッションを通じて、私自身が実は知らなかったことがたくさん気づいたところでもありました。普段の画面確認などはあまりキーボード操作などを意識しなかったのですが実はその操作の中で改善点があったりと...さまざまな意見が出てとても良いディスカッションになりました。

BASEの現状あるUI/UXから改善点を探る

本に沿って、BASEが提供してるサービスそのもので使用してるコンポーネントが使いやすいかどうかをみなさんで議論して改善策を探ったりしました。

例えば第5章で「複雑なUIパターンの改善」という章があります。ここでは

モーダル
⁠通知
⁠ツールチップ

などとある程度どのサービスでもあるようなコンポーネントとなりますが、これらのコンポーネントがきちんとアクセシビリティに配慮してるか、勉強会に参加した皆さんとUI見て探ったりしました。またこの本にはサンプルコードが載っていたのでサクッと試したりもできてとても助かりました。

⁠感想

勉強会を終えて感想を参加していただいた皆さんからもらいました（下記添付）。

⁠エンジニア視点

セマンティックなHTMLを完全理解した。レビューの時もアクセシビリティを意識していきたい。
フロントエンドの知見が深まった、サンプルコードを踏まえてとても理解が深まった

⁠デザイナー視点

BASEのデザインを知るいいきっかけになった
普段プロジェクトに閉じたデザインしか見てなかった、全体のデザインを触れられてよかった

⁠全体

改善案を出すワークで結構意見が出てきたりしたので、アクセシビリティに限らず何かテーマを絞って、みんなが普段考えているBASEの改善点を話すのはいいのではないか
内容も濃くて、全員受けてもいいんじゃないというくらい良い内容だった
他職種の見解が聞ける機会（エンジニア⇄デザイナー）があったのはよかった

まとめ

BASEのミッションは「Payment to the People, Power to the People」を掲げています。そのミッションの中に「世界のすべての人に」というフレーズがあり、BASEを使っていただけるショップオーナーをはじめ、「どんな人でもショップオーナーになれる」ためにはやはりアクセシビリティ対応は不可欠だと思っています。

また私をはじめとしてアクセシビリティに対しての課題などを話し合ってちょっとずつではありますが、改善していく動きをしています。この改善を続けて良いサービスを作り上げていこうと思います。

以上です、最後までお読みいただきありがとうございました。