Mark Link which blocks accesses from the EU because of the GDPR

Question

I run a site for visitors from Germany who would like to visit the USA. Because of the GDPR more and more websites in the US block access from the EU like the LA Times, IHOP or Carrabbas. The access within the US, so if visitors are on site is of course possible, so the link should remain.
Blocked pages do not always give clear hints why an access is blocked, eg. only a 403 or 451 error page without any info why.
How can I best mark such a link?

On the desktop version, I linethrough the link blue and use the title attribute so that the mouse over an info text is displayed. (I know the title attribute should be used differently, it will soon be replaced by CSS Over). However, this is not possible on a mobile phone.

Since many pages are static, I do not want a solution based on the visitors IP works.
Also, it does not make sense for me to work with a symbol and a symbol explanation in the footer, because on a mobile device no one scroll down to read the explanation.

Do you have any idea how to label a link that says, "Hey, I'm locked in the EU and can only be access in the US?" on a mobil device.

EDIT: More Info

• The two examples above were from a list of well-known fastfood restarants, It also affects GOV Florida Offender Alert System Cities Foster City Sports Peninsula Soccer , Toll Systems Sun Pass and some newspapers (I see LA Times going again). Over 200 links affectet on my site.
• Since these are official sites or lists I would not like to link to similar pages. It would be nasty to link to Real insteed to Atletice Madrid ;-)
• Removing is also not an option because ~ 30% of the hits from Germans are currently in the US and they can indeed access for more local infos.
• Some pages just time out without information, so I want to mark the link in advance. I have no influence on the landing page.
• Interestingly, what if I knowingly link to an illegal GDRP page ... but that's not the topic here.
• My main problem is how to mark such link that can identified on a mobil device without hover like title or abbr tag
• btw: I haved change some site to thier offical Facebook or WiKi site. But I see this only as a work-around, or?

EDIT2: My current solution now is:

a.ext1{color:#1B5E20;letter-spacing:1.5px;background-position: center right; background-repeat: no-repeat;background-image: url(/images/noindex/ext1.png);padding-right: 14px;}  
a.extus:after{content:' \1F512 EU';font-size: 12px;color: blue;}

<a class="ext1 extus" title="No Access outside the US">Link</a>

Answer 1

Disclaimer: I am a usable privacy researcher employed by a German Data Protection Authority (DPA).

This might be an unpopular opinion, but how about an alternative version of the site that provides basic information and doesn't do any of the tracking that would raise the eyebrows of DPAs?

Thinking about Ihop's delicious pancakes, I clicked your link and got an access denied error. This is a rather drastic measure, while a better solution might be:

• a static HTML page
• with contact information, e.g. a phone-number I could dial, or an email address I could write to
• a price-list with the most common menu-items, accompanied by photos

You can even add a search-field that will find restaurants in the area of their choice, by leveraging external resources (after you make sure those resources are OK in terms of GDPR compliance), e.g. https://www.openstreetmap.org/search?query=houston ihop would give you a list of addresses and their locations.

This is useful information for site visitors and potential customers, it is decoupled from the main site, is easily implemented, and can be done in a way that does not mess with the GDPR. The complexity of making it possible is something that a low-skilled intern could handle, it is not an expensive endeavour.

As for your actual question, I can say a few things about how not to do it. The cited examples, Ihop and Carrabba's show an error page with a code and an explanation about lack of availability for a given region. The good part is that there is a human-readable explanation of what happened (not just an error code), but the bad part is that no solution, nor a second best alternative is provided.

Here are better ways to deal with it:

• Offer an alternative way to get things done, as I described above. Keep your mind open for non-webpage alternatives (e.g., a chat-bot that can be used to order items, a phone number with a voice menu, a view of the same page via web.archive.org or the cache of a search engine, etc).
• Provide better wording in the error message. For instance, Ihop says that my region is banned. Why? Were there attacks coming from these IPs? Are we banned for ideological reasons? Was this address involved in illegal activities? My prediction is that a substantial number of users will think it is an error with their Internet connection, browser, or device, and simply try again a few times.
• Avoid technical jargon, for example, Ihop shows some unique identifiers, an error code, an IP address, a timestamp. In what way will they assist a hungry human?

I would refrain from marking the links themselves as "not accessible", because:

• You'll have to invent some new notation (colour, icon, etc.) that people are not familiar with, so they will click the links anyway.
• This new notation might clutter the page with icons, or otherwise deviate from the colour-scheme.
• It might inconvenience the other users, who will be exposed to the icons anyway (unless you make the site sophisticated enough to figure it out in advance).

Even if you do mark the links somehow, you still need a helpful "error page", in case the users clicked anyway. Thus, having such a page is a low-friction solution.

Answer 2

You could make a slide down like the Accept Cookies there is on almost every site, but it should say something like "Some links on this site are blocked due to regional regulation".

And it could also slide down again if the visitor tried clicking a blocked link. But you need to make the links, and the strikethrough as you mentioned would be a good solution.

Answer 3

Here is my solution:
1. I added the Info after the link with abbr so it can be touch/over:

<a class="ext1 extus" href="https://www.dunkindonuts.com/" target="_blank"
rel="noopener noreferrer">Dunkin' Donuts</a> <abbr class="extus"
title="Zugriff nur in den USA">🔒 USA</abbr>

2. In geneal touch are not working on mobil device. So I modified the css that touch on mobil are works:

   [abbr.extus{font-size: 12px;color: blue;}  
   abbr\[title\] {position: relative;text-decoration: underline dotted;}  
   abbr\[title\]:hover::after {content: attr(title);position: absolute;
   left: 0;bottom: -30px;width: 80px;background-color: 
   #757575;color:#fff;border-radius: 2px;font-size: 14px;padding: 3px 5px}]