Insane web design on Apple dot com

May 31 2025

I was testing font replacement with my web browser extension StopTheMadness Pro on https://www.apple.com, but for some reason the feature wasn't working as expected. The fonts were replaced everywhere on the web page except for in the navigation header at the top. The Safari web inspector revealed why (click image for full size):

The link labels are not text but rather Scalable Vector Graphics (SVG) images! Here's an example, copy and pasted from apple dot com:

Eagle-eyed readers may have noticed that in the DOM after the image there's an HTML <span> element containing the actual text. However, that element is only 1 pixel wide and thus not visible, as you can (not) see if I edit the HTML and hide the svg with a CSS style attribute:

I'm guessing that the <span> with text that's not visible with the naked eye is in the DOM for accessibility and screen readers.

I have to admit, I don't understand the purpose of this bizarre indirection, and if it's "best practice" in modern web design for some reason, I'm glad that I'm not a web designer. My career now, as an extension developer, is more or less fighting against web designers.