アクセシビリティ_株式会社ニジボックス Katsuhito Karube

リクルートグループ主催！『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

Transcript

1. アクセシビリティ
   株式会社ニジボックス
   軽部 勝仁
   

   View Slide

2. 自己紹介
   会長にしごかれる日々を送っています
   Next.js, React などモダンな開発現場にいます
   アクセシビリティは3ヶ月前から
   

   View Slide

3. 本日の内容
   1. そもそもアクセシビリティとは
   2. 開発現場の実情
   3. アクセシビリティ改善の取り組み
   

   View Slide

4. 本日の内容
   1. そもそもアクセシビリティとは
   2. 開発現場の実情
   3. アクセシビリティ改善の取り組み
   

   View Slide

5. ウェブアクセシビリティとは
   ウェブページにある情報や機能の利用しやすさを意味しま
   す。
   引用：https://waic.jp/knowledge/accessibility/
   アクセシビリティ → accessibility → a11y
   と略記されることもある
   

   View Slide

6. ウェブアクセシビリティとは
   ウェブページにある情報や機能の利用しやすさを意味しま
   す。
   引用：https://waic.jp/knowledge/accessibility/
   とても抽象的

   

   View Slide

7. 具体的には
   スクリーンリーダーで読み上げても伝わる？
   カラーコントラストが低くて読みにくくない？
   ♪ 読みやすい？
   読みやすい？
   

   View Slide

8. アクセシビリティの様々な切り口
   目

   耳

   体

   状況

   機械

   

   View Slide

9. アクセシビリティの様々な切り口
   目

   耳

   体

   状況

   機械

   達成基準がある

   

   View Slide

10. 達成基準
    WCAG (Web Content Accessibility Guidelines)
    W3C の Web Accessibility Initiative (WAI) が勧告
    WCAG 2.1 が最新（2.2 の勧告は2021年の予定）
    国際的には ISO/IEC 40500:2012 (WCAG 2.0 の内容)
    国内では JIS X 8341-3:2016 (WCAG 2.0 の内容)
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. アクセシビリティは必要不可欠

    

    View Slide

15. 本日の内容
    1. そもそもアクセシビリティとは
    2. 開発現場の実情
    3. アクセシビリティ改善の取り組み
    

    View Slide

16. 送信に失敗しました
    エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ
    ラー内容が入ります。エラー内容が入ります。
    閉じる
    

    View Slide

17. 要件定義
    ・最大256文字の動的テキスト
    ・エラーが起きた時に表示
    ・「閉じる」ボタンをクリックすると非表示
    

    View Slide

18. 要件定義
    ・最大256文字の動的テキスト
    ・エラーが起きた時に表示
    ・「閉じる」ボタンをクリックすると非表示
    本当にこれだけ？

    

    View Slide

19. アクセシビリティ要件
    • role=”alert” をつける
    • 「閉じる」ボタンが button として認識される
    • Tab キーで「閉じる」ボタンにフォーカス
    • 「閉じる」ことが明示される
    • Enter キーなどでクリックの代替操作ができる
    • カラーコントラスト
    

    View Slide

20. アクセシビリティ要件
    • role=”alert” をつける
    • 「閉じる」ボタンが button として認識される
    • Tab キーで「閉じる」ボタンにフォーカス
    • 「閉じる」ことが明示される
    • Enter キーなどでクリックの代替操作ができる
    • カラーコントラスト
    定義されない事が多い

    

    View Slide

21. アクセシビリティ要件
    • role=”alert” をつける
    • 「閉じる」ボタンが button として認識される
    • Tab キーで「閉じる」ボタンにフォーカス
    • 「閉じる」ことが明示される
    • Enter キーなどでクリックの代替操作ができる
    • カラーコントラスト
    エンジニアの裁量

    

    View Slide

22. 非機能要件に
    いかにこだわれるかが
    エンジニアの真価
    

    View Slide

23. アクセシビリティは
    エンジニアの力量によって
    完成度が大きく変わる
    

    View Slide

24. 本日の内容
    1. そもそもアクセシビリティとは
    2. 開発現場の実情
    3. アクセシビリティ改善の取り組み
    

    View Slide

25. WCAG 適合をチェックするツール
    ● Lighthouse
    ● URL を入力して計測するタイプ
    ● 外部から css を挿入してハイライトするものまで
    

    View Slide

26. WCAG 適合をチェックするツール
    ● Lighthouse
    ● URL を入力して計測するタイプ
    ● 外部から css を挿入してハイライトするものまで
    機械には限界がある

    

    View Slide

27. 送信に失敗しました
    エラー内容が入ります。エラー内容が入ります。エラー内容が入ります。エ
    ラー内容が入ります。エラー内容が入ります。
    閉じる
    

    View Slide

28. お名前
    送信する
    メールアドレス
    お住まいの住所
    郵便番号
    選択してください
    都道府県
    ︙
    書類送付先住所
    郵便番号
    選択してください
    都道府県
    ︙
    

    View Slide

29. お名前
    送信する
    あ
    メールアドレス
    お住まいの住所
    郵便番号
    選択してください
    都道府県
    ︙
    書類送付先住所
    郵便番号
    選択してください
    都道府県
    ︙
    形式が正しくありません。
    aria-invalid=”true”
    

    View Slide

30. お名前
    送信する
    メールアドレス
    お住まいの住所
    郵便番号
    選択してください
    都道府県
    ︙
    書類送付先住所
    郵便番号
    選択してください
    都道府県
    ︙
    でグループ化
    

    View Slide

31. お名前
    送信する
    メールアドレス
    お住まいの住所
    郵便番号
    選択してください
    都道府県
    ︙
    書類送付先住所
    郵便番号
    選択してください
    都道府県
    ︙
    の内側に設置されてる？
    

    View Slide

32. 文章の意味 や デザインの意図
    
    マークアップ
    ← 人の力が必要
    

    View Slide

33. 機械でできることは機械に任せて
    人が考えられる時間を増やす
    

    View Slide

34. Storybook
    コンポーネントのカタログ
    

    View Slide

35. storybook-addon-a11y
    

    View Slide

36. storybook-addon-a11y
    WCAG 適合をチェックできる
    

    View Slide

37. 使いにくい場面があった
    

    View Slide

38. storybook-addon-a11y
    WCAG 適合をチェックできる
    全体管理が難しい

    

    View Slide

39. CLI ツールを作った
    エラーを報告してくれるようにした
    

    View Slide

40. 自動化して時間が増えた
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. 時間が増えたおかげで
    人力が必要な部分に注力

    

    View Slide

46. 終わりに
    

    View Slide

47. 作業者的なエンジニアではなく
    開発メンバーの一人として取り組める
    

    View Slide

48. ご清聴ありがとうございました
    

    View Slide