An image is not accessible because it is PNG, WebP, JPEG, AVIF, or SVG. Accessibility comes from the image’s purpose, its HTML semantics, the information available in text, sufficient visual contrast, and controls for motion. The same file can be informative in one context, decorative in another, and functional when used as a link or button.
This guide follows WCAG 2.2 and the W3C Web Accessibility Initiative (WAI) image tutorials. It is an implementation guide, not a legal opinion or a claim that one article guarantees compliance with the ADA or any other law.
Download the contrast calculations (CSV) to verify the published color pairs and WCAG pass states. These deterministic calculations do not replace contextual or assistive-technology testing.
Start with purpose, not a character count
WCAG 2.2 Success Criterion 1.1.1 requires a text alternative that serves the equivalent purpose of non-text content, with specific exceptions. It does not impose a universal 125-character limit. Concision is useful, but correctness and context come first. A simple photograph may need a short phrase; a chart normally needs a brief alt plus its important data or conclusion in nearby text or a table.
The W3C’s alt decision tree gives a practical sequence:
- Does the image perform an action or identify a link destination? Describe the action or destination, not the icon’s shape.
- Does it add information? Describe the meaning it contributes in this context.
- Is it complex? Identify it briefly, then provide the data or fuller explanation in the page.
- Is the same information already present nearby? Use an empty alternative where announcing it again would be redundant.
- Is it purely decorative? Use
alt=""so assistive technology can ignore it.
Every HTML <img> should have an alt attribute, even when its value is empty. Missing alt and empty alt="" do not communicate the same editorial decision.
A deterministic alt-text example matrix
The correct text depends on why the image appears. The following examples hold the image content constant while changing the context, making the decision reproducible without pretending to have run a screen-reader usability study.
| Image and context | Recommended markup | Reason |
|---|---|---|
| A WebP-to-PNG workflow diagram introduces four steps that are not written elsewhere. | alt="WebP conversion workflow: select, decode, encode, download" | The image conveys the sequence. |
| The same diagram appears immediately after an identical numbered list. | alt="" | Announcing the same four steps again adds noise. |
| A download icon is the only content inside a button. | <button><img alt="Download PNG" ...></button> | The accessible name describes the action, not “down arrow.” A real text label on the button is usually simpler. |
| A thumbnail links to the converter homepage. | alt="Open the WebP to PNG converter" | The alternative communicates the link destination or purpose. |
| A decorative transparent checker pattern sits behind a product screenshot. | alt="" | The pattern is presentation, not content. |
| A chart compares file sizes for five test images. | alt="Bar chart comparing PNG and WebP sizes for five test images", followed by the data table | The short alternative identifies the chart; the table provides the values and relationships. |
Write alt text as an equivalent, not a visual inventory
Ask: “If the image disappeared, what information or function would be missing?” Include that answer. Do not automatically list every color, object, and background detail. Include a visual detail only when it changes the page’s meaning—for example, the selected state of a control, visible damage in a product photo, or a trend in a chart.
- Avoid filenames and keyword strings.
webp-to-png-converter-best-free-tool.pngis not an equivalent description. - Avoid redundant prefixes. Browsers and assistive technology already expose the element as an image; “image of” is rarely useful.
- Transcribe essential text. If words appear only in the image and matter, include them in the alternative or as real text nearby.
- Describe function for controls. Use “Remove selected file,” not “red X.”
- Keep captions and alt text distinct. A visible caption can provide attribution or context; the alternative provides an equivalent for the image’s non-text content.
Automated tools can detect a missing attribute, but they cannot reliably decide whether an alternative is appropriate. WAI’s Easy Checks explicitly requires human judgment in context. Treat generated alt text as a draft to review, not as a completed accessibility test.
Complex images need the information in text
A chart, process map, technical diagram, or infographic often contains too much information for a useful one-sentence alternative. Use a short alt to identify the graphic and communicate its main purpose, then put the underlying values, relationships, or explanation in adjacent text. A table is especially useful when readers need exact values.
<figure>
<img src="format-size-chart.png"
alt="Bar chart comparing output sizes; PNG is largest in all five samples">
<figcaption>Output size from the documented five-image test set.</figcaption>
</figure>
<table>
<caption>Exact output size by test image and format</caption>
...
</table>Do not hide the only complete explanation in a tooltip, image metadata, or a downloadable file. It should be available in the page’s reading order. If the chart is updated, update the visible table and description in the same editorial change.
SVG accessibility: choose semantics for how it is embedded
SVG is a format; it does not automatically supply an accessible name. When an SVG file is used through an HTML <img>, provide the same contextual alt decision you would for a PNG or WebP:
<img src="conversion-flow.svg"
alt="Conversion flow from a selected WebP file to a downloaded PNG">For an inline informative SVG, give the graphic an accessible name and keep any detailed explanation in visible text. A common pattern is:
<svg role="img" aria-labelledby="flow-title flow-desc" ...>
<title id="flow-title">WebP to PNG conversion flow</title>
<desc id="flow-desc">Four steps: select, decode, encode, and download.</desc>
...
</svg>For a decorative inline SVG, remove it from the accessibility tree with aria-hidden="true". If an icon is inside a labeled button, hide the icon and let the button’s visible text provide the name. Do not put focus on non-interactive SVG artwork. Because SVG and ARIA behavior can vary by embedding method and user-agent combination, validate important components in the actual supported browser and assistive-technology matrix.
Contrast over images: test the pixels behind the text
WCAG 2.2 Success Criterion 1.4.3 requires at least 4.5:1 contrast for normal text and 3:1 for large-scale text, subject to listed exceptions. A photograph has many colors, so a single average background color is not a reliable test. Check the least-contrasting area immediately behind the strokes of the text across responsive crops and content variations.
A solid panel behind the text is easier to verify than a text shadow. A semi-transparent scrim can work, but its final color depends on the underlying pixel. If editors can replace the photograph, retest the result or use a sufficiently opaque text panel whose final background is controlled.
Original deterministic contrast calculations
The following ratios were calculated from the WCAG relative-luminance formula using exact sRGB hex values. They are reproducible color-pair checks, not measurements from an unspecified photograph.
| Foreground | Background | Calculated ratio | WCAG 2.2 AA interpretation |
|---|---|---|---|
#FFFFFF | #005FCC | 5.98:1 | Passes normal and large text |
#FFFFFF | #767676 | 4.54:1 | Passes normal and large text |
#FFFFFF | #777777 | 4.48:1 | Fails normal text; passes large text |
#000000 | #767676 | 4.62:1 | Passes normal and large text |
#FFFFFF | #1F2937 | 14.68:1 | Passes normal and large text |
#111827 | #F9FAFB | 16.98:1 | Passes normal and large text |
For controls, focus indicators, and parts of graphics required to understand content, Success Criterion 1.4.11 sets a 3:1 non-text contrast requirement against adjacent colors, with defined exceptions. This is separate from text contrast. Also do not use color alone to communicate an error, selection, or chart category; provide text, pattern, shape, or another cue.
Motion, animated images, and flashing
GIF, animated WebP, and APNG can all create accessibility issues when movement starts automatically. Under WCAG 2.2 Success Criterion 2.2.2, moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and appears alongside other content needs a way to pause, stop, or hide it unless the movement is essential. A format conversion does not add those controls automatically.
Flashing is a distinct concern. Success Criterion 2.3.1 prohibits content that flashes more than three times in a one-second period unless it remains below the specified general and red-flash thresholds. “Three flashes” is not a blanket guarantee of safety; the threshold conditions still matter. If animation is triggered by interaction, WCAG 2.2 also includes a Level AAA criterion for allowing non-essential motion animation to be disabled.
- Prefer a static preview and explicit Play control for non-essential animation.
- Provide Pause or Stop without forcing the user to move focus away from the content.
- Respect
prefers-reduced-motionfor CSS or script-driven motion, while remembering that a standalone animated image may need a different implementation to stop it. - Explain the animation’s important information in text;
altshould convey purpose, not attempt a frame-by-frame transcript. - Test flashing content with a suitable analysis process; visual guessing is not enough for borderline material.
Choose image formats for content needs, then add semantics
| Format | Useful for | Accessibility decision |
|---|---|---|
| JPEG | Photographs where lossy compression is acceptable | Check that compression does not obscure essential detail; provide contextual HTML alt text. |
| PNG | Lossless graphics, screenshots, transparency, and pixel-exact examples | Use HTML semantics; do not bake important instructions into the pixels alone. |
| WebP / AVIF | Modern compressed raster images, with capabilities depending on format and encoder | The file extension does not change the need for alt text, contrast, or motion controls. |
| SVG | Icons, logos, and diagrams that benefit from scaling | Name informative SVGs appropriately; hide decorative icons; provide complex information in visible text. |
| Animated GIF / WebP / APNG | Short motion sequences | Evaluate pause/stop/hide, flashing, reduced motion, and a text equivalent. |
If you convert a WebP to PNG for compatibility or editing, the conversion can preserve visible pixels and transparency, but it cannot create an alt attribute. Alt text belongs to the HTML or content-management context where the PNG is published. Use our WebP to PNG converter for the file-format step, then complete the semantic and visual checks in the destination page.
A practical image-accessibility test matrix
This matrix separates deterministic checks from usability testing. It does not claim that an automated scan or one screen reader proves conformance.
| Check | Method | Acceptance condition | Test type |
|---|---|---|---|
| Alt presence | Inspect every rendered <img> | Each has a deliberate non-empty or empty alt | Automatable structure check |
| Alt appropriateness | Remove/hide the image and read the page in context | The same purpose or information remains available without redundancy | Human editorial review |
| Complex data | Compare chart with nearby text/table | Values, labels, units, and key relationship are available as text | Human data review |
| Text contrast | Measure actual foreground/background pairs at responsive states | At least 4.5:1 normal or 3:1 large text, unless an exception applies | Deterministic calculation plus visual-state review |
| Non-text contrast | Measure required control and graphic boundaries | At least 3:1 where SC 1.4.11 applies | Deterministic calculation |
| Keyboard operation | Use Tab, Shift+Tab, Enter, and Space without a mouse | Image links/buttons work, have visible focus, and preserve logical order | Manual interaction test |
| Zoom/reflow | Test browser zoom and narrow viewport | Meaning is not clipped, hidden, or dependent on a two-dimensional layout except where allowed | Manual responsive test |
| Motion | Observe duration, autoplay, controls, reduced-motion behavior, and flashing | Relevant WCAG 2.2 criteria are met | Manual plus specialist flash analysis where needed |
| Assistive technology | Use declared browser/screen-reader combinations with task scripts | Names, roles, order, and descriptions support the intended task | Separate first-party usability test—not performed by this article |
Final checklist
- Decide whether each image is informative, functional, complex, redundant, or decorative.
- Write for the image’s purpose; do not enforce a made-up universal character limit.
- Put complex information in visible text or a data table.
- Keep essential text as real text instead of pixels where the visual presentation is not essential.
- Measure actual contrast, including the weakest background area behind overlaid text.
- Give users control of non-essential motion and evaluate flashing separately.
- Test the final implementation, not only the source image file.
- Record the tested browser, viewport, tool, date, and result so future edits can be rechecked.
Official references
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 — normative success criteria.
- W3C WAI Alt Decision Tree — contextual decisions for informative, functional, complex, redundant, and decorative images.
- W3C WAI Complex Images Tutorial — providing short and long descriptions for charts and diagrams.
- W3C WAI Easy Checks — why alt appropriateness requires contextual human review.
- Understanding SC 1.4.3: Contrast (Minimum) and Understanding SC 1.4.11: Non-text Contrast.