BIK BITV-Test

* Gibt an, dass der BIK BITV-Test noch Verbesserungsvorschläge beinhaltet.

Bookmarklet: Text Spacing

Liebe Tester:innen bitte lest vor dem 9. BIK BITV-Test folgende Hinweise.

Refactoring Eingabefelder

Wir haben ein umfangreiches Refactoring an den Eingabefeldern vorgenommen, um die Developer Experience deutlich zu verbessern. Hierzu wurde alle Eingabefeldtypen gemäß der W3C-Klassifizierung separiert.
Durch die Überarbeitung der Eingabefelder wurden jetzt auch noch mehr Eingabefeldtypen umgesetzt: checkbox, color, date, datetime-local, email, file, month, number, radio, password, range, search, text, tel, time, url und week
Darüber hinaus wurde das Label eines Eingabefeldes flexibler gemacht. Es kann jetzt im Label individuelles HTML verwendet werden. Wodurch auch Links oder andere Anforderungen am Label umgesetzt werden können.

Refactoring Icon

Wir haben festgestellt, dass wir mit einer einzigen Icon-Font nicht flexibel genug aufgestellt sind. Daher haben wir eine noch generischere Icon-Komponente umgesetzt, der nun egal ist, welche Icon-Font es verwendet. Es stellt, aber unabhängig davon weiterhin sicher, dass Icons für die Barrierefreiheit korrekt ausgezeichnet werden. Die Icofont-Komponent wird dadurch überflüssig und wird in der RC-Phase entfernt.

Extrem lange Texte und Wörter

Grundsätzlich können extrem lange Texte und Wörter zum Bruch des Layouts führen und somit die Lesbarkeit der Inhalte verschlechtern. Bei den Navigationsstrukturen haben wir jeweils einen extrem langen Text und ein extrem langes Wort verwendet, um eine potenzielle Falschverwendung sichtbar zu machen und die Robustheit KoliBri's zu verbessern. Um extrem lange Texte und Wörter in allen Struktur im Griff zu behalten, haben wir folgende CSS-Definitionen standardmäßig bei allen Komponenten gesetzt: hyphens: auto;

Text-Entscheidung zum Fokus-Rahmen

Wir haben darüber debattiert, wie die Darstellung des Fokus-Rahmens aus Sicht der Barrierefreiheit am besten ist. Einerseits wird der außenstehende Fokus-Rahmen abgeschnitten, weil die KoliBri-Komponenten stets 0 Außenabstand haben. Andererseits ist ein nach innen verschobener Fokusrahmen zwar nicht mehr abgeschnitten, aber dann wieder teilweise schlechter erkennbar. Wir haben in der Debatte gemeinsam entschieden, dass der Fokus-Rahmen immer bestmöglich erkennbar sein muss. Auch wenn er außerhalb des fokussierten Elements ist. Was ja eben zum besseren Fokus führt. Die Tatsache, dass der Fokus-Rahmen aufgrund fehlenden Außenabstand abgeschnitten wird, wird nicht mehr als Mangel des gewertet.

Tastaturfokus von Standard-Eingabefeld-Aktionen

Die Standard-Eingabefelder des HTML gibt es in verschiedenen Ausprägungen, die mittels des HTML-Attributes type bestimmt werden. Das Problem ist, dass bei manchen Browsern die Schaltflächen-Icons innerhalb der Standard-Eingabefelder nicht fokussierbar und/oder die Eingabesteuerungen nicht barrierefrei sind. Es ist beispielsweise nicht möglich über die Tastatur den Datepicker eines Datum-Eingabefeldes zu öffnen. KoliBri verwendet stets semantisch korrektes Standard-HTML. Der Vorteil hierbei ist, dass bei allen Eingabefeldern mit zusätzlichen Aktionen, stets die Geräte- und Browser-spezifischen Steuerelemente dem/der Nutzer:in angezeigt werden. Dem iPhone nutzer wird genau die Datumsauswahl angezeigt, die er in allen anderen iPhone-Apps auch gewohnt ist. Und genauso gilt das für Nutzer:innen andere Geräte, Betriebssysteme und Browser. Das die Geräte-, Betriebssystem- oder Browser-spezifischen Steuerelemente nun jeweils unterschiedlich barrierefrei sind, darauf hat KoliBri keinen Einfluss. Wir sehen davon ab aus Gründen der Interoperabilität und Standardisierung, derartige Steuerelement durch eine proprietäre Implementierung zu ersetzen und dabei in Kauf zu nehmen, nicht mehr semantisches HTML einsetzen zu können.

  1. Abbr

    Native HTML You can use CSS to style your HTML.

    KoliBri

    Ich bin eine Abbr mit Tooltip oben.

    Ich bin eine Abbr mit Tooltip rechts.

    Ich bin eine Abbr mit Tooltip unten.

    Ich bin eine Abbr mit Tooltip links.

  2. Accordion
    Accordion

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, odit, accusamus id a officia neque omnis facere, corporis amet alias maiores! Laboriosam placeat omnis illo maxime laborum fugiat deserunt mollitia! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos aperiam rem, doloremque cum, explicabo qui reiciendis minima sequi quidem et harum dolorum consequatur tempore id tempora provident quae consequuntur ab! Eingabefeld

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet sint modi possimus.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet sint modi possimus.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet sint modi possimus.

    In den Accordion-Header kann auch noch was komplexeres eingefügt werden.

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas reiciendis.

  3. Alert
    Hier wird Nachricht näher beschrieben. Hier wird der Fehler näher beschrieben. Hier wird der Hinweis näher beschrieben. Hier wird der Erfolg näher beschrieben. Hier wird die Warnung näher beschrieben. Hier wird Nachricht näher beschrieben. Hier wird der Fehler kurz beschrieben. Hier wird der Hinweis kurz beschrieben. Hier wird der Erfolg kurz beschrieben. Hier wird die Warnung kurz beschrieben. Hier wird Nachricht näher beschrieben. Hier wird der Fehler näher beschrieben. Hier wird der Hinweis näher beschrieben. Hier wird der Erfolg näher beschrieben. Hier wird die Warnung näher beschrieben. Hier wird Nachricht näher beschrieben. Hier wird der Fehler kurz beschrieben. Hier wird der Hinweis kurz beschrieben. Hier wird der Erfolg kurz beschrieben. Hier wird die Warnung kurz beschrieben.
  4. Badge Die folgende Komponente managed die Schriftfarbe in Abhängigkeit zur Hintergrundfarbe automatisch.
    Heller Hintergrund
    Dunkler Hintergrund
  5. Breadcrumb
  6. Button
    Der folgende Schalter hat ein abweichendes Aria-Label:
    Speichern Bearbeiten Abbrechen Löschen
  7. Link-Button
    Der folgende Schalter hat ein abweichendes Aria-Label:
    Speichern Bearbeiten Abbrechen Löschen
  8. ButtonGroup
  9. Card

    Test

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas reiciendis.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  10. Details

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    I'll be placed as detailed summary. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, vel? Saepe, pariatur. Aspernatur voluptatibus reiciendis officia soluta? Tempore odio est voluptatum iste dolorum, dolorem, rem fuga, veritatis consequuntur quod quaerat!

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    I'll be placed as detailed summary. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, vel? Saepe, pariatur. Aspernatur voluptatibus reiciendis officia soluta? Tempore odio est voluptatum iste dolorum, dolorem, rem fuga, veritatis consequuntur quod quaerat!

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

  11. Form
    Leeres Formular ohne Hinweis zu Pflichtangaben
    Test (Form)
    Test (KolForm)
    Leeres Formular mit individuellem Hinweis zu Pflichtangaben [Eingabefelder…] Formular mit Standard-Hinweis zu Pflichtangaben [Eingabefelder…]
  12. Heading

    Die Heading-Komponente ist eine elementare Komponente die sehr oft wiederverwendet werden muss, um die verschiedenen Bereiche für die Barrierefreiheit zu beschriften.

    Die Heading-Komponente stellt sicher, dass wir innerhalb KoliBri's die Heading's h1, h2, h3, h4, h5 und h6 dynamisch über alle Komponenten verwenden können.

    Ich bin eine h1-Überschrift Ich bin eine h2-Überschrift Ich bin eine h3-Überschrift Ich bin eine h4-Überschrift Ich bin eine h5-Überschrift Ich bin eine h6-Überschrift
  13. Icon, IconFontAwesome und IconIcofont

    Die generische Icon-Komponente implementiert die Untersützung einer Icon-Font. Hierbei ist die kol-icon-Komponente eine generische Komponente ohne Shadow-Dom. Die Barrierefreiheit wird durch diese Komponente sichergestellt.

    Zusätzlich zu der generischen Icon-Komponente gibt es die konkreten Icon-Komponenten kol-icon-font-awesome und kol-icon-icofont. Diese Komponenten beinhalten keine Logik, sondern verwenden die der generischen Icon-Komponente wieder. Sie kapseln lediglich die jeweilige Icon-Font.

    Hinweis: Die kol-icofont-Komponente ist .

    Die Icon-Komponente stellt sicher, dass die Grafik (Icon) immer mit einem Beschriftung (aria-label) beschrieben werden muss. Dabei wird automatisch die Rolle (img) gesetzt.

    Sollte eine Beschriftung nicht erforlderlich sein, weil beispielsweise eine Beschriftung schon durch ein übergeordnetes Element erfolgt, dann kann das explizit durch die Angabe einer leeren Beschriftung gemacht werden. Wobei hier die Rolle in diesem Fall nicht gesetzt wird.

    Links:
    • https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html
    FontAwesome Mit Aria-Label Ohne Aria-Label Icofont Mit Aria-Label Ohne Aria-Label
  14. Indented-Text

    Indented-Text ist ein eingerückter Text, der z.B. zu einer Erläuterung verwendet werden kann: I'll be placed as detailed summary. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quidem, molestias consequuntur saepe rerum natus sequi unde modi magni laudantium deleniti aliquid quae maiores voluptate iusto earum cum cumque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque reprehenderit similique, at atque facere velit labore.

  15. Input's
    InputCheckbox Ich akzeptiere die Allgemeinen Geschäftsbedingungen. Ich akzeptiere die Allgemeinen Geschäftsbedingungen. Ich akzeptiere die Allgemeinen Geschäftsbedingungen. Ich akzeptiere die Allgemeinen Geschäftsbedingungen. Ich akzeptiere die Allgemeinen Geschäftsbedingungen.
    InputColor
    InputEmail E-Mail-Adresse E-Mail-Adresse (Auto-Vervollständigung) E-Mail-Adresse(n) (Auto-Vervollständigung, Mehrfachauswahl)
    InputFile Datei hochladen Datei(en) hochladen (Mehrfachauswahl)
    InputNumber Zahleneingabe Zahleneingabe (Float) Zahleneingabe (-10 bis 10 in 2er Schritten) InputDate Datum Datum (min) Datum (max) Local-Datetime (Standard) Local-Datetime (mit Sekunden) Monat Woche Zeit (Standard) Zeit (mit Sekunden)
    InputPassword Passwort
    InputRadioGroup
    Anrede Anrede es wird automatisch die 1. Option ausgewählt
    InputRange Schieberegler Schieberegler (mit Raster) Schieberegler (mit Rasterlinien)
    InputText Vorname (Auto-Vervollständigung) Suchbegriff
    Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Icon und Placeholder. Suche Suche Url Telefonnummer
    Select Stimmung (nicht vorbelegt) Stimmung (vorbelegt) Stimmung (Mehrfachauswahl, vorbelegt) Stimmung (nicht vorbelegt) Stimmung (vorbelegt) Stimmung (Mehrfachauswahl, vorbelegt) Mehrfachauswahl
    Textarea Label Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Placeholder. Ausgeblendetes Label Textfeld mit Zähler und maximaler Länge. Textfeld das seine Höhe automatisch anpasst.
    Passwort Text
  16. Link
    Wikipedia Wikipedia

    E-Mail: info@wikipedia.org

  17. Button-Link

    E-Mail:

  18. LinkGroup
  19. Logo

    Im Folgenden wird ein "Zurück zur Startseite"-Link dargestellt:

  20. Modal

    Die Modal-Komponete implementiert die Überlagerungsfunktion (Overlay's). Sie ist so realisiert, dass das Modal unabhängig von dem Überlagerungsinhalt ist. Es kann also nicht nur ein Dialog sondern auch jedes beliebige andere HTML als Überlagerungsinhalt verwendet werden.

    Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sperrung der Inhalte sorgt. Muss es auch eine Möglichkeit bieten, das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen. Das wird durch einen optionalen Schließen-Button rechts oben in der Ecke sichergestellt.

    Beim Öffnen eines Modals, muss der Entwickler:in das aktive Element übergeben, zu dem nach dem Schließen des Modals automatisch der Fokus gesetzt werden soll.

    Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektierbaren Elemente deaktiviert außer die innerhalb des eigenen Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert die sich im Browser-Seitenbereich befinden. Das Fokusieren den Browser-Menü's ist weiterhin möglich.

    Zusätzlich stellt die Komponente sicher, dass die Darstellung beliebiger Inhalte bei beliebiger Zoomstufe barrierefrei bleibt. Hierzu wird ein vertikaler Scoll-Balken bei bedarf verwendet.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Wollen Sie den Vorgang wirklich löschen?

    Klicken Sie einfach rechts oben auf das X.

  21. Nav
  22. Pagination
    Wenn es keine Seiten gibt, dann wird die Pagination wie folgt angezeigt.
  23. Progress
  24. Skip-Nav

    Links sind unsichtbar geschalten
    Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.

  25. Spin
  26. Symbol

    In diesem Satz wird das ☺ vom Screenreader nicht vorgelesen.

    In diesem Satz wird das vom Screenreader vorgelesen.

  27. Table
    2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal (Row- und Col-Span)
    2 Header, Daten Horizontal, Sort and Render
    2 Header, Daten Vertikal, Sort and Render
    Tabelle + Filter Filtern
    Nur Horizontal Header, Daten Horizontal, Pagination
    Nur Horizontal Header, Daten Horizontal, Pagination, leer
    Nur Vertikal Header, Daten Vertikal, Pagination
    Nur Horizontal Header, Daten Horizontal, ohne Pagination
    Nur Vertikal Header, Daten Vertikal, ohne Pagination
    Manuelle Datenbefüllung und Steuerung der Pagination (experimentell)
  28. Tabs
    Die Steuerung eines Tabs erfolgt durch klicken oder Pfeiltasten. Die Umsetzung ist nach W3C umgesetzt:
    • https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
    • https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
    Tab 1
    Tab 1.1
    Tab 2
    Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
    Tab 1
    Tab 2
    Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
    Tab 1
    Tab 2
    Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
    Tab 1
    Tab 2
    Tab 3
    Tab 1
    Tab 2
    Tab 3
  29. Toast

    Die Toast wird anfänglich und oben für kurze Zeit angezeigt.

  30. Tooltip

    Die Tooltip-Komponente implementiert das Gegenstück zum Aria-Label. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.

    Die Tooltip-Komponente wird bei Focus oder Hover angezeigt und dient ausschließlich dem/der sehenden Nutzer:in ohne Screenreader die Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden für die Screenreader versteckt.

    Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange zudem von der Entwicklung sichergestellt wurde, dass der Tooltip-Text auch in gleicher Weise vom Screenreader vorgelesen wird.
  31. Version