DEV Community

Jacob Paris
Jacob Paris

Posted on


Hide text for accessibility with React + Styled Components

I built this little component to hide text that isn't important when you have the whole screen visible for context, but for anyone using a screen reader that hidden content can be invaluable.

import styled from 'styled-components';

const Hide = styled.span.attrs({
    "aria-hidden": true
    display: none;
Enter fullscreen mode Exit fullscreen mode

So if you have a Shop Now button, you can make that a lot more accessible.

Shop <Hide>our {} collection</Hide> now
Enter fullscreen mode Exit fullscreen mode

Oldest comments (1)

dance2die profile image
Sung M. Kim

Would content wrapped inside <Hide> won't be visible to users but screen readers will be able to read it? Or is it the other way around?

(Kind of confused as aria-hidden is also set to true)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git