Popover in HTML
Ein Hinweis, der auch angesagt wird
Auslöser und Inhalt: zwei Stellen am nativen Popover.
Natives HTML, sichtbar erklärt
Ein Popover ist eine Verbindung, kein schwebender Kasten
Ein Name, eine ID und die richtige Zustandsart reichen für die Browsermechanik. Die Grafik zeigt, was dabei im Dokument, in der obersten Ebene und im Fokuspfad passiert.
Dokumentebene
Oberste Ebene
id="versand-hinweis"VersandartStandardversand erreicht Sie in 2 bis 3 Werktagen.
Zu den VersandkostenSchließenpopovertarget zeigt auf id.HTML · vollständig
ohne JavaScript<button type="button"
popovertarget="versand-hinweis"
aria-label="Hinweis zur Versandart">
<span aria-hidden="true">?</span>
</button>
<aside id="versand-hinweis"
popover="auto"
aria-labelledby="versand-titel">
<h2 id="versand-titel">Versandart</h2>
<p>Standardversand erreicht Sie in
2 bis 3 Werktagen.</p>
<a href="/versand/">
Zu den Versandkosten
</a>
<button type="button"
popovertarget="versand-hinweis"
popovertargetaction="hide">
Schließen
</button>
</aside> Das sichtbare Fragezeichen erklärt seinen Zweck nicht. Deshalb benennt aria-label den Auslöser; das dekorative Zeichen bleibt verborgen. Das benannte aside gibt dem ergänzenden Inhalt eine passende Struktur.
CSS · mit sicherem Rückfall
Anchor Positioning#versand-hinweis {
margin: 0;
padding: 1rem 1.25rem;
max-inline-size: 24rem;
border: 2px solid currentColor;
background: Canvas;
color: CanvasText;
position-area: block-end span-inline-end;
}
#versand-hinweis::backdrop {
background: transparent;
}
button:focus-visible,
#versand-hinweis a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}popovertarget stellt auch die implizite CSS-Ankerbeziehung her. Unterstützt ein Browser position-area, liegt der Hinweis am Auslöser. Andernfalls greift die bedienbare, zentrierte Standardposition des Browsers.
Der Browser übernimmt
Zustand und Weg
- Ein- und Ausblenden in der obersten Ebene
- implizite Beziehungen für
aria-detailsundaria-expanded - Light Dismiss und Escape bei
auto - Einordnung des Popovers in die Tab-Reihenfolge
Prüfprotokoll
So prüfen Sie es
- Tab
Der Fokus erreicht den Fragezeichen-Auslöser. Das Vorleseprogramm nennt „Hinweis zur Versandart“.
- Enter
Das Popover erscheint. Im Accessibility-Baum steht am Auslöser der geöffnete Zustand; im Quelltext brauchen Sie kein eigenes
aria-expanded. - Tab
Der nächste Fokus liegt auf „Zu den Versandkosten“, danach auf „Schließen“. Beide Fokusmarkierungen sind sichtbar.
- Escape
Das Popover verschwindet und der Fokus kehrt zum Auslöser zurück. Prüfen Sie zusätzlich das Schließen per Klick außerhalb und über den Schließen-Schalter.
Technische Quellen
Die Details zu Zustand, Fokus, Semantik und Positionierung stammen aus den aktuellen Plattformbeschreibungen.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Der Popover-Auslöser hat keinen Namen Regel button-name
Das Fragezeichen auf dem Button ist ein Symbol ohne Text. aria-label nennt, was das Popover zeigt.
Zum Mitnehmen
Das Popover, korrigiert
Ein aria-label am Auslöser, ein Attribut weniger am Inhalt.
Korrektur in 2 Schritten ansehen
Dem Auslöser einen Namen geben
Das Symbol bleibt sichtbar und für Vorleseprogramme ausgeblendet. aria-label liefert das Wort, das vorgelesen wird.
KorrekturvergleichSchritt 1 · HTML Vorher
<button popovertarget="hinweis"> <span aria-hidden="true">?</span> </button>Nachher
<button popovertarget="hinweis" aria-label="Hinweis zur Versandart"> <span aria-hidden="true">?</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf das Fragezeichen. Ein Vorleseprogramm sagt „Hinweis zur Versandart, Schaltfläche“.
aria-hidden am Popover entfernen
Der Browser blendet ein geschlossenes Popover selbst aus. Bleibt aria-hidden stehen, erreicht die Tab-Taste Links, die nicht vorgelesen werden.
KorrekturvergleichSchritt 2 · HTML Vorher
<div id="hinweis" popover aria-hidden="true"> <p>Versand in 2 bis 3 Werktagen.</p> <a href="/versand/">Zu den Versandkosten</a> </div>Nachher
<div id="hinweis" popover> <p>Versand in 2 bis 3 Werktagen.</p> <a href="/versand/">Zu den Versandkosten</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Popover und drücken Sie Tab. Das Vorleseprogramm nennt den Link, den der Fokus erreicht.