elementor / elementor/elementor
⌛ A11y Error: Link directly references an image
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
### Prerequisites
- [x] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
- [x] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.
### Description
When using the **Basic Gallery** widget, setting the **Link** option to **Media File** causes the anchor tag to link directly to the image file. While this is expected behavior, it creates an accessibility issue, as flagged by Level Access (details below).
To address this, we attempted to use the **Attachment Page** option instead. However, selecting **Attachment Page** causes the **Lightbox** feature to disappear.
Currently, the only way to enable the Lightbox functionality is by using the **Media File** option, which is not accessible. Ideally, users should be able to use the **Attachment Page** while still having the **Lightbox** functionality available.
### Level Access Error Details
> ### Link directly references an image
> WCAG 2.2 Level A - 1.1.1 Non-text Content
> ## Description
> One or more A elements, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, has an href attribute set to an image file reference.
> ## Why it matters
> When images lack accurate text alternatives, content conveyed visually will not be accurately communicated to users (such as screen reader users) who cannot perceive the image.
> ## Solution (What to do)
> Avoid providing a direct link to an image. Instead, ensure images are always contained within other appropriate pages. In situations where a direct link to an image is needed, an alternative equivalent to the image may be provided on the page that contains the image link or alternative equivalent may be part of the link text.
### Steps to reproduce
1) Install the [Level Access Chrome Extension](https://chromewebstore.google.com/detail/level-access-extension/kgbmnemfaellbfabmkmmilchbhiigpdi)
2) In the Elementor Editor, add a **Basic Gallery" widget.
3) Add some images to the gallery.
4) Set the **Link** option to **Media File**.
5) Set the **Lightbox** option to **Yes**.
6) Save your page and view it.
7) Click in the Level Access icon on your browser, and run a Quick Scan.
8) The error will appear in the results.
### Expected behavior
The **Lightbox** feature should remain available when selecting **Attachment Page** as the **Link** type.
### Isolating the problem
- [x] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
- [x] This bug happens with the Hello Elementor theme active.
- [x] I can reproduce this bug consistently by following the steps I described above.
### Elementor System Info
Click to reveal
````txt
== Server Environment ==
Operating System: Linux
Software: nginx
MySQL version: MariaDB Server v10.11.10-MariaDB-log
PHP Version: 8.2.27
PHP Memory Limit: 512M
PHP Max Input Vars: 6144
PHP Max Post Size: 2047M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 6.7.1
Site URL:
Home URL:
WP Multisite: No
Max Upload Size: 2 GB
Memory limit: 512M
Max Memory limit: 512M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en_US
Timezone: 0
Debug Mode: Active
== Theme ==
Name: Hello Elementor
Version: 3.3.0
Author: Elementor Team
Child Theme: No
== User ==
Role: administrator
WP Profile lang: en-US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0
== Active Plugins ==
Elementor
Version: 3.27.3
Author: Elementor.com
Elementor Pro
Version: 3.27.2
Author: Elementor.com
== Must-Use Plugins ==
== Features ==
Custom Fonts: 0
Custom Icons: 0
== Integrations ==
== Elementor Experiments ==
Inline Font Icons: Active by default
Additional Custom Breakpoints: Active by default
Container: Active by default
Upgrade Swiper Library: Active by default
Optimized Markup: Inactive by default
Plugin Onboarding: Active by default
Load Google Fonts locally: Inactive by default
Default to New Theme Builder: Active by default
Header & Footer: Active by default
Elementor Home Screen: Active by default
Landing Pages: Inactive by default
Nested Elements: Active by default
Editor Top Bar: Active by default
Pages Panel: Inactive by default
Element Caching: Active by default
Link In Bio: Active by default
Floating Buttons: Active by default
Elementor Editor Events: Inactive by default
Atomic Widgets: Inactive by default
Global Classes: Inactive by default
Launchpad Checklist: Active by default
Menu: Inactive by default
== Log ==
Log: showing 20 of 252025-01-23 20:03:34 [info] elementor-pro::elementor_pro_updater Started
2025-01-23 20:03:34 [info] Elementor Pro/Upgrades - _on_each_version Start
2025-01-23 20:03:34 [info] Elementor Pro/Upgrades - _on_each_version Finished
2025-01-23 20:03:34 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.26.3',
'to' => '3.27.0',
)]
2025-01-23 20:03:34 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.26.3',
'to' => '3.27.0',
)]
2025-02-02 13:52:36 [info] elementor::elementor_updater Started
2025-02-02 13:52:36 [info] Elementor/Upgrades - _on_each_version Start
2025-02-02 13:52:36 [info] Elementor/Upgrades - _on_each_version Finished
2025-02-02 13:52:36 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.27.1',
'to' => '3.27.2',
)]
2025-02-02 13:52:36 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.27.1',
'to' => '3.27.2',
)]
2025-02-03 16:24:24 [info] elementor::elementor_updater Started
2025-02-03 16:24:24 [info] Elementor/Upgrades - _on_each_version Start
2025-02-03 16:24:24 [info] Elementor/Upgrades - _on_each_version Finished
2025-02-03 16:24:24 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.27.2',
'to' => '3.27.3',
)]
2025-02-03 16:24:24 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.27.2',
'to' => '3.27.3',
)]
2025-02-03 16:24:35 [info] elementor-pro::elementor_pro_updater Started
2025-02-03 16:24:35 [info] Elementor Pro/Upgrades - _on_each_version Start
2025-02-03 16:24:35 [info] Elementor Pro/Upgrades - _on_each_version Finished
2025-02-03 16:24:35 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.27.0',
'to' => '3.27.2',
)]
2025-02-03 16:24:35 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.27.0',
'to' => '3.27.2',
)]
PHP: showing 1 of 1PHP: 2025-01-29 01:18:41 [warning X 2][../elementor/modules/history/revisions-manager.php::363] Undefined array key "editor_post_id" [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
JS: showing 1 of 1JS: 2025-02-03 15:56:29 [error X 1][../elementor/assets/js/editor.min.js?ver=3.27.2:3:801844] can't access property "toLowerCase", T.originalEvent.key is undefined
== Elementor - Compatibility Tag ==
Elementor Pro: Compatible
== Elementor Pro - Compatibility Tag ==
````
### Agreement
- [x] I agree that my issue may be closed without action if it doesn't meet all the requirements.
Contributor guide
Assessment
This issue has not been assessed yet.