Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

freee株式会社で、デザイナーなのかエンジニアなのか 
 よくわからない感じの存在になっています 
 @ymrl
 2

Slide 3

Slide 3 text

アクセシビリティについて考えてること
 先週わりとガッツリ喋ったので、観るか読むかしてみてください 
 https://forkwell.connpass.com/event/198726/ 
 https://zenn.dev/ymrl/articles/7f41ad2f39f714 


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

チェック方法が難しくない?
 ● ユーザーCSSを簡単に当てたり外したりする方法は?
 ● 技術に詳しくない人でもすぐ確認できる?


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

行間とかが広がる


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

今日紹介したブックマークレット
 ● 表示中のページにカスタム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 


Slide 23

Slide 23 text

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