Webアクセシビリティ関連業務のためにブックマークレット書いてる

2021/01/21(Thu) アクセシビリティTips LT会 #accessibilitylt の発表資料です
https://rakus.connpass.com/event/199440/

↓Google Slides↓
https://docs.google.com/presentation/d/1_IE_oav-Ae0F_OWuU_Any4bHtXkMUBnUb3_O9u7Hm5U/edit?usp=sharing

Transcript

1. freee 株式会社
 Webアクセシビリティ関連業務のために
 ブックマークレット書いてる

2. freee株式会社で、デザイナーなのかエンジニアなのか 
 よくわからない感じの存在になっています 
 @ymrl
 2
3. アクセシビリティについて考えてること
 先週わりとガッツリ喋ったので、観るか読むかしてみてください 
 https://forkwell.connpass.com/event/198726/ 
 https://zenn.dev/ymrl/articles/7f41ad2f39f714 

4. 今日の話
 Webアクセシビリティのチェックや理解のために
 ブックマークレット作ってる

5. freeeアクセシビリティー・ガイドライン
 https://a11y-guidelines.freee.co.jp/ 

6. チェックリスト
 https://a11y-guidelines.freee.co.jp/checks/checklist.html 

7. freeeガイドライン「テキスト表示のカスタマイズ」
 [MUST]ユーザーがline-heightを1.5em以上、段落間の空白を2em以上、 letter-spacingを0.12em以上に変更し、その他のプロパティーを一切変更していない 状況において、コンテンツおよび機能に損失が生じないようにする。
 

8. WCAG 1.4.12 テキストの間隔 (AA)
 以下のテキストスタイルプロパティをサポートするマークアップ言語を用いて実装されているコンテンツにお いては、以下をすべて設定し、かつ他のスタイルプロパティを変更しないことによって、コンテンツ又は機能 の損失が生じない:
 • 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する 
 • 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する 
 • 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する 
 • 単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する 
 例外: テキスト表記においてこれらのテキストスタイルプロパティの一つ以上を使用しない自然言語及び文字 体系では、その言語と文字体系の組み合わせに存在するプロパティだけを用いて、この達成基準に適合す ることができる。
9. チェック方法が難しくない？
 • ユーザーCSSを簡単に当てたり外したりする方法は？
 • 技術に詳しくない人でもすぐ確認できる？

10. ブックマークレットにした
 

11. 行間とかが広がる

12. なぜブックマークレット？
 • ユーザーCSSを設定するブラウザ拡張の定番がよくわからない
 • 手順をなるべくシンプルにしておきたい
 • この程度をわざわざブラウザ拡張にするのは面倒くさい

13. freeeガイドライン
 「十分な大きさのクリック/タッチのターゲット」
 [SHOULD]クリック/タッチのターゲット・サイズは充分に大きいものにする。
 • デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以 上
 • モバイル向けは44 x 44 CSS px以上
 

14. WCAG 2.5.5 ターゲットのサイズ (AAA)
 ポインタ入力のターゲットのサイズが 44 × 44 CSS ピクセル以上である。ただし、以下の場合は 例外とする。
 • 同等のものが存在する: そのターゲットと同等のリンク又はコントロールが同じページに 44 × 44 CSS ピクセル以上のサイズで存在する。 
 • インラインである: そのターゲットが文中、又はテキストブロック内に存在する。 
 • ユーザエージェントのコントロールである : ターゲットのサイズがユーザエージェントによって 定められており、かつコンテンツ制作者が変更していない。 
 • 必要不可欠: そのターゲットを特定の方法で提示することが、情報伝達にとって 必要不可欠 である。

15. これ難しくない？
 • 開発者ツールを開けばわからなくもない
 • どの要素がのどの部分がクリック可能かとか、パッと見ではわからない
 • それ技術に詳しくなくてもできる？

16. ブックマークレットにした
 

17. マウスポインタのところに枠が出る
 正確なサイズまではわからないけど、「これ小さくない？」がわかりやすくなる 

18. キーボード操作がよくわからないらしい
 • フォーカスまわりの話が、なかなかピンとこなさそう
 ◦ Tabキーで目的のリンクやボタンに移動してEnterキーを押して操作
 ◦ フォーカスインジケーターを消してはいけない
 ◦ Tabフォーカス操作でページを大きく書き換えたりしてはいけない
 • Webをポインティングデバイス無しで操作したことがなさそう

19. ブックマークレット書いた
 

20. ブラウザの描画領域に入るとポインタが消える
 これでもうキーボードを使わざるを得ません 

21. 開発者向けA11y研修資料サイトにも組み込んだ
 チェックボックスをクリックした瞬間にキーボード操作を強いられる 

22. 今日紹介したブックマークレット
 • 表示中のページにカスタムCSSを適用するブックマークレット 
 ユーザーCSSを適用したチェックの実施方法 
 https://a11y-guidelines.freee.co.jp/explanations/text-custom-css.html 
 • 44x44 pxの4角形を表示するブックマークレット 
 クリックやタッチのターゲット・サイズに関連する問題とターゲット・サイズの確認方法 
 https://a11y-guidelines.freee.co.jp/explanations/target-size.html 
 • マウス・ポインターを非表示にするブックマークレット 
 Tab/Shift+Tabキーを用いたチェック 
 https://a11y-guidelines.freee.co.jp/explanations/tab-order-check.html 

23. まとめ
 Webアクセシビリティのチェックや理解のために
 いろいろブックマークレット書いてる
 （たのしい）