Audit an inaccessible page – HTML Practice Problem

This page has five accessibility problems. Fix each one.

What to build

The same page with these fixed.

Requirements

Save is a real button, with no role attribute and no onclick.
The image has alt text containing graph.
The h4 becomes an h2.
The label says Email (required), instead of relying on the red colour, and the input has required.
No element has a positive tabindex.

Constraints

Keep the words and the order of the content.

Example

Colour can still be used, as long as something else carries the same message.

Why it works

Each problem blocks a specific group of people, and each fix uses a native feature rather than an imitation.

Hints

Hint 1

Look for div used as a button, an image with no alt, a skipped heading level, colour used alone, and a positive tabindex.

Hint 2

Required fields can be marked with the word Required in the label.

Solution

Show one correct solution (try it yourself first)

<h1>Report</h1>
<h2>Summary</h2>
<img src="graph.png" alt="A graph of the monthly report" width="300" height="200">
<label for="e" style="color: red">Email (required)</label>
<input id="e" name="email" required>
<button type="button">Save</button>

Lesson: Accessibility: pages that work for everyone →