Selected Reading

Foundation - Skip Links

Quiz

If your site contains lot of navigation, then it is a bit difficult for a screen reader to get the site content by reading through the entire navigation.
To solve this problem, you can use skip link at the top of your page and use the .show-on-focus class to hide the content and tabindex = "0" attribute to make an element focusable.

Example

The following example demonstrates the use of skip links attribute in Foundation −

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Creating Skip Links</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Skip Links Example</h2>
      <p><a class = "show-on-focus" href = "#myval">Skip this info</a></p>

      <main id = "myval" role = "main" tabindex = "0">
         <p>Hide Screen Readers Example</p>
      </main>

   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code skip_links.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_visibility_classes.htm

Previous Quiz Next

Foundation - Skip Links

Description

Example

Output