clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Visually hidden text, only visible to screen readers

Filed under: HTML/CSS— Tagged with: UI components

This article looks into content that is visually hidden, but visible to people using assistive technologies, like screen readers.

Screen reader only content might be needed when:

  • Rendering a button that is only an icon with no visible text. The button should contains a visually hidden text that tells what it does, e.g.: "Sort ascending".
  • Rendering form fields with no visible labels, the label should be there, but it should be screen reader only.

Back in the day we simply used to do:

.visually-hidden {
  left: -9999px;
  position: absolute;
}

The needed CSS to hide a button properly

But it had its issues, after some amount iterations the collective understanding is to use something like this:

.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important
})

Visually hidden React component

It’s pretty unsurprising... here’s one made using styled-components:

import styled from 'styled-components'

const VisuallyHidden = styled.span({
  border: '0 !important',
  clip: 'rect(1px, 1px, 1px, 1px) !important',
  height: '1px !important',
  overflow: 'hidden !important',
  paddingBottom: '0 !important',
  paddingLeft: '0 !important',
  paddingRight: '0 !important',
  paddingTop: '0 !important',
  position: 'absolute !important',
  whiteSpace: 'nowrap !important',
  width: '1px !important'
})

export default VisuallyHidden

With styled-components, you can just export that definition and use it, it’s already a React component, props.children will be passed along as it should.

Sources:

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!