20181128_Garoonでアクセシビリティなテスト / 20181128 Accessibility Garoon Test

UXCafe: チームで取り組む！サイボウズのアクセシビリティ
トーク1: Garoonチームのアクセシビリティ
Garoonでアクセシビリティなテスト

イベントページ: https://cybozu.connpass.com/event/106185/

Transcript

1. Garoonでアクセシビリティなテスト
   サイボウズ株式会社
   東京品質保証部
   小関直子
   

   View Slide

2. ▌自己紹介
   ⚫ 小関 直子（こせき なおこ）
   ⚫ GaroonQA
   ⚫ 2016年中途入社
   ⚫ Garoon品質保証責任者、QA業務全般
   Garoonの品質保証活動にアクセシビリ
   ティを取り入れたく、ギルドに参加！
   

   View Slide

3. （１）今までのアクセシビリティテスト
   

   View Slide

4. １．準備
   方針：まずは機能テストの中で少しずつ始めてみる
   ▌テスト前に実施したこと
   ⚫ アクセシビリティの汎用的な知識の共有
   ⚫ テストで使用するツールの統一
   

   View Slide

5. ２．テスト
   ▌テスト方法
   ⚫ 機能テストの合間に実施
   ⚫ テスターの気づきベースのテスト
   

   View Slide

6. ３．テストの実施結果
   ▌見つかったバグ（一例）
   ⚫ 読み上げツール（NVDA）で読み上げられない項目がある
   ⚫ 画面サイズを200%に拡大すると、レイアウトの一部が崩れる
   ⚫ レイアウトの一部が見づらい
   ⚫ 必要なタグ情報が記述されていない
   ⚫ タブ遷移がうまく動かない箇所がある
   

   View Slide

7. ３．テストの実施結果
   ▌見つかったバグ（一例）
   ⚫ 読み上げツール（NVDA）で読み上げられない項目がある
   ⚫ 画面サイズを200%に拡大すると、レイアウトの一部が崩れる
   ⚫ レイアウトの一部が見づらい
   ⚫ 必要なタグ情報が記述されていない
   ⚫ タブ遷移がうまく動かない箇所がある
   思ったよりもバグが見つかった！
   

   View Slide

8. ４．所感
   機能テストの中で、アクセシビリティ観点のバ
   グも検出できそう！！
   ☺
   ✨
   

   View Slide

9. ５．検出した不具合の検証
   ▌見つかったバグ（一例）
   ⚫ 読み上げツール（NVDA）で読み上げられない項目がある
   ⚫ 画面サイズを200%に拡大すると、レイアウトの一部が崩れる
   ⚫ レイアウトの一部が見づらい
   ⚫ 必要なタグ情報が記述されていない
   ⚫ タブ遷移がうまく動かない箇所がある
   検出したバグを振り分け・・・
   ：改修した
   ：改修見送り
   

   View Slide

10. ５．検出した不具合の検証
    ▌見つかったバグ（一例）
    ⚫ 読み上げツール（NVDA）で読み上げられない項目がある
    ⚫ 画面サイズを200%に拡大すると、レイアウトの一部が崩れる
    ⚫ レイアウトの一部が見づらい
    ⚫ 必要なタグ情報が記述されていない
    ⚫ タブ遷移がうまく動かない箇所がある
    ツール側の仕様だったり・・・
    修正すると、仕様への影響があったり、
    他に優先度の高いバグがあったり・・・
    

    View Slide

11. ５．検出した不具合の検証
    ▌見つかったバグ（一例）
    ⚫ 読み上げツール（NVDA）で読み上げられない項目がある
    ⚫ 画面サイズを200%に拡大すると、レイアウトの一部が崩れる
    ⚫ レイアウトの一部が見づらい
    ⚫ 必要なタグ情報が記述されていない
    ⚫ タブ遷移がうまく動かない箇所がある
    実際に改修されたのはごくわずか・・・
    

    View Slide

12. ６．所感（訂正）
    機能テストの合間にアクセシビリティのバグを見つ
    けても思ったよりも効果が薄い・・・
    
    

    View Slide

13. （２）改善活動
    

    View Slide

14. １．改善方針
    ①テスト対象
    →機能テストの合間に対象を決めず、闇雲にテス
    トするのではなく各機能要件で、アクセシビリティ対応
    を実施した部分をテスト対象とする
    

    View Slide

15. １．改善方針
    ②テストの方法
    →テスターの主観に依存せずに、観点のばらつきや
    指摘ミスを防止するテスト方法とする
    ⇒チェックリストを活用し、テスト観点とテスト内容
    を定義する
    チェックリスト☞
    

    View Slide

16. ２．チェックリストの詳細（テストに関連する部分）
    チェック項目の詳細☟
    WCAGの項目単位（1.1.1）
    

    View Slide

17. ２．チェックリストの詳細（テストに関連する部分）
    1.1.1
    非テキストコンテンツ:
    利用者に提示されるすべての非テキストコンテンツには、同等の
    目的を果たすテキストによる代替が提供されている。
    

    View Slide

18. ２．チェックリストについて
    どのようなユーザに価値があるのか
    

    View Slide

19. ２．チェックリストについて
    どのように確認するのか？
    

    View Slide

20. ２．チェックリストについて
    チェック対象外となる部分も明記
    

    View Slide

21. （３）これからのアクセシビリティテスト
    

    View Slide

22. ▌テスト前に実施すること
    ⚫ チェックリストの共有
    →テスト観点の共通認識を持つ
    ⚫ ツールの実際の使われ方を共有
    １．準備
    方針：アクセシビリティ対応部分をチェックリストベースでテスト
    

    View Slide

23. ２．テスト
    ▌テストの方法
    ⚫ アクセシビリティ対応に対するテスト
    ⚫ チェックリストベースのテスト
    →指摘ミスや観点のばらつき防止
    検出すべきバグを検出すべきタイミングで！
    

    View Slide

24. ３．これから目指すもの
    ⚫ 状況や情勢は日々変わるもの
    →QAの誰もが、アクセシビリティのテストをアップデートで
    きるように！
    まずは、チェックリストの浸透とアクセシビリティテストの実績
    を積むことはもちろんですが・・・
    

    View Slide

25. ありがとうございました。
    

    View Slide