Barrierefreiheit

Hallo, ich habe da ein komisches Problem.

Joomla! 5.2.4
PHP Version 8.2.27
Visforms Subscription Version 5.3.1

Ich will ein Formular barrierefrei bekommen, also so, dass eingeschränkte Menschen das Formular nur mit derTastatur bedienen können. Nomalerweise klappt das bei einfachen Formularen ja auch. Da ist dann um das entsprechende Feld ein Rahmen und man weiß, wo man gerade ist.

Jetzt habe ich aber ein etwas komlizierteres Formular mit z.B. Schaltkästchen, welche, wenn man sie klickt, etwas in Abhängkeit stehendes auslösen. Das funktioniert zwar, aber ich sehe bei diesen Kästchen keinen Rahmen, wenn man sich draufnavigiert hat.
Man weiß also nicht, dass man sich jetzt "über" dem Kästchen befindet und es per Leertaste aktivieren könnte.
Ich habe noch nicht herausgefunden, wie man das bewerkstelligen kann, damit man diese Rahmen sieht.
Gibt es hiefür irgendeinen Trick, wie man das sichtbar machen könnte (bzw. optisch anpassen oder so)?

Ich würde mich über einen dahingehenden Tipp sehr freuen.

Beste Grüße
bm


 

Hallo Benno,

vielen Dank für die Versions-Informationen.

Die Barrierefreiheit besitzt in Visforms einen hohen Stellenwert.
Mit der Version Visforms 5.1.0 wurde die bereits bestehende Barrierefreiheit komplett überarbeitet und die Konformität mit den WAI Standards sichergestellt.

Du kannst mit Visforms Formulare erstellen, die barrierefrei sind und internationalen Standards (WAI, WCAG), europäischen (EAA) und deutschen (BFSG) gesetzlichen Vorgaben genügen.
Mit Visforms lassen sich alle Anforderungen bis einschließlich der höchsten Stufe WCAG AAA erfüllen.

Es gibt dafür eine eigene Seite in der Dokumentation.
Visforms und Barrierefreiheit:
docs.joomla-5.visforms.vi-solutions.de/d...-formulare-erstellen

Enthalten sind auch konkrete Tipps für die Erstellung barrierefreier Formulare, was für dich besonders interessant sein könnte.
Das war für uns wichtig, denn Visforms hindert dich nicht daran, ein nicht barrierefreies Formular zu erstellen.
Barrierefreie Formulare erstellen:
docs.joomla-5.visforms.vi-solutions.de/d...-formulare-erstellen

Um dir konkret zu helfen, benötige ich entweder einen Link zu einem betroffenen Formular oder ein Akeeba-Backup der Seite.
Deine Angaben reichen dafür leider nicht aus.
Ich muss die Formular-Situation zumindest in den Browser-Entwickler-Tools analysieren können.

Liebe Grüße, Ingmar

Hallo Ingmar,
besten Dank für deine Antwort.
Dieses Barrierefreiheitsthema ist ziemlich komplex und ich vestehe fast, warum das gerade (noch) so ignoriert wird. Man muss sich da eine Weile mit auseinandersetzen, um da halbwegs reinzufinden. Aber schließlich wird es ja Ende Juni 2025 für so manchen Webseitebtereiber zur Pflicht, die Webseite barrierefrei zu bekommen.

Hier ist der Link zur besagten Webseite, bzw. zum Formular: www.tonnenblitz.de/bestellen#2
Das Design der Seite hat eine Agentur erstellt und ich musste das so umsetzten, wie es mir vorgegeben wurde.
Das Formular allerdings ist ein "Bollwerk" welches schon vorher da war und innerhalb von drei Jahren zu diesem komplizierten Ding gewachsen ist. Da läuft im Hintergrund Einiges, wie z.B. die Möglichkeit, Daten in ein anderes Verwaltungsprogramm zu übertragen und solche Dinge. Deshalb sollte das auch weiter verwendet werden.
Ich muss zugeben, dass ich mir nicht sicher bin, ob man das überhaupt barrierefrei bekommt. Es hakt ja schon bei den ersten beiden Optionen, weil ich es einfach nicht hinbekomme, diese mit der Tastatur sichbar anzusteuern.
Am liebsten wäre mir, wenn es einen einfach CSS-Trick gäbe, um das sichtbar zu machen oder sowas.

Hast du da eine Idee?
LG
Benno

Hallo Benno,

vielen Dank für den Link zum Formular.

Die Darstellung des Input-Fokus wird nicht durch Visforms bestimmt.
Die Darstellung des Input-Fokus wird durch dein UiKit-Template festgelegt.

Es enthält bezüglich Input-Fokus und Selektion (etwa von Text) CSS-Regeln (uikit.cc, ab Zeile 32):
Die Regel etwa zur Text-Selektion hat auch einen Fehler.
Selektierter Text kann ebenfalls zumindest kaum gesehen werden, da die Farbe auf Weiß gestellt ist.
Ähnlich wird es sich beim Input-Fokus verhalten.

Für weitere Detail müsstest du dich bitte an den Herausgeber des Templates wenden.
Um festzustellen, warum ganz genau auch der Input-Fokus nicht zu sehen ist, müsste ich jetzt auch relativ lange suchen und rumprobieren.
Ich vermute, es hängt mit dem 'outline: none;' zusammen.

www.w3schools.com/cssref/sel_focus.php
www.w3schools.com/cssref/sel_focus-visible.php
www.w3schools.com/cssref/sel_selection.php


Liebe Grüße, Ingmar

Hallo Benno,

Nachtrag:

Die anklickbaren Links 'Dann rufen Sie uns bitte an' und 'schicken uns eine Mail' haben ähnliche Probleme und sind ebenfalls gar nicht erkenntlich.
Sie sind beide selbst dann kaum erkenntlich, wenn ich direkt mit der Maus darüber fahre, weil wegen Weiß.

Liebe Grüße, Ingmar

Hallo Ingmar,
also die Uikit-CSS sind wohl nicht der Grund. Ich habe den Abschnitt einfach mal testhalber ganz rausgenommen, aber es hat sich nichts verändert.

Dennoch war für mich dein Hinweis wertvoll, weil mir das jetzt die Suche nach dem Übel erleichtern wird.
Deshalb möchte ich mich herzlich für deine Hilfe bedanken.

Liebe Grüße
Benno