Barrierefreie Umsetzung

  • Joomla Version
    Joomla 4
    PHP Version
    PHP 8.2.x
    Hoster
    domainfactory

    Hallo hier geht es eigentlich nicht um ein spezielles Joomlaproblem.
    Das ist eine Fage die sich mit der Barrierefreiheit von Webseiten beschäftigt.

    Ich nutze mittels Bootstrap die Funktion um bestimmte Bereiche via onClick ein/auszublenden.


    z.b.

    <a href="#" data-toggle="collapse" data-target="#phone-bar" aria-haspopup="true" role="menu">

    <img src="telefon.svg" alt="Telefonnummern einblenden" role="img" />

    </a>

    <div id="phone-bar" class="collapse">

    Tourist-Info 1<br /> <i class="fa fa-phone fa"></i> <strong>0333 ....</strong><br />

    Tourist-Info 2<br /> <i class="fa fa-phone fa"></i><strong>0333 ...</strong>

    </div>


    Das funktioniert auch super. Leider öffnet sich die phonebar nicht wenn ich die Seite mit

    der Tab Taste der Tastatur bediene.

    (mit der TAB Taste solte ich alle Links der Seite erreichen können!)
    Die phonebar bleibt aber leider zu!


    Das Einblenden könnte ich mit FOCUS-WiTHIN lösen

    a:focus-within + #phone-bar {display:block;}

    (diese Variante blendet aber nicht ein und aus!)


    Gibt es allgemein einen besseren Ansatz wie ich das umsetzen kann?
    Denke ich zu kompliziert?


    Danke für euer Hilfe

    Holger