SKIP TO CONTENT Section

The H.T.M.L. 4.01 Strict Markup Code

Why employ a "Skip to Content" section?

Following web standards and accessibility guidelines, we include a "Skip to Content" heading/button hyperlink on each web page to allow a user to bypass the navigation section and skip to the beginning of the page content.

• We design the button to be visible to all users, making them aware that this accessibility tool is available.
• Users employing assistive technologies (A.T.), can activate it through the keyboard.
  • This eliminates the repetitive reading of the navigation by the A.T. when opening a new web page.
  • It also removes the keyboard tabbing actions necessary to manually bypass the navigation.
• The markup code links the anchor element and its href attribute with the value of the id associated to the first content heading.
  • This installs the hyperlink from the button to the content.

This is the Skip to Content section markup code:

1. /* SKIP TO CONTENT section markup code */

3.   <h4 class="skip">

4.     <a href="#a1">skip to content</a>

5.   </h4>

7. /* end SKIP TO CONTENT section markup code */

top

The C.S.S. Presentation Code

We define the following styles to establish the "Skip to Content" button/hyperlink:

#nav h4.skip

font-size: 1.1em; - sets the font-size to a relative size of 1.1em

font-weight: bold; - sets the font-weight to bold

font-variant: small-caps; - sets the font-variant to small-caps

margin: 1.8em 0em 0em 0em; - shorthand for the margin property:

• margin-top: 1.8em - sets the top margin to 1.1em
• margin-right: 0em - sets the right margin to 0em
• margin-bottom: 0em - sets the bottom margin to 0em
• margin-left: 0em- sets the left margin to 0em

padding: 0.5em; - sets all padding (top, right, bottom, and left) to 0.5em

color: #fff; - sets the font color to white

background: none; - removes any background and image attached to the anchor hyperlink

text-decoration: none; - removes the default underline from the anchor hyperlink

#nav h4.skip a:link, #nav h4.skip a:visited

color: #000; - sets the font color to black

background: #ccc; - sets the color face of the button

padding: 0.2em 1em; - shorthand code for padding:

• 0.2em - sets the top and bottom padding to 0.2em
• 1em; - sets the left and right padding to 1em

border-top: 0.15em solid #fff; - top border shorthand: sets the thickness, type and color for the normal state top border of the button

border-left: 0.15em solid #fff; - left border shorthand: sets the thickness, type and color for the normal state left border of the button

border-bottom: 0.15em solid #aaa; - bottom border shorthand: sets the thickness, type and color for the normal state bottom border of the button

border-right: 0.15em solid #aaa; - right border shorthand: sets the thickness, type and color for the normal state right border of the button

#nav h4.skip a:hover, #nav h4.skip a:active, #nav h4.skip a:focus

color: #fff; - sets the font color to white

background: #454545; - sets the color face of the button

padding: 0.2em 1em; - shorthand code for padding:

• 0.2em - sets the top and bottom padding to 0.2em
• 1em; - sets the left and right padding to 1em

border-top: 0.15em solid #fff; - top border shorthand: sets the thickness, type and color for the active state top border of the button

border-left: 0.15em solid #fff; - left border shorthand: sets the thickness, type and color for the active state left border of the button

border-bottom: 0.15em solid #aaa; - bottom border shorthand: sets the thickness, type and color for the active state bottom border of the button

border-right: 0.15em solid #aaa; - right border shorthand: sets the thickness, type and color for the active state right border of the button

top

The following code block contains the C.S.S. presentation code used to transform the "Skip To Content" markup:

1. /* SKIP TO CONTENT section presentation code */

3. #nav h4.skip {

4.   font-size: 1.1em;

5.   font-weight: bold;

6.   font-variant: small-caps;

7.   margin: 1.8em 0em 0em 0em;

8.   padding: 0.5em;

9.   color: #fff;

10.   background: none;

11.   text-decoration: none; }

13. #nav h4.skip a:link, #nav h4.skip a:visited {

14.   color: #000;

15.   background: #ccc;

16.   padding: 0.2em 1em;

17.   border-top: 0.15em solid #fff;

18.   border-left: 0.15em solid #fff;

19.   border-bottom: 0.15em solid #aaa;

20.   border-right: 0.15em solid #aaa; }

22. #nav h4.skip a:hover, #nav h4.skip a:active, #nav h4.skip a:focus {

23.   color: #fff;

24.   background: #454545;

25.   padding: 0.2em 1em;

26.   border-top: 0.15em solid #fff;

27.   border-left: 0.15em solid #fff;

28.   border-bottom: 0.15em solid #aaa;

29.   border-right: 0.15em solid #aaa; }

31. /* end SKIP TO CONTENT section presentation code */

top