ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る

Transcript

1. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All

   Rights Reserved. ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る Yoshito Kusunoki

2. ⾃⼰紹介 • ウェブサイト課 • マークアップ&フロントエンドエンジニア • 最近京都から滋賀に引っ越しました 楠 欣士
 (Yoshito

   Kusunoki) 


3. ヌーラボについて • 「“このチームで⼀緒に仕事できてよかった”を世界中に⽣み出していく。」 • チームで利⽤する業務コラボレーションツールを開発、提供 • Backlog、Cacoo、Nulab Passという3つのサービス

4. 今⽇の発表テーマ ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る

5. 背景 • アクセシビリティカンファレンス福岡2023でウェブサイト課の松永が登壇 ◦ 「ヌーラボのウェブサイト課におけるアクセシビリティ関連の取り組み」 • この登壇からちょうど⼀年経ったので、この⼀年間をふり返ってみたい

6. 余談 • 私のヌーラボ⼊社の⼤きなきっかけがこの昨年の発表 • アクセシビリティは採⽤に効きます（N=1）

7. ウェブサイト課って？ • ウェブサイトの開発、運⽤、保守（約20サイト） • ミッションステートメントの1つ⽬に 「すべての⼈に等しい情報を」を掲げてアクセシビリティに注⼒

8. ウェブサイト課って？ • 昨年と⽐べ、新メンバーが3名増えて6名体制に • 6名全員「アクセシビリティやっていき」

9. ⼀年間の取り組みを⾒ていきましょう！

10. ①ウェブサイトの改善

11. ウェブサイトの改善 動き続けるロゴスライダーを廃⽌

12. ウェブサイトの改善 フォームの必須を表す「＊」を「必須」に変更

13. ウェブサイトの改善 リンク⽂⾔を「こちら」から具体的な内容に変更 〇〇についての概要はこちらを ご覧ください 詳しくは〇〇の概要をご覧ください

14. ウェブサイトの改善 他にも... • pxでのサイズ指定をremに変更 • フォーカスインジケータの可視化 • モーダルの実装をdialog要素にアップデート • axe

    DevToolsやHTMLバリデータの警告をひたすら解消

15. ウェブサイトの改善 などなど...⼀年間で60件以上の改善 すぐに着⼿できなくてもとりあえず課題を起票することを⼼がけています

16. ②アクセシビリティレポート

17. アクセシビリティレポート • ウェブサイトの改善内容を3ヶ⽉に⼀度ブログで公開 • これまでに4回リリース

18. アクセシビリティレポート • ヌーラボ アクセシビリティレポート #1 • ヌーラボ アクセシビリティレポート #2 •

    ヌーラボ アクセシビリティレポート #3 • ヌーラボ アクセシビリティレポート #4

19. アクセシビリティレポート 昨年のカンファレンスで「⼩さい単位でも改善に取り組んで発信してみよう」 という話を聞いたことがきっかけ ささいなことでも、勇気を持って発信し続けます

20. ③WCAGの読み合わせ会

21. WCAGの読み合わせ会 • 昨年から続けてきた各社ガイドラインの読み合わせを無事完⾛ ◦ freeeアクセシビリティー‧ガイドライン ◦ Ameba Accessibility Guidelines •

    今年9⽉からいよいよWCAG2.1の読み合わせを開始

22. WCAGの読み合わせ会 • ハードルを低く設定 ◦ Aの基準のみに絞る ◦ まずは⼀周することを⽬標に

23. WCAGの読み合わせ会 • WCAGの「読み⽅」を勉強する会も事前に開催 ◦ とっつきにくさを解消

24. WCAGの読み合わせ会 とにかくハードルを下げて、多くの⼈が参加‧継続しやすいように 参加者が増えてきている（開発エンジニアやUXライティングチーム）

25. ④資格勉強

26. ④アクセシビリティ関連の資格勉強 • 毎週もくもく会を開催 • DAA(Digital Accessibility Advisor) Basic 合格者2名 •

    ⾊彩検定UC級 結果待ち2名（保持者1名）

27. ④アクセシビリティ関連の資格勉強 体系的に学ぶ機会は意外と少ないので良いきっかけに 勉強仲間が集まるとモチベーションアップに繋がります

28. ⑤外部への発信活動

29. ⑤外部への発信活動 • イベント登壇 • 会社ブログで記事を執筆

30. ⑤外部への発信活動 • LT「悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント」 • ブログ「私の、あなたの、全ての⼈のためのアクセシビリティ」

31. ⑤外部への発信活動 社外‧社内へ向けた「アクセシビリティやってるぞ」アピール 外部からフィードバックをいただくことでより深い理解に

32. ⑥社内での推進活動

33. ⑥社内での推進活動 • アクセシビリティについて話す会を⽉⼀で開催 • WCAG読み合わせ会の主導 • ライティングチームと代替テキストについてディスカッション

34. ⑥社内での推進活動 少しずつ着実に仲間を増やすことを⽬指しています

35. ふり返り

36. ふり返り • 従来からの取り組みをコツコツ継続 • 新たな取り組みも増やせている • 仲間が少しずつ増えてきている

37. つぎはどうする

38. つぎはどうする • 来年もこの場で⼀年間の報告をすることが第⼀⽬標 • 明⽇の学びを糧に、次の打ち⼿を考える ◦ もっと社内に広めていきたい ◦ WCAG試験を実施したい ◦

    アクセシビリティ⽅針を公開したい

39. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All

    Rights Reserved. ご清聴ありがとうございました！ Yoshito Kusunoki