Web APIs & Accessibility

Web APIs overview

Web APIs are built-in browser tools JavaScript can use — location, storage, drag-drop, and more. HTML gives the page; APIs add superpowers.

You need JavaScript to call them. They work in secure contexts (https or localhost).

Real-life example: HTML is the shop. Web APIs are services connected to the shop — GPS delivery, storage room, extra workers.

Geolocation API

What: Gets the user's latitude and longitude. When: Maps, local weather, find-nearby-shop features.

The browser asks permission first. Never track users without clear reason.

Real-life example: Like sharing live location on WhatsApp — only works when you allow it.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (pos) {
    console.log("Lat:", pos.coords.latitude);
    console.log("Lng:", pos.coords.longitude);
  });
} else {
  console.log("Geolocation not supported");
}

Drag and Drop API

What: Lets users drag items and drop them on targets. When: Kanban boards, file upload zones, reorder lists.

Use draggable="true" on elements and listen for drag events in JavaScript.

Real-life example: Dragging app icons on your phone home screen — same idea on a web page.

<div draggable="true" id="item">Drag me</div>
<div id="drop">Drop here</div>
<script>
  const item = document.getElementById("item");
  const drop = document.getElementById("drop");
  item.addEventListener("dragstart", () => item.style.opacity = "0.5");
  drop.addEventListener("dragover", (e) => e.preventDefault());
  drop.addEventListener("drop", () => alert("Dropped!"));
</script>

Web Storage API

What: Saves key-value data in the browser — localStorage (stays) and sessionStorage (tab session). When: Theme choice, draft form, quiz progress.

Not for passwords. Data is plain text on that device.

Real-life example: localStorage is like a sticky note on your fridge — stays until you remove it. sessionStorage is a note on one class desk — gone when class ends.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"

Web Workers API

What: Runs JavaScript in a background thread so heavy work does not freeze the page. When: Big calculations, image processing, parsing large files.

Workers cannot touch the DOM directly — they message the main page.

Real-life example: Like hiring an extra kitchen helper to chop vegetables while you serve customers — main page stays responsive.

// main.js
const worker = new Worker("worker.js");
worker.postMessage("start");
worker.onmessage = (e) => console.log("Result:", e.data);

// worker.js — separate file
self.onmessage = () => self.postMessage("Done counting!");

Server-Sent Events (SSE)

What: Server pushes live updates to the browser over one open connection. When: Live scores, stock prices, chat notifications, progress bars.

Simpler than WebSockets for one-way server-to-client streams.

Real-life example: SSE is like a radio news ticker — the station sends updates; you listen without sending back each time.

const source = new EventSource("/updates");
source.onmessage = (event) => {
  console.log("Live update:", event.data);
};

HTML Accessibility

Accessibility (a11y) means everyone can use your site — blind users with screen readers, keyboard-only users, low vision, and motor difficulties.

Use semantic HTML, alt on images, labels on inputs, good color contrast, and aria-* only when HTML alone is not enough.

Real-life example: A ramp and braille signs at school help everyone enter — accessibility features on web pages do the same.

• One <h1>, logical heading order
• alt text on every meaningful image
• <label> linked to every form field
• Focus visible on buttons and links
• lang attribute for screen reader pronunciation

<button type="button" aria-label="Close dialog">×</button>
<img src="chart.png" alt="Sales grew 20% from Jan to Jun" />

Summary of HTML

HTML is the structure of the web. You learned tags for text, links, images, lists, tables, forms, media, semantics, and more.

Good HTML is the foundation — CSS makes it beautiful, JavaScript makes it alive, and accessibility makes it for everyone.

Real-life example: You started with an empty plot (blank page). Now you have a house frame with rooms, doors, windows, and switches — ready for paint (CSS) and electricity (JS).

• Structure with semantic HTML5
• Connect pages with links and paths
• Collect data with accessible forms
• Add media, graphics, and APIs with JS
• Next in this course: CSS styling in depth