Elementor-Erfahrung

Web Seiten sind für alle Besucher da, auch solchen mit Einschränkungen!

Der Hersteller des Plugin (Builder) Elementor schein es nicht zu wissen!

Was wurde benutzt?

Wordpress
Elementor Free (Builder)
Sydney Template
TablePress (für Tabelle)
Modula (Fpoto Galerien)

Erste Erfahrung mit den Android Screenreader

Menü nicht bedienbar!
- Ursache: fehlerhafte Reihenfolge der HTML-Elemente

Tastatur Bedienung

Das ganze ist auf Sehende mit Maus beschränkt.
- Menüs lassen sich nicht bedienen

Sprung marke in Tabellen und Links mit Bild als Inhalt

Screenreader mögen es nicht.
- sehe kommische und unterschiedliche Efffekte!

Photo Galerie

Keinerlei Tastatur Unterstützung!
Für Blinde unzugänglich!

Video

Kein Untertitel vorhanden, Gehörlose werden nicht berücksichtigt!

Reparatur

Javascript benutzen!

Nachdem die Seite geladen ist kann per Javascript einiges korrigiert werden
- Aria nachrüsten
- Reihenfolge der HTML-Elemente richtigstellen
- Bestimmte A Elemente durch BUTTON Elemente Ersetzen
- Code für Tastaturbedienung des Menüs hinzufügen
- Einbinden von *.vtt Dateien (Untertiteln) automatisieren
Untertitel Dateien zur Verfügung stellen

Plugins WPCode

Mit das Plugins können Scripte in der Seiten eingetellt werden
Damit können die Notwendige Korrekturen vorgenommen werden

Aria Hinzufügen:

<script>
    const untertitel = false;
    const untermenue = ' Untermenü'
    window.addEventListener('DOMContentLoaded',function() {
        // Reihen Folge im Mobile Menü richtigstellen 
        var toggle = document.querySelector('#page #masthead-mobile');
        var nav = document.querySelector('#page .sydney-offcanvas-menu');
        nav.before(toggle);

        // aria label für .site-titel a  einfügen
        document.querySelectorAll('.site-title a').forEach( e => {
            e.setAttribute('aria-label','zur Hauptseite');
        });

        // Damit ganze Elemente für Screenreader unsichtbar sind
        document.querySelectorAll('.aria-hidden').forEach( e => {
            e.setAttribute('aria-hidden', 'true');
        });

        // Damit Galerien für Screenreader unsichtbar sind
        document.querySelectorAll('.aria-hidden').forEach( e => {
            e.parenNode.setAttribute('aria-hidden', 'true');
        });

Die Zwei Variable werden später genutzt.

Gelerien sollten komplett unsichtbar für Screenreader sein (3. Block).

Unter Elementor muss der Container Widget (TextEditor) mit der Klasse aria-hidden versehen werden. Mit den 4. Block wird es erreicht.

Links mit Bilder korrrigierren

        // setze Focus auf Ziel wenn Wagenrücklauf getätigt
        // Mit Talkback OK
        document.querySelectorAll('.elementor-widget-container a > img' ).forEach( i => {
            i.setAttribute('aria-hidden', 'true');
            txt = i.getAttribute('alt');
            i.parentNode.setAttribute('aria-label',txt);
        });

Anker Link korrigieren

        document.querySelectorAll('a[name]').forEach( a => {
            h = a.getAttribute('name');
            if ( h && a.nextElementSibling ) {
                var name = a.getAttribute('name');
                a.nextElementSibling.setAttribute('id',name);
                a.remove();
            }
        });

Damit es optimal funktioniert müssen die Links auf ein Element mit ID verweisen.

Menü Dropdown Links durch Button ersetzen

        document.querySelectorAll('#mainnav span.dropdown-symbol').forEach( d => {
            var txt= d.previousElementSibling.text;
            var p = d.previousElementSibling;
            bt = document.createElement('button');
            bt.setAttribute('aria-label', txt+untermenue);
            bt.setAttribute('aria-expanded', 'false');
            bt.classList.add('dropdown-symbol');
            bt.innerHTML = d.innerHTML;
            d.replaceWith(bt);
            d = p.nextElementSibling;

Das Ersetzen des Link (<a>) durch ein <buttton> Element sorgt dafür dass Screenreader die Richtige Hinweise wiedergeben.

Und mit EventListener versehen

            d.addEventListener('keypress',(e) => {
                if (e.key === 'Enter' || e.key == 'Space' ) {
                    e.currentTarget.click();
                }
                e.preventDefault();
            },true);
            d.addEventListener('click',(e) => {
                var el = e.currentTarget;
                var n = el.nextElementSibling;
                var t = el.previousElementSibling.text;
                if (el.getAttribute('aria-expanded') == 'false') {
                        el.setAttribute('aria-expanded','true');
                    el.setAttribute('aria-label',t+untermenue);
                    n.classList.add('toggled');
                    setTimeout(()=>{n.querySelector('a').focus()},50,n);
                } else {
                    el.setAttribute('aria-expanded','false');
                    el.setAttribute('aria-label',t+untermenue);
                    n.classList.remove('toggled');
                }
            });
        });

Unter Windows löst das Betätigen der Wagenrücklauf Taste, wenn ein Screenreader einggeschaltet ist, ein Klick aus.

Deswegen erfolg die Hautptarbeit im Click Listener statt.

Wenn der Anwender einer Maus Phobie hat (Tastatur Bedienung) muss auch das Reagieren auf Tastatur Ereignis reagiert werden, deswegen wird für Tastenbedienung auch ein Listener eingerichtet, er löst ein Click aus.

Anwender die eine Maus verwenden sehen keine Unterschiede merken keine Veränderung.

Untermenü müssen auch geschlossen werden

        /* Tastatur Nav, Menü werden sonst nicht zugeklappt */
        document.querySelectorAll('#mainnav div > ul > li').forEach( l => {
            l.addEventListener('focusout', (e) => {
                if (!l.contains(e.relatedTarget)) {
                    var t = l.querySelector('.toggled');
                    if ( t ) {
                        t.classList.remove('toggled');
                        t.previousElementSibling.setAttribute('aria-expanded',false);
                        var txt = t.previousElementSibling.previousElementSibling.text;
                        t.previousElementSibling.setAttribute('aria-label', txt+untermenue);
                    } 
                }
            },true);
        });

Wenn der Anwender nur die Tastatur benutzt, wird ein Untermenü durch ein Tastendruck ausgeklappt. Falls das Menü Eintrag, inklusive Untermenü verlassen wird, sollte das zuvor geöffnete Untermenü zugeklappzt werden und natürlich die entsprechende Parametern korrekt gesetzt werden.

Video Untertitel vorshen

        document.querySelectorAll('.elementor-video').forEach(v => {
            var src = v.getAttribute('src');
            // replace .mp4 with .vtt
            src = src.split('.').slice(0,-1).join('.')+'.vtt';
            var track = document.createElement('track');
            track.setAttribute('kind','subtitles');
            track.setAttribute('srclang','de');
            track.setAttribute('label','Deutsch');
            track.setAttribute('default','');
            track.setAttribute('src',src);
            v.appendChild(track);
            if ( !untertitel ) {
                v.textTracks.mode='hidden';
            }
        });
    });
</script>

Da eine Vorgabe von Tracks nicht von Elementor vorgesehen ist, kann es nicht im Code erscheinen. Wir richten hiermit das fehlende HTML Code hiermit.

Sollte keine passende Datei vorhanden sein, merkt der Anwender nichts davon.

Ob die Untertitel eingeschaltet sind bestimmt die Variable untertitel am Beginn des Scriptes (Wert true).

Tests

Linux
- mit und ohne Screenreader orca
  - Firefox
  - Chromium
Windows 11
- Mit und ohne Screenreader NVDA bzw. JAWS
  - Edge (basiert auf Chromium)
  - Firefox
Android
- Mit und ohne Screenreader Talkback
  - Chrome
  - Firefox
iPadOS
- Mit und ohne Screenreader VoiceOver
  - Safari

Testergebnisse

Funktionalität wie geplannt.

Test mit Narrator (Windows 11) zeigten, dass da Produkt noch sehr mangelhaft und nicht empfehlbar ist!

NVDA spricht den Titel Smart ins Internet aus, es sollte eigentlich, wie bei den andere Screenreader den Aria-Label sein. Die Schreibweise sorgt für eigenartige Effekt!

Nicht gelöste Probleme in Zusammenhang mit Tastatur Bedienung

Galerien stellen Probleme dar. Die Links zur Eröfnung der Links könnten zuggäglich gemacht werden.dennoch wäre einiges noch fragwürdig!