CodePen Embed - Skip buttons

<div class="main container">
  <p class="note">
    Use Tab keys to navigate.
  </p>

  <header class="widget">
    <div class="widget-container widget-transparent demo-header">

      <h1>Skip button demo</h1>
      <nav>
        <ul>
          <li><a href="#">Company Event 2023</a></li>
          <li><a href="#">New cafeteria menu</a></li>
          <li><a href="#">What's new</a></li>
        </ul>

      </nav>
    </div>
  </header>
  <div class="widget cards">
    <section class="widget-container inputs">
      <h2>Native inputs</h2>
      <div class="input-field input-list">
        <label><span>Text</span><input type="text" placeholder="placeholder"></label>

        <div>
          <label for="input-file">
            <span>File</span>
          </label>
          <div class="input-file" id="input-file">
            <label for="file-input" class="input-file-btn">
              <span class="icon material-icons">file_download</span>
              <span class="input-label"> Upload </span>
            </label>
            <input type="file" id="file-input" aria-describedby="file-desc" />
            <span class="input-file-description" id="file-desc"></span>
            <button class="btn btn-icon-only btn-flat clear-btn"><span class="icon material-icons">
                clear
              </span></button>
          </div>

        </div>

        <label><span>Number</span><input type="number"></label>
        <label><span>Email</span><input type="email" placeholder="user@email.com"></label>
        <label><span>URL</span><input type="url" name="url" placeholder="https://www.example.com" pattern="https://.*"></label>

        <label><span>Password</span> <input type="password" id="pass" name="password" minlength="8"></label>
        <label><span>Tel:</span><input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"></label>
        <label><span>Range</span><input type="range" id="volume" name="volume" min="0" max="11"></label>
        <label><span>Background color</span><input type="color"></label>
        <div class="color-with-presets"><label><span>Color with presets</span>
            <input type="color" list="redColors" value="#800000">
            <datalist id="redColors">
              <option value="#800000">
              <option value="#8B0000">
              <option value="#A52A2A">
              <option value="#DC143C">
            </datalist>
          </label></div>

      </div>
    </section>
    <section class="widget-container inputs">
      <h2>Datetime inputs</h2>
      <div class="input-field input-list">
        <label><span>Date</span><input type="date"></label>
        <label><span>Month</span><input type="month" min="2018-03" value="2018-05"></label>
        <label><span>Week</span><input type="week" name="week" min="2022-W18" max="2022-W26"></label>
        <label><span>Time</span><input type="time"></label>
        <label><span>Date and time - local</span><input type="datetime-local"></label>

        <label><span>Time with suggestion</span>
          <input type="time" list="popularHours">
          <datalist id="popularHours">
            <option value="12:00">
            <option value="13:00">
            <option value="14:00">
          </datalist>
        </label>

        <div>
          <label><span>Date with suggestion</span>
            <input type="date" list="recent-dates">
            <datalist id="recent-dates">
              <option value="2022-01-01">
              <option value="2022-02-14">
              <option value="2022-05-01">
            </datalist>

          </label>
        </div>
      </div>
    </section>
    <section class="widget-container inputs">
      <h2>Demo form 1</h2>
      <div class="input-field">
        <form action="javascript:false"> <label> <span> Part number</span>
            <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by three uppercase letters." type="text" aria-describedby="validate-part" aria-errormessage="validate-part" />
          </label>
          <p id="validate-part" class="input-field-describe">A part number is a digit followed by three uppercase
            letters.</p>
          <input type="submit" value="submit">
        </form>

      </div>

      <fieldset class="input-field">

        <legend>&nbsp;Select a maintenance drone:&nbsp;</legend>

        <div>
          <input type="radio" id="huey" name="drone" value="huey" checked>
          <label for="huey">Huey</label>
        </div>

        <div>
          <input type="radio" id="dewey" name="drone" value="dewey">
          <label for="dewey">Dewey</label>
        </div>

        <div>
          <input type="radio" id="louie" name="drone" value="louie">
          <label for="louie">Louie</label>
        </div>

      </fieldset>

      <div class="input-field">
        <form>
          <p>Please select your preferred contact method:</p>
          <div>
            <input type="radio" id="contactChoice1" name="contact" value="email">
            <label for="contactChoice1">Email</label>

            <input type="radio" id="contactChoice2" name="contact" value="phone">
            <label for="contactChoice2">Phone</label>

            <input type="radio" id="contactChoice3" name="contact" value="mail">
            <label for="contactChoice3">Mail</label>
          </div>

        </form>
      </div>
    </section>

    <section class="widget-container inputs">
      <h2>Demo form 2</h2>

      <fieldset>
        <legend>Choose your monster's features:</legend>

        <div>
          <input type="checkbox" id="scales" name="scales" checked>
          <label for="scales">Scales</label>
        </div>

        <div>
          <input type="checkbox" id="horns" name="horns">
          <label for="horns">Horns</label>
        </div>
      </fieldset>

      <fieldset id="ice-cream">
        <legend>Ice Cream factory</legend>
        <div>
          <label for="ice-cream-choice">Choose a flavor:</label>
          <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

          <datalist id="ice-cream-flavors">
            <option value="Chocolate">
            <option value="Coconut">
            <option value="Mint">
            <option value="Strawberry">
            <option value="Vanilla">
          </datalist>
        </div>
        <div>
          <label for="ice-cream-choice">Choose topping:</label>
          <input list="ice-cream-topping" name="ice-cream-choice-topping" />

          <datalist id="ice-cream-topping">
            <option value="nuts">
            <option value="mango">
            <option value="oreo">
            <option value="pistachio">
            <option value="cookie">
          </datalist>
        </div>
      </fieldset>

      <fieldset>
        <div>
          <label for="pet-select">Choose a pet:</label>

          <select name="pets" id="pet-select">
            <option value="">--Please choose an option--</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
            <option value="hamster">Hamster</option>
            <option value="parrot">Parrot</option>
            <option value="spider">Spider</option>
            <option value="goldfish">Goldfish</option>
          </select>
        </div>
      </fieldset>

    </section>

  </div>
  <aside>
    <div class="widget-container links">
      <h3>Categories</h3>
      <nav>
        <ul>
          <li><a href="#">Manufacturing</a></li>
          <li><a href="#">Marketing</a></li>
          <li><a href="#">Information Technology</a></li>
          <li><a href="#">Workforce</a></li>
        </ul>

      </nav>
      <h3>Archive</h3>
      <nav>
        <ul>
          <li><a href="#">2023</a></li>
          <li><a href="#">2022</a></li>
          <li><a href="#">2021</a></li>
          <li><a href="#">2020</a></li>
        </ul>

      </nav>

      <h3>Tags</h3>
      <nav>
        <ul>
          <li><a href="#">Work</a></li>
          <li><a href="#">Current</a></li>
          <li><a href="#">Social</a></li>
          <li><a href="#">Employees</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">Talent</a></li>
          <li><a href="#">Jokes</a></li>
          <li><a href="#">Beach</a></li>
        </ul>

      </nav>

    </div>
  </aside>
</div>

:focus {
  outline: 3px dashed #000;
}

:is(header .demo-header, aside .links, section):focus {
  outline: 3px dashed red;
}

.main {
  padding: 0 min(5%, 2.5rem) 4rem;
  justify-content: flex-start;
}

h1,
h2,
h3 {
  padding: 0;
  margin: 0;
}

h2,
h3 {
  font-size: 1.8rem;
  font-weight: 500;
  padding-bottom: 0.3rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #d3d3d3;
}

h1 {
  background-color: rgba(0, 0, 0, 0.14);
  margin: -1.5rem;
  padding: 2rem;
  display: inline;
  color: #fff;
}

.demo-header {
  background-image: url(https://images.unsplash.com/photo-1554255556-1e75efd4508d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzkyMzMwODQ&ixlib=rb-4.0.3&q=80);
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

.widget-transparent {
  background-color: transparent;
}

.cards {
  width: calc(70% - 1rem);
  @media screen and (max-width: 960px) {
    width: 100%;
  }
}

header.widget {
  margin-bottom: 1rem;
  width: 100%;

  nav {
    width: 100%;
    text-align: right;

    li {
      margin-bottom: 0.8rem;
      list-style: none;
    }
    a {
      color: #fff;
      background-color: rgba(0, 0, 0, 0.14);
      padding: 0.5rem 0.7rem;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

aside {
  @extend .widget;
  width: 30%;
  padding-left: 1rem;
  height: 100%;

  .widget-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }

  @media screen and (max-width: 960px) {
    width: 100%;
    padding-left: 0;
    margin-top: 1rem;

    .widget-container {
      width: 100%;
    }
  }

  h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 0;
    padding: 0;
    border: none;

    &:first-child {
      margin-top: 0;
    }
  }
}

.skip-button {
  position: absolute;
  margin-top: 2rem;
  margin-left: 2rem;
  background-color: red;
  color: #fff;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;

  &:not(:focus) {
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

.note {
  font-family: sans-serif;
  font-size: 0.75rem;
  padding: 0.5rem;
  background-color: rgba(#fff,0.8);
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

View Compiled

let nodesToSkip = document.querySelectorAll(
  " header .demo-header, aside .links, section"
);

nodesToSkip.forEach((node, i) => {
  makeFocusable(node);
  if (i < nodesToSkip.length - 1) {
    addSkipButton(node);
  }
});

function makeFocusable(node) {
  node.setAttribute("tabindex", -1);
}

function addSkipButton(node) {
  let skipButton = document.createElement("button");
  let buttonText = document.createTextNode("skip to next section");
  let title = node.querySelector("h2, .title");
  if (title) {
    buttonText = document.createTextNode(
      `Skip ${title.innerHTML}, jump to next section`
    );
  }

  skipButton.appendChild(buttonText);
  skipButton.classList.add("skip-button");

  skipButton.addEventListener("click", jumpToNextSection);

  node.prepend(skipButton);
}

function jumpToNextSection(e) {
  let button = e.currentTarget;
  let index = Array.from(nodesToSkip).findIndex(
    (node) => node == button.parentNode
  );

  if (index < nodesToSkip.length - 1) {
    nodesToSkip[index + 1].focus();
  }
}

Run Pen

This Pen is owned by Chris "Codespud" Bautista on CodePen.

See more by @chrisbautista on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.