Home / HTML Tutorial / Day 11
Day 11 — Accessibility and SEO
These two get taught as separate subjects. They are mostly the same work, because both reward a page that clearly says what it is.
The overlap
A screen reader and a search engine crawler are both machines reading your page without seeing it. Good headings, real alt text and semantic elements help both. Do the accessibility work and most of the on-page SEO comes free.
The six that cover most of it
| Check | Why |
|---|---|
Every image has alt | Non-visual users get the content; Google gets to index it |
Every input has a <label> | Otherwise the field is unannounced and hard to tap |
One h1, no skipped levels | The outline both machines rely on |
| Everything reachable by keyboard | Not everyone can use a mouse |
| Contrast at least 4.5:1 | Low-contrast text is unreadable for many people |
lang on <html> | Picks the right pronunciation and the right search index |
The Check tab in every box on this site tests five of those six. Contrast is the one it cannot judge for you.
A page that fails, then passes
<div class="title">Book a demo</div> <img src="team.jpg"> <form> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <div onclick="send()">Send</div> </form>
It looks like a form. Open the Check tab and count the problems. Then the same thing done properly:
<h1>Book a demo</h1>
<img src="team.jpg" alt="Trainers and students in the Noida classroom">
<form>
<p>
<label for="nm">Name</label><br>
<input type="text" id="nm" name="name" required>
</p>
<p>
<label for="em">Email</label><br>
<input type="email" id="em" name="email" required>
</p>
<p><button type="submit">Send</button></p>
</form>
A div is not a button
<div onclick> cannot be focused with Tab, cannot be triggered with Enter or Space, and is announced as nothing at all. A real <button> gets all of that for free. If it does something, it is a <button>. If it goes somewhere, it is an <a>.Keyboard focus
Press Tab on any page and a ring moves between the links and fields. Some designers remove it because they find it ugly. Doing that makes the site unusable for anyone who cannot use a mouse.
<style>
a { color:#1D3B73; }
/* NEVER do this */
/* a:focus { outline: none; } */
/* Do this instead - keep it, make it match your design */
a:focus-visible {
outline: 3px solid #F0B429;
outline-offset: 3px;
border-radius: 3px;
}
</style>
<p><a href="https://example.com">First link</a></p>
<p><a href="https://example.com">Second link</a></p>
focus-visible, not focus
:focus-visible shows the ring for keyboard users and hides it for mouse clicks - which is what the designers wanted in the first place. It is supported everywhere now.Hiding things, correctly
| Technique | Visually | To a screen reader |
|---|---|---|
display: none | Gone | Gone |
visibility: hidden | Gone, space kept | Gone |
The .sr-only trick | Gone | Still read |
aria-hidden="true" | Still visible | Gone |
<style>
.sr-only {
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
</style>
<p>
<a href="/report.pdf">
Download<span class="sr-only"> the 2026 syllabus, PDF</span>
</a>
</p>
<p>Sighted users see "Download". A screen reader hears the whole thing.</p>
<p><span aria-hidden="true">★★★★★</span>
<span class="sr-only">5 out of 5 stars</span></p>
That last pair is the standard way to do a star rating: the stars are decoration, the sentence is the content.
The head tags that matter for SEO
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Advanced Excel Course in Noida - DAI ACADEMY</title>
<meta name="description" content="Six-week Advanced Excel training in Noida.
Formulas, pivot tables, dashboards and VBA basics, taught on real reports.
Weekday and weekend batches.">
<link rel="canonical" href="https://dai-academy.com/advanced-excel-course-noida/">
<meta property="og:title" content="Advanced Excel Course in Noida">
<meta property="og:description" content="Six weeks, real reports, weekend batches.">
<meta property="og:image" content="https://dai-academy.com/assets/og.png">
</head>
<body>
<h1>Advanced Excel Course in Noida</h1>
</body>
</html>
| Tag | Job | Length |
|---|---|---|
title | The clickable headline in Google | Around 55-60 characters |
meta description | The grey text underneath | Around 150-160 characters |
canonical | "This is the real address" when a page is reachable more than one way | - |
og:* | The card that appears when the link is shared on WhatsApp or LinkedIn | - |
The description is not a ranking factor - it is an advert
Google often rewrites it anyway. Write it for the human deciding whether to click, not for the algorithm. One clear sentence about what the page offers beats a list of keywords every time.
Two minutes of testing, free
- Unplug the mouse. Tab through the page. Can you reach and use everything? Can you see where you are?
- Turn images off in the browser settings. Does the page still make sense?
- Zoom to 200% with Ctrl and +. Does anything overlap or get cut off?
- Run Lighthouse - it is built into Chrome, under the Developer Tools. It scores accessibility and SEO and tells you exactly what to fix.
Try these yourself
- Take the failing form on this page and fix every problem the Check tab reports.
- Write a title and meta description for a Power BI course page, inside the length limits.
- Add a visible focus style to every link on a page.
- Use the sr-only trick to give a "Read more" link a fuller name for screen readers.
- Tab through any page you have built. Write down anything you could not reach.