StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've come up with a work-around which allows the use of document fragment links, allows for the caret redirect for screen readers, and doesn't scroll the viewport. The method is</p> <ol> <li>Place a hidden element at the top of the element that you are linking to</li> <li>Link to the hidden element instead of the content that follows it</li> <li>Use fixed positioning to move the hidden element flush with the top of the viewport</li> </ol> <p>In this way, when you click the link targeting the hidden element, the browser tries to "scroll" the screen into place, but it's already at the top of the viewport, so no actual scrolling takes place. The caret redirect occurs, so screen reader users get to where the link was pointing.</p> <p>There are a couple of quirks. In Opera, Safari, and Chrome, clicking a link arranged in this way will cause a scroll, but ONLY if the user has already scrolled down. I'm not sure why this is so; perhaps they are not updating the positions of fixed-position elements which are off the left of the screen? In any case, this issue affects only a highly specific set of circumstances which can be mostly avoided through sensible page layout. So I think the benefits (accessible, comparatively simple code) outweigh the disadvantages (minor visual quirk in some browsers and circumstances).</p> <p>For a more complete discussion of this technique, see:</p> <p><a href="http://www.accessifyforum.com/viewtopic.php?p=77132" rel="nofollow">http://www.accessifyforum.com/viewtopic.php?p=77132</a></p> <p>Hope this helps someone else.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload