outline: none;
https://gyazo.com/c23c7c38e90e271121e3d12fd652d17f
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
おおやまみちのく a.k.a やまのく
株式会社GEEK.icon 株式会社GEEKでマークアップ・フロントエンドをやってます 既婚で1児の父と猫🐈🐈🐈の飼い主
https://gyazo.com/68a19f11b771c82a7887ede7791af040
Webアクセシビリティに関する本
今回のテーマ：「outline: none;」
outlineとは？
輪郭線に関する様々なプロパティを単一の宣言で設定する一括指定プロパティ
outline-color ... 輪郭線の色
outline-style ... 輪郭線の種類
outline-width ... 輪郭線の太さ
outline: none;とは？
上述したフォーカススタイルを一括で消すもの
実装後のデザインチェックのとき
ボタンをクリックした時に
なんか灰色の線がついている
なんか青い線ついている
なんか黄色い線ついている
のを消すときとかにやるやつ
初代reset.cssでは実装されていた（現行のは無し）
エンジニア・デザイナー諸君
というかWebに従事する者全員
思考停止してoutline: none;するのはやめよう
outline: none;が何故良くないのか
マウス操作をする際にはあまり重要ではないかもしれないが
キーボード操作（タブ）による移動がわからなくなる
現在位置がわからなくなる
タブで移動しているときに急に消えた！となりかねない
キーボード操作に変更する時の手がかりが消える
もしくはそもそも見えない
*:focus { outline:none; }
だいぶ前から言われていることではあり…
https://gyazo.com/b58d674623ab8d92e91b24c931f195b9
If you must remove it, provide alternative styling
outlineを削除するなら代替手段をとってくれ
https://gyazo.com/69e886b333f6c0c3df323d871dfe51eb
background-colorを変える
colorを変える
outlineを変える
視認性を上げる
とはいえ
フォーカスのデフォルトスタイルのままだと美しくない
とデザイナーや見た目に拘る人は言う yamanoku.icon
視覚的にわかるユーザーだと煩わしい
この層がどれくらいいるかは要出典 yamanoku.icon
しかしoutline: none;にして支援技術で閲覧する人たちをないがしろにしてはいけない
そうなると
マウス操作とキーボード操作でのスタイル別にするのはどうか
マウスクリックフォーカス時 → なし
キーボード操作フォーカス時 → あり
:focus-visibleという手段
code:focus-visible.css
outline: none;
}
outline: 2px solid blue;
}
キーボードフォーカスするときのみ当たるスタイル
https://gyazo.com/46f9f1f94bbc72fe4b6f8a99233f937d
ステータスがWorking Draft
仕様が「まだ」安定していない…
https://gyazo.com/3ab3f4ff546e7af7d5db69d83c5b2ac3
Enabled through the "Experimental Web Platform features" flag in chrome://flags
現状CSSだけでは課題が残る…
ブラウザが未対応なら、JSライブラリに頼ってみよう！
CSS会なのにすみませんyamanoku.icon
focus-visible
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
クリック、タブ、タッチ挙動のそれぞれでクラスが付与される
code:focus-visible-polyfill.css
/* ボタンのマウスクリック時はフォーカススタイルを外す */
outline: none;
}
/* ボタンのキーボードでの移動時はフォーカスのスタイル適応 */
...
}
フォーカスされたエレメントも取れる
https://gyazo.com/6bdf768de2225bb97a1d0a2d60245f77
他キーボードのキー操作も調整できる
whatInput.ignoreKeys([1, 2, 3])
フォーカス時のスタイル適応例
https://gyazo.com/3cabe7a10a83ff5766eca4233856b70e
操作可能、リンク領域を囲む
https://gyazo.com/24adb9a0f478dc4ce2928100e75a6c7d
ホバー時とフォーカス（タブ移動）時でスタイルが違う
https://gyazo.com/e24729e9b89645ae2657fa918cad8079
プロダクトカラーと合わせてる
https://gyazo.com/60e0b02e9c1c7684e93d2423743d9b63
Comment が先にフォーカスされる
Close pull requestが最後
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 直してもらった！！！！！
フォーカスを例にとったがこれは数ある中の１つの対応
なにを学べばいいんだろうか
他にもどういうのがあるんだろうか
というかそういうのやっていきたいんだけどきっかけがわからん
そういや技術書典で書きました
https://gyazo.com/68a19f11b771c82a7887ede7791af040
Webアクセシビリティに関する本
¥500の電子配信（pdf）
そのほかアクセシビリティにまつわる情報も載せてます（第9章）
https://www.youtube.com/watch?v=ilj2P5-5CjI
CSS視点でのアクセシビリティ対応
まとめ
outline: none;をする前に一旦立ち止まろう
デザイナーとフォーカススタイリングについて考え直してみる
ライブラリの導入を検討してみよう
まずはいろんなサイトをタブキーで移動してみよう
自分の作ったWebサイト・Webアプリはどうなってるか見直してみよう