From f5d5198ad755ae06f4967e347f490a2b0e1f25bd Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Wed, 16 Sep 2015 14:19:53 +0100 Subject: [PATCH 1/2] Fix extended footer on certain pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Some pages (e.g. https://www.gov.uk/government/publications/armed-forces-corporate-covenant-signed-pledges) have a long revision history. This, by default, has a class of visuallyhidden that hides the extended content off screen using position:absolute and left:-9999em. While this is hidden, the viewport will extend itself to include absolutely positioned elements, even if they’re positioned horizontally off screen. This patch clips off screen elements so that they don’t take up any vertical space. It doesn’t affect VoiceOver’s ability to read the extended content. --- source/assets/stylesheets/_accessibility.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/assets/stylesheets/_accessibility.scss b/source/assets/stylesheets/_accessibility.scss index 5d892ad3..528cb599 100644 --- a/source/assets/stylesheets/_accessibility.scss +++ b/source/assets/stylesheets/_accessibility.scss @@ -25,6 +25,8 @@ .visuallyhidden { position: absolute; left: -9999em; + height: 0; + overflow: hidden; /* * Extends the .visuallyhidden class to allow the element to be From 012a7ffc38543bd5d0da7404d5587247fa9fe70b Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Tue, 3 May 2016 11:52:53 +0100 Subject: [PATCH 2/2] Update hiding code to match WebAIM @accessiblewebuk pointed out that WebAIM have a recommended set of CSS for hiding offscreen: http://webaim.org/techniques/css/invisiblecontent/#absolutepositioning . This updates the class to match their height:1px / width:1px / top:auto recommendation. --- source/assets/stylesheets/_accessibility.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/source/assets/stylesheets/_accessibility.scss b/source/assets/stylesheets/_accessibility.scss index 528cb599..5d1fd169 100644 --- a/source/assets/stylesheets/_accessibility.scss +++ b/source/assets/stylesheets/_accessibility.scss @@ -25,7 +25,9 @@ .visuallyhidden { position: absolute; left: -9999em; - height: 0; + top: auto; + width: 1px; + height: 1px; overflow: hidden; /*