Blogstruktur und Barrierefreiheit

  • Hallo zusammen,


    meine Seite https://marburger-schlosskonzerte.de/ läuft mit J4.2.6, PHP 8.1, Template Cassiopeia.


    Mit dem Relaunch zu J4 vor einigen Wochen habe ich zum ersten Mal mit Kategorieblogs gearbeitet. Dadurch ist folgende Struktur entstanden:


    Die Startseite enthält

    - Einleitungstext (Haupteintrag)

    - Konzert 1: Eckdaten + Weiterlesen-Button

    - Konzert 2: Eckdaten + Weiterlesen-Button

    - Konzert 3: Eckdaten + Weiterlesen-Button

    usw.


    Wenn man nun auf Weiterlesen klickt, öffnet sich der Blogbeitrag unter einem Menüpunkt. Das ist dann also eine andere Seite. Die Überschrift des Konzerts ist entsprechend als H1 formatiert.


    Daraus resultiert aber, dass auf der Startseite mehrere H1-Überschriften stehen: die Überschrift des Einleitungstextes und aller Konzerte einer Saison. Dies aber ist eigentlich nicht vorgesehen; eine barrierefreie Struktur sieht pro Seite nur genau eine H1-Überschrift vor. Würde ich die Konzerte auf der Startseite mit H2 formatieren, hätte ich auf den Seiten, die sich durch das „Weiterlesen“ öffnen, gar keine H1. Das wäre auch nicht barrierefrei.


    Die Konzertreihe, die ich ehrenamtlich veranstalte, findet in Marburg statt, und Marburg hat eine bedeutende Blinden- und Sehbehinderten-Community, deswegen ist es mir wichtig, den Webauftritt auch wirklich so barrierearm wie möglich zu gestalten. Barrierefreiheit ist ja in aller Munde, aber hier geht es wirklich um mehr als nur ein freundliches Signal…


    Hat jemand eine Lösung für das Dilemma?


    Danke und viele Grüße

    Anna



    PS: Übrigens kommt man auch durch Module und Erweiterungen wie RegularLabs, die defaultmäßig H3 als Überschrift haben, manchmal in die Bredouille: Z.B. auf der Seite https://marburger-schlosskonzerte.de/foerdernde hatte ich ursprünglich nur die H1-Überschrift, dann kamen die RegularLabs-Einträge „Schirmherrschaft“ und die anderen Förderer-Sliders/Akkordeons. Damit von H1 nicht auf H3 gesprungen wird, musste ich eine H2 und einen Text zur H2-Überschrift erfinden. Sonst hätte ich definieren müssen, dass die RegularLabs prinzipiell als H2 formatiert werden, aber das hätte dann evt. anderswo wieder unerwünschte Konsequenzen…

  • Hallo Anna,


    die gleichen "Probleme" mit der Überschriftenstruktur hatte ich bei der Neugestaltung unserer Webseite auch festgestellt.

    Als Lösung habe ich dieses Plugin eingesetzt, welches aus der eigentlichen h1 Überschrift in der Blogansicht eine h2 macht: Link

    Das scheint auch ganz gut zu funktionieren. Als Beispiel kannst du es dir hier ansehen: Link


    VG Wolfgang

  • Mit einem Templateoverride bzw. Alterntiven Layout, wenn man beide Optionen benötigt, des entsprechenden Views kann das leicht ohne Erweiterung gemacht werden.

    Inwiefern dürfen nicht mehrere H1 Überschriften vorhanden sein? Nach dem HTML5-Standard ist das unter gewissen Voraussetzungen durchaus valide.

    Du darfst mehrere H1 haben
    Viele Experten erzählen dir, dass es verboten ist mehrere H1–Überschriften auf erster Stufe – auf einer Seite zu haben. Das ist Quatsch.
    waltersblog.ch

  • Vielen Dank Euch beiden, Wolfgang und Tom!


    Tatsächlich scheint es nicht klar zu sein, ob mehrere H1 unerwünscht sind oder nicht, s. http://www.die-barrierefreie-w…berschriften.html#einsatz, https://www.barrierefreies-web…schriften/h1-debatte.html u.a.m.


    Ich bin bisher davon ausgegangen, dass nur eine H1 verwendet werden darf, weil ich das aus Printprodukten so kenne, und deswegen hat mich dieses Bloglayout-inhärente Dilemma als Neuling überrascht; es gibt ja unendlich viele Seiten im Internet, die so aufgebaut sind. Außerdem moniert Pingdom z.B. die Verwendung mehrerer H1-Überschriften (zwar mit anderen Argumenten als Barrierefreiheit – jedenfalls wird diese nicht explizit genannt, sondern SEO –, aber es führt halt zu Abzügen). Die Entwicklung des Plugins, von dem wolfstar schreibt, zeigt jedenfalls den Bedarf; ob dieser aus Sicht der Barrierefreiheit berechtigt ist oder nicht, s. Indigo66, bleibt dann zu klären. Die zitierte Seite https://waltersblog.ch/2020/02/11/mehrere-h1-seo/ ist da sehr deutlich (und wenn ich wetten müsste, würde ich sagen, sie hat recht).


    Ich habe beim Zentrum für Barrierefreiheit der blista eine Überprüfung meiner Website gemäß BITV 2.0 / EN 301 549 in Auftrag gegeben und werde Euch berichten, was herausgekommen ist zur H1-Frage. Für den Fall der Fälle habe ich jetzt Werkzeug von Euch genannt bekommen – Plugin oder TemplateOverride bzw. Alternatives Layout –, sodass ich gegebenenfalls eine Lösung herbeiführen könnte. Noch einmal vielen Dank für die prompte und kompetente Hilfe!


    Viele Grüße

    Anna

  • Die Empfehlung ist, nur ein h1 auf einer Seite zu haben So wie ein Buch nur einen Buchtitel hat.

    Wenn die Struktur aber sonst korrekt ist kann man es akzeptieren, nach WCAG 2.1 ist es nicht vorgeschrieben.


    Was du unbedingt machen sollst: Aktiviere das plugin skip-to-navigation auch fürs frontend. Das ist für Blinde sehr wichtig und nützlich.

  • Die Empfehlung ist, nur ein h1 auf einer Seite zu haben So wie ein Buch nur einen Buchtitel hat.

    Liebe Christiane, die Frage ist, wessen Empfehlung dies ist. Kannst Du dazu Näheres sagen?

    Ich bin auch davon ausgegangen, s. #4. Aber ich weiß eben nicht, ob man aus der Abwesenheit des Verbots (oder milderen Formen) davon ausgehen kann, dass es erlaubt ist, oder ob es eben nur keine Aussage zu dem Thema ist. Die von Tom zitierte Seite führt es nur auf SEO-Anforderungen zurück, und die müssen nicht mit Barrierefreiheit zusammenhängen, oder?


    Bin gespannt auf die Rückmeldung der blista; wenn jemand das weiß, dann sie.


    Grüße

    Anna

  • Beispiel hier: https://www.a11yproject.com/po…ssible-heading-structure/


    Es ist in deinem Fall eher die Frage ob BITV 2.0 das akzeptiert, wenn du diese Norm erfüllen MUSST. Diese Norm weicht von WCAG 2.1 ab.


    Edit: Es ist wirklich schwierig, die Struktur einer dynamisch erzeugten Seite konsistent zu halten und auch die Reihenfolge auf mobilen Geräten zu berücksichtigen. Ich gehe immer davon aus, dass wir für Menschen arbeiten, nicht für Regelwerke. Und oft erfüllt man Regeln, aber das heißt noch lange nicht, dass es für die Menschen dann wirklich accessible ist.

  • Vielen Dank für den Link, Christiane!

    Ja, mal schauen, wie BITV 2.0 damit umgeht.


    Du hast natürlich recht mit Deinen Überlegungen zu Regeln vs. Menschen.

    Im Fall meiner Homepage ist das Problem vergleichsweise harmlos, denn

    1. wir sind im Unterschied zu Körperschaften des öffentlichen Rechts nicht dazu verpflichtet, uns an die Regularien zu halten, sondern machen es freiwillig, aus Überzeugung,

    2. können wir eine bestimmte Gruppe bevorzugen (Blinde/Sehbehinderte), denn – wie Du an anderer Stelle sinngemäß schreibst – die Barrierefreiheit der einen ist oft die Barriere der anderen; da hilft es, wenn man sich die Freiheit nehmen kann, Prioritäten zu setzen

    3. ich habe eine Freundin, die blind ist, außerdem Präsidiumsmitglied des Deutschen Blinden- und Sehbehindertenverbandes und zudem bei der blista tätig, und daher nach dem Prüfverfahren gemäß BITV 2.0 kompetent dazu beraten kann, was tatsächlich wichtig ist und wo man im Konfliktfall evt. Kompromisse eingehen könnte.


    Für die meisten Fragen hier im Forum fehlt mir die Kompetenz, aber in diesem Punkt kann ich dann hoffentlich etwas Konstruktives beitragen, sobald die Analyse vorliegt (ich hoffe, in ein paar Wochen und nicht erst in Monaten). Ich bin sehr dankbar für die Hilfe, die über dieses Forum geleistet wird, und habe enorm von dem Wissen, das sich hier tummelt, profitiert. Gerade angesichts der Tatsache, dass manch einer davon leben muss, für Kund*innen Websiten zu entwickeln, ist es alles andere als selbstverständlich, dass dies so gut funktioniert. <3

  • Joomla hat als eins der Hauptanliegen, eine Basis für A11Y Seiten zu sein.
    Für Dienstleister ist es so: Prüf-Checkliste abgehakt - Vertrag "barrierefreie Seite" erfüllt. Je besser Joomla als Basis ist, um so leichter ist es für Dinstleister (und um so einfacher für Kunden).


    Ich freu mich sehr, dass du so ein Muster einer accessible Seite entwicklest!

  • Bei W3 validator (W3C-Standard), kannst du auch ein paar Sachen testen und verbessern.


    https://validator.w3.org/nu/?d…ger-schlosskonzerte.de%2F

    Vielen Dank, Stef, für den Tipp. Habe mich heute (viel zu) ausführlich damit beschäftigt, was u.a. dazu geführt hat, dass ich mehrere Klassen für Bilder im CSS angesetzt und viel HTML gelöscht habe.


    Was konsistent zu Fehlermeldungen führt, sind die Accordions/Slider von RegularLab. Paradebeispiel ist die Seite https://marburger-schlosskonzerte.de/faq, die 39 Fehlermeldungen „Error: Bad value true for attribute hidden on element div.“ ausspuckt, für jede Frage ein Error… Habe dann nach der Fehlermeldung gegooglet und einiges gefunden über hidden-Attribute, und irgendwie scheint dieses "false" falsch zu sein. Wie ich das Problem beheben kann, weiß ich aber nicht.


    Falls jemand von Euch mir weiterhelfen kann in dieser Sache – ich wäre sehr froh! (Auch wenn es nichts mehr mit Blogstruktur zu tun hat und somit OT ist.)


    Viele Grüße

    Anna

  • Das wird vom Programm erzeugt und ist falsch, du kannst da nichts machen. Eine Fehlermeldung an den Programmierer ist also der richtige Weg.
    Alternative wäre: selber ein Accordion zu schreiben :)

    Oder Boostrap Accordeon benutzen, Bootstrap ist im Cassiopeia schon vorhanden.


    Es gibt auch noch ein Plugin von aranemac , um die Einträge zu vereinfachen:


    GitHub - aranemac/jbsAccordion: Collapsible items and accordions (also nested) for Joomla 4 (Bootstrap 5)
    Collapsible items and accordions (also nested) for Joomla 4 (Bootstrap 5) - GitHub - aranemac/jbsAccordion: Collapsible items and accordions (also nested) for…
    github.com


    Bootstrap 5, Beispiele:


    Accordion
    Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
    getbootstrap.com

  • Das wird vom Programm erzeugt und ist falsch, du kannst da nichts machen. Eine Fehlermeldung an den Programmierer ist also der richtige Weg.
    Alternative wäre: selber ein Accordion zu schreiben :)

    Danke schön, Christiane, das ist ein wichtiger Hinweis, dass ich nicht versuche, mir an Sachen die Zähne auszubeißen, die ich nicht beeinflussen kann!


    Ich habe auch schon überlegt, ohne die Erweiterung zu strukturieren, und bin dabei gestern auf mehrere Wege gestoßen:


    1. Accordion barrierefrei?

    2. https://github.com/aranemac/jbsAccordion

    3. https://ghsvs.de/programmierer…-mit-joomla-4-hausmitteln.


    Allerdings bin ich zu wenig bewandert, um erkennen zu können, welche dieser drei Wege der geeigneteste ist. Daher versuche ich zu beschreiben, welche Funktion die Tabs auf meiner Website haben; vielleicht kann aufgrund dieser Beschreibung der eine oder andere Weg ausgeschlossen werden.


    - Die wichtigste Funktion ist natürlich die Übersichtlichkeit. Man kann auf einen Blick erfassen, welche Elemente einen erwarten, ohne die Inhalte lesen zu müssen; es ist also sowas wie Überschriften (und das passt ganz gut dazu, dass RegularLab da von vorneherein mit H3 arbeitet).

    - Die Tabs/Slider/Accordions strukturieren auch seitenübergreifend. Das heißt: Typischerweise lege ich die Lebensläufe von Ensembles oder Musiker*innen in Accordions. Das ist an sich überflüssig, wenn es nur einen Akteur gibt, weil das ja dann eh nicht unübersichtlich ist, aber da ich bei größeren Ensembles diese Technik verwende (https://marburger-schlosskonzerte.de/konzerte/2021-09-05, verschachtelt), tue ich es konsequent, auch wenn eine einfache Überschrift in dem Fall auch reichen würde (https://marburger-schlosskonzerte.de/konzerte/2015-08-01).

    - Weiteres Einsatzgebiet: Module, die PDFs enthalten (https://marburger-schlosskonzerte.de/veranstalter) – ebenfalls der Übersichtlichkeit willen

    - Klassischerweise die FAQs (https://marburger-schlosskonzerte.de/faq).


    Sehe ich es richtig, dass die Lösung von Re:Later (3) nur bei Modulen funktioniert und damit ohne Anpassung nicht überall einsetzbar wäre?


    Danke im Voraus,

    Grüße

    Anna

  • Oder Boostrap Accordeon benutzen, Bootstrap ist im Cassiopeia schon vorhanden.


    Es gibt auch noch ein Plugin von aranemac , um die Einträge zu vereinfachen:

    Danke, Stef!

    Kann mir jemand etwas zu den Vor- und Nachteilen von Accordion barrierefrei vs. https://github.com/aranemac/jbsAccordion sagen? Ist die Lösung von aranemac vergleichbar barrierefrei wie die von bettin ? Oder wo liegen die wesentlichen Unterschiede?


    Grüße

    Anna

  • Hallo zusammen,


    nochmal eine Frage zu jbsAccordion von aranemac :


    Auf GitHub steht:

    Zitat

    Das Plugin kann die Tags von Reguar Labs Sliders […] übersetzen. […] Sie können dies aktivieren, indem Sie convertRLslidersin jbsaccordion.php aktivieren:

    Code
    protected $convertRLsliders = 1;


    Ich habe die Datei entsprechend angepasst (plugins/content/jbsaccordion/, falls sich jemand auf die Suche machen sollte – bei mir hat es lange gedauert). Das hat zunächst mal nichts bewirkt, und ich habe eine Vermutung, warum: jbsAccordeon wurde ja von aranemac vor über einem Jahr entwickelt, als RegularLabs noch nicht J4-fähig war. Nun ist auch RegularLabs umgestellt; das augenfälligste ist, dass die Terminologie geändert wurde; statt „Slider" wird „Accordion" verwendet (entsprechend habe ich auf meiner Website nach der Umstellung auf J4 überall diese Änderung durchgeführt). In der Tiefe wird noch viel anderes passiert sein, was ich nicht sehe und auch nicht verstehen würde, aber könnte es sein, dass der Befehl „convertRLsliders“ umformuliert werden muss?


    Schlimmstenfalls muss ich trotzem manuell überall {jbsgroup} … {/jbsgroup} usw. einfügen, wo jetzt {accordion title …} … {/accordions} steht.


    Gruß

    Anna

  • In einem ersten Schritt habe ich durch Suche-ersetze die FAQ https://marburger-schlosskonzerte.de/faq angepasst und im user.css ein paar Änderungen vorgenommen. Es funktioniert tadellos. Wunderbar!


    Grüße

    Anna


    Wo es nicht zu funktionieren scheint, sind die Module:



    (links jbsAkkordeon, Mitte RegularLabs nicht ausgeklappt, rechts RegularLabs ausgeklappt)


    Habe ich etwas übersehen, oder müsste ich bei Modulen ergänzend mit https://ghsvs.de/programmierer…-mit-joomla-4-hausmitteln arbeiten?


    Viele Grüße

    Anna