{"id":225,"date":"2018-01-24T07:00:00","date_gmt":"2018-01-24T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=225"},"modified":"2018-01-23T18:45:27","modified_gmt":"2018-01-24T01:45:27","slug":"use-caution-when-changing-default-outline-styles","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/01\/24\/use-caution-when-changing-default-outline-styles\/","title":{"rendered":"Use Caution when Changing Default Outline Styles"},"content":{"rendered":"<p>Most web browsers apply a distinctive visual style to the element that&#8217;s currently in focus.  This usually manifests as a prominent outline around the element, which is usually applied using the <code>outline<\/code> CSS property behind the scenes.<\/p>\n<p>If the default outline style for focused elements clashes with your design you might be tempted to remove them using something like this:<\/p>\n<pre><code class=\"css\">:focus {\r\n    outline: none;\r\n}<\/code><\/pre>\n<p><strong>Do not do this!<\/strong>  Those default outline styles are there for a very important reason: <strong>accessibility<\/strong>.  They help people who don&#8217;t (or can&#8217;t) use mice and people with visual impairments navigate your site.  Removing the default outline styles without replacing them with something else will make your site harder to use for a lot of people.<\/p>\n<p>Want to find out more?  Good news!  There&#8217;s an entire site dedicated to this issue, and it includes suggestions for alternative focus styles to use instead of the defaults: <a href=\"http:\/\/www.outlinenone.com\/\">OutlineNone.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why removing default outline styles without replacing them with something else is a bad idea.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-225","post","type-post","status-publish","format-standard","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":7,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/225\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}