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

Incorrect accessibility interpretation for the skip nav link #12259

Closed
programmer6 opened this issue Jan 16, 2014 · 7 comments · Fixed by #12679
Closed

Incorrect accessibility interpretation for the skip nav link #12259

programmer6 opened this issue Jan 16, 2014 · 7 comments · Fixed by #12679
Labels
css docs examples
Milestone
v3.2.0

Comments

@programmer6
Copy link

The recommendation of applying the sr-only class to a skip navigation link is incorrect:
http://getbootstrap.com/getting-started/#accessibility

<body>
  <a href="#content" class="sr-only">Skip to main content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Someone has misinterpreted the intent of a skip navigation link, one of the primary audiences for this are sighted people who are unable to use a mouse (ie they are not using a screen reader). Part of this may be due to relying on 2nd hand information from the A11Y Project as opposed to just going straight to WCAG 2.0 guidelines:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

A common implementation per WCAG 2.0 is to have a hidden link that becomes visible when it gains focus:
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@cvrebert
Copy link
Collaborator

X-Ref: #12199

@programmer6
Copy link
Author

Unlike issue #12199 I am not recommending anything be changed in the bootstrap code base, I am suggesting they update their documentation to quit recommending people apply sr-only to an element that is not solely intended for screen readers.

@mdo
Copy link
Member

mdo commented Jan 18, 2014

@programmer6 I get what you're saying now. Are you suggesting we switch to .hidden or something else?

@cvrebert
Copy link
Collaborator

A relevant portion of h5bp: https://github.com/h5bp/html5-boilerplate/blob/4e5f438e1ea0d7e39179ba5cf799a8d326ba7cc3/css/main.css#L139

@programmer6
Copy link
Author

@mdo .hidden is just as bad as you can't tab to a hidden element my solution is generally to just make the skip nav link the same color as the background and then change it to something noticeable when it gains focus.

@cvrebert that is interesting but maybe a bit complex

I now wonder if the best solution is to just set the skip nav link color: rgba(0,0,0,0); then assign it's focused /active/hover classes a real color. Then it can have layout and position that remain unchanged (ie avoid the possibility of other things shifting around when it suddenly gains height and width).

@programmer6
Copy link
Author

I'll also say that it clearly states in the WCAG 2.0 skip nav technique recommendation that leaving links visible at all times is preferred but then goes on to say hiding them when they do not have focus does meet the minimum criteria to be considered accessible.

cvrebert added a commit that referenced this issue Feb 10, 2014
@cvrebert
add .sr-only-focusable; fixes #12259
c4e242b
@cvrebert cvrebert mentioned this issue Feb 10, 2014
Merged
@cvrebert
Copy link
Collaborator

Proposed fix: #12679.

@cvrebert cvrebert modified the milestones: v3.2.0, v3.1.1 Feb 10, 2014
@cvrebert cvrebert added the css label Feb 10, 2014
@mdo mdo closed this as completed in #12679 Mar 9, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@cvrebert
(less) add .sr-only-focusable; fixes twbs#12259
0058b41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css docs examples
Projects
None yet
Milestone
v3.2.0
Development

Successfully merging a pull request may close this issue.

add .sr-only-focusable twbs/bootstrap
3 participants
@mdo @cvrebert @programmer6