<VisuallyHidden />

January 16th, 2020 · From An accessible visibility React component

The <VisuallyHidden /> React component aims at visually hiding a piece of text which leaving it accessible for assistive technologies such as screen-readers.

Component

const VisuallyHidden = ({ as: Component, ...props }) => (
  <Component {...props} className='sr-only' />
)

VisuallyHidden.defaultProps = {
  as: 'span'
}

Related CSS

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

Usage

const Navigation = props => (
  <a href={`/blog/${props.currentPage + 1}`}>
    Next <VisuallyHidden>page</VisuallyHidden>
  </a>
)