Vorhandene Bildbeschreibungen in Twitter sichtbar machen (Update am 11.4.2022)

Update 11. April 2022:

Twitter hat im April nun endlich ein Update ausgerollt, welches nicht nur sichtbar macht, ob eine Bildbeschreibung vorhanden ist, sondern es auch ermöglicht, diese anzuzeigen.
So wird nun bei jedem Bild, auch bei denen von anderen Usern, das „ALT“-Zeichen angegeben. Durch ein Klick darauf erhält man dann die Bildbeschreibung.

Somit sind die folgenden Schritte nicht mehr notwendig.

 

Bisherige Schritte um Bildbeschreibungen sichtbar zu machen

Wie bereits zuvor beschrieben, bietet Twitter schon seit längerem die Möglichkeit an, Bilder mit einer Bildbeschreibung zu versehen.
Leider kann man den Inhalt der Beschreibung danach in der optischen Darstellung nicht sehen.

Nur dann, wenn man in Twitter angemeldet ist, erhält man einen optischen Hinweis, dass eine Bildbeschreibung vorliegt: In der linken, unteren Ecke des Bildes befindet sich ein Texthinweis „ALT“.

Screenshot: Tweet mit einer Bildbeschreibung

Will man dann doch die Bildbeschreibungen sehen, muss man den Sourcecode aufrufen.
Moderne Browser bieten hierzu entsprechende Werkzeuge von Haus aus an.
Für jemand, der sich mit so etwas nicht auskennt, könnte der Code von Twitter ein bißchen verwirrend sein.

Nur so viel zu dem Code:
Die zuvor eingegebene Bildbeschreibung findet sich bei Twitter an zwei Stellen: Zum einen im alt-Attribut des Bildes selbst, zum anderen aber auch in dem aria-label-Attribut in einem darüber liegenden <div>.

Screenshot: Sourcecode-Ansicht des Tweets mit einer Bildbeschreibung

Leider basieren die Klassennamen von Twitter auf deren Designframework und sind nicht sehr gut geeignet um gezielt Inhalte auszulesen. (Dafür gäbe es ja auch eine eigene API). Auch wurde das HTML nicht mit strukturierten Daten versehen.
Dennoch kann man etwas machen. Die HTML-Struktur ist zumindest grob semantisch strukturiert. Einzelne Tweets werden durch den HTML-Tag <article> umrandet, was schonmal dabei hilft, diese zu filtern. Weiterhin ist ein Beitrag mit einem Bild stets als Link definiert, der auch über ein Attribut data-focusable="true" hervorgehoben ist. Dies ist wichtig, da er sich damit von etwaigen Thumbnails aus der Autorangabe oberhalb des Tweets und den Bedienelementen unterhalb des Tweets Tweet unterscheidet.
Kurzum: Mit diesen Informationen können wir also Bilder in Tweets von allen anderen Elementen unterscheiden. Wir brauchen dazu auch keine Kenntnis über die verwendeten Klassennamen von Twitter und deren Gebrauch zu haben.

Um jetzt den Text der Bildbeschreibung zu nutzen, können wir entweder das alt-Attribut im <img>-Element nutzen oder das aria-label-Attribut in einem darüber liegenden <div>.
Ich möchte dazu kein JavaScript verwenden, sondern reines CSS, welches ich in einem User Stylesheet eintrage.

Auf den Inhalt von Attributen kann ich mit CSS zugreifen. Nämlich mit der CSS-Property content. Diese Eigenschaft wird mit ::before und ::after Pseudoelementen genutzt um Inhalte in einen Element zu generieren.
Damit ist dann auch klar, welches Attribut ich verwende: Das aria-label-Attribut im <div>. (Grund: Das <img>-Element kann die Pseudoelemente nicht verwenden).

Kurzum: Ich will auf ein Attribut aria-label in einem <div>-Block zugreifen, welches sich innerhalb eines <a>-Block befindet, welches das Attribut data-focusable="true" hat und selbst wieder innerhalb eines <div>-Block in einem <article>-Block befindet.

Als CSS also auf dieses:


article div a[data-focusable="true"] div[aria-label] {}

Nun würde ich damit jedoch auch solche Attribute finden, die leer sind oder sinnlos (nämlich weil jemand als Bildbeschreibung das Wort „Bild“ eingab).

Daher filtere ich diese Inhalte im Attribut durch eine :not-Property weg:

article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""]) {}

Da ich an der Stelle des Elements jedoch selbst nichts ändern möchte, sondern nur den Inhalt des Attributs sichtbar machen will, tu ich dies nun mit dem ::after Pseudoelement anzeigen:

article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""])::after {
    content: attr(aria-label);
}

Dies kann ich dann noch gestalten.
So kann ich dem ganzen Farben geben, einen Rahmen und weitere Angaben zur Darstellung machen:


article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""])::after {
    content: attr(aria-label);
    z-index: 5000;
    pointer-events: none;
    padding: 8px 10px;
    white-space: normal;
    text-decoration: none;
    text-indent: 0;
    overflow: visible;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: normal;
    color: #111;
    text-shadow: 1px 0 1px #fff;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
    background: white;
    display: block;
    border-left: 10px solid rgb(29, 161, 242) ;
    border-radius: 10px;
    opacity: 0.9;
} 

So wird dann die Bildbeschreibung immer am oberen Teil des Bildes gezeigt.

Somit hab ich das was ich wollte.
Screenshot: Tweet mit optisch sichtbar gemachter Bildbeschreibung

Da dies allerdings auch mitunter störend sein kann, mach ich das ganze noch abhängig von einem Maushover oder Tastaturfokus:


article div a[role="link"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""])::after,
article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""])::after {
    content: attr(aria-label);
    z-index: 5000;
    pointer-events: none;
    padding: 8px 10px;
    white-space: normal;
    text-decoration: none;
    text-indent: 0;
    overflow: visible;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: normal;
    color: #111;
    text-shadow: 1px 0 1px #fff;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
    background: white;
    display: none;
    border-left: 10px solid rgb(29, 161, 242) ;
    border-radius: 10px;
    opacity: 0.9;
} 

article div a[role="link"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""]):hover::after,
article div a[role="link"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""]):focus::after,
article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""]):hover::after,
article div a[data-focusable="true"] div[aria-label]:not([aria-label="Bild"]):not([aria-label=""]):focus::after {
    display: block;
}

Diesen ganzen Code füge ich mit einem geeigneten Userstyle-Plugin in dem Browser meiner Wahl ein.

Der Code ist auch auf Codepen verfügbar.

Update am 15. Mai 2021

Heute hab ich zufällig festgestellt, dass Twitter die HTML-Syntax etwas geändet hat.
Das Attribut data-focusable="true" fiel weg.

Der obige Code im Userstylesheet muss daher wie folgte geändert werden. Statt a[data-focusable="true"] sucht man nach a[role="link"]

ich hab dies oben im Beispielcode auch ergänzt, so dass beide Formen Bestand haben.