{"id":535,"date":"2012-05-09T23:09:12","date_gmt":"2012-05-10T05:09:12","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=535"},"modified":"2014-10-09T22:36:17","modified_gmt":"2014-10-10T03:36:17","slug":"accessible-css-transitions","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/accessible-css-transitions\/","title":{"rendered":"Accessible CSS Transitions"},"content":{"rendered":"<p>Here&#8217;s a simple example: we want to animate a container open and closed, perhaps as part of an expand\/collapse treatment.<\/p>\r\n\r\n<section class=\"demo-container\">\r\n<pre class=\"pre\">.acc-demo-1 {\r\n  height:40px;\r\n  padding:10px;\r\n  overflow:hidden;\r\n  transition:0.5s all;\r\n}\r\n.acc-demo-1.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n}<\/pre>\r\n<style>\r\n.acc-demo-1, .acc-demo-2, .acc-demo-3 {\r\n  background:#BBB;\r\n  border-radius:5px;\r\n  overflow:hidden;\r\n}\r\n.acc-demo-1 {\r\n  height:40px;\r\n  padding:10px;\r\n  -webkit-transition:0.5s all;\r\n     -moz-transition:0.5s all;\r\n      -ms-transition:0.5s all;\r\n          transition:0.5s all;\r\n}\r\n.acc-demo-1.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n}\r\n<\/style>\r\n<a href=\"javascript:;\" onclick=\"$('#AccDemo1').toggleClass('hidden');\">Toggle<\/a>\r\n<div id=\"AccDemo1\" class=\"acc-demo-1\">Lorem ipsum dolor sit amet.<\/div>\r\n<\/section>\r\n\r\n<p>Good enough, you say? Back the train up: most screen readers are still going to read the content of that div when it&#8217;s hidden. Setting the height to zero isn&#8217;t enough (except in VoiceOver, I think &#8211; this could definitely change in the future, though). So how about we just add &#8216;display:none&#8217; when it&#8217;s hidden?<\/p>\r\n\r\n<section class=\"demo-container\">\r\n<pre class=\"pre\">.acc-demo-2 {\r\n  height:40px;\r\n  padding:10px;\r\n  overflow:hidden;\r\n  transition:0.5s all;\r\n}\r\n.acc-demo-2.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n  display:none;\r\n}<\/pre>\r\n<style>\r\n.acc-demo-2 {\r\n  height:40px;\r\n  padding:10px;\r\n  -webkit-transition:0.5s all;\r\n     -moz-transition:0.5s all;\r\n      -ms-transition:0.5s all;\r\n          transition:0.5s all;\r\n}\r\n.acc-demo-2.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n  display:none;\r\n}\r\n<\/style>\r\n<a href=\"javascript:;\" onclick=\"$('#AccDemo2').toggleClass('hidden');\">Toggle<\/a>\r\n<div id=\"AccDemo2\" class=\"acc-demo-2\">Lorem ipsum dolor sit amet.<\/div>\r\n<\/section>\r\n\r\n<p>This kills our transition effect in both directions, since the div is getting yanked in and out of the render tree. Fortunately, the visibility property is <a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/#animatable-properties\">animatable<\/a>, so that will work, but with a caveat: if we immediately transition the visibility when we&#8217;re hiding the div, it&#8217;ll disappear before we have a chance to see it animate closed. So we need to add a second transition declaration to change the visibility <em>after<\/em> the animation is done.<\/p>\r\n\r\n<section class=\"demo-container\">\r\n<pre class=\"pre\">.acc-demo-3 {\r\n  height:40px;\r\n  padding:10px;\r\n  overflow:hidden;\r\n  transition:0.4s height, 0.4s padding;\r\n}\r\n.acc-demo-3.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n  visibility:hidden;\r\n  transition:0.7s height, 0.7s padding, 0s visibility 0.7s;\r\n}<\/pre>\r\n<style>\r\n.acc-demo-3 {\r\n  height:40px;\r\n  padding:10px;\r\n  -webkit-transition:0.4s height, 0.4s padding;\r\n     -moz-transition:0.4s height, 0.4s padding;\r\n      -ms-transition:0.4s height, 0.4s padding;\r\n          transition:0.4s height, 0.4s padding;\r\n}\r\n.acc-demo-3.hidden {\r\n  height:0px;\r\n  padding:0px 10px;\r\n  visibility:hidden;\r\n  -webkit-transition:0.7s height, 0.7s padding, 0s visibility 0.7s;\r\n     -moz-transition:0.7s height, 0.7s padding, 0s visibility 0.7s;\r\n      -ms-transition:0.7s height, 0.7s padding, 0s visibility 0.7s;\r\n          transition:0.7s height, 0.7s padding, 0s visibility 0.7s;\r\n}\r\n<\/style>\r\n<a href=\"javascript:;\" onclick=\"$('#AccDemo3').toggleClass('hidden');\">Toggle<\/a>\r\n<div id=\"AccDemo3\" class=\"acc-demo-3\">Lorem ipsum dolor sit amet.<\/div>\r\n<\/section>\r\n\r\n<p>That&#8217;s more like it. And as you can see, you can also use this technique to make your transition do different things going in different directions &#8211; like changing the speed.<\/p>\r\n\r\n<footer><p>And yeah, I know I didn&#8217;t add the other accessibility stuff that should be there for expand\/collapse.<\/p><\/footer>\r\n\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\" async defer><\/script>","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a simple example: we want to animate a container open and closed, perhaps as part of an expand\/collapse treatment. .acc-demo-1 { height:40px; padding:10px; overflow:hidden; transition:0.5s all; } .acc-demo-1.hidden { height:0px; padding:0px 10px; } Toggle Lorem ipsum dolor sit amet. Good enough, you say? Back the train up: most screen readers are still going to read the content of that&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-535","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/535"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=535"}],"version-history":[{"count":69,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions"}],"predecessor-version":[{"id":1375,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions\/1375"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}