DEV Community

loading...

Hide text for accessibility with React + Styled Components

Jacob Paris
Sales funnels and B2B SaaS for the mortgage industry, almond latte fanatic, LA @eggheadio , formerly ToolStache
・1 min read

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

Discussion (1)

Collapse
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)