[cf77f2]Test Rule Bypass Blocks of Repeated Content - Improved version of Passed Example 5 (Suggested)

[joshuamaker8-create]

Hi

I tried learning the Test Rule: Bypass Blocks of Repeated Content.
Passed Example 5 did not have enough content to illustrate the mechanism of the example in a way that I could see that it works. There wasn't enough content on the page to see the skip links actually move the viewport.

I created a version that clearly illustrates the features of "Document has an instrument to move focus to non-repeated content" as for Passed Example 5.

I tried to copy the W3 styling, but could not easily extract it from the website CSS when inspecting source. So I just made sure the styling of my example conformed to WCAG requirements for a11y.

The filler text is different to the original example, but bland and apolitical.

I would be happy to work more on this to create a working example for Passed Example 5 that shows the skip effect more clearly.
Open to suggestions.
If this is not the type of suggestions wanted by W3, please let me know so that I know not to suggest similar ideas in future.

Here follows the html and css text:

<title>The Lost Marble - Skip Link Demo</title> <style> /* Base page styles */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #222222; /* Darker for better readability */ background: #ffffff; /* White for max contrast */ margin: 2rem auto; max-width: 900px; padding: 1rem; box-sizing: border-box; }

/* Navigation skip links container /
nav#local-navigation {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
background: #e0f2f1; / Slightly muted teal /
border-left: 5px solid #004d40; / Darker teal for contrast */
padding: 1rem 1.5rem;
border-radius: 5px;
}

nav#local-navigation a {
color: #004d40; /* Dark teal for good contrast */
font-weight: 600;
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 3px;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Focus and hover states: strong contrast /
nav#local-navigation a:hover,
nav#local-navigation a:focus {
background-color: #004d40;
color: #ffffff;
outline: 3px solid #80cbc4; / Visible focus ring */
outline-offset: 2px;
}

/* Aside sections styling */
aside#bio-translator,
aside#about-book {
background-color: #ffffff;
border: 1px solid #bbb;
padding: 1.5rem 2rem;
margin-bottom: 2rem;
border-radius: 6px;
box-shadow: 0 2px 6px rgb(0 0 0 / 0.07);
color: #333333;
font-style: italic;
}

/* Main content styling */
#main {
background-color: #ffffff;
padding: 2rem 2.5rem;
border-radius: 8px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.12);
margin-bottom: 3rem;
font-size: 1.125rem;
color: #111111;
}

#main p {
margin-bottom: 1.5rem;
}

/* Link inside main /
#main a {
color: #1565c0; / Strong blue with good contrast */
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}

#main a:hover,
#main a:focus {
border-color: #1565c0;
outline: 3px solid #90caf9; /* Visible focus ring */
outline-offset: 2px;
}

/* Headings /
h1, h2 {
color: #00332f; / Dark teal */
font-weight: 700;
margin-bottom: 1rem;
}

/* Responsive tweaks */
@media (max-width: 600px) {
body {
margin: 1rem;
padding: 0.5rem;
}
nav#local-navigation {
padding: 1rem;
}
aside#bio-translator,
aside#about-book,
#main {
padding: 1rem;
}
}

</style>

Local Navigation

Skip to translator's biography Skip to information about the book Skip to main content

<aside id="bio-translator">
    <h3>Translator's biography</h3>
    <p>Wang Fang is a professor of English at Eastern Harmony University.

Wang Fang grew up in a small riverside town, whereshe developed a love for stories told by elders in the marketplace. She later studied literature at Eastern Harmony University, where her fascination with classic works deepened. After years of translating poems and short tales for local publishers, Wang Fang turned her attention to historical epics, believing that such works could bridge generations and cultures. Her clear, faithful translations have been praised for capturing both the rhythm and spirit of the originals.

</aside>
<aside id="about-book">
    <h3>About book</h3>
    <p>This is a short, universal story written with AI to demonstrate skip links.</p>
    
</aside>

<div id="main">
    <h1>The Lost Marble</h1>
    <p>Once upon a time, a small marble rolled away from its jar.</p>
    <p>It rolled under the chair, then past the door, and out into the garden.</p>
    <p>In the garden, a curious bird saw it and pecked at it.</p>
    <p>The marble spun faster and faster until it fell into a little puddle.</p>
    <p>A kind child found the marble and gently washed it clean.</p>
    <p>They placed it back into the jar with all the other marbles.</p>
    <p>The marble was happy to be home, and the jar looked brighter than ever.</p>      
    <p>From that day on, the marble often dreamed of its short adventure outside. It remembered the warm sunlight on its surface, the ticklish pecks of the bird, and the cool splash of the puddle. Although it had been a little scared, it also felt proud for having traveled so far all on its own.</p>
    <p>The other marbles listened to its story many times. Some were amazed, others doubtful, but all agreed it was nice to hear about the world beyond the jar. Even the oldest marble, who usually preferred to stay quiet, admitted that it was glad the runaway marble had made it back safely.</p>
    <p>Every now and then, when the jar was placed near the window, the marble would catch a glimpse of the garden. It could see the flowers swaying, the grass waving gently in the wind, and the same little puddle sparkling after the rain. The sight made the marble feel warm inside, knowing it had once been part of that scene.</p>
    <p>Though it stayed in the jar from then on, the marble learned something important: adventures can happen in big ways and small ways, and sometimes, coming home is the best part of the journey. And so, it rested happily, waiting for whatever surprise might come next.</p>
</div>

<a href="#local-navigation">Read Chapter 2 (empty)</a>