Skip to content

Accessibility

OxyProps goal is to help you build accessible websites. In addition to accessibility built in all CSS Variables and utility classes when possible, we also provide you with a set of specific utility classes that you can use to help include all of your website visitors.

Screen Readers

The .o-sr-only utility class is used to hide content from all users except screen readers. This is useful for content that is only relevant to screen reader users, such as skip links.

o-sr-only

If you wonder how this works, here is the CSS code:

.o-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

The .o-not-sr-only utility class is used to cancel the .o-sr-only utility class. This is useful for content that is only relevant to screen reader users, such as skip links.

o-not-sr-only

If you wonder how this works, here is the CSS code:

.o-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}