{"id":460,"date":"2020-07-28T21:34:00","date_gmt":"2020-07-28T20:34:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=460"},"modified":"2020-07-31T00:03:55","modified_gmt":"2020-07-30T23:03:55","slug":"focus-outline-visibility-only-for-keyboard-or-for-touch-and-mouse-too","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2020\/07\/focus-outline-visibility-only-for-keyboard-or-for-touch-and-mouse-too\/","title":{"rendered":"Focus outline visibility &#8211; only for keyboard or for touch and mouse too?"},"content":{"rendered":"\n<p>Focus outline &#8211; sometimes a subject of love or hate. <\/p>\n\n\n\n<p>Keyboard only users must see where their focus is, at all times &#8211; and that is actually also a WCAG success criterion ( <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-visible.html\" target=\"_blank\">2.4.6: Focus Visible, opens in new window<\/a>) &#8211; just to be clear about it.<\/p>\n\n\n\n<p>In my opinion we must use it by default, for all inputs. If user clicks on an element with mouse &#8211; show it. If user touches it on mobile &#8211; show it. It can help everybody!<\/p>\n\n\n\n<p>I can be distracted and when trying to fill in my tax report &#8211; and there it is &#8211; helping me to quickly find last field. User that needs to zoom in will also appreciate it, believe me.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The purpose of this success criterion is to help a person know which element has the keyboard focus.<\/p><cite>Understanding Success Criterion 2.4.7: Focus Visible<\/cite><\/blockquote>\n\n\n\n<p>Shouldn&#8217;t we just drop the keyboard from this sentence? Use CSS pseudo selector :focus and set a smart and nice outline and be consistent is my suggestion.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Should user agents choose when to show focus outline instead of developers?<\/h2>\n\n\n\n<p>It seems that this will be the reality. I&#8217;ve discovered that we can actually let the user agent determine if it will make focus outline visible or not by using a new CSS pseudo selector called :focus-visible.  The <a rel=\"noreferrer noopener\" href=\"https:\/\/drafts.csswg.org\/selectors-4\/#the-focus-visible-pseudo\" target=\"_blank\">specification is still a draft at this time (Selectors Level 4, July 2020, opens in new window)<\/a>, but it is already supported in Firefox when I write this.<\/p>\n\n\n\n<p>The interesting part here is how the user agent will determine when to match the :focus-visible, but it is not up to the specification alone (user agents can choose their own heuristics). <\/p>\n\n\n\n<p>Specification is suggestive a bit, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>user agent will check if user has set some preferences for focus indication, this will be the ultimate check that will override all others,<\/li><li>any elements that supports keyboard (or virtual keyboard) will always trigger  pseudo selector,<\/li><\/ul>\n\n\n\n<p>I guess we have to wait and see.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I believe all users should have the focus outline visible, but not everybody agrees with me. And there is a new CSS pseudo selector on the horizon &#8211; :focus-visible that is somehow connected.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,65,10],"tags":[150,148,149,103,29],"class_list":["post-460","post","type-post","status-publish","format-standard","hentry","category-a11y-resources","category-future-of-a11y","category-practical-a11y","tag-css","tag-focus","tag-focus-visible","tag-ua","tag-wcag"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=460"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}