Markus der 2.: Barrierefreiheit

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;"?

  1. 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; }

    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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?

        --
        Neu im Forum! Signaturen kann man ausblenden!
      2. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Hi,

    span.inivisble
    

    Die i sind hier ungewöhnlich verteilt.

    cu,
    Andreas a/k/a MudGuard

  4. @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 { ......??? ....}

    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @@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?

        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. 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.

            1. @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. 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.

                1. @@Markus der 2.

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

                  Mit [Return].

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. @@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 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. 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

              --
              "An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!"
            2. @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. @@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?

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. 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

                  --
                  "An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!"
                2. 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

                  --
                  Rosen sind rot.
              2. 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?

                --
                Neu im Forum! Signaturen kann man ausblenden!
                1. 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

                  --
                  Rosen sind rot.
                  1. 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?

                    --
                    Neu im Forum! Signaturen kann man ausblenden!
                    1. @@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 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. 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?

                        --
                        Neu im Forum! Signaturen kann man ausblenden!
                        1. @@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 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. 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?

                            --
                            Neu im Forum! Signaturen kann man ausblenden!
                            1. @@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 🖖

                              --
                              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                              1. 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.

                                --
                                Neu im Forum! Signaturen kann man ausblenden!
                                1. @@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 🖖

                                  --
                                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                  1. 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!

                                    --
                                    Neu im Forum! Signaturen kann man ausblenden!
                  2. @@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 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. 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

                      --
                      Rosen sind rot.
                    2. 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

                      --
                      Rosen sind rot.
                2. @@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 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann