Project 25: Chat App Interface

HTML Masterclass

Builds on these lessons

A11y Intro A11y Wcag Guidelines A11y Aria Roles A11y Aria Labels A11y Landmark Roles

Step 1 of 4

Project

Skeleton with Landmark Regions

Build the layout from two landmarks: a <nav aria-label="Conversations"> listing chat threads, and a <main aria-label="Chat with Jordan"> for the active conversation. Landmarks let screen-reader users jump directly between page regions instead of tabbing through everything — and the aria-label distinguishes them when a page has more than one <nav> or <main>.

🎯 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>Messages | Chatter</title>
</head>
<body>
  <h1>Chatter</h1>
  <nav aria-label="Conversations">
    <ul>
      <li><a href="/chat/jordan">Jordan</a></li>
      <li><a href="/chat/sam">Sam</a></li>
    </ul>
  </nav>
  <main aria-label="Chat with Jordan">
    <h2>Jordan</h2>
  </main>
</body>
</html>

← Previous Next →