If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link before the navigation (read why). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).

-- cgit v1.2.3 From 214516da16c99c7118b29ecef3bdf10f977d4e29 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 2 Feb 2015 12:04:01 +0000 Subject: Expand/clean-up prose about skip links --- docs/_includes/getting-started/accessibility.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/_includes/getting-started/accessibility.html') diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html index a83acb2e3..d43695ad3 100644 --- a/docs/_includes/getting-started/accessibility.html +++ b/docs/_includes/getting-started/accessibility.html @@ -3,9 +3,9 @@

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.

Skip navigation

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link before the navigation (for a simple explanation, see this A11Y Project article on skip navigation links). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).

Due to a long-standing bug in Chrome and Internet Explorer, you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1".

Due to long-standing shortcomings/bugs in Chrome (see issue 262171 in the Chromium bug tracker) and Internet Explorer (see this article on in-page links and focus order), you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1".

In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with tabindex="-1" when they are clicked with the mouse) with #content:focus { outline: none; }.

Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.

-- cgit v1.2.3