Minimierte Inhalte mit „hidden=until-found“ zugänglich machen

Joey Arhar

Zusammenklappbare Inhaltsbereiche, die manchmal als Akkordeon bezeichnet werden, sind ein gängiges UI-Muster. Inhalte, die in den minimierten Abschnitten ausgeblendet sind, können jedoch nicht über die Suche auf der Seite gefunden werden. Außerdem ist es nicht möglich, innerhalb minimierter Bereiche auf Textfragmente zu verlinken.

Mit dem HTML-Attribut hidden=until-found und dem Ereignis beforematch können Sie diese Probleme beheben. Wenn Sie dem Container für Ihre ausgeblendeten Inhalte hidden=until-found hinzufügen, kann der Browser in diesem ausgeblendeten Bereich nach Text suchen und den Abschnitt anzeigen, wenn eine Übereinstimmung gefunden wird.

Hinweis:Mit dieser Funktion können Sie nicht nur die Suche auf der Seite in verborgenen Bereichen aktivieren, sondern auch den Zugriff von Suchmaschinen auf diese verborgenen Inhalte ermöglichen. Die Google Suche erstellt sogar Links, die zum angezeigten Fragment scrollen.

Diese Funktionen sind ab Chrome 102 verfügbar. Sehen wir uns an, wie sie funktionieren.

Verwendung

Wenn Ihre Website bereits minimierbare Bereiche enthält, die Sie suchbar machen möchten, ersetzen Sie die Stile, die den Bereich ausblenden, durch das Attribut hidden=until-found. Wenn Ihre Seite noch einen anderen Status hat, der mit dem Anzeigen oder Ausblenden des Abschnitts synchronisiert werden muss, fügen Sie einen beforematch-Ereignis-Listener hinzu, der beim hidden=until-found-Element ausgelöst wird, kurz bevor das Element vom Browser angezeigt wird.

Vorsichtsmaßnahmen

Für eine einheitliche Nutzererfahrung sollten die hidden=until-found-Inhalte ohne die Funktion „Auf der Seite suchen“ sichtbar sein. Nicht alle Nutzer werden die Funktion „Auf der Seite suchen“ verwenden. In Browsern, die hidden=until-found nicht unterstützen, werden ausgeblendete Inhalte nicht angezeigt.

Wenn Sie möchten, dass Ihre ausgeblendeten Inhalte in Browsern, die hidden=until-found nicht unterstützen, auch bei der Suche berücksichtigt werden, können Sie sie in diesen Browsern jederzeit maximieren. Die Funktion kann durch Prüfen des Vorhandenseins des beforematch-Ereignis-Handlers erkannt werden:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

Bei hidden=until-found wird die CSS-Eigenschaft content-visibility:hidden anstelle der Eigenschaft display:none angewendet, die für das normale Attribut „hidden“ gilt. Dies ist erforderlich, um die Inhalte zu durchsuchen, während sie geschlossen sind. Es hat jedoch auch folgende Nebenwirkungen:

• Einige Layout-APIs wie getBoundingClientRect melden, dass die ausgeblendeten Inhalte im hidden=until-found-Element Platz belegen und eine Position auf der Seite haben.
• Untergeordnete Knoten des hidden=until-found-Elements werden nicht gerendert, das hidden=until-found-Element selbst hat jedoch weiterhin ein Feld. Das bedeutet, dass CSS-Eigenschaften wie Rahmen und explizite Größe weiterhin das Rendering beeinflussen.

In der folgenden Demo wird dem Element, auf das hidden=until-found angewendet wurde, ein Rand, ein Rahmen und ein Abstand hinzugefügt. An der Stelle, an der ausgeblendete Inhalte angezeigt werden, ist ein Feld mit einem grauen Rahmen zu sehen, das sich dann mit den ausgeblendeten Inhalten füllt, wenn diese sichtbar gemacht werden. Dies ist das Feld des ausgeblendeten Elements.

Um dieses Problem zu vermeiden, fügen Sie den Rahmen einem Element hinzu, das im Container mit hidden=until-found verschachtelt ist.