0

There is such a page. For decorative purposes, I add a pseudo-element ::before for h2.

<h2>Title...</h2>

h2::before {
    content: "#";
}

It will be displayed like this:

# Title...

But the screen reader will read "#". It shouldn't be read.

I know aria-hidden attribute can skip some element. But how can I use in this case?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Hsiao Feng
  • 13
  • 3
  • Does [this](https://stackoverflow.com/questions/26634156/can-i-prevent-after-pseudo-element-from-being-read-by-screen-readers) answer your question? – Đinh Carabus Dec 04 '21 at 10:46
  • `speak: none; ` – connexo Dec 04 '21 at 10:54
  • 1
    Alternatively, you can use the content's alt text by adding a / and then the alt, which in your case you'd want an empty string. Example: `content: "#" / ""` – TechyTech Dec 04 '21 at 10:55
  • Don't use `speak: none` support is next to nothing for it. TechyTech has a suggestion [that will work in around 70% of browsers](https://caniuse.com/mdn-css_properties_content_alt_text) so that isn't a bad idea as a quick fix! The best solution would be to use an image (SVG) as a background image using a data URI and set `content: ""` within your CSS as that will have near perfect support. – GrahamTheDev Dec 04 '21 at 11:00
  • @connexo It doesn't seem to work. I tried and VSCode shown it's an unknown property. – Hsiao Feng Dec 04 '21 at 11:05
  • @HsiaoFeng [Here is a quick fiddle to demo the concept](http://jsfiddle.net/8k4wcb2f/) - the only thing you need to do is convert the SVG to a data URI so that you don't have an unnecessary request, – GrahamTheDev Dec 04 '21 at 11:10
  • 1
    @GrahamRitchie Thank you! I also think SVG is a better choice. – Hsiao Feng Dec 05 '21 at 12:39
  • You are welcome! Good luck with the project! – GrahamTheDev Dec 05 '21 at 15:24

0 Answers0