Accordion barrierefrei?

  • Hallo,

    aktuell stelle ich ein Website auf Joomla 4 um. Joomla 4 soll ja weitgehend barrierefrei sein, was ich persönlich gut und wichtig finde.


    Bei dem Upgrade arbeite mit dem Nature Template (siehe http://j4.dr-menzel-it.de/). Dort wird nur ein Teil von Bootstrap 5 genutzt, daher habe ich mir die CSS-Angaben für das Accordion bei Cassiopeia gesucht und unter der user.css eingesetzt. Dabei nutze ich das Plugin Seitenumbruch um das Acccordion darzustellen. Es funktioniert.


    Aber mit Chrome kann ich mit der Tab-Taste durch die Website navigieren und sehe immer wo ich gerade bin, da die Buttons/Links immer einem Rahmen mit einer gestrichelten Linie bekommen. Nur nicht bei meinem Accordion. Bei Bootstrap 5 habe ich geschaut, aber hmm das ist mir nicht verständlich. Was ich verstehe ist, dass das Accordion ohne href funktioniert. Was der Grund für den fehlenden gestrichelten Rahmen sein könnte. So sieht der Quelltext aus:

    Leider kann ich die Seite noch nicht ganz online schalten. Aber vielleicht hat ja jemand einen Tipp für mich wie, ich ohne große Fachkenntnisse weiter vorgehen kann.

  • Grundlegend brauchst du nur ein

    Code
    .accordion-button:focus
    {
    
    }

    und trägst halt eine outline-Regel ein oder eine box-shadow-Regel.


    Je nachdem wie viel Bootstrap 5 du verwendest, musst bei outline aufpassen, dass Bootstrap das ungefähr so macht:

    Code
    .accordion-button:focus
    {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    Das outline wird also auf 0 gesetzt.

    Sollte aber in der user.css einfach überschreibbar sein (je nachdem, ob sie wirklich als letzte geladen wird.