HTML for Kids · Lesson

Accessibility Basics

Add alt text to images and make your web pages user-friendly.

Accessibility Basics is a free HTML for Kids lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Accessibility Basics

Welcome to the next lesson! Today, we’ll learn how to make your web pages accessible to everyone, including people with disabilities. Accessibility is an important part of building user-friendly websites.

2 What is Accessibility?

Accessibility ensures that all users, regardless of their abilities, can interact with your web pages. This includes people who:

Have visual or hearing impairments.
Use screen readers or other assistive technologies.
Navigate websites using a keyboard instead of a mouse.

Let’s learn how to make your pages more inclusive!

3 Adding Alternative Text to Images

Use the alt attribute in the <img> tag to describe the image. This helps screen readers convey the image content to visually impaired users.

Example:

<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />

4 Using Semantic HTML

Semantic tags, such as <header>, <nav>, and <footer>, help assistive technologies understand the structure of your page.

Example:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<footer>
  <p>© 2024 My Blog</p>
</footer>

5 Keyboard Navigation

Ensure all interactive elements, such as links and buttons, can be accessed using the Tab key. Use the tabindex attribute to control the tab order.

Example:

<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>

6 Providing Labels for Inputs

Use the <label> tag to provide clear descriptions for input fields. Link the label to the input using the for attribute.

Example:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

7 Color Contrast

Ensure there is enough contrast between text and background colors so everyone can read your content easily. Use online tools to check color contrast ratios.

Tip: High contrast improves readability for users with visual impairments.

Example:

<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>

8 Try It Yourself

Let’s create an accessible form. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Form</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" />
      <br />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

9

10 Great Job!

Congratulations! You’ve learned how to make your web pages accessible to everyone. Accessibility is an essential part of modern web development. In the next lesson, we’ll learn how to validate your HTML code to ensure it meets web standards. Get ready to fine-tune your skills!

Frequently asked questions

Is the “Accessibility Basics” lesson free?

Yes — the full text of “Accessibility Basics” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Accessibility Basics”?

Add alt text to images and make your web pages user-friendly. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Accessibility Basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML for Kids