Accessibility in HTML: alt Text, Labels and ARIA Basics

Accessibility ensures that websites can be used by everyone, including people with disabilities. HTML provides features like alt text, labels, and ARIA attributes to improve accessibility.

Alt Text for Images

Always provide alt text for images. Alt text (alt) describes images for screen readers.

Example:

<img src="dog.jpg" alt="A brown dog playing with a ball">

<img src="dog.jpg" alt="A brown dog playing with a ball">

Labels for Forms

Labels make forms easier to understand.

Example:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

ARIA Basics

ARIA (Accessible Rich Internet Applications) attributes help describe dynamic content.

Example:

<button aria-label="Close menu">X</button>

<button aria-label="Close menu">X</button>

📌 Summary

Practice Challenge

• Add an image with alt text describing it.
• Create a form with labels for each input.
• Add an ARIA label to a button.

✅ Accessibility improves user experience, SEO, and inclusivity. Next, we’ll finish the series with a Mini Project.