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.
For your setup.
Choose your platform. A report may suggest one from source or delivery hints; confirm it matches the website you control.
The general steps below work across platforms. Choose a setup above for supported code examples.
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.
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.
<img src="/team/lee.jpg" alt="Lee Chen, pastry chef">
<img src="/decoration.svg" alt="">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.
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.
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.