As I browse through higher ed sites, virtually none of them provide the ability to skip repetitive navigation links as required by Section 508. Have you noticed this as well? What method do you use to meet this standard?
First, let me confess that I am crashing this group as I am former university webmaster and not current. For a while we hid it. I think at one stage we had it as a visible link. This was after some good advice for a usability guru -- the ability to skip to the content is helpful for all users -- especially with the proliferation of mobile browsers.
We hide it with CSS in the top of a page. Web page real estate is getting more and more 'valuable'. Well designed navigation methods do not have to overwhelm a page to require skipping for non-508 users.
In addition to skipping the navigation and going straight to the main content, we provide quick links to other areas of a web page for 508 users (search, nav, sub-nav, footer, etc.)
CSS and sniffing can be used to give the short cut links to limited mobile browsers (those other than an iPhone).
Our forthcoming Web site will have the skip navigation links on every page, but they'll be hidden with CSS.
I'm curious, though. How do you guys hide your skip links? In my case, after some research, I decided to use the "height: 0; width: 0; overflow: hidden;" method instead of the "display: none" method.
Apparently, keeping them displayed with a zero width and height still allows users to tab through the links, while hiding them with the display property takes away that ability. At least, that's the way I understand it.
We have the skip nav links too, but hide them with CSS.
display:none; is bad because some screen readers ignore that content.
No need for the height:0; width:0;
Use display:block; position:absolute; to remove it from the flow, just make sure all parent elements of your skip nav are position:static; (the default). Then use left:-999px; and/or top:-999px; (big number, exact value irrelevant). Keep the overflow:hidden; to avoid any focus outlines in Firefox.
Since we are usually hiding links, it's important to add one more style to avoid the dreaded line across the screen in some browsers, where they position the link underline where the image would start in the normal flow, then run it through to where it is currently residing off screen: text-decoration: none;
"It is always important to make a good first impression! Join Aaron Blau from Converge Consulting as he covers ways to make your web content attractive to your target audience and create an authentic brand message. http://bit.ly/2zhdcIt"
"Creating and producing website content is just the tip of the iceberg. In our latest white paper, learn how to manage that content to help your website reach its fullest marketing and recruiting potential. http://bit.ly/30WJ0PW"
"A college or university website redesign is the most effective and cost-efficient way to attract and recruit new students. Download our ultimate guide to get started on your redesign today! http://bit.ly/30MmcSQ"
Cody Bryant is now a member of University Web Developers
"Join us for our next webcast with Caroline Roberts from iFactory who will be providing tips on how to improve your SEO by finding and wisely using the keywords and phrases that matter most! http://bit.ly/2zhdcIt"
"I do work from home a few days a week. Depending where you're located, this would definitely be a perk. I've found plenty of higher ed jobs, but it's not often where working from home is an option. I find this odd since the higher ed…"
"Take a look at these award-winning higher ed digital marketing campaigns to see what’s working for them – and what you can implement to make your school’s digital marketing campaign one of the best. http://bit.ly/2JlzLiq"
"Do you have a plan in place to ensure your redesigned website is a success? Read our new white paper for the steps needed to successfully launch your website so that it is effective, informative, and gets noticed. http://bit.ly/2HZt73Z"