{"id":627,"date":"2009-10-23T15:37:24","date_gmt":"2009-10-23T12:37:24","guid":{"rendered":"https:\/\/www.optimiced.com\/en\/?p=627"},"modified":"2009-10-27T21:39:40","modified_gmt":"2009-10-27T18:39:40","slug":"a-more-accessible-css-way-to-hide-outline-from-links","status":"publish","type":"post","link":"https:\/\/www.optimiced.com\/en\/2009\/10\/23\/a-more-accessible-css-way-to-hide-outline-from-links\/","title":{"rendered":"A better, more accessible CSS way to hide outline from links"},"content":{"rendered":"<p>When starting a new project, I do not use global CSS resets &#8212; like Eric Meyer&#8217;s <a href=\"http:\/\/meyerweb.com\/eric\/thoughts\/2007\/05\/01\/reset-reloaded\/\">excellent CSS reset<\/a>. That&#8217;s why, I rarely have problems with removed outlines from links.<\/p>\n<p>As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they tab through them. This helps them visually understand which link they will activate.<\/p>\n<p>A fairly new trend is to remove (suppress) this dotted outline on links to make pages look &#8220;nicer&#8221; to the eye. While design may look &#8220;nicer&#8221; and more &#8220;Web 2.0&#8221; to some, when this outline is removed, the accessibility aspect of this remains, and it is very serious.<\/p>\n<p>But <a href=\"http:\/\/www.456bereastreet.com\/archive\/200910\/remove_the_outline_from_links_on_active_only\/\">Roger Johansson suggested<\/a> a much better approach: remove links from :active state only!<\/p>\n<p>This is the article that he recommends to all Web developers:<\/p>\n<p><strong><a href=\"http:\/\/people.opera.com\/patrickl\/experiments\/keyboard\/test\">Better CSS outline suppression<\/a><\/strong><\/p>\n<p>Basically, what happens:<\/p>\n<p>You remove the dotted outline from links which are only clicked with the mouse, while keyboard users will see the outline normally!<\/p>\n<p>How? Just use this bit of code, and that&#8217;s it:<\/p>\n<p><code>a:active {outline:none;}<\/code><\/p>\n<p>Excellent tip!<\/p>\n<p>I promise to myself that if I will ever try to remove the outline from links, I will do it in this, much more accessible way! :-)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When starting a new project, I do not use global CSS resets &#8212; like Eric Meyer&#8217;s excellent CSS reset. That&#8217;s why, I rarely have problems with removed outlines from links. As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-627","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":3,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/posts\/627\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.optimiced.com\/en\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}