Entrances

Tell users what are the three KTH entrances and where they are

When to use

Inside KPM.

How to use

You can get the entrances in two ways:

1. Inject the KPM script, which includes the entrances. This script is under development
2. Make the HTML markup yourself

How to make your own entrances

Use the code snippet for the menus in English or Swedish

<nav class="kth-entrances" aria-label="Ingångar">
  <ul>
    <li>
      <a class="kth-menu-item" href="https://kth.se"> kth.se </a>
    </li>
    <li>
      <a class="kth-menu-item" href="https://kth.se/student"> Studentwebben </a>
    </li>
    <li>
      <a class="kth-menu-item" href="https://intra.kth.se" aria-current="true">
        Intranät
      </a>
    </li>
  </ul>
</nav>

<nav class="kth-entrances" aria-label="Entrances">
  <ul>
    <li>
      <a class="kth-menu-item" href="https://kth.se"> kth.se </a>
    </li>
    <li>
      <a class="kth-menu-item" href="https://kth.se/student"> Student web </a>
    </li>
    <li>
      <a class="kth-menu-item" href="https://intra.kth.se" aria-current="true">
        Intranet
      </a>
    </li>
  </ul>
</nav>

Explanation of the code snippets:

• Entrances should be only links to KTH main site (https://kth.se), student web (https://kth.se/student) and intranet (https://intra.kth.se).
• Use the <nav> tag as the container to indicate a navigation landmark.
• Use aria-label attribute in the <nav> container to add an accessible name. The value of that attribute should be the same language as its content.
• The aria-label in <nav> should not include the term “navigation”.
• Use the menu item component for extra styling.
• Mark the <a> with the current entrance with the attribute aria-current="true".

Research on this component

• The aria-label does not work properly with automatic translation tools like Google Translate. Read more in the blog post “aria-label does not translate” (by Adrian Roselli). Future versions of KTH Style may recommend a combination of aria-labelledby with kth-visually-hidden.