Kampmann Styleguide

Informationen zu Aria-Labels

Da Paginations mehrmals auf einer Webseite vorkommen können ist das HTML-Attribut aria-label nützlich, um einer Pagination kontextuelle Informationen hinzuzufügen und somit Barrierefreiheit auf Ihrer Webseite zu ermöglichen.

ready

      
  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Zurück</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">Weiter</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--primary">
      <li class="page-item"><a class="page-link" href="#">Zurück</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">Weiter</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--green">
      <li class="page-item"><a class="page-link" href="#">Zurück</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">Weiter</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--teal">
      <li class="page-item"><a class="page-link" href="#">Zurück</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">Weiter</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--aloevera">
      <li class="page-item"><a class="page-link" href="#">Zurück</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">Weiter</a>
      </li>
    </ul>
  </nav>
</div>
<!-- norender -->
{{page.inlinestyles}}

      @import "bootstrap/scss/mixins.scss";
@import "bootstrap/scss/pagination.scss";

.pagination {
  & .page-item {
    & .page-link {
      color: $body-color;
    }
    &.active .page-link {
      color: $white;
      background-color: $body-color;
      border-color: $body-color;
    }
  }

  &--primary {
    & .page-item {
      & .page-link {
        color: $primary;
      }
      &.active .page-link {
        color: $white;
        background-color: $primary;
        border-color: $primary;
      }
    }
  }

  &--green {
    & .page-item {
      & .page-link {
        color: $green;
      }
      &.active .page-link {
        color: $white;
        background-color: $green;
        border-color: $green;
      }
    }
  }

  &--teal {
    & .page-item {
      & .page-link {
        color: $teal;
      }
      &.active .page-link {
        color: $white;
        background-color: $teal;
        border-color: $teal;
      }
    }
  }

  &--aloevera {
    & .page-item {
      & .page-link {
        color: $aloevera;
      }
      &.active .page-link {
        color: $white;
        background-color: $aloevera;
        border-color: $aloevera;
      }
    }
  }

  & .page-item {
    &.disabled .page-link {
      color: $gray;
    }
  }
}

ready

      
  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--primary">
      <li class="page-item">
        <a class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--green">
      <li class="page-item">
        <a class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--teal">
      <li class="page-item">
        <a class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>

  <nav aria-label="Durch (Content) navigieren">
    <ul class="pagination pagination--aloevera">
      <li class="page-item">
        <a class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>
</div>
<!-- norender -->
{{page.inlinestyles}}

      @import "bootstrap/scss/mixins.scss";
@import "bootstrap/scss/pagination.scss";

.pagination {
  & .page-item {
    & .page-link {
      color: $body-color;
    }
    &.active .page-link {
      color: $white;
      background-color: $body-color;
      border-color: $body-color;
    }
  }

  &--primary {
    & .page-item {
      & .page-link {
        color: $primary;
      }
      &.active .page-link {
        color: $white;
        background-color: $primary;
        border-color: $primary;
      }
    }
  }

  &--green {
    & .page-item {
      & .page-link {
        color: $green;
      }
      &.active .page-link {
        color: $white;
        background-color: $green;
        border-color: $green;
      }
    }
  }

  &--teal {
    & .page-item {
      & .page-link {
        color: $teal;
      }
      &.active .page-link {
        color: $white;
        background-color: $teal;
        border-color: $teal;
      }
    }
  }

  &--aloevera {
    & .page-item {
      & .page-link {
        color: $aloevera;
      }
      &.active .page-link {
        color: $white;
        background-color: $aloevera;
        border-color: $aloevera;
      }
    }
  }

  & .page-item {
    &.disabled .page-link {
      color: $gray;
    }
  }
}