DEV Community

Lydia karanja
Lydia karanja

Posted on

Making My Portfolio Accessible: 2 Quick Fixes with Semantic HTML

For Task 2.5, I checked my portfolio from Task 2.3 for accessibility. Two small changes made a big difference.

Issue 1: Missing alt text on images

Before:

Screen readers just said "image". Not helpful.

After:
Full moon with clouds at night, black cursive letter M and blue butterfly overlay

Now it actually describes the image. Small change, but it makes the site usable for visually impaired users.

Issue 2: Using div instead of semantic nav

Before:

About

Browsers didn't know this was navigation.

After:

About

tells assistive tech "this is the menu". Better structure, better SEO too.

What I learned:

Accessibility isn't about rewriting everything. Sometimes it's just adding alt and using

instead of . 10 mins of work, way better experience.

See my portfolio here: https://lydiaa06karanja-art.github.io/iyf-s11-week-01-lydiaa06karanja-art/

Top comments (0)