Web Seiten sind für alle Besucher da, auch solchen mit Einschränkungen!
Der Hersteller des Plugin (Builder) Elementor schein es nicht zu wissen!
Javascript benutzen!
<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.
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.
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.
/* 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.
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).
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!
Galerien stellen Probleme dar. Die Links zur Eröfnung der Links könnten zuggäglich gemacht werden.dennoch wäre einiges noch fragwürdig!