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

External links opening in new tab - use an icon? #159

Open
DeniseColbert opened this issue Feb 3, 2021 · 7 comments
Open

External links opening in new tab - use an icon? #159

DeniseColbert opened this issue Feb 3, 2021 · 7 comments

Comments

@DeniseColbert
Copy link

No description provided.

@hotbeverage2017
Copy link
Collaborator

Sometimes you have options on whether you open external links to use a new tab or not. Let me know which links you mean, whether you prefer a new tab or not, whether you have an icon, and I can see if there are options on how to open these.

@DeniseColbert
Copy link
Author

DeniseColbert commented Feb 9, 2021

For example, in the Donation2 tool that Taz is developing, KindLink and PayPal both open in a new tab. For accessibility, we should be telling users this will happen. Is an icon enough, as discussed here: https://ux.stackexchange.com/questions/55419/how-to-indicate-this-button-link-opens-a-new-tab#55424? For screen readers? @AlOneill can we do this with alt text? ETA: also title="open in new tab"?

@AlOneill
Copy link

AlOneill commented Feb 9, 2021

Providing an adequate warning to all users that a link will open in a new tab is a must for accessibility. If that warning is an icon, providing alt text for the icon would help a screen-reader user, but it would not help a user who has cognitive difficulties or a sighted, keyboard-only user. The particular icon suggested on the StackExchange thread is used by Wikipedia (for example) to indicate an external link — and that link does not open in a new tab. So we cannot assume that the icon will be understood unambiguously.

Repeating the alt text in a title attribute would irritate a screen-reader user because they would hear the same thing twice. It would not be seen by a mobile user or a sighted, keyboard-only user as neither can hover.

I do not know KindLink, but the site that I use most often, where PayPal is the payment method, manges the complete transaction in a single tab. Once the payment is set up, a user completes (or cancels) the transaction on the original site.

@akhilpokle
Copy link
Collaborator

akhilpokle commented Feb 10, 2021

Based on this article : https://www.nngroup.com/articles/new-browser-windows-and-tabs/ we should add icon and text.

I think below the payal and kindlink "links tabs", we could add a note, so something like :

[paypal button]

[icon] this link will open in new tab.

I will send a design around this.

image from the article
image

@AlOneill
Copy link

@akhilp96 That's a good article. Thank you. A combination of icon and text, as you suggest, should work. My main concern would be that for a screen-reader user, will the button and the warning be kept together in a list of links, away from the context of the whole page? (I'm struggling to express that well. Apologies.)

@akhilpokle
Copy link
Collaborator

Based on this article : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

if we use aria-hidden="true" will remove the entire element from the accessibility API.

I think adding that to the link will do the trick.

@AlOneill
Copy link

@akhilp96 I do not understand which "entire element" you plan to hide from screen-reader users.

I did not express myself clearly in my last message — I'll try again. A screen-reader user can call upon a list of links that have been extracted from the page. There will be no context to the links in that list. However, the user will still need to be warned if one of those links will open in a new tab.

Anyway, this discussion will be easier once we have something to test — so I'll be quiet until then!

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

4 participants