Hide text for accessibility with React + Styled Components

jacobmparis

Jacob Paris

Posted on July 24, 2019

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 {category.name} collection</Hide> now
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
jacobmparis
Jacob Paris

Posted on July 24, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related