Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ymrl
January 21, 2021

 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

ymrl

January 21, 2021
Tweet

More Decks by ymrl

Other Decks in Technology

Transcript

  1. freee 株式会社

    Webアクセシビリティ関連業務のために

    ブックマークレット書いてる


    View full-size slide

  2. freee株式会社で、デザイナーなのかエンジニアなのか 

    よくわからない感じの存在になっています 

    @ymrl

    2

    View full-size slide

  3. アクセシビリティについて考えてること

    先週わりとガッツリ喋ったので、観るか読むかしてみてください 

    https://forkwell.connpass.com/event/198726/ 

    https://zenn.dev/ymrl/articles/7f41ad2f39f714 


    View full-size slide

  4. 今日の話

    Webアクセシビリティのチェックや理解のために

    ブックマークレット作ってる


    View full-size slide

  5. freeeアクセシビリティー・ガイドライン

    https://a11y-guidelines.freee.co.jp/ 


    View full-size slide

  6. チェックリスト

    https://a11y-guidelines.freee.co.jp/checks/checklist.html 


    View full-size slide

  7. freeeガイドライン「テキスト表示のカスタマイズ」

    [MUST]ユーザーがline-heightを1.5em以上、段落間の空白を2em以上、
    letter-spacingを0.12em以上に変更し、その他のプロパティーを一切変更していない
    状況において、コンテンツおよび機能に損失が生じないようにする。


    View full-size slide

  8. WCAG 1.4.12 テキストの間隔 (AA)

    以下のテキストスタイルプロパティをサポートするマークアップ言語を用いて実装されているコンテンツにお
    いては、以下をすべて設定し、かつ他のスタイルプロパティを変更しないことによって、コンテンツ又は機能
    の損失が生じない:

    ● 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する 

    ● 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する 

    ● 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する 

    ● 単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する 

    例外: テキスト表記においてこれらのテキストスタイルプロパティの一つ以上を使用しない自然言語及び文字
    体系では、その言語と文字体系の組み合わせに存在するプロパティだけを用いて、この達成基準に適合す
    ることができる。

    View full-size slide

  9. チェック方法が難しくない?

    ● ユーザーCSSを簡単に当てたり外したりする方法は?

    ● 技術に詳しくない人でもすぐ確認できる?


    View full-size slide

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


    View full-size slide

  11. 行間とかが広がる


    View full-size slide

  12. なぜブックマークレット?

    ● ユーザーCSSを設定するブラウザ拡張の定番がよくわからない

    ● 手順をなるべくシンプルにしておきたい

    ● この程度をわざわざブラウザ拡張にするのは面倒くさい


    View full-size slide

  13. freeeガイドライン

    「十分な大きさのクリック/タッチのターゲット」

    [SHOULD]クリック/タッチのターゲット・サイズは充分に大きいものにする。

    ● デスクトップ向けWebでは最低24 x 24 CSS px、可能であれば44 x 44 CSS px以
    上

    ● モバイル向けは44 x 44 CSS px以上


    View full-size slide

  14. WCAG 2.5.5 ターゲットのサイズ (AAA)

    ポインタ入力のターゲットのサイズが 44 × 44 CSS ピクセル以上である。ただし、以下の場合は
    例外とする。

    ● 同等のものが存在する: そのターゲットと同等のリンク又はコントロールが同じページに 44
    × 44 CSS ピクセル以上のサイズで存在する。

    ● インラインである: そのターゲットが文中、又はテキストブロック内に存在する。

    ● ユーザエージェントのコントロールである
    : ターゲットのサイズがユーザエージェントによって
    定められており、かつコンテンツ制作者が変更していない。

    ● 必要不可欠: そのターゲットを特定の方法で提示することが、情報伝達にとって
    必要不可欠
    である。


    View full-size slide

  15. これ難しくない?

    ● 開発者ツールを開けばわからなくもない

    ● どの要素がのどの部分がクリック可能かとか、パッと見ではわからない

    ● それ技術に詳しくなくてもできる?


    View full-size slide

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


    View full-size slide

  17. マウスポインタのところに枠が出る

    正確なサイズまではわからないけど、「これ小さくない?」がわかりやすくなる 


    View full-size slide

  18. キーボード操作がよくわからないらしい

    ● フォーカスまわりの話が、なかなかピンとこなさそう

    ○ Tabキーで目的のリンクやボタンに移動してEnterキーを押して操作

    ○ フォーカスインジケーターを消してはいけない

    ○ Tabフォーカス操作でページを大きく書き換えたりしてはいけない

    ● Webをポインティングデバイス無しで操作したことがなさそう


    View full-size slide

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


    View full-size slide

  20. ブラウザの描画領域に入るとポインタが消える

    これでもうキーボードを使わざるを得ません 


    View full-size slide

  21. 開発者向けA11y研修資料サイトにも組み込んだ

    チェックボックスをクリックした瞬間にキーボード操作を強いられる 


    View full-size slide

  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 


    View full-size slide

  23. まとめ

    Webアクセシビリティのチェックや理解のために

    いろいろブックマークレット書いてる

    (たのしい)


    View full-size slide