Menu
All tools/ Fix guides
Accessibility / Low to medium

Make image and page content understandable

Write text alternatives for images according to their purpose, use a logical heading structure, and make link and form instructions clear.

Free to useNo signupMade for a better web.
A PRACTICAL STARTING POINT

For your setup.

Choose your platform. A report may suggest one from source or delivery hints; confirm it matches the website you control.

This topic needs page-specific changes. Follow the general steps below; no platform snippet is assumed.

Why this matters

People may navigate by headings, use screen readers, or need text equivalents for visual information. Automated checks can find missing attributes, but they cannot decide whether a description is meaningful in context or establish conformance.

STEP 01

Choose alt text by image purpose

Informative images need a concise description of the information they add. Functional images should name the action or destination. Decorative or redundant images generally use an empty `alt` value so assistive technology can skip them; do not put filename, “image of,” or a keyword list there.

html
<img src="/team/lee.jpg" alt="Lee Chen, pastry chef">
<img src="/decoration.svg" alt="">
STEP 02

Describe complex information nearby

For charts, diagrams, or dense visualizations, provide a short alternative and include the important data or explanation in text on the page. Do not rely on a long alt attribute to carry a whole report.

STEP 03

Use headings and links that explain structure

Organize content with headings that describe the section hierarchy. Give links descriptive text that makes sense in context, and ensure buttons state the action they perform.

STEP 04

Label form controls and review by hand

Associate each field with a visible label or suitable accessible name. Test keyboard order and a screen reader; automated scans cannot judge all content and interaction quality.

For your setup

WordPress

Use the media library’s alt field for informative images, but choose the wording for the image’s role on that page. A site-wide image description may be wrong when context changes.

Next.js

The Image component requires alternative text in its API, but the value still needs human judgment. Use an empty `alt` value for decorative imagery and meaningful text for informative or functional images.

Check your work

  • Review every image in its surrounding page context.
  • Confirm decorative images are skipped and informative images convey relevant content.
  • Navigate headings, links, and forms using only the keyboard.
  • Use assistive technology and manual review; do not treat a clean automated scan as an accessibility certification.
Compare before and after ↗

Go to the source

A LITTLE MORE PROGRESS

One detail better.
What’s next?

Explore all tools