<span>B</span><span>u</span><span>c</span><span>h</span><span>s</span><span>t</span><span>a</span><span>b</span><span>e</span>

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Hast du diesen Facebook-Mist gesehen?

Ich habe kurz auf Facebook nachgesehen, um das zu überprüfen, und was ich sah, war ein anderes und noch verschachtelteres Durcheinander

Sie versuchen, deine Browser-Erweiterung zum Blockieren von Werbung zu bekämpfen. Natürlich tun sie das. Ich bin sicher, dass sie bei ihrer Größe ohne dieses Vorgehen Millionen von Dollar verlieren würden. Aber ich frage mich, ob es wirklich ein *Verlust* von Geld ist, wenn man den Verlust von Vertrauen und möglicherweise den Verlust von Nutzern auf der Plattform mit einbezieht.

Es fühlt sich einfach unhöflich an, oder? So als ob ein Nutzer bewusst Technologie auf seinem Computer installiert, um die Kontrolle darüber auszuüben, was *er* auf seinen Computer und in seine Augen lässt. Und sie sagen: „Nein, wir respektieren diese Wahl nicht. Wir werden deine Technologie mit unserer Technologie bekämpfen und dir diese Sachen aufzwingen.“ Das fühlt sich nicht richtig an.

Ich bin mir nicht unbewusst, dass Ad-Blocker negative Auswirkungen auf die Fähigkeit von Websites haben, Geld zu verdienen. So verdiene ich buchstäblich mein Geld. Aber ich möchte es nicht durch Kampf und auf Kosten des Vertrauensbruchs tun. Ich möchte es anmutig tun und dabei Vertrauen aufbauen.

Jedenfalls.


Ich frage mich, wie das Schreiben von HTML zur Unterstützung von Ad-Blockern stattdessen aussehen würde.

<!-- start: advertisement -->
<div class="ad sponsor paid" id="ad-1" data-ad="true">
  <div>Sponsor:</div>
  <a href="https://sponsor.com" rel="nofollow">Company</span>
</div>
<!-- end: advertisement -->

Die guten machen das schon seit Ewigkeiten.


Diese auf Spans basierende Schriftmache erinnert mich an Bibliotheken wie Splitting.js und Lettering.js, die Text aus Styling-Gründen in einzelne <span>s aufteilen.

Es stellt sich heraus, dass dies die On-Page-Suche nicht beeinträchtigt (d. h. wenn Sie nach „Hund“ suchen, finden Sie <span>H</span><span>u</span><span>n</span><span>d</span>), aber es beeinträchtigt einige Screenreader dahingehend, dass sie jeden Buchstaben einzeln behandeln, was zu einer ziemlich schrecklichen Audioausgabe führen kann, wie z. B. Pausen zwischen Buchstaben, wo man sie nicht erwartet oder wünscht.

Das ist aber komplett lösbar!

Ich habe gerade über die Leistungsfähigkeit von aria-label über Web Platform News gelesen, zitiert von Amelia Bellamy-Royds.

Ein aria-label-Attribut auf einem Button oder Link ersetzt effektiv den Textinhalt dieses Elements durch das neue Label.

Es war cool zu sehen, dass das standardmäßig bei Lettering.js passiert! Und Splitting.js ermittelt die beste Methode für sich, die aria-label beinhaltet.


Oh, und wie immer, wäre ::nth-letter() cool. 2018 Rückblick auf eine Forderung von 2011.