Aktuelle Demo

Test 1: Flex & details/summary

The Demo

Tipps zum Testen

Testen Sie dieses Beispiel auch in der Bildschirm-Simulation Ihrer Browser-Tools!
Testen Sie in Phase 1 ohne JS-Support.
Fügen Sie dann den JS-Support hinzu.

(Fokusierbar) Beispiel-Site

(Fokussierbar)

Ändern Sie die Breite der Box! ▶

Ändern Sie die Breite der 🖥 Bildschirm-Simulation! ▶

Verhalten ohne JS

  • Eine reine CSS-Navigation ist mit Einschränkung bedienbar.
  • Es kommt jedoch zu Focus-Verirrung bei Tastaturbedienung.
  • Es gibt keine aria-current="page" Kennzeichnung.

Verhalten mit JS

Ein details polyfill ist eingebunden.

  • Verbesserungen für die Tastatur-Focus
  • aria-current="page" Kennzeichnung ergänzt.
  • Hamburger-Navigation für kleine Screens (automatisch ermittelt)
  • Navigation schliesst bei Klick ausserhalb automatisch.

Bugs und Mängel

  • Bug bereinigt: Bei Shift-TAB sollte ein offenes Details-Element sich schliessen.
  • Bug bereinigt: polyfill für details-Elemente.
  • Change media screen Split wurde ersetzt durch eine JS-Abfrage, ob die nav mehrzeilig ist.
  • Change Testumgebung verbessert
  • Bug: Safari iOS ? Ursache derzeit unbekannt.
  • Der Layer für Untermenues verdeckt die Hauptnavigation (gewöhnungsbedürftig)
  • Kleine ästhetische Artefakte bedingt durch flex

Test1: Syntax

html

<nav><!-- nav ist ein Flex-Container -->
  <!-- Erlaubte Flexkinder -->
  <!-- a -->
  <a href="#">Label</a>
  <!-- details -->
  <details>
    <summary>Title</summary>
    <element><!-- element ist ein Flex-Container -->
      <!-- Flex-Items: a oder details -->
    </element>
  </details>
  <!-- div (zum Gruppieren von Flexkindern) -->
  <div>...</div>
</nav>

Test1: Quellen

html

css

javascript

Warum

Problemstellung

Navigationen werden schneller als erwartet zu anspruchsvollen Gestaltungselementen.

Sobald Klappboxen erforderlich sind, was bei der heutigen Pflicht zu Impressum/DSE/AGB unumgänglich erscheint, ist die partielle Unzugänglichkeit vorprogrammiert.

Der Webdesigner steht einer unbekannten Zahl von Browsern und vom User definierten Eigenarten. Er kann diese unmöglich alle berücksichtigen.
Die funktionelle Darstellung einer Navigation soll deshalb einem Browser übertragen werden können.

Gesucht ist hier die best mögliche Navigation, Die zunächst in einer testumgebung präsentiert wird.

Werkzeuge

  • flex: Flex ist eine Möglichkeit zusammen mit wrap.
    Horizontale Navigationen werden umbrechen. Bei verschachtelten Menus ist man vor der Wahl, das Submenu in den Fluss einzublenden oder einen Layer zu erzeugen.
  • @media rules: es werden Schaltpunkte definiert. Diese können abhängig von em geschrieben werden.
    Regeln erscheinen nur sinnvoll, wo es kein global mögliches Verfahren gibt.
  • details/summary Elemente: Sie erweitern die No-JS-Funktionalität, müssen aber mit JS ergänzt werden.

Verhalten

Property HTML hidden HTML
aria-hidden
CSS
display:none
CSS
visibility:hidden
CSS
opacity:0
CSS
position:absolute;
left:-200vw;
CSS
Box-Masse minimieren
Screenreader inaccessible inaccessible inaccessible inaccessible is read is read is read
TAB / focus() / :focus inaccessible gets Focus inaccessible gets Focus gets Focus gets Focus gets Focus
Mouse/Pointer inaccessible can be hovered inaccessible can be hovered can be hovered unreachable unreachable
:target inaccessible yes yes yes yes yes yes
Eye-View inaccessible visible inaccessible invisible invisible invisible invisible
Layout-Change yes no yes no no yes depends
Browser Permormance cheap cheap cheap cheap cheap can be expensive cheap

Rauf