Skip to content
Lucia LADDERHTML Fundamentals Chapter 05Loading learning progress…
HTML-05-04 · LESSON 4 / 4 · ± 10 MINUTES
Accessible Navigation
After this lesson, you can create navigation with clear text, a skip link, and a coherent heading structure.
BEGIN WITH A QUESTION
Understanding begins with a question.
Imagine passing the same menu repeatedly before reaching the content. A small ‘Skip to content’ link can save many steps.
Create navigation with clear text, a skip link, and a coherent heading structure.
UNDERSTAND THE CONCEPT
Start with native elements
An a with href already accepts keyboard focus and activation with Enter. Use links to move somewhere and buttons to perform actions. A span containing ‘Home’ does not automatically become a usable link.
A shortcut to the content
A skip link is an early link to an id on main, such as href="#konten". Tabindex="-1" allows its target to receive focus without adding it to the normal Tab sequence. Visible focus helps users track their position.
Read the page without a mouse
Tab moves forward through links and controls; Shift+Tab moves back; Enter activates a link. Focus order should follow document order. Avoid positive tabindex values to force an order or removing focus outlines without a clear replacement.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<a href="#konten">Skip to content</a>
<header>
<nav aria-label="Primary"><a href="#kegiatan">Community activities</a></nav>
</header>
<main id="konten" tabindex="-1">
<h1>Reading Garden</h1>
<h2 id="kegiatan">Activities</h2>
<p>Reading and discussing together.</p>
</main>BROWSER RESULT
The skip link targets main. The navigation label and link text describe their purposes. H1 and h2 follow the content relationships.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Provide a shortcut
Add an early ‘Skip to content’ link targeting #konten. Give main id konten and tabindex -1. Change the menu to nav labeled ‘Primary’, replace ‘Click’ with ‘Garden activities’, and change h4 to the appropriate heading level.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Place the skip link before header.
- H2 is the level directly below h1; keep id kegiatan.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Use native elements that match the action.
- A skip link provides a direct route to the main content.
- Visible focus and logical document order help every user.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.