Most libraries include, as part of their animation suite, a mechanism for including what are referred to as “callback functions.” A callback function is a function that you supply to another function (or object method) so that it can be called at a predetermined time. Unless, of course, you’re smart about how you do it. If, however, you are using a third-party JavaScript library, such as jQuery or Prototype, this task becomes much more difficult to accomplish because making the change requires overwriting or otherwise changing the internals of the library. If you roll your own JavaScript library, positioning content off-screen to hide it is pretty easy to implement. For right-to-left, swap a right offset for the left one. Note: the offscreen positioning assumes a left-to-right language page.
If you don’t want your hidden content to be read by a screen reader, those defaults may work for you, but if you want to ensure users have access to content (even if it isn’t displayed visually in the current interface), the final option (positioning content offscreen) is really the way to go.
The first two mechanisms are probably the most popular, with display: none being the go-to option implemented by nearly every JavaScript library on the planet and the lion’s share of ready-made JavaScript widgets. Screen readers have access to the content Screen readers have access to the content, but the content is limited to text and inline elementsĬontent is removed from the normal flow and shifted off the left-hand edge the space it occupied is collapsed When it comes to hiding content, there are several mechanisms for doing it and each affects the page differently, as summarized in the table below: Mechanisms for Hiding Content CSS RulesĮlement is hidden from view, but is not removed from the normal flow (i.e., it still takes up the space it normally would)Įlement is removed from the normal flow and hidden the space it occupied is collapsedĮlement is collapsed and contents are hiddenĬontents are shifted off-screen and hidden from view, but links may “focus” oddly and negative indent may not prove long enough to fully hide content When building custom JavaScript-based widgets, it’s quite easy to fully control the hiding mechanism, but when you begin working with animation libraries like jQuery or Scriptaculous, the hiding mechanism is typically dictated by the library, leaving you little control over the accessibility of your content. 3 days of design, code, and content for web & UX designers & devs.
0 kommentar(er)
