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.

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

[Link] Warn the user if a link opens in new window #2898

Open
renow-luxembourg opened this issue Nov 26, 2024 · 0 comments
Open

[Link] Warn the user if a link opens in new window #2898

renow-luxembourg opened this issue Nov 26, 2024 · 0 comments

Comments

@renow-luxembourg
Copy link
Contributor

Feature Request

Is your feature request related to a problem? Please describe.
All links must operate in predictable ways (WCAG 3.2) - Open new browser tabs or windows are considered context changes, and should not occurs without telling the user (WCAG 3.2.5)
Currently, users don’t have a visual warning on external links telling they will open a new tab/window

Describe the solution you'd like
Add a visual warning on all external links with target="_blank".

The solution I recommend is to add the suffix "- new window" to the end of each title attribute

In the code, edit "PN_LINK_TITLE_ATTRIBUTE" around line 130 of aem-core-wcm-components/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/link/LinkBuilderImpl.java

Example 1
<a href="target_page_url" target="_blank" title="My label - new window">My label</a>

Are there alternatives?
I have also considered 2 others alternatives :
First one is to add an icon with an hidden text with .sr-only class (to hide an element except for screen readers) to every link with target="_blank".

Example 2
<a href="target_page_url" target="_blank">My label<img src="external_link.svg" alt=""> <span class=”sr_only”>opens in new window</span></a>

Second alternative is to automatically add an icon with an alternative text to every link with target="_blank".

Example 3
<a href="target_page_url" target="_blank">My label<img src="external_link.svg" alt="opens in new window"></a>

Documentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant