Links, images and data attributes: small details that matter

Links

• Write link text that makes sense on its own. "Download the syllabus (PDF)" is better than "click here", because screen reader users often hear a list of links with no surrounding text.
• href="#section-id" jumps to the element with that id on the same page. mailto: and tel: links open the email app or the dialler.
• If you open a link in a new tab with target="_blank", add rel="noopener noreferrer", so the new page cannot control the original tab. Modern browsers imply noopener, but writing it is still good practice.

Images and alt text

• Every img needs an alt attribute. Describe what the image tells the reader: alt="Bar chart: CSE placements rose from 70% to 84%".
• A purely decorative image gets an empty alt (alt=""), so screen readers skip it.
• Set width and height on images, so the page does not jump around while they load.

<a href="syllabus.pdf">Download the B.Tech CSE syllabus (PDF, 2 MB)</a>
<img src="lab.jpg" alt="Students soldering circuits in the electronics lab" width="800" height="450">
<button data-event-id="42" data-seats="18">Register</button>

Data attributes

Attributes that start with data- hold extra information for your own scripts. In JavaScript you read them through the dataset property, with the part after data- turned into camelCase:

const button = { dataset: { eventId: '42', seats: '18' } };  // what the browser builds from the button above
const seatsLeft = Number(button.dataset.seats) - 1;
console.log(`Event ${button.dataset.eventId}: ${seatsLeft} seats left`);

Event 42: 17 seats left

In a real page you would write document.querySelector('button').dataset. Data attributes are for your scripts, not for content people need to read.