search

FreeUKGen / FreeUKGenealogyWP

For FUG WordPress migration work.
Apache License 2.0
0 stars 1 forks source link

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

Open DeniseColbert opened 3 years ago

hotbeverage2017 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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!