Various solutions exist to help deal with this problem, and although you can use CSS to
reorder the page information (most commonly by placing the code for the masthead at
the end of the HTML document and then using absolute positioning to display it at the top
when the page is viewed in a browser), it??™s more common to use what??™s typically referred
to as skip navigation.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
164
Required files skip-navigation-starting-point.html and skip-navigationstarting-
point.css from the chapter 5 folder as a starting
point.
What you??™ll learn How to create some basic skip navigation.
Completed files skip-navigation-completed.html and skip-navigationcompleted.
css from the chapter 5 folder.
1. Examine the web page. Successful skip navigation relies in part on semantic and
logical document structure. Open skip-navigation-starting-point.html and
you??™ll see it??™s a basic web page, with all of the page??™s content??”title, navigation, and
main content??”contained within a wrapper div; next is a masthead div, containing
a heading and a few links. Under the masthead div is a content div, which, suitably
enough, houses the page??™s main content. The beginning of the content is immediately
visible, even on monitors with low resolutions, but for users of screen readers,
the site??™s name and navigation links will be read out every single time a page is
accessed??”a tedious process for the user.
Pages:
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254