スマホアプリの アクセシビリティ改善 〜定常的な質の担保を目指して〜 #GAADjp

スマホアプリの アクセシビリティ改善 ～定常的な質の担保を目指して～ 2020年5月21日 ヤフー株式会社 中野 信 YAHOO! JAPAN Copyright © Yahoo Japan

自己紹介 中野 信 広告事業のデザインと UIガイドラインの策定・運用と アクセシビリティの向上に関わっています • 第5/6/9代黒帯(アクセシビリティ) • ウェブアクセシビリティ基盤委員会 (WAIC)作業部会1(理解と普及) 副査 Copyright © Yahoo Japan 2

スマホアプリの アクセシビリティ検証 YAHOO! JAPAN Copyright © Yahoo Japan

取り組みの背景 • ガイドラインだけではなかなか向上しないアク セシビリティ • 一方、品質向上の一環でスマホアプリのUX検証 体制が整った • アクセシビリティのチェック項目を追加するこ とで、アクセシビリティ品質の底上げを図った Copyright © Yahoo Japan 4

ヤフーのアプリ品質チェックフロー 開発 リリース前 チェック リリース リリース後 チェック アクセシビリティに 関する項目を追加 Copyright © Yahoo Japan

チェック項目の設計 • WCAG2.0のレベルA+WCAG2.1の一 部でテスト項目を設計 ・タップ・ジェスチャーなど タッチイベントの項目を追加 • 作業コストと公共性でレベル分け ・必須・原則必須・検討 Copyright © Yahoo Japan

追加したチェック項目 • 達成基準 2.5.1 ポインタのジェスチャ • 達成基準 2.5.2 ポインタのキャンセル • (達成基準 2.5.2)ダウンイベントがない • (達成基準 2.5.2)中止又は元に戻すこと ができる Copyright © Yahoo Japan

結果 1. 代替テキストの抜け・間違い 2. テキストのコントラスト不足 3. 非表示要素にフォーカスされる 4. フォーカスできない、操作できない 5. フォームにラベルがない Copyright © Yahoo Japan 8

閉じる 乗り換え乗車位置 渋谷駅の乗車位置 JR山手線内回り 品川・東京方面 11両編成 2 3 4 5 6 7 8 9 10 1 進行方向 浜松町駅の駅設備 号車付近 階段 エスカレーター エレベーター 改札 スロープ 同じホーム乗換 降車位置付近の駅設備をピンクで表示 Copyright © Yahoo Japan 9

ベンダーと協業 • ベンダーのチェック結果をダブルチェッ ク • チェック結果に加え、具体的な修正方法 などの提案 • ベンダーとテスト項目や検証方法につい てのコミュニケーション Copyright © Yahoo Japan 10

気づき • 詳細なチェックでなければ専門のテスタ ーではなくてもチェック可能 • スクリーンリーダーはビジュアルブラウ ザに比べて情報取得に時間がかかる • スマホアプリはスクリーンリーダーと相 性が悪いジェスチャーUIがある Copyright © Yahoo Japan 11

スマホアプリの アクセシビリティ改善 ～定常的な質の担保を目指して～ ご清聴ありがとうございました YAHOO! JAPAN Copyright © Yahoo Japan