Fix extended footer on certain pages #177
Conversation
|
Looks correct to me. If we want non-visual content to occupy vertical space we have a class for that. 👍 |
|
I seem to have a hazy memory that adding a high of zero and overflow of hidden stops some content from being announced in some screen readers as the content is deemed to not be on the page. However I can't remember where I have that memory from, @alicebartlett can you remember? |
|
Thought I remembered it being a thing, here it is: alphagov/finder-frontend@a16becb |
|
Interesting that @alicebartlett ’s commit message mentions Voiceover, as that’s what I tested in. Newer version fixes this maybe? Either way, setting a small height instead of a zero height would accomplish the same thing and might fix screen reader issues. I’ll amend the patch and test. |
|
Or maybe @aduggin knows off the top of his head? :) |
|
Has there been any movement on this since September? |
|
Nope. I really ought to find time to test it in Voiceover and JAWS. |
|
Any update on this? |
|
For anybody testing this, you can use this document as a test case: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.hidden {
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div>Content</div>
<div class="hidden">Hidden content</div>
</body>
</html>It does work correctly on OSX voiceover in Chrome and Safari, as noted by Robin:
|
|
The test case by @tvararu works fine for me using the following combinations: iOS 9.3.1 (Safari) I don't have the means to test this with older versions of JAWS/IE etc. so there may be some limitations to this. There are warnings against using this sort of technique at http://webaim.org/techniques/css/invisiblecontent/ though - it is possible older versions of assistive technology and browsers might not work. There is another technique in that article - css clipping, which I have seen used, but I don't know how well it is supported in older combinations. |
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.
@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.
robinwhittleton
force-pushed
the
large_footer_fix
branch
from
8b9d871 to
012a7ff
Compare
|
Thanks for testing this @accessiblewebuk. I’d forgotten about that WebAIM page; have updated my PR to include their 1px × 1px and |
|
@cfq did you ever get a chance to test this? Thanks! |
|
@robinwhittleton LGTM. Just tested it and tried to break it a little bit. Seems to work well. 👍 |
|
Thanks everyone for comments and @robinwhittleton for the fix 👍 🎉 |
https://raw.githubusercontent.com/alphagov/govuk_template/master/CHANGEL OG.md # 0.18.1 - Remove gov.uk prefix from relative links when printing ([PR #234](alphagov/govuk_template#234)) - Fix a `.visually-hidden` bug on GOV.UK ([PR #177](alphagov/govuk_template#177)) # 0.18.0 - Publish the Jinja version of the template to NPM - Update HTML5 Shiv to the latest version - Remove an errant font loader script that was only being used for IE8 # 0.17.3 - Fix colour of H2 headings in footer # 0.17.2 - Fix a bug with the skip-to-content link and iOS Voiceover - Migrate @Viewport statement from govuk_frontend_toolkit # 0.17.1 - Reduce file size of template: removes HTML comments, `type` attributes on scripts, and uses HTML5 charset declaration. #208 - Switch external link media query to be mobile first #205 - Sass file cleanups - Replace old grid mixins with newer grid from frontend toolkit #134 - Remove duplicate grey variables #201 # 0.17.0 - Add CSS hook (`.js-hidden`) for hiding content when JS is enabled. Some apps have an equivalent hook, which can be removed once upgraded to this version # 0.16.4 - Fix publish the Jinja version of the template with a `package.json` for those consuming it with NPM # 0.16.3 - make the Django version of the template into a proper Python package - publish the Jinja version of the template with a `package.json` for those consuming it with NPM # 0.16.2 - more static assets added to `assets.precompile` to improve compatibility with apps running rails > 4.2.5 # 0.16.1 - Fix colour of logo when in `:active` state
Makes the following changes: Remove generated gov.uk from relative print links alphagov/govuk_template#234 Fix extended footer on certain pages alphagov/govuk_template#177 Degrade gracefully when external JS can’t be loaded alphagov/govuk_template#248 Add docs for adding tabindex="-1" to fix the skiplink alphagov/govuk_template#250 Logo fixes alphagov/govuk_template#237 Remove external links styles alphagov/govuk_template#231 Don’t include both html5shiv and html5shiv-printshiv alphagov/govuk_template#254 Update govuk_frontend_toolkit to 5.0.0 alphagov/govuk_template#256 Fixed scala compilation failure for play template alphagov/govuk_template#261
Makes the following changes: Remove generated gov.uk from relative print links alphagov/govuk_template#234 Fix extended footer on certain pages alphagov/govuk_template#177 Degrade gracefully when external JS can’t be loaded alphagov/govuk_template#248 Add docs for adding tabindex="-1" to fix the skiplink alphagov/govuk_template#250 Logo fixes alphagov/govuk_template#237 Remove external links styles alphagov/govuk_template#231 Don’t include both html5shiv and html5shiv-printshiv alphagov/govuk_template#254 Update govuk_frontend_toolkit to 5.0.0 alphagov/govuk_template#256 Fixed scala compilation failure for play template alphagov/govuk_template#261
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
visuallyhiddenthat hides the extended content off screen usingposition:absoluteandleft:-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.