0
0
HTMLmarkup~30 mins

Keyboard navigation basics in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Keyboard navigation basics
📖 Scenario: You are creating a simple webpage with a navigation menu. You want to make sure people can use the keyboard to move through the menu easily.
🎯 Goal: Build a basic HTML page with a navigation menu that supports keyboard navigation using semantic HTML and proper focus order.
📋 What You'll Learn
Use semantic HTML elements for the page structure
Create a navigation menu with three links
Ensure the links are focusable and follow a logical tab order
Add an aria-label to the navigation for accessibility
Make the page responsive and simple
💡 Why This Matters
🌍 Real World
Keyboard navigation is essential for people who cannot use a mouse. Websites must support keyboard users for accessibility and legal compliance.
💼 Career
Web developers often need to build accessible navigation menus that work well with keyboards and screen readers.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and a viewport meta tag inside the <head>. Add an empty <nav> element inside the <body>.
HTML
Need a hint?

Start with the standard HTML5 page setup. Use <nav> inside the body for the menu.

2
Add navigation links with aria-label
Inside the <nav>, add three links with the texts Home, About, and Contact. Add an aria-label="Main navigation" attribute to the <nav> element.
HTML
Need a hint?

Use <a> tags for links and add the aria-label to the <nav>.

3
Arrange links for keyboard focus
Wrap the three links inside an unordered list <ul> with each link inside a list item <li>. This helps screen readers and keyboard users understand the menu structure.
HTML
Need a hint?

Use <ul> and <li> tags to group the links.

4
Add simple CSS for focus visibility
Add a <style> block inside the <head> that sets outline: 2px solid blue; on a:focus so keyboard users can see which link is focused.
HTML
Need a hint?

Use CSS inside a <style> tag to highlight focused links.