move visibility docs and add .visible mention

docs/_data/nav.yml

@@ -59,7 +59,6 @@
     - title: Display
     - title: Flexbox
     - title: Image replacement
-    - title: Invisible content
     - title: Position
     - title: Responsive helpers
     - title: Screenreaders
@@ -67,6 +66,7 @@
     - title: Spacing
     - title: Typography
     - title: Vertical align
+    - title: Visibility
 
 - title: Extend
   pages:

docs/utilities/invisible-content.md → docs/utilities/visibility.md

 ---
 layout: docs
-title: Invisible content
+title: Visibility
 group: utilities
 ---
 
-The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
+Set the `visibility` of elements with our visibility utilities. These do not modify the `display` value at all and are helpful for hiding content from most users, but still keeping them for screen readers.
+
+Apply `.visible` or `.invisible` as needed.
 
 {% highlight html %}
+<div class="visible">...</div>
 <div class="invisible">...</div>
 {% endhighlight %}
 
 {% highlight scss %}
 // Class
+.visible {
+  visibility: visible;
+}
 .invisible {
   visibility: hidden;
 }
 
 // Usage as a mixin
 .element {
-  @include invisible;
+  @include invisible(visible);
+}
+.element {
+  @include invisible(hidden);
 }
 {% endhighlight %}