This component contains a Polymer-based web component and mixin, as well as a Sass mixin. Any of these can be used to position elements off the screen in an accessible manor.
For further information on this and other D2L UI components, see the docs at ui.valence.d2l.com.
d2l-offscreen can be installed from Bower:
bower install d2l-offscreenOff-screen elements are valuable from an accessibility perspective when you wish to have elements which are only visible to screen readers. For more information, read WebAIM's article on Invisible Content.
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-offscreen.html.
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-offscreen/d2l-offscreen.html">
</head>The <d2l-offscreen> custom element can now be used in your markup, the children of which will be hidden offscreen.
<d2l-offscreen>This message will only be visible to assistive technology, such as a screen reader.</d2l-offscreen>Alternatively, you can apply the offscreen styles to an existing element using the mixin.
You'll still include the web component polyfill, but instead of importing d2l-offscreen.html, import d2l-offscreen-shared-styles.html. Include d2l-offscreen-shared-styles on your style block and apply the --d2l-offscreen mixin to any CSS selector:
<link rel="import" href="../d2l-offscreen/d2l-offscreen-shared-styles.html">
<style include="d2l-offscreen-shared-styles">
my-element {
@apply(--d2l-offscreen);
}More on Polymer shared style modules...
Alternatively, to position an element offscreen using the Sass mixin, apply the d2l-offscreen() mixin to any CSS selector.
For example, to hide this message:
<p class="offscreen">This message will only be visible to assistive technology, such as a screen reader.</p>SCSS:
@import 'bower_components/d2l-offscreen/offscreen.scss';
.offscreen {
@include d2l-offscreen();
}See the VUI Best Practices & Style Guide for information on D2L UI naming conventions, plus information about the EditorConfig rules used in this repo.