axe-core で楽々アクセシビリティチェック #GAADjp

2.5K Views

May 19, 22

スライド概要

2022年5月19日に行われたオンラインセミナー「GAAD Japan 2022」のスポンサーLTで使用したスライドです。 https://www.gaad.jp/

profile-image

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

楽々 axe-core で アクセシビリティチェック ⿊帯(アクセシビリティ) 中野 信 ©Yahoo Japan

2.

⾃⼰紹介 • 中野 信(なかの まこと) • UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • ⿊帯(アクセシビリティ) • デジタル庁(⺠間登⽤ ⾮常勤) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) ©Yahoo JAPAN 2

3.

サマリ • JIS の網羅的なチェックを axe-core で少し楽をしよう • ⽬視で⾒落としがちな箇所を機械的にチェックしよう • チェック量が多いとくじける箇所を機械に委ねよう ©Yahoo JAPAN 3

4.

axe-core とは? ©Yahoo Japan 4

5.

axe-core とは? axe-core とは? アクセシビリティのルールライブラリー • • https://github.com/dequelabs/axe-core • Deque Systems, inc. が開発・公開している • オープンソースで公開されている • ⽇本語のロケールが⽤意されてる ©Yahoo JAPAN 5

6.

axe-core とは? どう使うか? • ヘッドレスブラウザを介して使う https://accessible-usable.net/2021/02/entry_210223.html https://www.anothersky.jp/2021/02/improvement-axe-runner.html ©Yahoo JAPAN 6

7.

axe-core とは? 何をチェックしてくれるか? HTML の記述から判断できる内容 • • WCAG2.0 • WCAG2.1 • ベストプラクティス • 実験的なルール https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md ©Yahoo JAPAN 7

8.

axe-core とは? 具体的にどのようなチェック結果になるか? 画像には代替テキストがなければなりません • • ルールID: image-alt • ルールセット: axe-core 4.4 • ユーザーへの影響: 緊急 • WCAG(の達成基準): 1.1.1 https://dequeuniversity.com/rules/axe/4.4/image-alt?application=RuleDescription ©Yahoo JAPAN 8

9.

どう JIS のチェックと組み合わせるか? ©Yahoo Japan 9

10.

どう JIS のチェックと組み合わせるか? JIS X 8341-3:2016 のチェック(試験) • エクセルシートの実装チェックリストから⽬視でチェック • 240項⽬近い達成⽅法のリストの中から適合・⾮適合を選択する • つらい ©Yahoo JAPAN 10

11.

どう JIS のチェックと組み合わせるか? 楽をしよう! axe-core の結果を実装チェックリストにマッピングする • • どの達成⽅法のどの程度チェックされているかが分かる • 内容の確認は必要だが、抜けもれを減らせる ©Yahoo JAPAN 11

12.

どう JIS のチェックと組み合わせるか? どう組み合わせるか? • axe-core のチェック結果を csv で出⼒する • 実装チェックリストにチェック結果を貼る • 実装チェックリストの達成⽅法の⾏に、ルール ID を数える関数を追加する miChecker の同梱ファイル 「ワークシート.xlsx」と同じ仕組み ©Yahoo JAPAN 12

13.

どう JIS のチェックと組み合わせるか? どう組み合わせるか? axe-coreのチェック結果のシート ルール ID 実装チェックリストシート 達成⽅法 ©Yahoo JAPAN ルール ID カウント数 13

14.

やって分かったこと ©Yahoo Japan 14

15.

やって分かったこと よかったこと ページの⽬視で抜けやすいチェックが楽になった • • ⾔語設定 • 属性値の間違い • 抜けている要素・項⽬のチェック( iframe のタイトルなど) 同じページを何回かチェックするのが楽になった • • 何回チェックしても疲れない! ©Yahoo JAPAN 15

16.

やって分かったこと ⼤変だったこと 達成⽅法とルール ID のマッピング • • 数が多い • axe-core の更新頻度が⾼いため、都度確認が必要 ©Yahoo JAPAN 16

17.

やって分かったこと 実感出来たこと • ツールでチェックできる箇所は限定的 • 体感的に JIS 規格全体の2~3割 https://weba11y.jp/basics/faq/automate-testing/ ©Yahoo JAPAN 17

18.

みんなも axe-core で少し楽をしよう! ©Yahoo Japan

19.

EOP ©Yahoo Japan