Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✅ 🔗 ♿ 🐞 SVG element missing accessible name (Duplicate of #29340) #30132

Closed
5 of 6 tasks
aebs90 opened this issue Feb 3, 2025 · 2 comments
Closed
5 of 6 tasks

✅ 🔗 ♿ 🐞 SVG element missing accessible name (Duplicate of #29340) #30132

aebs90 opened this issue Feb 3, 2025 · 2 comments
Labels
component/code Indicates when a topic is related to a component’s code. duplicate Indicates when an Issue or a Discussion is a duplicate of another Issue or Discussion. mod/d* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/accessibility Indicates when a topic is related to Accessibility. widget/icon References the Icon widget.

Comments

@aebs90
Copy link

aebs90 commented Feb 3, 2025 •
edited by nicholaszein
Loading

Prerequisites

  • I have searched for similar issues in open and closed tickets and cannot find a duplicate.
  • I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

When using an SVG without a link in the Icon List widget, the Level Access extension finds the error below.

SVG element missing accessible name

WCAG 2.2 Level A - 1.1.1 Non-text Content

Description

One or more svg elements, excluding children of button elements and children of anchor elements, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, does not have a mechanism that allows an accessible name value to be calculated.

Why it matters

Without properly implemented alternative text, any meaningful information provided visually will not be conveyed to screen reader users. Decorative SVGs not marked as such may be mistaken for non-text content missing an equivalent.

Solution

Provide alternative text for all informative images. If an svg element provides additional meaningful information that the surrounding text does not already convey, you can provide an equivalent alternative using aria-label. Alternatively, if the SVG contains a title element, you can use aria-labelledby to reference the ID of the title. If the SVG has both a title and a description, then aria-labelledby should reference the id of the title and aria-describedby should reference the ID of the description. The alt attribute is not a valid attribute for the svg element. When non-interactive SVGs are descendants of links or buttons and do not have a role set they are implicitly decorative and do not need to be explicitly marked as such. If the image is decorative, use aria-hidden="true" instead to mark it as hidden. In all cases, if the SVG is a link then focusable can be set to true, if it is not part of a link. Focusable needs be set to false to support legacy browsers, such as IE 11.

We've created a script to fix this issue on the front end, but a server-side fix would be preferable.

/**
 * Icon List Widgets: Fix Level Access Error – "SVG element missing accessible name"
 *
 * Version: 1.0
 */
( function( $ ) {
	$( window ).on( 'elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction( 'frontend/element_ready/icon-list.default', function( $scope ) {
			$scope.find( 'svg' ).not( 'a svg' ).attr( 'aria-hidden', 'true' );
		} );
	} );
} )( jQuery );

Steps to reproduce

  1. Install the Level Access Chrome Extension
  2. In the Elementor Editor, add an Icon List widget.
  3. Click in the widget to edit it, then go to Content → Icon List → Items → Open the first item → Icon → Upload SVG.
  4. Upload and SVG and click on Insert Media
  5. Confirm that the Link field is empty.
  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 <svg> that is printed should include an aria-hidden="true" if there's no link.

Isolating the problem

  • This bug happens when only the Elementor (and Elementor Pro) plugins are active.
  • This bug happens with the Hello Elementor theme active.
  • I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal 
== 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

  • I agree that my issue may be closed without action if it doesn't meet all the requirements.
@aebs90 aebs90 added the status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. label Feb 3, 2025
@nicholaszein nicholaszein changed the title A11y Error: SVG element missing accessible name 🔗 ♿ 🐞 A11y Error: SVG element missing accessible name (Duplicate of #29340) Feb 3, 2025
@nicholaszein nicholaszein added type/accessibility Indicates when a topic is related to Accessibility. component/code Indicates when a topic is related to a component’s code. mod* [Temp.] For internal use only. duplicate Indicates when an Issue or a Discussion is a duplicate of another Issue or Discussion. widget/icon References the Icon widget. mod/d* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. and removed status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. labels Feb 3, 2025
@nicholaszein
Copy link
Member

Hello @aebs90!

Thank you for your submission! 🙏

🔗 🐞 This issue is a Duplicate of #29340

Which is on the same subject.

For this reason, I'm closing this thread and 🔃 Merging it with the original, so we can have all the discussions in one location, and deal with it more efficiently.

Feel free to continue the conversation there. 😉

🔍 Please, in the future, remember to check if there isn't any thread similar to yours already opened.

Kind regards

@nicholaszein nicholaszein closed this as not planned Won't fix, can't repro, duplicate, stale Feb 3, 2025
@elementor elementor locked and limited conversation to collaborators Feb 3, 2025
@nicholaszein nicholaszein changed the title 🔗 ♿ 🐞 A11y Error: SVG element missing accessible name (Duplicate of #29340) 🔗 ♿ 🐞 SVG element missing accessible name (Duplicate of #29340) Feb 4, 2025
@rami-elementor rami-elementor added this to the 3.29.0 milestone Mar 13, 2025
@rami-elementor rami-elementor removed this from the 3.29.0 milestone Mar 26, 2025
@rami-elementor
Copy link
Member

Fixed in Elementor 3.28.2

@nicholaszein nicholaszein changed the title 🔗 ♿ 🐞 SVG element missing accessible name (Duplicate of #29340) ✅ 🔗 ♿ 🐞 SVG element missing accessible name (Duplicate of #29340) Apr 1, 2025
@nicholaszein nicholaszein added status/merged Indicates when a Pull Request has been merged to a Release. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. labels Apr 1, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component/code Indicates when a topic is related to a component’s code. duplicate Indicates when an Issue or a Discussion is a duplicate of another Issue or Discussion. mod/d* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/accessibility Indicates when a topic is related to Accessibility. widget/icon References the Icon widget.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@aebs90 @rami-elementor @nicholaszein