outline: none;
https://gyazo.com/c23c7c38e90e271121e3d12fd652d17f
この資料はMeguro.css#4のLT資料です。
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
おおやまみちのく a.k.a やまのく
Twitter
GitHub
Qiita
株式会社GEEK.icon 株式会社GEEKでマークアップ・フロントエンドをやってます
https://www.geek.co.jp/
https://blog.geek.co.jp/
GitHub.icon https://github.com/geekcojp/
npm.icon https://www.npmjs.com/org/geekcojp
Qiita.icon https://qiita.com/organizations/geekinc
既婚で1児の父と猫🐈🐈🐈の飼い主
技術書典#5にてサークル参加していました
https://gyazo.com/68a19f11b771c82a7887ede7791af040
Webアクセシビリティに関する本
これからはじめるWebアクセシビリティ - こんのいぬ - BOOTH(同人誌通販・ダウンロード)
今回のテーマ:「outline: none;」
outlineとは?
輪郭線に関する様々なプロパティを単一の宣言で設定する一括指定プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/outline
outline-color ... 輪郭線の色
outline-style ... 輪郭線の種類
outline-width ... 輪郭線の太さ
outline: none;とは?
上述したフォーカススタイルを一括で消すもの
実装後のデザインチェックのとき
ボタンをクリックした時に
なんか灰色の線がついている
なんか青い線ついている
なんか黄色い線ついている
のを消すときとかにやるやつ
初代reset.cssでは実装されていた(現行のは無し)
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/#comment-412284
エンジニア・デザイナー諸君
というかWebに従事する者全員
思考停止してoutline: none;するのはやめよう
outline: none;が何故良くないのか
マウス操作をする際にはあまり重要ではないかもしれないが
キーボード操作(タブ)による移動がわからなくなる
特にスクリーンリーダーなど支援技術が必要な人達にとってつらい
アクセシビリティの観点でバッド
達成基準 2.4.7 を理解する | WCAG 2.0解説書
F78: 達成基準 2.4.7 の失敗例 - 視覚的なフォーカスインジケータを除去する又は不可視にするような方法で、要素のアウトライン及びボーダーをスタイル指定する | WCAG 2.0 達成方法集
#アクセシビリティの考慮事項 outline - CSS: カスケーディングスタイルシート | MDN
現在位置がわからなくなる
タブで移動しているときに急に消えた!となりかねない
キーボード操作に変更する時の手がかりが消える
もしくはそもそも見えない
*:focus { outline:none; }
だいぶ前から言われていることではあり…
https://gyazo.com/b58d674623ab8d92e91b24c931f195b9
http://www.outlinenone.com/
If you must remove it, provide alternative styling
outlineを削除するなら代替手段をとってくれ
https://gyazo.com/69e886b333f6c0c3df323d871dfe51eb
background-colorを変える
colorを変える
outlineを変える
視認性を上げる
とはいえ
フォーカスのデフォルトスタイルのままだと美しくない
とデザイナーや見た目に拘る人は言う yamanoku.icon
アクセシビリティとビジュアルをトレードオフにしたくない!part2|挙母ロコ|note
視覚的にわかるユーザーだと煩わしい
この層がどれくらいいるかは要出典 yamanoku.icon
しかしoutline: none;にして支援技術で閲覧する人たちをないがしろにしてはいけない
寛容のパラドックスっぽい
そうなると
マウス操作とキーボード操作でのスタイル別にするのはどうか
マウスクリックフォーカス時 → なし
キーボード操作フォーカス時 → あり
:focus-visibleという手段
code:focus-visible.css
inputtype="text":focus {
outline: none;
}
inputtype="text":focus-visible {
outline: 2px solid blue;
}
キーボードフォーカスするときのみ当たるスタイル
https://gyazo.com/46f9f1f94bbc72fe4b6f8a99233f937d
問題はCSS Selectors Level 4のものであること
ステータスがWorking Draft
仕様が「まだ」安定していない…
https://caniuse.com/#feat=css-focus-visible
Firefox以外は未対応(プレフィックス必要)
Chromeはflagを立てる必要あり
https://gyazo.com/3ab3f4ff546e7af7d5db69d83c5b2ac3
Enabled through the "Experimental Web Platform features" flag in chrome://flags
現状CSSだけでは課題が残る…
ブラウザが未対応なら、JSライブラリに頼ってみよう!
CSS会なのにすみませんyamanoku.icon
focus-visible
GitHub.icon https://github.com/WICG/focus-visible
https://wicg.io/
polyfill的な扱い
code:focus-visible-polyfill.css
/* ボタンのマウスクリック時はフォーカススタイルを外す */
.js-focus-visible button:focus:not(.focus-visible) {
outline: none;
}
Element.prototype.classListのpolyfillが必要(IE6-9)
https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList"
what-input
GitHub.icon https://github.com/ten1seven/what-input
クリック、タブ、タッチ挙動のそれぞれでクラスが付与される
code:focus-visible-polyfill.css
/* ボタンのマウスクリック時はフォーカススタイルを外す */
data-whatinput="mouse" button:focus {
outline: none;
}
/* ボタンのキーボードでの移動時はフォーカスのスタイル適応 */
data-whatinput="keyboard" button:focus {
...
}
フォーカスされたエレメントも取れる
https://gyazo.com/6bdf768de2225bb97a1d0a2d60245f77
他キーボードのキー操作も調整できる
whatInput.ignoreKeys([1, 2, 3])
参考:もうoutlineを消さない。クリック・タップ・キーボードのイベントを判定してくれるJSライブラリ「what-input」 | Tips Note by TAM
安田学さん記事
フォーカス時のスタイル適応例
https://gyazo.com/3cabe7a10a83ff5766eca4233856b70e
国立国会図書館
操作可能、リンク領域を囲む
https://gyazo.com/24adb9a0f478dc4ce2928100e75a6c7d
ワシントン大学
ホバー時とフォーカス(タブ移動)時でスタイルが違う
https://gyazo.com/e24729e9b89645ae2657fa918cad8079
backlog ログイン時
プロダクトカラーと合わせてる
その他は フォーカス_スタイル集 より
閑話休題1:GitHubのフォームのタブ遷移
https://gyazo.com/60e0b02e9c1c7684e93d2423743d9b63
Comment が先にフォーカスされる
Close pull requestが最後
閑話休題2:株式会社オロのTOPページ
https://gyazo.com/73684cb0b072e7c52b4c04fb445ea307
PC時のキーボード移動は概ね問題なさそうだったが…
https://gyazo.com/62de914247a206399a0a67f7f60589a3
SP時のハンバーガーメニューにタブ移動できない(フォーカスがあたらない)
原因はbuttonタグではなくdivタグだったため
対策として<button type="button">に変更するとフォーカスがあたります
divのままならrole=buttonとtabindex属性つけるでもいいぞ!
本当は<button>でやるべきなのであんまりよくない…
https://gyazo.com/8aa25117edf1d9f19f7239d747274f8b
yamanoku.icon 直してもらった!!!!!
アクセシビリティ対応って大変なんだな
フォーカスを例にとったがこれは数ある中の1つの対応
なにを学べばいいんだろうか
他にもどういうのがあるんだろうか
というかそういうのやっていきたいんだけどきっかけがわからん
そういや技術書典で書きました
https://gyazo.com/68a19f11b771c82a7887ede7791af040
Webアクセシビリティに関する本
これからはじめるWebアクセシビリティ - こんのいぬ - BOOTH(同人誌通販・ダウンロード)
¥500の電子配信(pdf)
そのほかアクセシビリティにまつわる情報も載せてます(第9章)
Google公式でもこの辺の動画がでてる(2017年)
https://www.youtube.com/watch?v=ilj2P5-5CjI
a11y関連プレイリスト
https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
アクセシビリティを意識した CSS の書き方 - Frasco
CSS視点でのアクセシビリティ対応
まとめ
outline: none;をする前に一旦立ち止まろう
デザイナーとフォーカススタイリングについて考え直してみる
問題なければデフォルトものに委ねてみる
スタイルを充てるなら徹底的に付き合ってみる
ライブラリの導入を検討してみよう
アクセシビリティへの意識をもってみよう
まずはいろんなサイトをタブキーで移動してみよう
自分の作ったWebサイト・Webアプリはどうなってるか見直してみよう