At the time of this writing, Etch does not provide built-in skip link functionality, but because you have access to the full HTML, it is pretty easy to add one. One thing I didn’t account for initially is that Automatic CSS includes a native skip-link style, and some of those had to be modified in my CSS.

Borrowing heavily from another website for inspiration, here is the final result.

Image 12
Screenshot of the main content skip link.

My approach

Since these are necessary on every page, I added them to the header component of the catch-all template. I may revisit this and make them a separate component so they can be easily added to any template with a custom header.

Image 10
Screenshot showing the site header component structure

Each anchor tag contains a div for the enter button. This is an ooh-ahh feature and not necessary.

Image 11
Anchor tag with nested div.

Once these are created, open your footer component and add an ID (id=”footer”), and do the same for your main element (id=”main-content”). Right now, neither my header nor footer is so elaborate that they need skipping over or to, but it is a good practice.

The HTML

<!-- Skip to Main -->
 
<a href="#main-content" aria-label="Skip to main content" class="skip-link">Skip to main content <div aria-hidden="true" class="content"><span class="icon">↵</span>Enter</div></a>

<!-- Skip to Footer -->
 
<a href="#footer" aria-label="Skip to main content" class="skip-link">Skip to footer <div aria-hidden="true" class="content"><span class="icon">↵</span>Enter</div></a>
HTML

The CSS

skip-link {
  align-items: center;
  top: -40px;
  left: 0;
  font-family:-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --btn-font-weight: 600;
  &:focus {
    top: 0;
    padding: 8px 16px;
    text-decoration: none;
    min-width: 200px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 50vw;
    text-decoration: none;
    background-color: #fff;
    color: #1f2533;
    font-size: 16px;
    text-shadow: 0 0 #27272d;
    z-index: 2147483647;
    direction: ltr;
    border: solid 3px color-mix(in oklch, var(--primary) 99%, transparent);
    outline: solid 0 #639af9;
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--primary) 50%, transparent);
    transition: top 0.22s ease;
  }
}
.content {
  display: inline-flex;
  margin-inline-start: 1.75rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  background-color: var(--primary-dark);
  padding: 5px 10px;
  color: var(--white);
}
.icon {
  font-size: 1rem;
  margin-inline-end: 0.25em;
  line-height: 1;
  margin-block: auto;
  text-transform: uppercase;
  font-family: azo-sans-web;
}
CSS