Semantic HTML and Accessibility: What I Learned

When I started building my portfolio, I made every part of the page with <div> tags. A <div> is just a box, and it doesn't tell the browser what is inside it.

Semantic HTML means using tags that describe what the content is, like <header>, <nav>, <main> and <footer>. People who are blind use screen readers, and these tags tell the reader what each part of the page is, so they can jump straight to the menu or the main content. Search engines also understand the page better, and the code is easier to read.

Alt text is another important part. It is a short description inside an image tag. Without it, a screen reader has nothing meaningful to read, so a blind person misses what the image shows.

Before and after

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

The page looks the same, but now every part has a meaning.

Three problems I fixed

1. Missing menu. My contact page had no navigation, so a person using a keyboard or screen reader couldn't reach the other pages. I added a <nav> to every page.
2. A broken email link. My "Get in touch" link pointed to a fake address, [e-mail]. I changed it to my real email so the link works.
3. A hidden focus outline. My form CSS removed the outline that shows which field is selected. People who use a keyboard need it, so I deleted that line.

See it live

https://fairyfaiyth.github.io/iyf-s12-week-02-fairyfaiyth/

What I learned

I learned that tags like <nav> and <main> tell screen readers what each part of a page is. I also learned that small fixes, like a working email link and a visible focus outline, make a website easier for everyone to use.

Before this week I did not think much about how a page sounds to someone who cannot see it. Now I check that every page has a menu, working links and a clear structure.