Three quick accessibility fixes – HTML Practice

Three small changes make a big difference.

What to build

The same page with its accessibility problems fixed.

Requirements

The html element has lang="en".
The icon button has aria-label="Search".
The input has a label reading Your name, joined with for and id.

Constraints

Keep the doctype first.

Example

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

Why it works

A screen reader can now choose the right language, announce what the button does, and say what the box is for.

Hints

Hint 1

lang goes on the html element.

Hint 2

A button with only a symbol needs aria-label.

Hint 3

A label needs for and a matching id.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
  <body>
    <button aria-label="Search">🔍</button>
    <label for="name">Your name</label>
    <input id="name" name="name">
  </body>
</html>

Lesson: Accessibility: pages that work for everyone →