Use tabindex of -1 to make an element focusable

If we add `tabindex="0"`, an element does become focusable, but it is also inserted in the tab order - even if there's no way to interact with it.

By setting the tabindex to -1, the element becomes focusable, but it does not receive focus when tabbing through the page.

See https://stackoverflow.com/questions/44909339/why-does-foundation-recommend-adding-a-tabindex-0-to-main-content

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index fd5d0c4ab55bf2620825a93dadc4d8b4b9cd1c45..938486d32c04d576bf33b2e48082b4ca2f07a230 100644 (file)
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -120,7 +120,7 @@ To hide text from assistive technology, while still keeping it visible, add the
 
 If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a *skip link* at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.
 
-Use the class `.show-on-focus` to hide an element, except when it has focus. Adding tabindex="0" to the target element makes if focusable.
+Use the class `.show-on-focus` to hide an element, except when it has focus. Adding `tabindex="-1"` to the target element makes it focusable. (Or set it to `0` if the user should be able to tab to that element as well. See also [the MDN docs on `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).)
 
 ```html_example
 <p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>