Methoden zum Ausblenden von Webseiten

Webentwickler müssen Webseitenelemente aus verschiedenen Gründen ausblenden. Beispielsweise sollte eine Schaltfläche sichtbar sein, wenn Sie die Site auf einem mobilen Gerät anzeigen, und ausgeblendet sein, wenn Sie einen Desktop-Browser verwenden. Oder es gibt beispielsweise ein bestimmtes Navigationselement, das im mobilen Browser ausgeblendet und auf dem Desktop angezeigt werden soll. Elemente, die auf der Seite nicht sichtbar sind, können sich in verschiedenen Zuständen befinden:

• Ein Element ist völlig unsichtbar und wird darüber hinaus aus dem Dokumentenstrom entfernt.
• Das Element kann nicht mit den Augen gesehen werden, ist jedoch im Dokument enthalten und für unterstützende Technologien wie Bildschirmleseprogramme verfügbar.
• Das Element ist sichtbar, aber für Bildschirmleseprogramme nicht sichtbar.

Der Artikel, dessen Übersetzung wir heute veröffentlichen, befasst sich mit der Analyse von Methoden zum Ausblenden von Elementen von Webseiten mithilfe von HTML und CSS. Hier werden Themen wie Zugänglichkeit von Inhalten, Animation und Szenarien für den Einsatz von Technologien zum Ausblenden von Daten auf Seiten erörtert.

HTML5 verstecktes Attribut

Hidden ist ein logisches HTML-Attribut, das die Elemente verbirgt, denen es zugewiesen ist. Wenn der Browser die Seite lädt, werden keine Elemente mit dem Attribut hidden angezeigt, es sei denn, die Sichtbarkeit der Elemente wird manuell mithilfe von CSS aktiviert. Die Wirkung dieses Attributs ähnelt dem Anwenden der Regel display: none auf ein CSS-Element.

Betrachten Sie das folgende Beispiel:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

Es gibt ein Markup, das Titel, Bild und Beschreibung festlegt. Das Bild sollte nur angezeigt werden, wenn die Breite des Ansichtsfensters 400px überschreitet. Ich habe dem Element <img> das Attribut hidden hinzugefügt.

In CSS habe ich das Attribut hidden , um das Element nur anzuzeigen, wenn der Seitenansichtsbereich die richtige Größe hatte.


Webseiten-Snippet

Hier ist der CSS-Code, der hier verwendet wird:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ Hier ist ein Beispiel für diese Seite auf CodePen

Vielleicht haben Sie hier eine Frage, warum Sie nicht einfach display: none . Gute Frage. Wenn eine Bildauswahl über ihr hidden Attribut aufgerufen wird, können wir sicher sein, dass das Element auch dann versteckt wird, wenn der CSS-Code aus irgendeinem Grund nicht geladen wurde.

▍Versteckte Zugänglichkeit von Attributen und Inhalten

Wenn wir das hidden Attribut unter dem Gesichtspunkt der Zugänglichkeit von Inhalten betrachten, stellt sich heraus, dass dieses Attribut das Element vollständig verbirgt. Infolgedessen können Bildschirmleseprogramme nicht mit diesem Element arbeiten. Verwenden Sie dieses Attribut nicht in Fällen, in denen bestimmte Seitenelemente für den Menschen unsichtbar gemacht werden müssen, nicht jedoch für Bildschirmleseprogramme.

CSS-Anzeigeeigenschaft

Jedem Element einer Webseite ist standardmäßig ein bestimmter Wert für die display zugewiesen. Es kann ein inline-block , ein block , eine table usw. sein. Um ein Element mithilfe der display Eigenschaft auszublenden, können Sie das display: none Konstrukt verwenden. Wenn ein Element mit dieser Konstruktion ausgeblendet wird, werden alle Nachkommen damit ausgeblendet.

Stellen Sie sich vor, wir möchten das Bild aus dem vorherigen Beispiel ausblenden und haben beschlossen, den folgenden CSS-Code zu verwenden:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

Mit diesem Ansatz wird das Bild vollständig aus dem Dokument ausgeschlossen (aus dem sogenannten Dokumentenfluss - „Dokumentenfluss“) und ist für Screenreader nicht zugänglich. Vielleicht kennen Sie das Konzept des "Dokumentenflusses" nicht genau. Schauen Sie sich die folgende Abbildung an, um mit diesem Konzept umzugehen.


Das blaue Buch wurde vom Stapel genommen.

Der „Dokumentenfluss“ wird hier mit einem Stapel Bücher verglichen. Wenn die Eigenschaft display: none auf das blaue Buch angewendet wird, bedeutet dies, dass es einfach vom Stapel entfernt wurde. Gleichzeitig wird der Platz, den dieses Buch früher einnahm, von anderen Büchern belegt. Dasselbe passiert, wenn HTML-Elemente ausgeblendet werden. Der Platz, den ein verstecktes Element einnehmen würde, wird von anderen Elementen belegt. Dies wirkt sich auf die Anordnung der Elemente im Dokument aus. In unserem Beispiel hat sich dies auf die Position der Bücher im Stapel ausgewirkt.

Hier ist eine animierte Version eines Beispiels mit Büchern, die zeigen, was passiert, wenn einer von ihnen vom Stapel entfernt wird.


Wenn Sie ein Buch aus dem Stapel entfernen, ändert sich die Position der anderen Bücher darin

▍ Werden durch CSS ausgeblendete Ressourcen geladen?

Beantworten Sie kurz diese Frage - dann wird ja das Laden solcher Ressourcen durchgeführt. Wenn beispielsweise das <img> -Element von CSS ausgeblendet wird und wir dieses Element an einem bestimmten Punkt auf der Seite anzeigen, wird das Bild bereits geladen. Das Vorhandensein eines Bildes auf der Seite, selbst wenn es von CSS ausgeblendet wird, führt zur Ausführung einer HTTP-Anforderung zum Herunterladen.

Hier finden Sie eine Demo zum Arbeiten mit einem durch CSS ausgeblendeten Bild. Wenn Sie dieses Beispiel untersuchen, indem Sie die Chrome Developer Tools öffnen und die Registerkarte " Network aufrufen, wird dort die entsprechende Anforderung angezeigt.


Untersuchen einer Seite mit einem latenten Bild

▍ Elementstil

Erwähnenswert ist, dass es HTML-Elemente gibt, deren display standardmäßig auf none ist. Dies ist beispielsweise ein <style> -Element, das dem Hauptteil einer HTML-Seite hinzugefügt werden kann. Die display kann in block geändert und sichtbar gemacht werden.
Hier ist der HTML-Code für den Seitenkörper:

 <body>    <style>       .title { color: #000; }    </style> </body> 

Hier ist das CSS, mit dem wir das style Element sichtbar machen:

 style {    display: block; } 

Eine solche Technik kann nützlich sein, wenn der Stilblock sichtbar und darüber hinaus bearbeitbar sein soll. Um einen solchen Block bearbeitbar zu machen, können Sie das Attribut contenteditable=true zum style Tag hinzufügen.

So sieht es aus.


Sichtbarer bearbeitbarer Stilblock

→ Hier ist eine Demo dieses Beispiels

▍CSS-Anzeigeeigenschaft und Inhaltszugriff

Bei Verwendung der Eigenschaft display: none wird das Element unsichtbar und ist darüber hinaus für Screenreader nicht mehr zugänglich.

CSS-Opazitätseigenschaft

Wenn Sie die CSS-Eigenschaft opacity auf 0 , können Sie das Element und alle darin verschachtelten Elemente ausblenden. Diese Eigenschaft wird nicht vererbt. Diese Eigenschaft verbirgt jedoch Elemente nur vor demjenigen, der die Seite betrachtet, und nicht vor Bildschirmleseprogrammen. Hier ist anzumerken, dass ein Element, dessen opacity von 1 abweicht, einen neuen Überlagerungskontext erstellt .

Hier ist ein Beispiel.


Das blaue Buch ist unsichtbar, aber der Platz, den es einnimmt, ist noch reserviert

Die vorige Abbildung zeigt, dass das blaue Buch für den Betrachter unsichtbar wird. Aber der Platz, den sie einnahm, ist reserviert. Die Reihenfolge der anderen Bücher im Stapel hat sich nicht geändert. Vergleichen Sie dies mit dem, wozu die Verwendung der display: none .

In CSS sieht die Verwendung der Eigenschaft opacity folgendermaßen aus:

 img {    opacity: 0; } 

Wenn wir zu unserem ersten Beispiel zurückkehren und davon ausgehen, dass wir das Bild mithilfe der opacity ausblenden möchten, sieht das Ergebnis wie folgt aus.


Das Bild wird mit der CSS-Eigenschaft opacity ausgeblendet

Wie Sie sehen, ist das Bild noch auf der Seite vorhanden, aber sein Platz wird von nichts in Anspruch genommen. Es ist nur dem Betrachter verborgen, verschwindet aber nicht von der Seite. Nach der Veröffentlichung des Materials teilten sie mir mit, dass die Eigenschaft pointer-events: none | auto pointer-events: none | auto können Mausereignisse für Elemente deaktiviert werden, die mit der Eigenschaft opacity: 0 ausgeblendet wurden. Dies ist eine wichtige Idee, da der Benutzer durch die Interaktion mit einem ausgeblendeten Element verwirrt werden kann (Anklicken, Bewegen des Mauszeigers über das Element, Auswählen von Text).

→ Hier sehen Sie eine Demonstration der Verwendung der opacity

▍CSS-Deckkraft und Zugänglichkeit von Inhalten

Ein mit opacity: 0 ausgeblendetes Element opacity: 0 bleibt für Screenreader zugänglich. Solch ein Element kann beim Arbeiten mit der Seite über die Tastatur den Fokus gewinnen.

CSS-Sichtbarkeitseigenschaft

Mit der Eigenschaft visibility: hidden können Sie Elemente anzeigen oder ausblenden. Dies erfolgt auf dieselbe Weise wie bei der opacity: 0 . Dies hat keine Auswirkungen auf den Dokumentenfluss.


Bei Verwendung von Sichtbarkeit: ausgeblendet verschwindet das Buch, sein Platz bleibt jedoch unbesetzt

Bitte beachten Sie, dass das blaue Buch verschwunden ist, dies hatte jedoch keine Auswirkungen auf die Anordnung der anderen Bücher im Stapel.

Es ist zu beachten, dass bei Verwendung von visibility: hidden für das übergeordnete Element alle untergeordneten Elemente ausgeblendet werden. Wenn jedoch die Eigenschaft visibility: visible einem der untergeordneten Elemente zugewiesen visibility: hidden wird dieser untergeordnete Element sichtbar.


Der Bücherstapel ist versteckt, aber das blaue Buch wird sichtbar gemacht.

Kehren wir zu unserem üblichen Beispiel mit Überschrift, Bild und Beschreibung zurück. Wir schreiben den HTML-Code wie folgt um:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

Wir stylen es mit folgendem CSS-Code:

 article {    visibility: hidden; } img {    visibility: visible; } 

Schauen wir uns danach an, wie sich eine Seite, auf die keine ähnliche Stilisierung angewendet wurde, von der stilisierten Seite unterscheidet.


Das verschachtelte Element ist sichtbar

Hier wird die Eigenschaft visibility: hidden CSS dem Element <article> zugewiesen. Wenn Sie dem <img> -Element die visibility: visible <img> hinzufügen, wird das Bild sichtbar. Auch hier ist der Punkt, dass die betreffende Eigenschaft auf die Nachkommen des Elements angewendet wird, sie jedoch im Nachkommen-Element überschrieben werden kann.

→ Hier ist eine Demo zum Arbeiten mit der visibility

▍ Sichtbarkeit der CSS-Eigenschaften und Zugänglichkeit von Inhalten

Wenn Sie die Eigenschaft visibility: hidden , wird das Element ausgeblendet. Es wird auch aus der Eingabehilfenstruktur entfernt und wird daher von Bildschirmleseprogrammen nicht bemerkt.

Elemente verstecken und positionieren

Um ein Element auszublenden, indem Sie auf seine Position auf der Seite einwirken, müssen Sie es außerhalb des sichtbaren Bereichs der Seite bringen und seine Abmessungen (Breite und Höhe) auf 0 . Als Beispiel für die Verwendung einer ähnlichen Technik zum Ausblenden von Elementen können Sie einen Link angeben, mit dem Sie schnell zum Hauptinhalt der Seite springen können. Betrachten Sie das folgende Bild.


Link außerhalb der Sichtbarkeit der Seite ausgeblendet

Um ein Element außerhalb des Sichtbarkeitsbereichs der Seite zu positionieren, können Sie den folgenden CSS-Code verwenden:

 .skip-link {    position: absolute;    top: -100%; } 

Ein Wert von top: -100% entfernt ein Element auf 100% seiner Höhe aus dem Ansichtsfenster. Infolgedessen ist das Element vollständig unsichtbar. Erhält er jedoch den Fokus, nachdem der Benutzer ihn über die Tastaturtasten erreicht hat, kann dieses Element angezeigt werden:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ Hier sehen Sie eine Demonstration dieser Methode zum Ausblenden von Elementen

▍CSS-Positionseigenschaft und Zugänglichkeit von Inhalten

Ein Element, das außerhalb des Anzeigebereichs angezeigt wird, steht für Bildschirmleser zur Verfügung und kann auch über die Tastatur aufgerufen werden. Es stellt sich heraus, dass es nur während der normalen Arbeit mit der Seite unsichtbar ist.

CSS-Clip-Path-Eigenschaft

Wenn die CSS-Eigenschaft clip-path auf ein Element angewendet wird, können Sie einen Bereich beschreiben, der bestimmt, welcher Teil des Elements ausgeblendet und welcher sichtbar sein soll.


Bildausschnittsbereich

Im vorherigen Beispiel wird die clip-path Eigenschaft auf die Tatsache angewendet, dass die linke Seite des Bildes abgedunkelt ist. Wenn diese Eigenschaft angewendet wird, verschwinden die abgedunkelten Fragmente des Bildes.

Um diese Eigenschaft in Aktion zu betrachten, verwenden wir das Clippy- Tool. Die Arbeit beginnt mit den folgenden in CSS angegebenen clip-path Werten und der Beschreibung der Maske als Polygon:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

Bei Versuchen mit der Eigenschaft clip-path wird der Beschneidungsbereich als Polygon angegeben

Wenn alle polygon auf 0 , wird das Bild einfach ausgeblendet. Der Beschneidungsbereich des Bildes kann nicht nur in Form eines Polygons, sondern auch in Form eines Kreises festgelegt werden:

 img {    clip-path: circle(0 at 50% 50%); } 

So sieht es aus.


Bei Versuchen mit der Eigenschaft clip-path wird der Beschneidungsbereich als Kreis festgelegt

Mit dieser Eigenschaft können Sie hier experimentieren.

▍CSS-Clip-Path-Eigenschaft und Inhaltszugriff

Ein Element, auf das die Eigenschaft clip-path angewendet wird, wird nur visuell ausgeblendet. Es ist über die Tastatur erreichbar und für Screenreader verfügbar.

Manipulationen mit Textfarbe und Schriftgröße

Das Ausblenden von Text durch Ändern der Farbe oder der Schriftgröße ist zwar nicht so weit verbreitet wie die zuvor diskutierten Techniken zum Ausblenden von Elementen, in einigen Fällen kann dies jedoch nützlich sein.

▍Farbtransparenz einstellen

Wenn Sie eine transparente Farbe für den Text verwenden, ist dieser Text nicht sichtbar. Dies kann hilfreich sein, wenn Sie Schaltflächen erstellen, die nur Symbole verwenden.

▍ Passen Sie die Schriftgröße an

Wenn Sie die Schriftgröße auf 0 , wird der Text auch ausgeblendet.

Betrachten Sie das folgende Beispiel. Hier gibt es eine Schaltfläche, deren Struktur durch den folgenden HTML-Code definiert wird:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

Unser Ziel ist es, den Text dieser Schaltfläche auszublenden und gleichzeitig für unterstützende Technologien verfügbar zu lassen. Dazu habe ich folgenden CSS-Code verwendet:

 .button span {    color: transparent;    font-size: 0; } 

Jetzt ist der Text ausgeblendet. Es ist zu beachten, dass diese Technik funktioniert, ohne die Farbe des Texts zu ändern. Aber ich habe hier die Farbe geändert, um verschiedene Optionen zum Ausblenden des Texts zu erkennen.


1. Der Inhalt der Schaltfläche ist zentriert. 2. Dem Text wird eine transparente Farbe zugewiesen. 3. Die Schriftgröße ist auf 0 eingestellt

→ Hier ist eine Demo für dieses Beispiel

HTML-Attribut aria-hidden

Wenn einem Element ein von einer aria-hidden Attribut hinzugefügt wird, wird dieses Element aus der Eingabehilfenstruktur entfernt. Dies erleichtert Benutzern, die Bildschirmleseprogramme verwenden, die Verwendung der Seite. Beachten Sie, dass ein Element mit diesem Attribut auf der Seite sichtbar ist. Es ist nur für unterstützende Technologien unsichtbar.

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

In diesem Beispiel gibt es eine Menu mit einem Symbol und einer Bezeichnung. Mit dem Attribut aria-hidden="true" können Sie diese Schaltfläche für Screenreader ausblenden.

Dieses Attribut wird gemäß MDN- Materialien in den folgenden Szenarien verwendet:

• Ausblenden von dekorativen Elementen wie Symbolen und Bildern.
• Doppelten Text ausblenden.
• Ausblenden von minimierten Elementen oder Elementen, die nicht auf dem Bildschirm angezeigt werden.

▍Aria-versteckte Attribut- und Inhaltszugänglichkeit

Dieses Attribut wurde speziell zum Verbergen von Inhalten vor Hilfstechnologien erstellt. Die Elemente sind jedoch auf der Seite sichtbar. Sie können mit ihnen über die Tastatur interagieren.

Animation und Interaktivität

Bevor wir auf die Beispiele eingehen, möchte ich auf die zuvor diskutierten Möglichkeiten zum Ausblenden von Elementen eingehen. Wir werden dies tun, um sie zu vergleichen und auszuwählen, was unseren Bedürfnissen entspricht. Die folgende Tabelle, die hier zu finden ist , basiert auf diesem wunderbaren Artikel.

Wenn Sie ein ausgeblendetes Element, beispielsweise eine mobile Navigationsleiste, animieren möchten, muss dieses Element unter Berücksichtigung seiner Verfügbarkeit erstellt werden. Im Folgenden werden erfolglose und erfolgreiche Beispiele für die Arbeit mit Elementen im Hinblick auf die Barrierefreiheit betrachtet. Auf diese Weise können wir Fehler vermeiden, die die Arbeit mit Websites für Benutzer, die unterstützende Technologien verwenden, erschweren.

▍ Menüanimation: Falscher Ansatz

Wir haben ein Menü, das beim Öffnen außerhalb des Bildschirms angezeigt werden soll. Am einfachsten geht das mit folgendem CSS:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

Dank dieses Codes wird das Menü basierend auf der .active Klasse erweitert und .active , die mit dem folgenden JavaScript-Code hinzugefügt wird:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

So sieht die Arbeit mit einem solchen Menü aus.


Menü in Aktion lassen

Es mag so aussehen, als hätten wir mit der Erstellung dieses Menüs gute Ergebnisse erzielt, aber hier ist ein großer Fehler gemacht worden. Bei Verwendung der Eigenschaft opacity: 0 werden die Navigationselemente nicht aus der Eingabehilfenstruktur entfernt. Auch wenn das Menü auf der Seite nicht sichtbar ist, kann es über die Tastatur erreicht werden, Screenreader können damit arbeiten. Um Benutzer nicht zu verwirren, die solche Tools verwenden, muss das Menü auch vor diesen Tools verborgen werden.

Hier ist die Eingabehilfenstruktur für die betreffende Seite, die mithilfe der Tools auf der Registerkarte " Accessibility des Chrome-Tools erstellt wurde.


Eingabehilfenbaum eines schlecht gestalteten versteckten Menüs

Der Eingabehilfenbaum ist eine Liste aller Elemente, auf die Benutzer, die Bildschirmleseprogramme verwenden, zugreifen können. In unserem Fall haben sie Zugriff auf alle Menüpunkte, die auf dem Bildschirm nicht sichtbar sind. Hier finden Sie zwei Probleme, die wir lösen müssen:

1. Es ist darauf zu achten, dass versteckte Menüpunkte nicht über die Tastatur erreichbar sind.
2. Es ist notwendig, dass Screenreader das versteckte Menü nicht sehen und den entsprechenden Inhalt nicht lesen.

Das folgende Bild zeigt, wie die Seite für VoiceOver unter Mac OS angezeigt wird. Es ist leicht zu bemerken, dass dieses Tool das Menü perfekt sieht, auch wenn dieses Menü nicht auf dem Bildschirm angezeigt wird.


Der Bildschirmleser sieht, was er nicht sehen sollte

→ Hier ist eine Arbeitsversion dieses Beispiels

Beheben wir die oben genannten Fehler.

▍ Menü-Animation: Fehlerkorrekturen

Um das Menü zu verbessern und Fehler zu beheben, müssen Sie die Eigenschaft visibility: hidden CSS verwenden. Auf diese Weise können Sie das Menü auf der Seite ausblenden und verhindern, dass das Lesen auf dem Bildschirm funktioniert. Hier ist der CSS-Code, um das Problem zu beheben:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

Nach dem Anwenden dieses Codes verschwindet das minimierte Menü vom Bildschirm und aus dem "Sichtfeld" der Hilfstechnologien. Erkunden Sie die Seite erneut mit VoiceOver.


Screenreader sieht nichts extra

→ Hier ist ein Projekt zur Veranschaulichung eines Beispiels

Benutzerdefinierte Kontrollkästchenelemente

Kontrollkästchen-Element

Standard-Flags, <input> -Elemente vom Typ checkbox , sind schwer zu konfigurieren. Wenn wir sie konfigurieren müssen, bedeutet dies, dass wir eine eigene Implementierung eines solchen Elements erstellen müssen. Schauen Sie sich den grundlegenden HTML-Code an:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

Um das Kontrollkästchen zu konfigurieren, müssen Sie in der Lage sein, das Element auszublenden und dabei die Anforderungen der unterstützenden Technologien zu berücksichtigen. Dazu müssen Sie die position -Eigenschaft sowie andere Eigenschaften verwenden. Hier ist eine CSS-Klasse, die sr-only oder visually-hidden kann. Sie blendet ein Element nur visuell aus, lässt es jedoch für Bildschirmleser und für die Tastaturnavigation zugänglich.

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

Dank der Verwendung einer solchen Klasse verliert das checkbox Element unseres eigenen Designs nicht an Zugänglichkeit. Hier ist eine detailliertere Geschichte über ein solches Element. Und hier ist eine Demonstration der Arbeit mit einem ähnlichen Element.

Inhalte vor Bildschirmleseprogrammen verbergen

▍Einige Zeichen verstecken

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

Zusammenfassung

- . , , .

Sehr geehrte Leser! - ?