Barrierefreiheit

[Markus der 2.]

Hallo, zur Barrierefreiheit (insbes. für Blinde) habe ich folgendes gefunden.

span.inivisble
{
    position: absolute;
    left: -1000px;
    font-size: 0px;
}
a.sprunglink
{
	position: relative;
	left: -99999px;
}
 
a.sprunglink:focus
{
	position: absolute;
	left: 0px;
}


HTML:
<h2 class="invisible">Navigation</h2>

<div id="header">
  <a href="#inhalt" class="sprunglink">Direkt zum Inhalt</a>
  ...
</div>

Wenn ich dies allerdings einbaue, rutscht mein gesamter Inhalt nach unten. Würde in beiden Fällen (invisible und sprunglink) nicht genügen "display: none;"?

[beatovich]

hallo

Hallo, zur Barrierefreiheit (insbes. für Blinde) habe ich folgendes gefunden.

span.inivisble
{
    position: absolute;
    left: -1000px;
    font-size: 0px;
}
a.sprunglink
{
	position: relative;

Hier solltest du bereits position absolute verwenden

left: -99999px;

left: -120vw geht sparsamer mit Ressourcen um.

Aber siehe unten

}

a.sprunglink:focus { position: absolute; left: 0px; }

HTML: <h2 class="invisible">Navigation</h2>

<div id="header"> <a href="#inhalt" class="sprunglink">Direkt zum Inhalt</a> ... </div>

Wenn ich dies allerdings einbaue, rutscht mein gesamter Inhalt nach unten.
Würde in beiden Fällen (invisible und sprunglink) nicht genügen "display: none;"?

Mit display:none kann a nicht fokusiert werden.

Durch das Umschalten von absolut auf relative wird natürlich Platz beansprucht. Das macht sich dann im Layout bemerkbar.

Du solltest nicht mit left arbeiten sondern damit:

{ height:0; width:0; overflow:hidden; }

[Gunnar Bittersmann]

@@beatovich

left: -99999px;

left: -120vw geht sparsamer mit Ressourcen um.

Aber immer noch verschwenderisch.

Du solltest nicht mit left arbeiten sondern damit:

{ height:0; width:0; overflow:hidden; }

Nö. Ich empfehle translate. Wenn man das Erscheinen des Skip-Links animieren möchte, dann hat man’s schon.

LLAP 🖖

[beatovich]

hallo

Nö. Ich empfehle translate. Wenn man das Erscheinen des Skip-Links animieren möchte, dann hat man’s schon.

Gibt's eine Seite die zeigt, inwiefern Browserressourcen bei left bzw transform:translate() verschieden zu Buche schlagen?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Du solltest nicht mit left arbeiten sondern damit:

{ height:0; width:0; overflow:hidden; }

Nö. Ich empfehle translate. Wenn man das Erscheinen des Skip-Links animieren möchte, dann hat man’s schon.

Man könnte auch transition auf height (und width) anwenden, sollte dies aber möglichst nicht tun – aus Gründen der Performanz.

LLAP 🖖

[Gunnar Bittersmann]

@@Markus der 2.

Würde in beiden Fällen (invisible und sprunglink) nicht genügen "display: none;"?

Nein. display: none entfernt die Elemente nicht nur visuell, sondern auch aus dem accessibility tree; d.h. ein Screenreader liest sie nicht vor.

span.inivisble
{
    position: absolute;
    left: -1000px;
    font-size: 0px;
}

Das ist grober Unfug: „a performance hit caused by the need to draw a giant 9999px box offscreen. (Yes, the browser really does this.)“ (Zeldman)

☞ Wie man etwas visuell versteckt

a.sprunglink
{
	position: relative;
	left: -99999px;
}

Dito.

Was aber keinen performance hit verursachen dürfte: Den Skip-Link nach oben aus dem Viewport schieben; und zwar nicht dreiundzwölfzigtausend Pixel, sondern soweit wie nötig: um seine Höhe – 100%. Im Beispiel mit translate.

LLAP 🖖

[MudGuard]

Hi,

span.inivisble

Die i sind hier ungewöhnlich verteilt.

cu,
Andreas a/k/a MudGuard

[Markus der 2.]

@alle Helfer

Jetzt bin ich total verwirrt. Viele Vorschläge der Art "man sollte nicht, man könnte" und dann eine Zeile als Vorschlag, die ich nicht einordnen kann. Was ist nun eine sinnvolle Lösung? Der Vorschlag von beatovich?

span.invisble { height:0; width:0; overflow:hidden; } und zusätzlich position: absolute;

a.sprunglink { height:0; width:0; overflow:hidden; } und zusätzlich position: relative;

a.sprunglink:focus { ......??? ....}

[Gunnar Bittersmann]

@@Markus der 2.

Was ist nun eine sinnvolle Lösung? Der Vorschlag von beatovich?

Vermutlich nicht, sondern der von The A11Y Project (der auch an anderen Stellen im Web zu finden ist).

a.sprunglink { height:0; width:0; overflow:hidden; } und zusätzlich position: relative;

Nö. Was verwirrt dich an meinem Beispiel des Skip-Links?

LLAP 🖖

[Markus der 2.]

@@Markus der 2.

Nö. Was verwirrt dich an meinem Beispiel des Skip-Links?

Mich verwirrt die gesamte Umgebung. Sind neben den Angaben in #skip-link und #skip-link:focus weitere CSS-Angaben nöig? Da gibts noch so viele aria-Angaben, die ich natürlich auch nicht kenne. Ist in dem Beispiel eine bestimmte Struktur des HTML nötig, Ist ein Teil des vorhandenen Javascript nötig. Du merkst, genug, um einen Nicht-Profi zu verwirren. Ich hatte mich so gefreut über das ursprünglich von mir gefundene übersichtliche - leider wohl nicht funktionierende - Beispiel mit wenigen Zeilen im CSS und noch weniger im HTML. Und was, wenn der Anwender kein Javascript zulässt?

[Gunnar Bittersmann]

@@Markus der 2.

Mich verwirrt die gesamte Umgebung. Sind neben den Angaben in #skip-link und #skip-link:focus weitere CSS-Angaben nöig?

Nein, für den Skip-Link ist das alles.

Da gibts noch so viele aria-Angaben, die ich natürlich auch nicht kenne. Ist in dem Beispiel eine bestimmte Struktur des HTML nötig, Ist ein Teil des vorhandenen Javascript nötig.

Die ARIA-Attribute und das JavaScript sind fürs Auf- und Zuklappen des Menüs bei schmalem Viewport und haben mit dem Skip-Link nichts zu tun.

LLAP 🖖

[Markus der 2.]

Hallo Gunnar,

ich habe Dein Beispiel jetzt bei mir umgesetzt.

Es gilt aber wie in meinem Eingangbeitrag:

Wenn ich dies allerdings einbaue, rutscht mein gesamter Inhalt nach unten.

[Gunnar Bittersmann]

@@Markus der 2.

Wenn ich dies allerdings einbaue, rutscht mein gesamter Inhalt nach unten.

Was soll man dazu sagen außer: „Lass mal sehen“?

Was man eigentlich nicht sagen sollten müsste.

LLAP 🖖

[Markus der 2.]

Hallo Gunnar, bevor ich meine Seite hier zeige, muss ich noch zahlreiche personenbezognen und geschützte Infos rausnehmen. Aber ich habe noch einmal Dein Beispiel getestet. Wie kann ich dort den link auslösen? Auf meiner Seite wird der Link nach Betätigung der Tab-Tast sichtbar und ich kann den Link anklicken.

[Gunnar Bittersmann]

@@Markus der 2.

Aber ich habe noch einmal Dein Beispiel getestet. Wie kann ich dort den link auslösen?

Mit [Return].

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Mich verwirrt die gesamte Umgebung. Sind neben den Angaben in #skip-link und #skip-link:focus weitere CSS-Angaben nöig?

Nein, für den Skip-Link ist das alles.

Ich hab da mal was in (B)Logbuch geschrieben: Skipper ahoj!

LLAP 🖖

[Matthias Scharwies]

Servus!

Ich hab da mal was in (B)Logbuch geschrieben: Skipper ahoj!

Vielen Dank!

Das klingt sehr interessant. Ich werde es auch aus dem Wiki heraus verlinken!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hab da mal was in (B)Logbuch geschrieben: Skipper ahoj!

Im Artikel das fehlende tabindex="-1" für IE und iOS-Geräte ergänzt.

☞ Your skip links are broken

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Im Artikel das fehlende tabindex="-1" für IE und iOS-Geräte ergänzt.

Frage an @Matthias Apsel oder wer immer sich noch damit auskennt:

Während die automatische Ersetzung von ' durch ‚ bzw. ‘ und von " durch „ bzw. “ bislang bei ‚main‘-Element u.dgl. nur ein unschönes Dorn im Auge war, geht ‚tabindex=„-1“‘ gar nicht.

Wie bekommt man das so hin, dass ' und " erhalten bleiben? Oder noch besser: dass man Inline-Code als solchen formatieren kann – wie hier im Forum mit `?

LLAP 🖖

PS: @Felix Riesterer (danke für den wohlwollenden Kommentar) fragte nach Syntax-Highlighting. Geht das?

[Matthias Scharwies]

Servus!

@@Gunnar Bittersmann

Im Artikel das fehlende tabindex="-1" für IE und iOS-Geräte ergänzt.

Danke!

Während die automatische Ersetzung von ' durch ‚ bzw. ‘ und von " durch „ bzw. “ bislang bei ‚main‘-Element u.dgl. nur ein unschönes Dorn im Auge war, geht ‚tabindex=„-1“‘ gar nicht.

Wie bekommt man das so hin, dass ' und " erhalten bleiben? Oder noch besser: dass man Inline-Code als solchen formatieren kann – wie hier im Forum mit `?

Ich hab's mal mit <code>..</code> ausgezeichnet, dann klappt's.

PS: @Felix Riesterer (danke für den wohlwollenden Kommentar) fragte nach Syntax-Highlighting. Geht das?

Evtl. übernimmt der Blog ja CKs Software - bis dahin (Diskussion auf dem SELF-Treffen) passiert wohl nicht viel.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wie bekommt man das so hin, dass ' und " erhalten bleiben?

Durch <span class="noTypo"></span>

Oder noch besser: dass man Inline-Code als solchen formatieren kann – wie hier im Forum mit `?

mit <code></code>

Bis demnächst
Matthias

[beatovich]

hallo

Ich hab da mal was in (B)Logbuch geschrieben: Skipper ahoj!

Im Artikel das fehlende tabindex="-1" für IE und iOS-Geräte ergänzt.

☞ Your skip links are broken

Warum tabindex=-1?

Warum nicht tabindex=0?

Wenn es ein Link-Problem ist, warum nicht einmal global einen Fix für alle Anker durchführen?

[Matthias Apsel]

Hallo beatovich,

Warum tabindex=-1?

Warum nicht tabindex=0?

Es sind Zahlen zwischen -1 und 32767 erlaubt.

• Ein Wert von -1 nimmt ein Element aus der Tabulator-Fokussierung, sodass es via Tabulator effektiv nicht mehr fokussierbar ist.
• Ein Wert von 0 aktiviert ein Element für die Tabulator-Fokussierung, verändert aber nicht dessen Position in der Reihenfolge.
• Ein Wert >0 aktiviert die Tabulator-Fokussierung und legt die Reihenfolge fest.

Bis demnächst
Matthias

[beatovich]

hallo

Hallo beatovich,

Warum tabindex=-1?

Warum nicht tabindex=0?

Es sind Zahlen zwischen -1 und 32767 erlaubt.

• Ein Wert von -1 nimmt ein Element aus der Tabulator-Fokussierung, sodass es via Tabulator effektiv nicht mehr fokussierbar ist.
• Ein Wert von 0 aktiviert ein Element für die Tabulator-Fokussierung, verändert aber nicht dessen Position in der Reihenfolge.
• Ein Wert >0 aktiviert die Tabulator-Fokussierung und legt die Reihenfolge fest.

Soweit klar, aber das beantwortet nicht meine Frage. Warum soll die Fokusierbarkeit entzogen werden, respektive JS vorbehalten werden?

[Gunnar Bittersmann]

@@beatovich

Warum tabindex=-1?

Soweit klar, aber das beantwortet nicht meine Frage. Warum soll die Fokusierbarkeit entzogen werden, respektive JS vorbehalten werden?

Wird nicht. Elemente mit tabindex="-1" sind nicht (direkt!) per Tastatur fokussierbar, können aber anderweitig in den Fokus rücken, bspw. durch einen Link dorthin oder per JavaScript.

“For non-interactive elements that need to receive focus but that are not meant to be part of the sequential focus navigation order (for instance, the target of a skip link, or a container element that needs to be programmatically focused via JavaScript), authors should use a negative value of tabindex="-1".” [Spec]

LLAP 🖖

[beatovich]

hallo

Wird nicht. Elemente mit tabindex="-1" sind nicht (direkt!) per Tastatur fokussierbar, können aber anderweitig in den Fokus rücken, bspw. durch einen Link dorthin oder per JavaScript.

Kommt meine andere Frage:

Mit welcher feature detection kann ich alle Navigationsziele einer Seite mit tabindex=-1 versehen?

[Gunnar Bittersmann]

@@beatovich

Kommt meine andere Frage:

Mit welcher feature detection kann ich alle Navigationsziele einer Seite mit tabindex=-1 versehen?

Ich verstehe die Frage nicht.

LLAP 🖖

[beatovich]

hallo

Kommt meine andere Frage:

Mit welcher feature detection kann ich alle Navigationsziele einer Seite mit tabindex=-1 versehen?

Ich verstehe die Frage nicht.

Hier gehts doch um Bugfix. Wie kann ich den Bug automatisiert feststellen?

[Gunnar Bittersmann]

@@beatovich

Hier gehts doch um Bugfix.

Wir sollten damit aufhören, Hacks zur Vermeidung des Wirksamwerdens von Browserbugs als Fix zu bezeichnen. Gefixt werden müssen die Bugs von den jeweiligen Browserherstellern.

Wie kann ich den Bug automatisiert feststellen?

Warum willst du das tun? tabindex="-1" per JavaScript nur in Browsern ergänzen, die von den Bugs betroffen sind? Warum die Sache verkomplizieren? tabindex="-1" für alle tut niemandem weh.

LLAP 🖖

[beatovich]

hallo

Wir sollten damit aufhören, Hacks zur Vermeidung des Wirksamwerdens von Browserbugs als Fix zu bezeichnen. Gefixt werden müssen die Bugs von den jeweiligen Browserherstellern.

Wie kann ich den Bug automatisiert feststellen?

Warum willst du das tun? tabindex="-1" per JavaScript nur in Browsern ergänzen, die von den Bugs betroffen sind? Warum die Sache verkomplizieren? tabindex="-1" für alle tut niemandem weh.

Es nicht zu tun macht eventuell noch weniger weh. Entweder ist das Problem für die betroffenen User die Norm und sie finden ihren Workaround, oder es existiert nicht.

[Gunnar Bittersmann]

@@beatovich

Es nicht zu tun macht eventuell noch weniger weh. Entweder ist das Problem für die betroffenen User die Norm und sie finden ihren Workaround, oder es existiert nicht.

Mit anderen Worten: Nutzer ist ja selbst schuld, wenn sie einen buggy Browser verwendet?

LLAP 🖖

[beatovich]

hallo

Es nicht zu tun macht eventuell noch weniger weh. Entweder ist das Problem für die betroffenen User die Norm und sie finden ihren Workaround, oder es existiert nicht.

Mit anderen Worten: Nutzer ist ja selbst schuld, wenn sie einen buggy Browser verwendet?

Nein. Ich habe einen Vertrag hier und der heisst: Ich darf den Inhalt des Users nicht verändern!

[Gunnar Bittersmann]

@@Matthias Apsel

Es sind Zahlen zwischen -1 und 32767 erlaubt.

Wie kommst du denn darauf? Die Spec sagt nichts von einer Beschränkung. Es sind auch kleinere Zahlen als −1 erlaubt: −2, −3, …

Möglicherweise beschränken Browserimplementierungen den Wertebereich; dann wohl aber auf −32768 bis 32767.

Es sind aber i.a.R. nur zwei Werte sinnvoll: 0 und −1. Denn …

Ein Wert >0 aktiviert die Tabulator-Fokussierung und legt die Reihenfolge fest.

… das sollte man nicht tun. (Es sei denn, man weiß sehr genau, was man tut.) Die Spec warnt ausdrücklich davor.

[tabindex]:not([tabindex="0"]):not([tabindex="-1"])
{
	ERROR: 'falscher Wert fürs tabindex-Attribut; sollte 0 bzw. -1 sein';
	outline: 0.5rem solid red;
}

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wie kommst du denn darauf? Die Spec sagt nichts von einer Beschränkung. Es sind auch kleinere Zahlen als −1 erlaubt: −2, −3, …

Ich habs im Wiki geändert. Danke für den Hinweis.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Es sind Zahlen zwischen -1 und 32767 erlaubt.

Wie kommst du denn darauf? Die Spec sagt nichts von einer Beschränkung.

Früher mal

Es sind aber i.a.R. nur zwei Werte sinnvoll: 0 und −1. Denn …

[tabindex]:not([tabindex="0"]):not([tabindex="-1"])
{
	ERROR: 'falscher Wert fürs tabindex-Attribut; sollte 0 bzw. -1 sein';
	outline: 0.5rem solid red;
}

Jeder negative Wert sorgt dafür, dass das Element fokusiert, jedoch nicht mithilfe der Tastaturnavigation angesteuert werden kann (https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute#attr-tabindex), steht auch in der von dir verlinkten Spec etwas weiter unten.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@beatovich

Wenn es ein Link-Problem ist, warum nicht einmal global einen Fix für alle Anker durchführen?

Du hattest den Artikel in den paar Minuten aufgerufen, in denen er fehlerhaft war und das tabindex-Attribut an den Skip-Links anstatt an ihrem Ziel hingen? (Der Webrocker hat mich auf den Fehler aufmerksam gemacht.)

LLAP 🖖