6

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>

enter image description here

  • Are the links essential? Can they be removed for all users, with GDPR-compliant links to similar information used instead? That way there's no need to mark links where EU visitors will be blocked. – Karl Brown Feb 28 at 8:06
  • @KarlBrown yes most of the links are details information on front or the official sites. The links give my visitors more information in detail. I want to keep this links. – Lovntola Feb 28 at 8:17
  • You can identify a lot of the mobile devices by the user agent, you can create a php function that shows different information to the mobile users if they have a specific user agent. You can find more information on: en.wikipedia.org/wiki/User_agent – Kevin M. Feb 28 at 20:26
  • @KevinM. it is not the problem to detect the mobil device. My question is how to show the info to a mobil device. The title attribute shows by mouse over the Info. But on a mobil device there is no mouse over. – Lovntola Feb 28 at 20:32
  • "outside" is misspelled in your code. – Jasper Mar 12 at 3:49
9

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.

  • 1
    Many of my visitors are Germans on vacation still in the US. There have access. So I don't want remove the link to 'not accessible'. – Lovntola Feb 28 at 18:35
  • Great response, my first reaction on the post was 'why would you block it' making a static HTML page will cost maybe 1 hour of dev time. Secondly, to my understanding most general users do not even know what GDPR does, they just think your website does not work. – Kevin M. Feb 28 at 20:21
  • 3
    I read the question as posed asking "I'm running a site in the EU, which has visitors from both the EU and the US, which has links to useful US-based sites. Some of those [external] sites now block EU visitors and I want to flag those links to my site's users that they may not be able to open the page from within the EU". I don't understand how this answer of "reimplement all the linked websites" actually solves the posted question. – dosxuk Mar 1 at 9:50
  • If you interpret it that way - you're right. My interpretation was on the "I am running a site in the US" side. – ralien Mar 1 at 13:32
  • 1
    I run the site in Germany, but many of them use the site during there vacation in the USA. And inside the USA the link works fine. That is why I don't want remove the links. – Lovntola Mar 2 at 16:00
1

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.

  • What you mean with roll down? – Lovntola Feb 28 at 9:05
  • Sorry I meant slide down. The "accept cookies" slide down that is on literally every EU site. – Anders Feb 28 at 9:27
1

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>
  1. 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}]
    

With abbr Touch in Mobil

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.