From 57555cc07aef7938a528cd2f2e4c2420b0836aeb Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 5 Jul 2017 12:31:56 +0200 Subject: [PATCH] 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 --- docs/pages/visibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md index fd5d0c4ab..938486d32 100644 --- 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

Skip to Content

-- 2.47.2