9.1.3.1a Überschriften: Umgang mit verlinkten Überschriften ohne Folgetext

[detlevhfischer]

Ihr kennt sie alle, diese Kacheln mit verlinkten Überschriften, die nichts überschreiben (also ohne Folgetext). Das soll nicht sein, andererseits folgt i.d.R. die gleiche Überschrift als Hauptüberschrift der angesprungenen Seite, dort mit Folgeinhalten. Das Pattern ist so häufig, dass ich gerne en paar Meinungen hören würde, ob wir dies akzeptieren oder rein seitenbezogen darauf beharren, "wo eine Überschrift steht, muss es auch etwas Überschriebenes geben". Bei Konsens, dass das OK bzw. zumindest kein FAIL ist, könnte man das in den Prüfschritt 9.1.3.1a als Hinweis aufnehmen.

[RalfO99]

Ich kenne mich nicht so gut mit Screenreadern (SR) aus, aber nach meinem Verständnis wäre es fatal, wenn die selbe Überschrift (Text) mit der selben Hierarchie (Hx) genutzt würde. Dann könnte der SR das nicht übersichtlich machen. Mein Verständnis: Wenn in der oben genannten Kachel z.B. eine H1 "Inhalt" mit H2 für die verlinkten Überschriften ist und diese Verlinkungen zu H1 Überschriften führten, sollte es keine Verwirrung geben. Die Frage ob eine Überschrift etwas Überschriebenes hat, sähe ich dann nachrangig.

[sweckenmann]

Ich zitiere mal Hidde de Viries:

It could also constitute a failure of WCAG 1.3.1: Info and relationships, because you’re basically claiming a structural relationship when there isn’t one.

Quelle: "When there's no content between headings"

Es werden Erwartungen erweckt, die nicht erfüllt werden.

andererseits folgt i.d.R. die gleiche Überschrift als Hauptüberschrift der angesprungenen Seite, dort mit Folgeinhalten.

Die Bedeutung / Semantik eines Elements ist doch nur im Kontext der genutzten Seite zu bewerten? Ein Link im Fließtext könnte ja genauso auf der Folgeseite eine h1 sein. D.h. es ist entscheidend, ob es sich semantisch um eine Überschrift auf der zu prüfenden Seite handelt oder nicht (bzw. ob "sturctural relationships" vorhanden sind)?

[stefanFarnetani]

Ich finde, dass das je nach Situation in Ordnung ist. Ein Stück weit sehe das Thema auch aus der Entwicklerseite. Was wäre denn eine sinnvolle Lösung? Die Überschriften erschienen mir noch am sinnvollsten. In vielen Situationen würden ansonsten Listen mit Links verwendet werden.

Situation 1: Eine Website listet unter einem Überschrift "Aktuelle Meldungen" die ersten vier Meldungen als Kachel mit Bild und Anreißertext auf. Jede Kachel hat eine Überschrift im Quellcode ausgezeichnet. Danach folgen weitere 6 Meldungen ohne Bild und Text. Es handelt sich um verlinkte Überschrift.

Würden wir nur die ersten vier Kacheln als Überschrift umsetzten, tauchen die restlichen Meldungen nicht in der Überschriften-Outline auf. Irgendwie seltsam.

Situation 2: Die Website hat Teaser in Kachelform. Die meist genutzte Variante beinhaltet eine Überschrift, ein Bild und einen Zweizeiler an Text. Aber die gleiche Komponente kann von der Redaktion auch ohne Text eingesetzt werden. Das Bild ist jeweils als dekorativ ausgezeichnet (mittels role="presentation"). Soll jetzt je Variation das funktional und optisch gleiche Element einmal mit Überschriften und einmal mit einer Liste umgesetzt werden? Außerdem benötigt die Umsetzung nur als Liste auch eine zusätzliche Überschrift der gesamten Liste, damit die Liste nicht als Inhalt des vorherigen Inhaltsblocks zählt.

Ich weiß, die praktische Umsetzung kein gutes Argument ist, um zu entscheiden, ob es generell falsch ist. Mir würde es helfen, wenn ich einen Lösungsvorschlag hätte, bevor ich die aktuelle Praxis streng verbiete. Und ich muss nochmal betonen, dass ich die Entscheidung von der Situation abhängig machen würde. Wenn auf einer Website klar erkennbar ist, dass immer nur Überschriften verlinkt werden, wäre das für mich auch ein Verstoß. Denn eine Umsetzung als Liste stünde dann auch nichts im Weg.

[MarcHaunschild]

Situation 1: nach den Artikeln kommt eine Liste mit der Überschrift „weitere News“ Situation 2: das Problem ist mir auch als erstes eingefallen

alles in allem finde ich, dass es hier keine echte Barriere gibt. Man kennt dieses pattern von vielen Webseiten und außer der nicht erfüllten Erwartung passiert hier nichts. Dass hier irgendeine Information nicht zugänglich ist, kann ich nicht sehen.

ich würde es dennoch nicht als erfüllt ansehen und es als eher erfüllt bestehen lassen.

bin gespannt, wie es andere sehen und welche Entscheidung bezüglich einheitlicher Bewertung gefällt wird.

PS: „ich denke ich an die Entwickler“ ist zwar nett von dir, aber ob es für Entwickler bequem ist, ist für die Bewertung, ob das Ergebnis für Nutzer barrierefrei ist, natürlich nicht wirklich von Bedeutung.

[sweckenmann]

Situation 1 zu. Hier ist Konsistenz sinnvoll. Situation 2: Diesen Fall hatte ich auch schon, auf einer Seite gabs bzgl. des Muduls den Anreißertext, auf einer anderen Seite nicht. Tatsächlich war ich da im Hinblick auf die Umsetzenden (was kann man verlangen) auch unsicher und fragte einen blinden Kollegen. Seiner Meinung nach sollte das unterschiedlich umgesetzt sein. Aber ist natürlich auch eine Einzelmeinung.

Die Frage ist, ob es gegen 1.3.1 verstößt: "claiming a structural relationship when there isn’t one". Das müsste doch sicher auch in der Working Group schon diskutiert worden sein?

Und ich muss nochmal betonen, dass ich die Entscheidung von der Situation abhängig machen würde. Wenn auf einer Website klar erkennbar ist, dass immer nur Überschriften verlinkt werden, wäre das für mich auch ein Verstoß. Denn eine Umsetzung als Liste stünde dann auch nichts im Weg.

Ja, viel von der Situation abhängig.

[johannesFischer84]

Hier meine Meinung: WCAG 1.3.1 fordert, dass für Inhaltsstrukturen die passenden semantischen Elemente verwendet werden. Die als Überschriften ausgezeichneten Ausdrücke in den Kacheln mit/ohne Bild stellen für mich keine Überschriften dar, wenn danach nicht wenigstens ein Mini-Text folgt. Daher würde ich solche Umsetzungen vom WCAG-Verständnis her als nicht konform bewerten.

Zu den Situationen von Stefan (@stefanFarnetani): Situation 1: Die Elemente der ersten vier Kacheln müssen aus meiner Sicht auch nicht unbedingt als Überschrift ausgezeichnet werden. Wenn nur ein kurzer Anreißertext folgt, kann eine Überschrift verwenden werden, aber muss aus meiner Sicht auch nicht unbedingt. Ich würde also nicht fragen, ob die Ausdrücke ohne nachfolgenden mit Überschrift ausgezeichnet werden sollen, wenn die Ausdrücke davor ein Überschriften-Element haben. Sondern eher umgekehrt, ob man die Überschriften bei den ersten vier Elementen wegen dem kurzen Text nicht auch weglässt. Eine Auszeichnung als Link würde ausreichen. Zu viele Überschriften können für Nutzende auch unübersichtlich werden, vor allem wenn es semantisch nicht unbedingt eine Überschrift ist.

Situation 2 verstehe ich in dem Sinn nicht, warum man da eine Listen-Auszeichnung verwenden sollte. Also man kann diese Kacheln ggf. als Liste auszeichnen. Aber muss man das hier vorschreiben. Bei Suchergebnissen würde ich zwar immer eine Auszeichnung jedes Suchergebnisses entweder mit Überschrift oder als Listenelement fordern. Aber bei Teaser-Kacheln benötigt man aus meiner Sicht nur die Link-Auszeichnung.

[stefanFarnetani]

@Hallo @johannesFischer84

Zu den Situationen von Stefan (@stefanFarnetani): Situation 1: Die Elemente der ersten vier Kacheln müssen aus meiner Sicht auch nicht unbedingt als Überschrift ausgezeichnet werden. Wenn nur ein kurzer Anreißertext folgt, kann eine Überschrift verwenden werden, aber muss aus meiner Sicht auch nicht unbedingt. Ich würde also nicht fragen, ob die Ausdrücke ohne nachfolgenden mit Überschrift ausgezeichnet werden sollen, wenn die Ausdrücke davor ein Überschriften-Element haben. Sondern eher umgekehrt, ob man die Überschriften bei den ersten vier Elementen wegen dem kurzen Text nicht auch weglässt. Eine Auszeichnung als Link würde ausreichen. Zu viele Überschriften können für Nutzende auch unübersichtlich werden, vor allem wenn es semantisch nicht unbedingt eine Überschrift ist.

Verstehe deinen Ansatz. Ich muss aber nochmal nachfragen. Du würdest einfach ein Link ein Bild und ein Text hintereinanderstehen lassen. Für mich bricht das der bisherigen Testpraxis. Das wäre natürlich deutlich flexibler für alle Umsetzungsteams und ich müsste weniger böser a11y-cop spielen.

Ich mache mal ein allgemeines Beispiel:

<h2>Veranstaltungstipps</h2>

<img role="presentation" />
<a>Ein tolles Event</a>
<p>Warum kann die Eins nicht lügen?<br />
     Weil sie immer allein steht!</p>

<img role="presentation" />
<a>Noch ein tolles Event</a>
<p>Wusstest du, dass es 2 Arten von Menschen gibt?<br />
     Diejenigen, die Binärcode verstehen, und diejenigen, die es nicht tun.</p>

<img role="presentation" />
<a>Schon wieder ein tolles Event</a>
<p>Warum ist die Zahl drei immer eine coole Zahl?<br />
      Weil sie immer Teil eines Trios ist: die drei Musketiere, die drei kleinen Schweinchen, die drei Weisen aus dem 
      Morgenland und so weiter</p>

Das wäre für dich in Ordnung. Auch wenn das 10 Kacheln sind.

[johannesFischer84]

Hallo Stefan, bei 3 Kacheln von Teasermeldungen würde ich es zu unwichtig für eine Liste halten, vor allem, wenn es optisch nicht mit Listenpunktzeichen gestaltet ist. Bei 10 Kacheln ist es schon etwas anderes.

Aber auch bei 10 Kacheln gilt: Ist eine Kachel insgesamt als ein Link ausgezeichnet? Wenn ja, kann WCAG-Technik H48 zutreffen. Aber dort ist die Auszeichnung von mehreren Links als Liste lediglich "useful" bezeichnet bzw. sie ist auch nicht in der Test procedure genannt. Daher scheint es mir, dass man sogar bei mehreren Links am Stück eine Listenauszeichnung nicht unbedingt einfordern kann. Dazu kommt dann noch, dass die Teaser-Kacheln Links enthalten kann, aber nicht unbedingt die Kachel insgesamt ein Link ist. Und schließlich halte ich Teaser-Kacheln auch eher um Inhalte zweiter Priorität, wo man nicht alles ganz streng auslegen muss.

[MarcHaunschild]

Hallo @stefanFarnetani ,

ich hatte die Frage so verstanden, ob Überschriften ohne Texte zulässig sind. Hier wurden Ja bereits für und wider diverser Ansätze diskutiert.

Letztlich geht es immer um Verständlichkeit. Überschriften mal mit, mal ohne kurzen text sind konsistent. Es ist eine wiedererkenbares Pattern. Wir kennen Beispiele aus dem wirklichen Leben, wo man Artikel hat mit einer Überschrift und einen leeren Text.

Wie ich sagte, kann ich damit leben, würde aber "nur" ein eher erfüllt geben.

Das heißt aber nicht, dass es nicht diverse andere Ansätze gäbe, die mindestens genauso gut funktionieren:

1. (sortierte oder unsortierte) Liste von Veranstaltungen (wenn die Veranstaltungen oder zehn letzten Blog-Einträge) chronologisch sortiert sind, natürlich eine ol
2. Beschreibungsliste, wo das dt die "Überschrift" bereit stellt
3. und natürlich die Überschriften-Anrisstext-"mehr-Lesen"-Link Kombination

Ich finde alles nachvollziehbar, der Schwerpunkt liegt halt etwas anders

Wenn ich es selber umsetze, bin ich im dritten Fall dann auch so konsequent ein section oder article element als Container zu nehmen und Kategorien, Uhrzeitangaben, Datum usw dann mit der Überschrift in ein header zu packen uswusf Dann ist das semantisch eindeutig, was gemeint ist und ob dann immer alle Elemente da sind oder manchmal (mehrere) fehlen, finde ich nicht so tragisch. Aber wie gesagt richte ich mich hier nach dem Konsens, wenn wir einen finden. Ich kann aber damit leben, wenn mal außer der Überschrift nichts da ist. Vor allem das Argument von dir und @sweckenmann hat mich überzeugt: es ist konsistenter, wenn immer Überschriften verwendet werden, auch wenn mal kein Text darauf folgt.

[MarcHaunschild]

Hallo Stefan, bei 3 Kacheln von Teasermeldungen würde ich es zu unwichtig für eine Liste halten, vor allem, wenn es optisch nicht mit Listenpunktzeichen gestaltet ist. Bei 10 Kacheln ist es schon etwas anderes.

Bei meinem letzten Post habe ich nicht dran gedacht, dass wir von Kacheln reden.

Da finde ich Überschriften auch unangemessen.

Liste muss zwar nicht, aber Texte ohne semantische Container sind auch oll - und was bleibt denn außer Listen?

Laut HTML-Standard kann (konnte?) eine Liste auch leer sein (habe es schon länger nicht mehr nachgelesen), 3 Einträge sind also wahrscheinlich nicht zu wenig.

[sweckenmann]

@johannesFischer84 Nur damit es keine Missverständnisse gibt: Bei dem Beispiel von @stefanFarnetani würdest du aber schon Überschriften verlangen:

Überschrift: Ein tolles Event Zweizeiliger Absatz: Warum kann die Eins nicht lügen? Weil sie immer allein steht!

Und auf einer anderen Seite, wo bzgl. des Moduls der Zweizeiler weggelassen wird, meinst du, es kann jeweils nur ein Link sein? Ohne semantische Struktur-Auszeichnung?

3 Links sind sicher grenzwertig, Aber grundsätzlich ist eine Aufzählung von Links, die visuell Kacheln sind, aber ohne CSS eine Aufzählung von Links eine Liste? Die visuelle Gestaltung spielt bei semantischer Einschätzung ja keine Rolle.

Überschrift: Veranstaltungtipps Link 1 Link 2 Link 3 Link 4

Ob man innerhalb einses Angebots beim gleichen Modul jetzt eine unterschiedliche Umsetzung verlangen kann, wie gesagt, da bin ich auch unsicher.

[johannesFischer84]

@johannesFischer84 Nur damit es keine Missverständnisse gibt: Bei dem Beispiel von @stefanFarnetani würdest du aber schon Überschriften verlangen: Überschrift: Ein tolles Event Zweizeiliger Absatz: Warum kann die Eins nicht lügen? Weil sie immer allein steht!

Sonja, ich finde die Überschrift hier nicht falsch, weil etwas dahinter folgt. Jedoch sehe ich sie wegen dem kurzen Text dahinter nicht als verpflichtend an. Bei besonderer optischer Darstellung wäre z. B. auch eine Auszeichnung mit strong möglich.

Und auf einer anderen Seite, wo bzgl. des Moduls der Zweizeiler weggelassen wird, meinst du, es kann jeweils nur ein Link sein? Ohne semantische Struktur-Auszeichnung?

Der Link ist im Grunde auch schon eine Semantik, obwohl das bei Bedienelementen zu WCAG 4.1.2 gehört (Rolle). Wenn optisch keine Liste erkennbar ist, wäre eine Listenauszeichnung zwar hilfreich und ich würde es mindestens als Hinweis geben. Entsprechend der genannten WCAG-Technik H48 würde ich es vielleicht auch auf "eher erfüllt" setzen, aber nicht auf eine schlechtere Bewertung, weil ich denke, dass die WCAG das nicht klar fordern.

Aber grundsätzlich ist eine Aufzählung von Links, die visuell Kacheln sind, aber ohne CSS eine Aufzählung von Links eine Liste? Die visuelle Gestaltung spielt bei semantischer Einschätzung ja keine Rolle.

Das Erfolgskriterium WCAG 1.3.1 lautet: "Information, structure ... conveyed through presentation ...". Mit dem Wort "presentation" kommt es auf die Darstellung an. Und im Understanding-Dokument wird zu Beginn auch erwähnt, dass es darauf ankommt, dass visuell oder auditiv Wahrgenommenes erhalten bleiben soll, wenn die Darstellung vom sehenden Nutzer auf den Screenreader-Nutzer übergeht. Das bedeutet für mich schon, dass die visuelle Darstellung für die HTML-Auszeichnung eine Rolle spielt. Der sehende Nutzer muss es als Liste wahrnehmen, damit es im HTML als Liste ausgezeichnet werden muss. Man kann eine Darstellung von Kacheln auch als Grauzone sehen, ob man das optisch als Liste erkennt oder nicht. Aber gerade weil es nicht so klar geregelt ist und es sich bei den Teaser-Kacheln auch nicht um die wichtigsten Elemente handelt, würde ich hier eine Liste nicht streng einfordern.

[MarcHaunschild]

@johannesFischer84 Nur damit es keine Missverständnisse gibt: Bei dem Beispiel von @stefanFarnetani würdest du aber schon Überschriften verlangen: Überschrift: Ein tolles Event Zweizeiliger Absatz: Warum kann die Eins nicht lügen? Weil sie immer allein steht!

Sonja, ich finde die Überschrift hier nicht falsch, weil etwas dahinter folgt. Jedoch sehe ich sie wegen dem kurzen Text dahinter nicht als verpflichtend an. Bei besonderer optischer Darstellung wäre z. B. auch eine Auszeichnung mit strong möglich.

Also das sieht dann aus wie eine Überschrift dort wo eine Überschrift (für mich) auch hingehört. Hier finde ich eine hx zwingend zu verwenden. Du belegst das ja selber:

Das Erfolgskriterium WCAG 1.3.1 lautet: "Information, structure ... conveyed through presentation ...". Mit dem Wort "presentation" kommt es auf die Darstellung an. Und im Understanding-Dokument wird zu Beginn auch erwähnt, dass es darauf ankommt, dass visuell oder auditiv Wahrgenommenes erhalten bleiben soll, wenn die Darstellung vom sehenden Nutzer auf den Screenreader-Nutzer übergeht.

Auch von der Praxis her (von Überschrift zu Überschrift zu springen) macht es absolut Sinn und semantisch ebenfalls.

Für mich wäre das ein ganz klarer Verstoß.

[johannesFischer84]

Also das sieht dann aus wie eine Überschrift dort wo eine Überschrift (für mich) auch hingehört. Hier finde ich eine hx zwingend zu verwenden. Du belegst das ja selber

Ja, man kann es als Überschrift ansehen. Aber wenn da nur ein Zweizeiler dahinter folgt, finde ich die Semantik Überschrift hier nicht eindeutig bzw. nicht klar gegeben. Marc, würdest du dann eine Auszeichnung von "Ein tolles Event" mit strong statt einem Überschriftselement als Fehler werten? Das Springen von Überschrift zu Überschrift kann sinnvoll sein. Aber je nach Anzahl der Kacheln kann es vielleicht auch nervig bzw. unübersichtlich sein mit so vielen Überschriften, die auch je nach Seite vielleicht weniger wichtige Inhalte haben.

[MarcHaunschild]

Also das sieht dann aus wie eine Überschrift dort wo eine Überschrift (für mich) auch hingehört. Hier finde ich eine hx zwingend zu verwenden. Du belegst das ja selber

Ja, man kann es als Überschrift ansehen. Aber wenn da nur ein Zweizeiler dahinter folgt, finde ich die Semantik Überschrift hier nicht eindeutig bzw. nicht klar gegeben. Marc, würdest du dann eine Auszeichnung von "Ein tolles Event" mit strong statt einem Überschriftselement als Fehler werten?

Ich kann mir einen Fall denken, wo ich sage, dass ist ein "eher erfüllt" - wenn die fette Auszeichnung per CSS entfernt wird. Als Neuling im Verbund würde ich mich dazu mit der Qs beraten. Aber wenn es aussieht wie eine Überschrift, muss es mMn auch so ausgezeichnet sein.

Das Springen von Überschrift zu Überschrift kann sinnvoll sein. Aber je nach Anzahl der Kacheln kann es vielleicht auch nervig bzw. unübersichtlich sein mit so vielen Überschriften, die auch je nach Seite vielleicht weniger wichtige Inhalte haben.

Aber die Alternative wäre dann die Kacheln wie anzuspringen? Komplett lesen, wäre ja noch nerviger...

In einer liste könnte man noch navigieren, man kann auch ständig weiter springen, würde dann aber bei jedem Textelement landen, statt "nur" bei den vielen Überschriften.

Um eine Seite zu "scannen" würde ich das wohl bevorzugen. Was ich schätze wäre aber kein Bewertungskriterium. ;-)

Wie gesagt würde ich wohl auch zu einer völlig anderen Auszeichnung tendieren. Ich bin ein großer Fam von Beschreibungslisten wo immer es um solche Pärchen geht.

Wobei ich jetzt nicht weiß, wie man da drin mit Screenreadern navigiert. gibt es da die Möglichkeit von dt zu dt zu springen? Und kennt die der "durchschnittliche" Nutzer überhaupt?

[anatom5]

Ich plädiere dafür, darauf zu schauen, was die Intention des Prüfschritts ist. Zitat: "The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes." [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.htm]. Die Gestaltung ist dabei aus meiner Sicht nicht entscheiden, weil sie sich ändern kann oder gegebenenfalls auch nur für visuell orientierte Menschen vorhanden ist. Trotzdem muss das "Aussehen" semantisch sinnvoll abgebildet werden.

Beispiel: Eine Liste mit fünf Links kann aus meiner Sicht immer nur eine Auflistung sein. Welche semantische Auszeichnung wäre sonst sinnvoll, die der visuellen Darstellung in Form einer Liste am nächsten käme? Gleiches gilt für die Verwendung von Überschriften. Ich bin mittlerweile auch der Meinung, dass Überschriften nur dann Überschriften sind, wenn sie auch nachfolgenden Inhalt überschreiben. Das muss nicht viel sein, aber ein kleiner Passus sollte es schon sein. Mehrere Teaserboxen mit Bild und Linktext (der aussieht wie eine Überschrift), werden aus meiner Sicht am ehesten durch Listenstruktur repräsentiert. Um bei Stefans Beispiel zu bleiben, wäre die globale Überschrift dieser Teaserboxen vermutlich "Veranstaltungen". Die Teaserboxen selber repräsentieren dann unter dieser Überschrift einfach nur die Auflistung der Veranstaltungen. Anders sieht es aber aus, wenn es zu den jeweiligen Veranstaltungen innerhalb der Teaserboxen jeweils noch eine kurze Beschreibung gibt. Dann fungieren die erkennbaren Überschriften als echte Überschriften zu der Beschreibung. Aber auch hier könnte man das ganze mit einer Liststruktur kombinieren. Wenn die Listenstruktur aber dann fehlt, ist es aus meiner Sicht kein Fehler, weil die semantische Struktur über die Überschriften abgebildet wird. Das Ganze ist ja auch für 9.2.4.1 Bereiche überspringbar relevant.

[sprungmarker]

Gibt es dazu schon einen Konsens - das ist eine Frage, die relativ häufig bei einem BIK-Test auftaucht - auch von Kunden dann rückgefragt wird. Etwa auch Karusselle, die nur Überschriften enthalten etc.