Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add .sr-only-focusable #12679

Merged
merged 4 commits into from
Mar 9, 2014
Merged

add .sr-only-focusable #12679

merged 4 commits into from
Mar 9, 2014

Conversation

cvrebert
Copy link
Collaborator

Fixes #12259.
I've tested locally to confirm that this works.

@cvrebert cvrebert added the css label Feb 10, 2014
@cvrebert cvrebert added this to the v3.2.0 milestone Feb 10, 2014
@cvrebert cvrebert mentioned this pull request Feb 10, 2014
Closed
@GovCoder
Copy link

Confirming it works/fixing the behavior doesn't mean this makes the least bit of sense in regards to #12259.

Continuing to apply the sr-only (screen reader only) class to an element whose primary audience is NOT even using screen readers is highly misleading. By continuing to recommend people apply the sr-only class to the skip navigation link you are misinforming developers, many of which will not look any further than "TWBS does it so it must be right".

The skip navigation link is probably the oldest web accessibility feature that is still being used today. If you subvert developer understanding of what its purpose is then you run the risk of impairing its usefulness.

@cvrebert
Copy link
Collaborator Author

Twbs certainly doesn't claim to have special accessibility expertise, but these uses of .sr-only were added by some a11y folks in #9137 in the first place, and this focusable technique is taken from HTML5 Boilerplate which seems to have it for similar uses ( h5bp/html5-boilerplate#859 ).
This technique also seems to be compliant (admittedly only minimally) according to the WCAG docs referenced in #12259.
I believe there's some agreement that .sr-only doesn't have the best name, but we can't really change that until Bootstrap v4.

@GovCoder Do you have a specific suggestion as to how to style/place these?

@GovCoder
Copy link 

<body>
    <a name="skip-nav" id="skip-nav" href="#main-content" accesskey="s" tabindex="1">Skip to Content</a>
   <!-- REST OF YOUR TEMPLATE HERE-->
</body>

Don't give it a class at all and leave it up to the developer/designer to style. No change to TWBS code at all, just recommend that the first element after the body tag be a skip nav link.

Currently I style it like so but to each their own:

#skip-nav {
    color: rgba(0,0,0,0);   
    display:block;
    font-size:10px;
    position:absolute;
    right:0;
    text-shadow:none;
    z-index:9999;
}
#skip-nav:active { color:#98252c; }
#skip-nav:focus { color:#98252c; }

@cvrebert
Copy link
Collaborator Author

@cfarquharson: Any chance WET's accessibility wonks could weigh in here?

@cfarquharson
Copy link

@pjackson this is all you, cuz you know more about this than I do.

@mdo
Copy link
Member

mdo commented Mar 7, 2014

Any update from folks on this?

@mdo
Copy link
Member

mdo commented Mar 9, 2014

Rolling with this since it's basically the same solution as the HTML Boilerplate folks.

mdo added a commit that referenced this pull request Mar 9, 2014
@mdo
Merge pull request #12679 from twbs/sr-only-focusable
29f2357 
add .sr-only-focusable
@mdo mdo merged commit 29f2357 into master Mar 9, 2014
@mdo mdo deleted the sr-only-focusable branch March 9, 2014 19:39
@mdo mdo mentioned this pull request Mar 9, 2014
Closed
@GovCoder
Copy link

Rolling with this since it's basically the same solution as the HTML Boilerplate folks.

This is actually quite funny, I created the issue after attempting to explain to my designer how a skip nav link is used and should be styled, after much debate their answer was pretty much "Rolling with this since the Twitter Bootstrap folks example says it is for screen readers only."

@cvrebert cvrebert mentioned this pull request Apr 29, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
v3.2.0
Development

Successfully merging this pull request may close these issues.

Incorrect accessibility interpretation for the skip nav link
5 participants
@cvrebert @GovCoder @cfarquharson @mdo @zlatanvasovic