Project 26: Cryptocurrency Ticker

HTML Masterclass

Builds on these lessons

A11y Keyboard Navigation A11y Focus Management A11y Skip Links A11y Screen Readers A11y Testing

Step 1 of 4

Project

A Skip Link

Add an <a href="#ticker-list" class="skip-link">Skip to ticker list</a> as the very first element inside <body>, before the header nav. It's normally hidden off-screen and only becomes visible on keyboard focus — letting keyboard users jump straight past repeated navigation instead of tabbing through it on every single page.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Prices | CoinPulse</title>
</head>
<body>
  <a href="#ticker-list" class="skip-link">Skip to ticker list</a>
  <header>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/watchlist">Watchlist</a>
      <a href="/news">News</a>
    </nav>
  </header>
  <main>
    <h1>Live Prices</h1>
  </main>
</body>
</html>

← Previous Next →