アクセシビリティテストとは。そのやり方をご紹介！

「テクバン株式会社 品質ソリューション」connpassグループでは、「ソフトウェアテスト」「テスト自動化」「アジャイル」「プロセス改善」など、 「QA/テスト」に関する様々なキーワードをテーマにしたイベントを開催しています。
https://tech-quality.connpass.com/

今回のテーマは「アクセシビリティテスト」です。

◆ こんな方におすすめ
アクセシビリティテストについて興味がある方
どのようにアクセシビリティテストをすれば良いのか知りたい方

#アクセシビリティテスト #ウェブアクセシビリティ #WCAG #JIS X 8341-3:2016 #自動テスト #mabl

Transcript

1. アクセシビリティテストとは？ そのやり方をご紹介！ ~ QA Webinar vol.3 ~ 1
2. | © 2022 TechVan co., Ltd. 2 岸 哲史 Kishi Satoshi テクバン株式会社 セールス歴 13年 マネージャ歴 7年 アライアンス営業 自分の構成要素 Click | オンライン名刺
3. | © 2022 TechVan co., Ltd. 3 ウェブアクセシビリティの必要性・重要性 ウェブアクセシビリティとは 「高齢者や障害者を含め、誰もがホームページ等で提供される情報や機能を支障なく利用できること」 聴覚障害 発達障害 視覚障害 感覚過敏
4. | © 2022 TechVan co., Ltd. 4 ウェブアクセシビリティの必要性・重要性 2021年6月～ 日本国内で障害者差別解消法の改正法によりウェブアクセシビリティ対応が民間企業でも義務化 当該障害者の性別、年齢及び障害の状態に応じて、社会的障壁の除去の実施について必要かつ 合理的な 配慮をするように努めなければならない。 改正前の条文 当該障害者の性別、年齢及び障害の状態に応じて、社会的障壁の除去の実施について必要かつ 合理的な 配慮をしなければならない。 出展：障害を理由とする差別の解消の推進に関する法律の一部を改正する法律新旧対照条文（PDF） https://www8.cao.go.jp/shougai/suishin/pdf/law_r03-56_shinkyu.pdf 改正後の条文 ドミノピザWeb訴訟、視覚障害者が米最高裁で勝訴―米メディア 出展 Supreme Court hands victory to blind man who sued Domino’s over site accessibility
5. | © 2022 TechVan co., Ltd. 5 自己紹介 人事労務の電子化プロジェクトに テスターとして参画。 アクセシビリティテストを経験。 現在はテスト自動化推進チームとして活動中。 槙矢 智史 Makiya Satoshi
6. | © 2022 TechVan co., Ltd. 6 Webアクセシビリティの言葉の意味 高齢者や障害者など、心身の機能に関する制約や利用環境等に関係 なく、すべての人がウェブで提供される情報を利用できるようにす ること。 https://www.soumu.go.jpより 総務省
7. | © 2022 TechVan co., Ltd. 7 Webアクセシビリティとは 誰にとっても、 どのような状況でも Webコンテンツ が使えること ・高齢者 ・障害者 ・怪我をした人 ・デスクトップ、ノートPC、 モバイル ・明るい場所、暗い場所
8. | © 2022 TechVan co., Ltd. 8 WCAGとは … ウェブアクセシビリティのガイドライン WCAG ・WCAG2.0 2008年に勧告。2012年に国際規格となる。 ・WCAG2.1 2018年に勧告。2.0から達成基準が追加されている。 ・WCAG2.2 2020年に公開（草案）
9. | © 2022 TechVan co., Ltd. 9 WCAG 例と適合レベル A ：アクセシビリティ確保に最低限必要なレベル AA ：公的機関に求められるレベル AAA：最高レベル
10. | © 2022 TechVan co., Ltd. 10 キーボード操作のみで操作可能か Webアクセシビリティの具体例 コントラスト比が不足していないか 画面の文字を音声で読み上げてくれるか A A A
11. | © 2022 TechVan co., Ltd. 11 アクセシビリティテスト実施方法 キーボード操作のみで操作可能か ▪「Tab」キーでフォーカスを操作できる ▪ 「Shift+Tab」でフォーカスを１つ前に操作できる ▪ 「Enter」での決定ができる ▪ モーダル内でもフォーカスの移動ができる ▪ チェックボックスは「Space」キー ▪ ラジオボタンは「↑」「↓」「←」「→」キー
12. | © 2022 TechVan co., Ltd. 12 アクセシビリティテスト実施方法 コントラスト比が不足していないか あいうえお あいうえお コントラスト比：低 コントラスト比：高 最低でも 4.5:1 以上 文字色 背景色 1.5：1 10：1
13. | © 2022 TechVan co., Ltd. 13 アクセシビリティテスト実施方法 https://webaim.org/resources/contrastchecker/ 〇 Web AIM Contrast Checker ・文字色と背景色のコントラスト比が わかるツール ・WCAGに準拠できているか判別
14. | © 2022 TechVan co., Ltd. 14 アクセシビリティテスト実施方法 画面の文字を音声で読み上げてくれるか ・Windows：NVDA ・iOSやMac：VoiceOver
15. | © 2022 TechVan co., Ltd. 15 アクセシビリティテスト実施方法 ・漢字の読み上げ ◦日時→にちじ ◦東海→とうかい ×日 時→ひ とき ×東 海→ひがしうみ ・ステータス・メッセージの読み上げ 予約が完了しました。 パスワードが違います。 画面の文字を音声で読み上げてくれるか
16. | © 2022 TechVan co., Ltd. 16 mablでのアクセシビリティテスト テスト自動化ツール 特徴 ・クラウド型サービス →個人個人の環境構築が不要 ・ノーコードで実装できる →簡単にテスト作成が可能 ・AIによる自動化の補助 →ビジュアルテストで画面の差分を検知
17. | © 2022 TechVan co., Ltd. 17 mablアクセシビリティテストでできること ①WCAGの基準を選定し、それに応じた検証 ②画面全体のアクセシビリティ違反を検知 ③結果確認
18. | © 2022 TechVan co., Ltd. 18 まとめ アクセシビリティ 誰にとっても、 どのような状況でも Webコンテンツが使えること ・キーボード操作 ・コントラスト比 ・音声読み上げ テスト方法 mablでの 自動チェック ・自動でアクセシビリティテスト ・手動でのテストも必要
19. | © 2022 TechVan co., Ltd. 検索 テクバン 問い合わせ 検索 テクバン 採用