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!"