Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.<\/p>\n
Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.<\/p>\n
<body> “navigation and other stuff goes here”<\/strong><\/p>\n <a name=”maincontent”><\/a> Please notice that the HREF anchor has “MAINcontent<\/strong>” in the link part, by using “MAIN<\/strong>” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content<\/strong>” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content<\/strong>“. The screen readers have issues with the word content.<\/p>\n Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation<\/a> (thanks, Justin Thorp<\/a>). The article uses the ID of “skip<\/strong>“, I figure you might want to use it hide other items or you might want to have more than one “skip<\/strong>” type link, so I changed it to be a “CLASS<\/strong>” instead of an “ID<\/strong>“. The reason I changed the “ID<\/strong>” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required<\/strong>” for web FORM LABELs.<\/p>\n Reminder please do not use “DISPLAY: NONE<\/strong>” in your CSS, since screen readers will not see it.<\/p>\n CSS below was updated on January 29, 2014.<\/p>\n .hide a, .hide a:hover, .hide a:visited { .hide a:active, .hide a:focus { As you can see the CSS positions the link absolutely with a position of “LEFT<\/strong>” zero pixels and a “TOP”<\/strong> negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.<\/p>\n I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?<\/a>” at Refresh DC<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to … Continue reading
\n<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content<\/a> <\/div><\/strong><\/p>\n
\n<p>This is the first paragraph<\/p><\/strong><\/p>\n
\ndisplay: block;
\nposition: absolute;
\nleft: -10000px;
\ntop: auto;
\nwidth: 100%;
\nheight: 3em;
\nfont-weight: bold;
\ntext-align: center;
\n} <\/strong><\/p>\n
\nbackground: #fff; \/* change to whatever your color scheme is *\/
\ncolor: #3d3d3d; \/* dark gray *\/
\nposition: static;
\nwidth: auto;
\nheight: auto;
\npadding: 1em;
\nmargin: auto;
\n}<\/strong><\/p>\n