Vanza Setia - Articles

Stock Images Destroy Your Content

Vanza Setia — Sun, 22 Mar 2026 00:00:00 GMT

Stock images exist in articles. A stock image exists at the top of each article, below a title or above it. The image can also exist on every section, below every sub-heading. The purpose of stock images is to make the article look better, supposedly. But it is not. In fact, those stock images make your website look ugly and generic and blend with the crowd.

Stock images make your website ugly. If you choose stock images that have nothing to do with the article, you already make your website ugly. Those images add nothing. They are just annoying images. They also give you a negative impression. When I read an article with stock images at DEV Community, I often ask myself, "Why do these people put useless images? Why do they want to waste my cellular data? Why do they want to waste my time?" Those authors are weird.

Stock images have nothing to do with the content. To know that, we ignore the images and see if we miss something. When we understand the content without those images, they are decorative images. They are not really "decorative" because they are part of the article. But they are also decorative because the purpose is to make the article look interesting. At least, those are what the author thinks. For me, those images do not add beauty to the website. They make your articles look generic. They are not your content, and they do not make your readers feel content either.

Stock images make your website look the same as others. They have been overused. If you often see an image showing a laptop, ask yourself, "Why does the laptop matter?" The laptop is not yours. It is not owned by the author. It is just a stupid laptop. Even if the title says something about programming, the content is not about the laptop in the image. I think the laptop is much more popular than the owner.

Stock images look fake and inauthentic. Seeing a fake smile does not make me smile.

Searching for stock images is a waste of time and energy. Those people probably have more time than the rest of us. They are willing to spend their time on something that their readers do not need. That is a sign of intelligence.

Stock images have potential legal issues. Some are copyrighted images. You do need to be careful if you want to use one. Pay attention to the license. Read it. If you can not find it, do not use the image. Complicated? Then, do not use stock images.

Simply, I say this to you: please do not make your article like a comic.

Background Image Vs HTML Image? Which One Should I Use?

Vanza Setia — Sun, 22 Mar 2026 00:00:00 GMT

Use CSS background-image property for decorative images. This means the image

gives no information at all; and
makes your website more attractive only; and
is just a background image.

Use the HTML image element (<img>) for meaningful images. This means the image

needs alternative text; or
must exist to give users information; or
is not a stock image.

A bonus tip: optimize the file size of your image. Do not make your users download 10 Megabytes (MB) of an image when it can be reduced to 1 MB—or even less. Use Squoosh or run it locally.

The Content inside the Aria-Label Is for Humans

Vanza Setia — Sun, 22 Mar 2026 00:00:00 GMT

You do not write the following:

<nav aria-label="primary-navigation">
  <!-- a list of internal links -->
</nav>

Do not do that. The value of the aria-label is for humans. Instead, write the following:

<nav aria-label="Primary">
  <!-- a list of internal links -->
</nav>

Explanations:

Remove the "-navigation" because the <nav> element already has the semantic meaning as the navigation landmark.
No code is written there. This means we do not want screen readers or other assistive technologies to say something like, "primary dash navigation, navigation landmark." We want those tools to say, "primary, navigation landmark."

CSS Text-Decoration Is Deceiving

Vanza Setia — Sat, 21 Mar 2026 00:00:00 GMT

Decorative elements, such as decorative images, are not essential. This means that without those elements, the website can still function properly for all users. This is why every <img> element with an empty alt attribute will not be read by a screen reader. But the CSS text-decoration property for links is not merely a decoration.

Every inline text link without an underline is problematic. Users who browse the web visually need a way to identify links in a paragraph. If web developers decide to do the following, they need to provide an alternative way for the users to identify inline text links:

a {
  text-decoration: none;
}

Web developers can decide to use color to differentiate links and plain text. But we understand very well that people with color blindness exist. We also know that Success Criterion (SC) 1.4.1 Use of Color (Level A) from Web Content Accessibility Guidelines version (WCAG) 2.2, mentions, "Color is not the only way of distinguishing information." Simply, color is not enough.

By the way, the default style of the <a> element is blue text color with an underline. The default styling passes SC 1.4.1 Use of Color. It is also widely recognized by all internet users as a link.

Going back, web developers still need to provide a way. They can be creative. They can use the border property, for example.

But, personally, I prefer simplicity to style inline text links. I prefer enhancing the default styling rather than making my own unique inline text link styling.

If you make a button with "Discover more ways to learn science," and you use the <a> element, go for it. You can even argue that removing the underline is a legitimate solution. But I disagree with setting text-decoration: none because

the <button> element should be different from the link with a button appearance;
the <button> element does not have an underline; and
in Windows High Contrast Mode, every link does not have an underline.

Again, color is not enough. If links do not have an underline, they fail to pass SC 1.4.1 Use of Color.

Instead, I do the following:

.button {
  text-decoration-color: transparent;
}

That is much better because:

all links with button appearance will not have a visible underline;
in Windows High Contrast Mode, every link will have an underline; and
in Windows High Contrast Mode, the <button> and the link with button appearance are different from each other—the real buttons do not have an underline, while the link buttons have an underline.

To learn more about Windows High Contrast Mode, check out The Guide To Windows High Contrast Mode by Cristian Diaz.

Now we know that the CSS text-decoration plays a crucial role in web accessibility. We have the right mindset that an underline for every link is not just a decoration. It is an important property for links, especially for inline text links.

Underestimating HTML Is Bad

Vanza Setia — Wed, 18 Mar 2026 00:00:00 GMT

HTML Hell exists to show people that HTML is hard to get right.

You need to understand the effect of your HTML markup. For example, the <br> element causes some screen readers to say, "break." It is annoying.

So do not think that you are an HTML expert just because you know the syntax and remember all the HTML elements.

Never underestimate HTML.