Mark Link which blocks accesses from the EU because of the GDPR
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
orabbr
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>