CodePark/ questions / Accessibility tree & names
START PRACTICINGPRACTICE
Frontend question · Accessibility › Accessibility tree & names

You want the text "(opens in a new tab)" to be read by screen readers but not shown on screen. Which technique does that?

A visually-hidden CSS class (1px size, clip, overflow: hidden, absolute position)

A visually-hidden class shrinks the text to an invisible 1px box, but the text stays in the accessibility tree. So screen readers still read it.

display: none and visibility: hidden are the tempting wrong answers. They hide content from everyone, screen readers included. aria-hidden="true" does the opposite of what you want. It keeps the text on screen and removes it only from the accessibility tree.