Product Ideas Portal

Add guided automatics for suspicious "content" CSS properties of pseudo-elements like ::before and ::after

Screen readers seem to read content in CSS pseudo-elements more often than not, and when these pseudo-elements contain decorative content, their announcement can be confusing to users.

I think there are a few heuristics that could be used to flag potentially decorative content in the content property:

  • Any character in the Unicode Private Use Area (I suspect this is what ANDI uses for its font icon detector)

  • Common Latin separators like slashes, bullets, etc.

  • For a degree of future-proofing as well as cross-language compatibility, you could screen the character based on the value of its Unicode General Category property: content that reports as a letter, number, quote, or punctuation mark is likely to be legitimate, but anything else may be a reasonable suspect.

  • Hadley Luker
  • Nov 12 2020
  • Needs review
  • Attach files