OddSite 4.0.0


Helpers and utilities formaking the site more accessible.


[hidden] {
  display: none !important; /* stylelint-disable-line declaration-no-important */

The hidden html attribute hides content from both display and screen readers.


.sr-only {
  &:not(:focus, :active) {
    @include config.is-hidden;

A class to hide content visually, while remaining visible to screen readers. Interactive elements will also become visble when focussed or active.


#to-content {
  &:visited {
    @include config.z-index('skip-link');

    --underline-color: currentcolor;

    background: var(--active);
    color: var(--bg);
    opacity: 0;
    padding: var(--shim) var(--gutter);
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate3d(0, -100%, 0);
    transition: config.change('move'), config.change('fade');

  &:active {
    opacity: 1;
    pointer-events: initial;
    transform: translate3d(0, 0, 0);

The “skip to content” link is hidden by default, but appears first for screen readers, and first in the tab-order – allowing keyboard & nonvisual users to skip over the repeated site header (home link, menu, and navigation).


#title {
  &:focus {
    outline: none;

The main content title has a tabindex="-1" so that it does not appear in the tab order – but it can recieve focus from the