SmartCodingTips

Alt, Title, and ARIA Attributes

Accessibility and usability are essential for all users, including those using assistive technologies. The alt, title, and ARIA (Accessible Rich Internet Applications) attributes improve accessibility and give more context to elements.

1. The alt Attribute

Used with images to describe their content when the image cannot be displayed or is read by screen readers.


<img src="logo.png" alt="Smart Coding Tips Logo">

✅ Always provide meaningful alt text for important images. Use alt="" for decorative images.

2. The title Attribute

Displays a tooltip when the user hovers over an element. It also provides additional info for screen readers.


<a href="download.html" title="Click to download the file">Download</a>

✅ Keep titles short and informative.

3. ARIA Attributes

ARIA attributes enhance accessibility by adding semantic information for assistive technologies. Common attributes include:

  • aria-label – Provides an accessible label.
  • aria-hidden – Hides elements from screen readers.
  • aria-live – Announces content updates dynamically.
  • role – Defines the role of the element (e.g., button, alert).

<button aria-label="Close">✖</button>

<div role="alert">
  Your form has been submitted successfully!
</div>

✅ Use ARIA only when native HTML cannot provide the necessary semantics.