2. Immediately after the body element start tag, add a div with an id value of
skipLink, which is a hook to later style the div and its link using CSS. The href
value for the anchor is set to #content. As you will remember from earlier in the
chapter, this will make the page jump to the element with an id value of content
when the link is clicked (i.e., the content div in this example??™s case).
Creating a skip navigation link
USING LINKS AND CREATING NAVIGATION
165
5
3. Test the web page. Already, the benefits of this are apparent. You can use Opera??™s
User mode or CSS ?¤ Disable Styles ?¤ All Styles in the Firefox Web Developer toolbar
to temporarily remove the CSS and emulate a text browser (roughly equating
to the content available to screen readers)??”see the following left-hand image.
Click the skip to content link and the page will jump to the web page??™s content??”see
the right-hand image. Even with three links, this proves useful, but if the site has a
couple of dozen links, this improves usability for screen reader users no end.
Required files skip-navigation-completed.html and skip-navigationcompleted.
css from the chapter 5 folder as a starting point.
What you??™ll learn How to style skip navigation.
Completed files skip-navigation-styled.html and skip-navigation-styled.css
from the chapter 5 folder.
When skip navigation is styled, it??™s common to set the containing div (in this case, the
skipLink one) to display: none, thereby making it invisible.
Pages:
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255