Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「アクセシビリティを始めたい!」から1年、あれからどうなったのか。

pastak
August 27, 2024
70

 「アクセシビリティを始めたい!」から1年、あれからどうなったのか。

pastak

August 27, 2024
Tweet

More Decks by pastak

Transcript

  1. ⾃⼰紹介 • Pasta-K ◦ よく呼ばれる呼び⽅: /^ぱすた(けー?)?(くん|さん)*$/ ◦ https://x.com/pastak ◦ https://blog.pastak.net/

    • 株式会社 Helpfeel Gyazoチーム エンジニア ◦ 主にフロントエンドを中⼼に担当 ◦ その他Podcastの企画運営や技術イベントの企画など ▪ Helpfeel Tech Conf 総監督?ディレクター?総合演出? ▪ サイネージとか登壇前イントロとかは趣味で作ってる • 趣味 ◦ サッカー観戦 ▪ J1 京都サンガF.C.のほぼ全試合を現地観戦 ◦ クラフトビール ◦ マンガ
  2. • 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 「アクセシビリティを始めたい」
  3. キーワードはボトムアップと越境 • 関⼼のあるメンバー間の取り組みから広げていく ◦ 正直に⾔うと、僕の個⼈的な熱量みたいなところと世の中の関⼼の盛り上がりのタイミング (「Webアプリケーションアクセシビリティ」の出版など)が噛み合ったというのもある ◦ ということで、まずは無理のない範囲から始める • エンジニアに閉じていてはプロダクトをアクセシブルにするには限界があ

    るので、デザイナーやマーケティング、営業などと共にあらゆるアプロー チからのアクセシビリティの向上を⽬指す ◦ SaaSとしてはアプリケーションがアクセシブルでもそのアプリケーションにたどり着くまで のマーケティングなども含めてアクセシブルである必要があると考えている
  4. • 各サービスでeslintでは検出されないような改善を⾏うPull Requestを作成 • 元々社内のプロダクトをお互いに普段からドッグフーディングしている関係 上、軽微な変更や改善などのPull Requestは越境して送る⽂化がある • ⽇常的なドッグフーディングからアクセシビリティの改善点について、以前か ら気になっていた箇所などを中⼼にPull

    Requestを作成した ◦ <a>と<button>の適切な使い分け ◦ ランドマークロールの改善 ◦ モーダル関連のフォーカスの改善 • ⾃分たちのプロダクトのアクセシビリティが改善される様⼦を実際に⾒ても らって、a11y-jsxと併せて、モチベーションのキッカケに 改善PRの提案
  5. 開発チームによる⾃律的な取り組みの例 「ウェブアクセシビリティ導⼊ガイドブック」を⽤いた「a11yチェック」 • デジタル庁の「ウェブアクセシビリティ導⼊ガイドブック」で提⽰されている項⽬を1項⽬ ずつチーム全員で確認していく活動 • 1項⽬ごとCosenseのページを作成して、定例会までに各⾃で確認したことや問題点、改善 策などを書いていく • 定例会中にページに書かれたコメントを⾒ながら、判明した課題は開発チームのタスクとし

    て扱い、Asanaに起票していく • アクセシビリティの改善だけに時間を割くことは難しいですが、1項⽬ずつ確認していくこ とでメンバー各⾃がチェックすることができていた • 現在では同ガイドブックで上がっている項⽬についてはほぼ⼀通り確認することができてい る ◦ 修正の実施などが完遂しているわけではありません https://corp.helpfeel.com/post/adventcalendar2023-day12
  6. アクセシビリティと星取表 • アクセシビリティへの世の中の関⼼の⾼まりから営業上の要件になること や、特定の基準を求められることもある • 「星取表」を⽰すためにはアクセシビリティ対応の難しい機能を無いこと にしてしまうと「星取表」上は達成することもできる ◦ 基本的にはHTMLのセマンティクスを最⼤限活⽤する ◦

    ⼀⽅で我々のこだわりで独特な難しいUIを提供することもある ▪ それらをちゃんとアクセシビリティを担保した状態で提供できるように整えていく ▪ デザインシステムやUIコンポーネントの共通化 • アクセシビリティの向上とは何かということにちゃんと向き合う、逃げな い
  7. 未来に向けて • アクセシビリティに関する「知の⾼速道路」の整備 ◦ ⾃然とアクセシビリティを担保できる、アクセシビリティについて考えられる環境 • 社内外での成果の輪を広げていく • プロダクトの品質向上に繋げる‧反映させていく ◦

    我々がインクルーシブなアプリケーションを提供することで、お客様の環境やお客様のお客 様にアクセシビリティの⾼い体験を提供できるように ▪ Gyazoによる代替テキストの提供や⽀援 ▪ HelpfeelによるインクルーシブなFAQシステムの提供 • Helpfeelを⼊れるだけでよりインクルーシブに