Responsive Foundation 6.0.0

Hides entire elements visually, but preserves visibility for screen readers. Use this placeholder when an element is only for screen readers and needs no visual representation on the site. This is the preferred method of hiding items visually as it works with right-to-left languages, making it a safer choice if a site is ever translated.

More info on this technique: http://a11yproject.com/posts/how-to-hide-content/

Examples

Hide a label in a button.

			.fancy-button-label {
					@extend %visually-hidden;
				}