DEV Community: Rahil Khan

Alt text on small business websites: what to write (and what to skip)

Rahil Khan — Sat, 10 Oct 2026 08:35:20 +0000

Most small business sites I look at have images with no alt text, or alt text like IMG_2041.jpg. It's a two-minute fix that helps three groups at once: people using screen readers, Google Images, and anyone on a slow connection where the photo doesn't load.

What to write

Describe what's in the picture and why it's there, in one short sentence:

alt="Fresh sourdough loaves on the counter at Rosa's Bakery"
alt="Technician fixing a boiler in a customer's kitchen"

If the image is a button or link (like a logo that goes to the homepage), describe what it does: alt="Rosa's Bakery home".

What to skip

Don't start with "image of" or "picture of"; screen readers already announce it's an image.
Don't stuff keywords ("best bakery cheap bakery bakery near me"). It reads badly and doesn't help ranking.
Purely decorative images (background shapes, dividers) should have an empty alt: alt="", so screen readers skip them.

Quick check

Open your homepage, right-click a few photos, choose Inspect, and look at the alt attribute. If it's missing or a file name, that's your to-do list for the week.

NEXCOD builds fast, mobile-friendly websites for small businesses. Studio page: https://nexcod.vercel.app

Stop layout shift on small business sites: give every image a width and height

Rahil Khan — Fri, 09 Oct 2026 08:37:30 +0000

Ever started reading a page, then the text jumps down because an image finally loaded? That's layout shift, and Google measures it as Cumulative Layout Shift (CLS), one of the Core Web Vitals.

On small business sites the usual cause is simple: images without dimensions.

The fix

Add width and height attributes that match the image's real aspect ratio:

<img src="team.webp" alt="Our team at the shop" width="1200" height="800">

Then keep it responsive in CSS:

img {
  max-width: 100%;
  height: auto;
}

Modern browsers use the two attributes to reserve the right amount of space before the file arrives, so nothing jumps.

Same idea for other late-loading things

Embeds (maps, videos): wrap them in a box with aspect-ratio: 16 / 9;.
Ads or banners: reserve a fixed min-height for the slot.
Web fonts: use font-display: swap; and pick a fallback font with similar width.

How to check

Open Chrome DevTools, go to Lighthouse, run a mobile report, and look at "Avoid large layout shifts". It lists the exact elements that moved.

A two-minute fix that makes a site feel much more solid on phones.

NEXCOD builds fast, clean websites for small businesses: https://nexcod.vercel.app

Quick accessibility win: check your text contrast (WCAG 4.5:1)

Rahil Khan — Thu, 08 Oct 2026 08:26:57 +0000

Low-contrast text (light grey on white, white on pastel buttons) is one of the most common accessibility failures on small-business sites, and it hurts everyone reading on a phone in sunlight.

The rule: WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px+, or 18.66px bold) and UI elements like button borders and form field outlines.

How to check in 2 minutes

Open Chrome DevTools, inspect a text element and click the colour swatch: it shows the contrast ratio with a pass/fail tick.
Run Lighthouse > Accessibility; it lists every element with insufficient contrast.
Check hover/focus states and text over hero images too (add a dark overlay behind text on photos).

Common fixes

Darken body text: #777 on white is ~4.48:1 (fails); #595959 is ~7:1.
Don't rely on colour alone for errors in forms; add an icon or message.
Keep placeholder text readable, or better, use real labels.

Better contrast = more readable pages, fewer bounces and a more inclusive site.

— NEXCOD, web design & development · https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Small-business websites: put one clear CTA above the fold

Rahil Khan — Fri, 02 Oct 2026 20:05:49 +0000

Most visitors decide in under 10 seconds whether to stay. If your homepage leads with a photo gallery and no next step, they bounce.

A simple rule: put one clear action above the fold — Call, WhatsApp, or Book — before portfolio photos or long copy.

Then keep the rest short:

What you do (one line)
Who it’s for
Proof (a couple of examples)
Contact again at the bottom

That’s enough for most local and small-business sites. Fancy animations can wait.

I build these for small businesses at NEXCOD — fast, mobile-friendly sites and redesigns.
Studio: nexcod.vercel.app

WhatsApp: +1 289 902 5119