Tabnavigation vs (Privacy) Popups

[pixle]

Moin Tim,

ich bin dabei meine Webseiten BFSG flott zu machen - wozu ja auch die Tabnavigation gehört. Mit Hilfe eures Moduls habe ich schon vieles hinbekommen, aber abgesehen von den Checkboxes werden die Submit Buttons des Privacy Popups werden nicht angesprungen (+ "Info"-Popups gar nicht). Muss ich im Template manuell Tabindexes vergeben oder geht das irgendwie eleganter?

LG Bjarne

[Tom]

Hi!

Wichtig ist, dass das Theme, inklusive Templates und Module, auf dem aktuellen Stand ist. Auch mal schauen ob nicht noch veraltete Templates in /templates liegen

Beim Opt-in sollte das Default Template verwendet werden. Dieses ist BFSG-konform und kann über Tabs angesteuert werden.

Unsere Demo findest du hier:
https://accessibility.premium-contao-themes.com/

Die Tabindex-Werte können im Frontend-Modul „Accessibility Widget“ vergeben werden.
Beim Opt-in sind diese bereits im Template korrekt vordefiniert – hier ist in der Regel keine Anpassung notwendig.

Bei einer Neuinstallation ist alles optimal aufeinander abgestimmt – inklusive aller Tabindex-Werte.
Beim Update muss man die Tabindexes selber definieren.

Schöne Grüße
Tom

[mapfei]

Verstehe ich nicht so ganz. Wie ist damit umzugehen? Habe hier eine frische Installation, aber die PageSpeed Insights meckern zu diesem Punkt auch bereits:

Der [tabindex]-Wert einiger Elemente ist größer als 0

Zum Hauptmenü
<a href="#anchor_sitemap" tabindex="11">
Zum Inhalt
<a href="#container" tabindex="12">
Accessibility Tools öffnen
<a href="" class="open_acc_widget" tabindex="13">
div#accessibility_widget > div#fontsize_widget > div.checkbox-container > input#fontsize
<input name="fontsize" id="fontsize" type="number" class="input" min="0" max="5" step="1" value="0" tabindex="20">
div#accessibility_widget > div#contrast_widget > div.checkbox-container > input#contrast
<input name="contrast" id="contrast" type="checkbox" class="checkbox" value="0" tabindex="21">
div#accessibility_widget > div#default_fonts_widget > div.checkbox-container > input#default_fonts
<input name="default_fonts" id="default_fonts" type="checkbox" class="checkbox" value="0" tabindex="22">
div#accessibility_widget > div#boldface_widget > div.checkbox-container > input#boldface
<input name="boldface" id="boldface" type="checkbox" class="checkbox" value="0" tabindex="23">
div#accessibility_widget > div#disable_animations_widget > div.checkbox-container > input#disable_animations
<input name="disable_animations" id="disable_animations" type="checkbox" class="checkbox" value="0" tabindex="24">
Hauptmenü
<a href="#anchor_sitemap" tabindex="30">
Zum Inhalt
<a href="#container" tabindex="31">
English
<a href="#" tabindex="40">
Deutsch
<a href="#" tabindex="41">
Nach oben
<a href="#container" tabindex="42">
form#user_privacy_settings_611 > div.privacy_item > label#label_cookiebar_privacy_1 > span#privacy_checkmark_privacy_1
<span class="privacy_checkmark focus" id="privacy_checkmark_privacy_1" tabindex="1">
form#user_privacy_settings_611 > div.privacy_item > label.privacy_label > span.privacy_checkmark
<span class="privacy_checkmark" tabindex="2">
form#user_privacy_settings_611 > div.privacy_item > label.privacy_label > span.privacy_checkmark
<span class="privacy_checkmark" tabindex="3">
div.privacy_settings > form#user_privacy_settings_611 > div.privacy_buttons > input.submit
<input type="submit" name="save_all_settings" tabindex="4" class="submit all" value="Alle akzeptieren">
div.privacy_settings > form#user_privacy_settings_611 > div.privacy_buttons > input.submit
<input type="submit" name="save_tech_settings" tabindex="5" class="submit tech" value="Nur erforderliche Cookies erlauben">
div.privacy_settings > form#user_privacy_settings_611 > div.privacy_buttons > input.submit
<input type="submit" name="save_settings" tabindex="6" class="submit readonly" disabled="" value="Auswahl akzeptieren">
Datenschutzerklärung
<a href="/datenschutzerklaerung" tabindex="7">
Impressum
<a href="/impressum" tabindex="8">

Alles »Fehler«, die vom Accessability Tool bzw. dem Privacy-Manager kommen…

[janosch]

Schließe mich der Frage an. Der Privacy Manager verwendet "tabindex" mit Werten > 0, was offenbar ein Problem im Sinne der Barrierefreiheit darstellt. Was ist hier die richtige Vorgehensweise? Ist der tabindex für den Privacy Manager relevant oder kann man den für die BFSG Optimierung auf 0 setzen?

Leider ist in der Accessibility Demo der Privacy Manager nicht implementiert um sich den optimalen Web abzuschaun.

[Tim]

Der Tabindex steht einer Barrierefreiheit nicht im Wege, sondern dient explizit der Mitteilung an den Browser welche Elementen vorrangig behandelt werden sollen. Dies ist besonders bei dem Privacy Manager von Bedeutung, weil dieser immer vorrangig vor anderen Elementen in der Webseite behandelt werden soll. Der PM ist das wichtigste Element der Seite, wenn dieser noch nicht bestätigt ist. Damit innerhalb des PM eine klare Reihenfolge entsteht sind standardmäßig die Tabindexies fortlaufend gewählt.