Why Images Linked to Themselves Hurt WordPress Accessibility
When you insert an image into a WordPress post or page, a default behavior often flies under the radar: WordPress can automatically link that image directly to its own media file URL.
While this might seem harmless—or even useful if someone wants to see a slightly larger version of the file—it introduces a significant web accessibility barrier for disabled users. Forcing a user to click or navigate into an isolated attachment page or a raw
.jpg file breaks user experience and violates core tenets of the Web Content Accessibility Guidelines (WCAG).Here is a breakdown of exactly why images linked to themselves are an accessibility concern and how you can fix it on your WordPress site.
Confusing “Ghost Links” for Screen Readers
When an image is wrapped in a link, a screen reader changes how it announces that element to a visually impaired user. Instead of just describing the image using its descriptive alt text, the software announces that the item is a clickable link.
-
- The Problem: If an image of a coffee mug links to itself, the screen reader might say, “Link, graphic: A woman holding a coffee mug.”
- The Confusion: The user expects a link to take them somewhere meaningful—like a product page, a contact form, or another article. When they click it and nothing changes except the URL bar switching to a raw media file string (
.../wp-content/uploads/coffee-mug.jpg), they are left disoriented, wondering what information they missed out on.
Keyboard Navigation Traps
Many users with motor disabilities navigate websites entirely without a mouse, relying on the
Tab key to jump between clickable elements like text links and buttons.Every single image linked to itself adds another unnecessary stop to their keyboard journey. If an article has 10 images, a keyboard user has to press the
Tab key 10 extra times just to bypass elements that provide absolutely zero functional utility. Worse, if a user accidentally triggers the link, they are taken away from the article text and forced to use browser navigation histories to get back to where they were reading.Disruption of Assistive Tech Functions (Lightbox vs. Raw File)
Some themes use “linked images” to trigger an accessible pop-up window (lightbox). However, if your website lacks a dedicated lightbox script, clicking that image will completely yank the user off your website and open the asset directly in the browser window.
For users navigating via zoom text tools or switch controls, finding their way back from a completely plain browser page displaying a single isolated asset can be frustrating and complex.
Direct Comparison: Bad Practice vs. Best Practice
To illustrate how these links alter the workflow of assistive software, let’s look at how the HTML code changes:
| Setup Type | Code Example | Assistive Tech Experience |
|---|---|---|
| Inaccessible (Linked to Self) | <a href="image.jpg"><img src="image.jpg" alt="A golden retriever puppy"></a> |
Poor: Announces a link destination, but takes the user to an unnavigable raw file. Adds extra keyboard tabs. |
| Accessible (Unlinked Image) | <img src="image.jpg" alt="A golden retriever puppy"> |
Excellent: Screen reader smoothly reads the alt text in context with the paragraph and passes by. |
How to Fix It Manually in WordPress
Fixing this issue takes only a few seconds when building a page or post. You can easily break the redundant loop by changing your block properties:
-
- Open your page or post in the WordPress Editor.
- Click on the offending image block.
- In the floating toolbar that appears directly above the image, click the Link icon.
- If a URL string or “Media File” is highlighted, clear the link completely or ensure the link settings are turned off.
Automate Your Accessibility Fixes
Manually tracking down every hidden code violation across hundreds of pages can be exhausting. If your website runs on WordPress, opens in a new windowWP ADA Compliance Check can scan your full site architecture and can remove images that link to themselves automatically—saving you hours of manual development time while keeping your site compliant.
Conclusion
Ensuring images are purely informative or decorative elements rather than navigational shortcuts safeguards your site against costly lawsuits and ensures a seamless experience for all visitors. Checking your legacy theme options or utilizing automated linting workflows ensures your media library stays accessible without breaking your production flow.
Subscribe
Subscribe to receive daily Web Accessibility - Did you know? articles in your inbox.
