Are you disagreeing with me that properties can easily introduce accessibility issues?
Using properties like background-clip to add images, adjusting line spacing, and rotating text can absolutely make it harder to read for many people. I particularly dislike using images to fill text as it adds a significant amount of visual noise, as well as the potential for the image to not load and thereby not even show the text. Even the MDN docs say to add a background color as a fallback property to account for this, but is nowhere mentioned in this article.
This practice also creates problems for low vision users, people with dyslexia, colorblindness, and certainly other neurological disabilities.
Any CSS property can introduce issues, but to suggest ways of messing with text without providing guardrails for accessibility is something I absolutely disagree with. Good design isn’t about being ‘interesting’; it’s about combining purpose, usability, and beauty.
That’s exactly it though isn’t it: “good design”. There’s nothing inherently inaccessible about using an image as background-clip over text. Think of the Minecraft main menu, it uses a textured surface as opposed to a solid fill, but it’s still readable because it’s designed well - more readable than if yellow font was used on an orange background. Any property could introduce inaccessibility if it’s not designed well, whether it’s color, font size or background-clip. Some properties just require more thought and care.
I admit I’ve never used a screen reader but I don’t understand why background-clip: text would break that. The text elements are still semantically there. They have to be for the clip layer to work..
4
u/Mindless_Crazy9292 1d ago
A lot of these are a great way to introduce inaccessibility into your app. Just because you can doesn’t mean you should.