Q2 - How would you make a website accessible for screen readers?

To make a website accessible for screen readers, the goal is to help users who can’t see the screen still understand and navigate everything clearly.

Here are some simple, effective ways 👇

1. Use proper semantic HTML — Tags like <header>, <main>, <nav>, <footer>, <section>, and <article> help screen readers understand the structure of the page.
2. Add alt text to images — Use meaningful alt attributes on images so the reader can describe the image to the user.

<img src="profile.jpg" alt="Profile picture of John Doe">

1. Use descriptive labels for inputs — Associate labels with form fields to make them understandable.

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

1. Use ARIA roles only when needed — aria-label or aria-labelledby can help describe elements that don’t have clear text.

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

1. Maintain proper heading structure — Use headings (<h1> to <h6>) in a logical order, not just for styling.
2. Ensure keyboard accessibility — All elements should be accessible and usable with only the keyboard (like Tab and Enter keys).
3. Provide clear link text — Instead of writing “click here,” use descriptive link text like “Read more about our services.”
4. Add skip links — Helps users jump directly to the main content, skipping navigation.

<a href="#main-content" class="skip-link">Skip to main content</a>

1. Use good color contrast — Make sure text is easy to read against its background.

✅ In short: Use semantic structure, meaningful labels, proper navigation, and keyboard support to make your website friendly for screen reader users.