「アクセシビリティを始めたい！」から1年、あれからどうなったのか。 〜LTバージョン〜

Transcript

1. 「アクセシビリティを始めたい！」から1年、 あれからどうなったのか。 出来たこと、出来なかったこと、 そして未来へ。〜LTバージョン〜 Pasta-K / 株式会社 Helpfeel 2024.08.23 各社の事例から学ぶウェブアクセシビリティ 〜フロントエンドの最前線〜
2. ⾃⼰紹介 • Pasta-K ◦ よく呼ばれる呼び⽅: /^ぱすた(けー?)?(くん|さん)*$/ ◦ https://x.com/pastak ◦ https://blog.pastak.net/ • 株式会社 Helpfeel Gyazoチーム エンジニア ◦ 主にフロントエンドを中⼼に担当 ◦ その他Podcastの企画運営や技術イベントの企画など • 趣味 ◦ サッカー観戦 ▪ J1 京都サンガF.C.のほぼ全試合を現地観戦 ◦ クラフトビール ◦ マンガ
3. プロダクト‧ラインアップ テクノロジーの⼒で情報共有をスムーズに⾏い、⼈の可能性を広げる3つのプロダクトを展開しています。 より多くの⼈が当社のデジタルツールを使い、情報格差の問題から解放されるために、誰もが使えるユニバーサル デザインを重視しています。 あらゆる情報を整理できる 画期的な知識共有サービス Cosense 　　 ToB 画像‧動画基盤     ナレッジ管理 検索システム あらゆる情報を整理できる 画期的な知識共有サービス 全世界で利⽤される スクリーンショット共有ツール 検索に特化しどんな質問にも 答える疑問解決システム Gyazo Helpfeel ToC
4. • 株式会社Helpfeelでは2023年6⽉に「アクセシビリティを始めたい」と いう発信を⾏い、1年以上に渡り⾊々な取り組みをしてきました • 今⽇のトークでは、それらの取り組みを紹介すると共にどのような成果 があったか、またどういった課題があったかについて紹介します • 最後に、これからの未来の展望について考えていることを共有できれば と思っています あらすじ
5. • この発表は今週末の⽇曜⽇(2024/08/25)に東京で開催する弊社イベント Helpfeel Tech Conf 2024内で発表予定の資料より⼀部を抜粋した内容に なります • より詳しい内容や踏み込んだ話を聞きたい⽅は是⾮、Helpfeel Tech Conf 2024にもお越しください！ • 後⽇Helpfeel公式YouTubeでもアーカイブを配信予定です PR: “〜LTバージョン〜”について
7. • 2023年6⽉にHelpfeel Tech Hour vol.3 「アクセシビリティを始めたい！ 編」(*)を開催 ◦ https://nota.connpass.com/event/284361/ ◦ CTOや⾃分を含めたエンジニアが登壇して、社内外に向けて「アクセシビリティ向上 に取り組む」ということを発信して⾃分たちにも発破をかけた • CTO akiroomのその時の発表を引⽤します ◦ https://speakerdeck.com/akiroom/2023-6-16-helpfeel-tech-hour-vol3-opening-talk 「アクセシビリティを始めたい」
11. キーワードはボトムアップと越境 • 関⼼のあるメンバー間の取り組みから広げていく ◦ 正直に⾔うと、僕の個⼈的な熱量みたいなところと世の中の関⼼の盛り上がりのタイミング (「Webアプリケーションアクセシビリティ」の出版)が噛み合ったというのもある ◦ ということで、まずは無理のない範囲から始める • エンジニアに閉じていてはプロダクトをアクセシブルにするには限界があ るので、デザイナーやマーケティング、営業などと共にあらゆるアプロー チからのアクセシビリティの向上を⽬指す ◦ SaaSとしてはアプリケーションがアクセシブルでもそのアプリケーションにたどり着くまで のマーケティングなども含めてアクセシブルである必要があると考えている
12. なぜ職種を跨いで巻き込むのか SaaSはウェブアプリケーションが主体ではあるが、ユーザーがサービスに たどり着くまでには多くの接点がある。それらのアクセシビリティは⼗分 か？ • 新機能紹介のためのブログやプレスリリースのアクセシビリティ ◦ 利⽤しているSaaSやCMSはアクセシビリティのための⼗分な機能を有しているか • 展⽰会でのポスターなどの掲⽰物や動画CMなどのアクセシビリティ ◦ ⾊や⽂字の使い⽅は適切か。字幕などが適切に設定されているか。 • 営業資料のアクセシビリティ
13. • アクセシビリティ勉強会 • サービスLP観察会 • a11y作業DAY → アクセシビリティオフィスアワー • eslint-plugin-a11y-jsx/recommendを使ったプロダクト簡易診断 • 改善PRの提案 • アクセシビリティ改善ニュース これまでに実施してきた取り組み
14. • アクセシビリティへの向き合い⽅などを導⼊するための資料を⽤意した • 「Webアプリケーションアクセシビリティ」(技術評論社)などの書籍を はじめ、freeeさん(*1)やSmart HRさん(*2)などの各社が公開されてい るアクセシビリティに関する各種リソースなどを参考に社内向けにまと め直したものを3パート+1に分けて作成した • 著者の皆さんや各社の関係者の皆さん、その他これまでアクセシビリ ティに関するあらゆる情報をオープンにしてくださっている皆さんに感 謝 アクセシビリティ勉強会 *1: 全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub https://developers.freee.co.jp/entry/a11y-training *2: アクセシビリティ | SmartHR Design System https://smarthr.design/accessibility/
15. パート分けの様⼦ • アクセシビリティって誰のため？何のため？ ◦ アクセシビリティの⽬的について理解する • アクセシビリティ、初めの⼀歩 ◦ アクセシビリティについて、取り組むためのファーストアクションを具体的にイメージ出来 るようになる • アクセシビリティの低い状態を体験しよう ◦ スクリーンリーダーの体験 ◦ ⾊覚多様性のエミュレーション • アクセシビリティについて話し合ってみよう
16. • デザイナーチームに呼んでもらって⼀緒に開催 ◦ きっかけは先ほどの「アクセシビリティ勉強会」 • HelpfeelのサービスLPを⼀緒にLighthouseを⽤いて検証しながら、ア クセシビリティの観点からどのような改善が出来るか会話 ◦ Lighthouseの項⽬の⾒⽅や⼿動でチェックが必要な項⽬についても点検⽅法を伝授 • メニューの⼀部がTabでフォーカスできない • CMSがimgのaltにデフォルトでファイル名を挿⼊している • Helpfeelのオレンジ⾊をテキスト⾊に使うとコントラスト⽐を保つこと が難しくなる サービスLP観察会
17. Helpfeelのオレンジ⾊とコントラスト⽐
18. • ⾃分(pastak)がアクセシビリティ改善を実際にやる様⼦をSlackの Huddleで1⽇中垂れ流す⽇をやってみた • この場で各プロダクトに対して横断的に取り組みをしていくための取っ 掛かりを作るべく作業をしていた • 興味ある⼈に覗きに来てもらって⼀緒に作業したり、会話‧議論をした りなどが出来た a11y作業DAY
19. • eslint-plugin-a11y-jsx/recommendを試しに有効にしてみて、各サービ スでどれくらいのエラーが検出されるかを整理 ◦ 100を超えるエラーが記載された結果の⼀覧だけがやってくると驚きがあるので、どの 項⽬がどういった内容で、どういった関連があるか ◦ 修正にどれくらいかかるか等をエンジニアお茶会(社内勉強会のことです)で共有 • この辺の⾒積もりや知⾒などはmackerelチームでの開発合宿での経験 (*)が基に eslint-plugin-a11y-jsx/recommendを使ったプロダクト簡易診断 *: https://speakerdeck.com/azukiazusa1/mackerel-noakusesibiriteigai-shan-shi-li
20. Spreadsheetにして傾向や⽅針のヒントともに共有
21. • 各サービスでeslintでは検出されないような改善を⾏うPull Requestを作成 • 元々社内のプロダクトをお互いに普段からドッグフーディングしている関係 上、軽微な変更や改善などのPull Requestは越境して送る⽂化がある • ⽇常的なドッグフーディングからアクセシビリティの改善点について、以前 から気になっていた箇所などを中⼼にPull Requestを作成した ◦ <a>と<button>の適切な使い分け ◦ ランドマークロールの改善 ◦ モーダル関連のフォーカスの改善 • ⾃分たちのプロダクトのアクセシビリティが改善される様⼦を実際に⾒ても らって、a11y-jsxと併せて、モチベーションのキッカケに 改善PRの提案
22. • a11yDayは良かったものの、実際にはMTGなどとの調整が⼤変だったの で、隔週のオフィスアワーみたいな感じにすることに • 隔週の⽔曜⽇の⼣⽅にHuddleで30分〜1時間ほど開催している • 集まった⼈たちで話題を持ち寄る形で開催 ◦ 世の中のアクセシビリティに関する話題 ◦ 開発しているプロダクトに関する相談 アクセシビリティオフィスアワー
23. https://blog.notainc.com/archive/category/アクセシビリティ改善ニュース アクセシビリティ改善ニュース • 社外向けの発信施策 • 各プロダクトの改善や社内の取組を発信 • ⼀⽅でここがKPIのようになってしまうよう な感じがあったのもあり、更新頻度は下がっ てしまった ◦ 上⼿いこと復活させる⼿⽴てを考え中……
24. • ⾊々な施策を通じて、社内外に対してアクセシビリティ向上のための取 り組みをやっていくんだということを伝えることにはひとまず成功 ◦ こうやって社外イベントにも呼んでもらえている… • 継続的な社内での情報交換の場の構築 • マーケティング部などによる発信などに関するアクセシビリティの向上 ◦ Xに画像を投稿する際に適切な代替テキストを設定する ◦ CMコンテンツなどの字幕やコントラストの改善 上⼿く⾏ったこと
25. 開発チームによる⾃律的な取り組みの例 「ウェブアクセシビリティ導⼊ガイドブック」を⽤いた「a11yチェック」 • デジタル庁の「ウェブアクセシビリティ導⼊ガイドブック」で提⽰されている項⽬を1項⽬ ずつチーム全員で確認していく活動 • 1項⽬ごとCosenseのページを作成して、定例会までに各⾃で確認したことや問題点、改善 策などを書いていく • 定例会中にページに書かれたコメントを⾒ながら、判明した課題は開発チームのタスクとし て扱い、Asanaに起票していく • アクセシビリティの改善だけに時間を割くことは難しいですが、1項⽬ずつ確認していくこ とでメンバー各⾃がチェックすることができていた • 現在では同ガイドブックで上がっている項⽬についてはほぼ⼀通り確認することができてい る ◦ 修正の実施などが完遂しているわけではありません https://corp.helpfeel.com/post/adventcalendar2023-day12
26. • アクセシビリティオフィスアワー以外の施策がなかなか継続していない ◦ こういった取り組みがなくても各開発チームなどが⾃律的に取り組めている？ ◦ ⽇々更新される知識や情報、取り組み⽅などのアップデートが反映できているか？ • 関⼼がある⼈とそれ以外の⼈の格差を埋めていきたい ◦ 受け⾝で情報が降ってきたり、ある程度の知識や理解を得られる環境ではない ⼀⽅で課題も
27. • ボトムアップで関⼼から広げていく‧取り組んでいくことに限界がある のかもしれない？と感じている • 例えば、オンボーディングの⼀環としてアクセシビリティを取り扱うな どの「仕組み化」による⽀援が必要かもしれない • ボトムアップ的な取り組みをトップダウン的なアプローチで広げていく • 社内におけるアクセシビリティの輪を外にさらに⼤きく広げていく、会 社の拡⼤に負けない速度でとなるとそういったことも考えていくことが 必要かもという話を「アクセシビリティオフィスアワー」で画策し始め ている ボトムアップの限界が来ているかもしれない？
28. • 1年かけて⾊んな施策をやってきて、全体として出来ていること、出来て ないことについて紹介しました • 個々の取り組みの良し悪しとは別に継続性やどうやって組織とすり合わ せていくかという課題も浮き彫りになってきました • こういった課題に⽴ち向かいながらもこれからもHelpfeelではアクセシ ビリティの向上に取り組んでいきます • 興味持ってくださった⽅ぜひカジュアル⾯談しましょう！ ◦ https://findy-code.io/companies/859 • そしてフルバージョンに続く…… 俺たちの戦いはまだまだこれからだ