Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Werbung
Mehr schaffen in weniger Zeit – Der Advanced Editor für kreative Köpfe.
Optimieren Sie Ihre Bearbeitung: Advanced Editor Tools
Mit dem Advanced Editor können Designer und Content Creatoren kreative Ideen umsetzten.
Die Lösung 'SafariEmbedToBlockquote' wurde speziell für WP-Embeds in Safari entwickelt. Sie adressiert die besonderen Herausforderungen der Fokussierbarkeit, die in Safari bei der Darstellung von WP-Embeds auftreten. Das Skript zielt darauf ab, Embeds durch besser zugängliche Blockelemente (Blockquotes) zu ersetzen, um die Interaktion per Tastatur zu verbessern.
Die Serie zur 'Tastaturnavigation' erstreckt sich über mehrere Beiträge und steht im Zusammenhang, wobei folgende Hinweise oft in einem direkten Kontext zur Funktion stehen:
In diesem Beitrag erläutern wir, wie die Tastaturnavigation oder Keyboard Navigation (englisch, in technischen Kontexten oft direkt übernommen) auf einer Webseite durch JavaScript-Lösungen optimiert werden ... weiterlesen
Die Tastaturnavigation spielt eine große Rolle für die Nutzererfahrung von Webseiten. Wir haben die 'Custom Inline Embeds' entwickelt, da wir bei der Optimierung der Navigation ... weiterlesen
Das Script SafariEmbedToBlockquote wurde entwickelt, um die Bedienbarkeit von WordPress-Embeds in Safari zu verbessern. In Safari können WP-Embeds oft nicht optimal per Tastatur gesteuert werden. Das Script erkennt, wenn ein Safari-Browser verwendet wird, und ermöglicht es dem Nutzer, per Tastatur das Embed zu fokussieren und durch einen einfachen Tastendruck in ein Blockquote-Element umzuwandeln. Dabei wird der Link des Embeds in den Fokus gerückt und überflüssige URL-Parameter entfernt.
Das Blockquote wird zudem mit einem Hinweistext versehen, um die Nutzerfreundlichkeit weiter zu verbessern. Auf diese Weise erleichtert das Script die Interaktion mit Embeds in Safari und bietet eine zugänglichere Alternative.
Das oben gezeigte Embed würde für Safari-Benutzer nicht mit der Enter-Taste zu aktivieren sein. Mit folgendem Script kann es jedoch in ein Blockquote-Element umgewandelt werden:
Symbolbild
Der Link ist dann in Safari durch Drücken der Enter-Taste aktivierbar, was ohne das zusätzliche Script – unter anderem aus der Serie zur Tastaturnavigation 🙂 – nicht möglich wäre.
Die Funktionsweise des Scripts
Erkennung des Browsers und Ersetzung des Embeds: Zunächst wird überprüft, ob der Benutzer Safari nutzt. Wenn dies der Fall ist, überwacht das Skript alle Embeds auf der Seite. Sobald ein Embed im Sichtfeld des Benutzers (Viewport) erscheint und der Benutzer mit der Tastatur navigiert, wird das Embed in ein Blockelement (Blockquote) umgewandelt. Diese Umwandlung erfolgt jedoch erst, wenn der Benutzer das Embed mit der Enter-Taste fokussiert.
Automatische Fokussierung des Links: Ein zentraler Aspekt der Tastaturnavigation ist der reibungslose Übergang zwischen Elementen. Sobald das Embed in ein Blockquote umgewandelt wurde, sorgt das Skript dafür, dass der darin enthaltene Link automatisch fokussiert wird. Das bedeutet, dass der Benutzer nicht erneut Enter drücken muss, um den Link zu erreichen. Stattdessen kann er direkt mit einem weiteren Druck auf Enter den Link aktivieren.
Sichtbarkeit und Aktivierung: Im visuellen Flow bleibt der Embed-Inhalt für den Benutzer stets zugänglich, sowohl für diejenigen, die die Maus verwenden, als auch für Tastaturnutzer. Das Blockquote stellt sicher, dass die Inhalte leicht verständlich und anklickbar sind, während es gleichzeitig eine klare visuelle Struktur gibt, die den Nutzer darüber informiert, wie er den Inhalt interagieren kann.
SafariEmbedToBlockquote-Skript
Skript für die Umwandlung von WordPress-Embeds in Blockquotes
Skript für die visuelle Hervorhebung anderer iFrames, wie z. B. YouTube-Embeds
1. SafariEmbedToBlockquote-Skript
/* --- (Aktuelle Version) SafariEmbedToBlockquote --- */
// Überprüfe, ob der Browser Safari ist
if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
// Funktion zum Ersetzen des Embeds durch Blockquotes
function replaceEmbedWithBlockquote(embed) {
const blockquote = document.createElement('blockquote');
blockquote.classList.add('wp-embedded-content'); // Klasse wie gewünscht hinzufügen
// Nimm den Secret-Wert aus der Datenquelle, falls vorhanden
const secret = embed.getAttribute('data-secret') || "Kein Secret";
// Extrahiere den ursprünglichen Link ohne die Embed-spezifischen Parameter
let originalUrl = embed.getAttribute('src').replace('/embed/', '/'); // Ersetze '/embed/' mit '/'
// Entferne alles, was nach "?" oder "#" kommt und validiere die URL
originalUrl = originalUrl.split(/[?#]/)[0];
if (!isValidUrl(originalUrl)) {
console.error('Ungültige URL:', originalUrl);
return; // Abbrechen, wenn die URL ungültig ist
}
// Versuche, den Titel aus dem Embed zu extrahieren
let title = embed.getAttribute('data-title') || embed.getAttribute('title') || "Kein Titel";
// Entferne Anführungszeichen (falls vorhanden) aus dem Titel
title = title.replace(/[\"'“”„«»‹›]/g, '');
// Wenn der Titel nicht verfügbar ist, versuche den innerText des übergeordneten Elements
if (!title) {
const parent = embed.closest('.embed-container');
if (parent) {
title = parent.querySelector('h1, h2, h3, .title-class')?.textContent || "Kein Titel"; // textContent statt innerText
}
}
// Erstelle die HTML-Struktur des Blockquotes mit dem korrekten Link und Titel
blockquote.setAttribute('data-secret', secret); // Secret hinzufügen
blockquote.innerHTML = `
<p data-swp-font-size="21px">
<a href="${originalUrl}" data-swp-font-size="21px">
${title}
</a>
</p>`;
// Hinweis unterhalb des Blockquotes hinzufügen
const hint = document.createElement('p');
hint.classList.add('safari-embed-hint');
hint.textContent = "WP-Embed-Link in Safari:\n'Enter-Taste' aktiviert oder mit ctrl+alt in neuem Browser-Tab."; // textContent statt innerHTML
// Füge das Blockquote an die Stelle des Embeds ein
embed.parentNode.insertBefore(blockquote, embed);
blockquote.parentNode.insertBefore(hint, blockquote.nextSibling);
// Entferne das ursprüngliche Embed
embed.remove();
// Setze den Fokus auf das Link-Element im Blockquote
const link = blockquote.querySelector('a');
if (link) {
link.focus(); // Fokussiere den Link automatisch nach der Umwandlung
}
// Füge die Klasse hinzu, um die Transition auszulösen
setTimeout(() => {
blockquote.classList.add('show');
}, 10); // Leichte Verzögerung, um sicherzustellen, dass der Effekt sichtbar ist
}
// Validierungsfunktion für die URL
function isValidUrl(url) {
// Hier können spezifische Validierungslogiken implementiert werden,
// z. B. Überprüfen auf erlaubte Domains oder URL-Formate.
const pattern = /^(https?:\/\/[^\s/$.?#].[^\s]*)$/; // Ein einfaches URL-Muster
return pattern.test(url);
}
// Funktion, die den Viewport überwacht und auf Enter reagiert
function observeEmbed(embed) {
let isFocused = false; // Variable zur Überwachung des Fokuszustands
// Intersection Observer erstellen
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
embed.addEventListener('focus', () => {
isFocused = true;
});
embed.addEventListener('blur', () => {
isFocused = false;
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && isFocused) {
replaceEmbedWithBlockquote(embed);
}
});
}
});
});
// Beobachte das Embed
observer.observe(embed);
}
// Wähle nur WordPress-Embeds aus
document.querySelectorAll('iframe.wp-embedded-content, embed.wp-embedded-content').forEach((embed) => {
embed.setAttribute('tabindex', '0'); // Macht das Embed fokussierbar
observeEmbed(embed); // Beginne mit dem Beobachten des Embeds
});
}
/* - Ende (aktuelle Version) SafariEmbedToBlockquote - */
Infolgedessen sollte auch der Abschnitt unter Fokussierung und Markierung von EMBEDs der Abschnitt "// Funktion, um iframes wie Links zu behandeln" durch den folgenden Code ersetzt werden (bedingend):
// Funktion, um iframes wie Links zu behandeln: Ausnahme von Safari
function isSafari() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}
if (!isSafari()) {
function makeIframesFocusable() {
const iframes = document.querySelectorAll('iframe.wp-embedded-content');
iframes.forEach(iframe => {
// Erstelle einen Wrapper-Link um das iframe
const link = document.createElement('a');
link.href = iframe.src; // Setzt die URL des iframes als href
link.tabIndex = 0; // Macht den Link fokussierbar
link.className = 'iframe-link'; // Füge eine Klasse hinzu, wenn nötig
// Füge den Link vor dem iframe ein und verschiebe das iframe in den Link
iframe.parentNode.insertBefore(link, iframe);
link.appendChild(iframe);
// Optional: Event Listener für die Enter-Taste
link.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
window.location.href = link.href;
}
});
});
}
// Funktion aufrufen, um iframes wie Links zu behandeln
makeIframesFocusable();
}
Von Embed zu Blockquote – Die Lösung für ein besseres Nutzererlebnis!
CSS-Vorschlag für Embeds im Blockquote-Stil in Safari:
/* --- Blockquote-Stil für Embeds in Safari --- */
blockquote.wp-embedded-content p {
margin: 25px 0;
transition: box-shadow 0.3s;
padding: 25px;
background: #fff;
border: 2px solid #dcdcde;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
blockquote.wp-embedded-content a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-style: normal;
font-size: 24px;
color: #2C3338 !important;
font-weight: 600 !important;
}
blockquote.wp-embedded-content a:focus {
outline: 2px solid #B6B6BA;
border-radius: 1px;
}
[nighteyeplgn="active"] blockquote.wp-embedded-content p {
filter: brightness(130%) grayscale(130%);
}
/* Standardmäßig ist das Blockquote unsichtbar */
blockquote.wp-embedded-content {
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* Sobald das Blockquote eingefügt ist, wird es sichtbar */
blockquote.wp-embedded-content.show {
opacity: 1;
}
.safari-embed-hint {
margin-top: 20px;
font-size: 16px;
font-style: italic;
color: #333;
}
/* - Ende Blockquote-Stil für Embeds in Safari - */
2. Hervorhebung anderer iFrames, wie z. B. YouTube-Embeds
Diese Embeds sind auch ganz normal in Safari fokussierbar und mit folgendem Script wird mit Enter das Element erst mal visuell markiert, um zu sehen, dass hier Interaktionen möglich sind.
/* --- IframeHighlight --- */
// Füge tabindex und Klasse für andere iFrames (z. B. YouTube) hinzu
document.querySelectorAll('iframe').forEach((iframe) => {
iframe.setAttribute('tabindex', '0'); // Macht das iFrame fokussierbar
iframe.classList.add('focus-highlight'); // Klasse zur visuellen Hervorhebung hinzufügen
// Fokussierung und visuelle Hervorhebung
iframe.addEventListener('focus', () => {
iframe.classList.add('focus-highlight-active'); // Visuelle Hervorhebung aktivieren
});
iframe.addEventListener('blur', () => {
iframe.classList.remove('focus-highlight-active'); // Visuelle Hervorhebung entfernen
});
});
/* - Ende IframeHighlight - */
Die Codes der Entwicklung sind unter anderem nicht auf Sicherheitsaspekte überprüft.
Details
(Vorherige Ausgabe) SafariEmbedToBlockquote Bug: Diesem Script erfolgt die Blockquote auch anderen iFrames als WP-Embed:
/* --- (Vorherige Ausgabe) SafariEmbedToBlockquote_v2 --- */
// Überprüfe, ob der Browser Safari ist
if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
// Funktion zum Ersetzen des Embeds durch Blockquotes
function replaceEmbedWithBlockquote(embed) {
const blockquote = document.createElement('blockquote');
blockquote.classList.add('wp-embedded-content'); // Klasse wie gewünscht hinzufügen
// Nimm den Secret-Wert aus der Datenquelle, falls vorhanden
const secret = embed.getAttribute('data-secret') || "Kein Secret";
// Extrahiere den ursprünglichen Link ohne die Embed-spezifischen Parameter
let originalUrl = embed.getAttribute('src').replace('/embed/', '/'); // Ersetze '/embed/' mit '/'
// Entferne alles, was nach "?" oder "#" kommt
originalUrl = originalUrl.split(/[?#]/)[0]; // Trenne bei ? oder #
// Versuche, den Titel aus dem Embed zu extrahieren
let title = embed.getAttribute('data-title') || embed.getAttribute('title') || "Kein Titel";
// (-) Wenn der Titel nicht verfügbar ist, versuche den innerText des übergeordneten Elements
if (!title) {
const parent = embed.closest('.embed-container'); // Beispiel: Suche nach einem spezifischen Container
if (parent) {
title = parent.querySelector('h1, h2, h3, .title-class')?.innerText || "Kein Titel"; // Suche nach Titel in Container
}
}
// Erstelle die HTML-Struktur des Blockquotes mit dem korrekten Link und Titel
blockquote.setAttribute('data-secret', secret); // Secret hinzufügen
blockquote.innerHTML = `
<p data-swp-font-size="21px">
<a href="${originalUrl}" data-swp-font-size="21px">
${title}
</a>
</p>`;
// Hinweis unterhalb des Blockquotes hinzufügen
const hint = document.createElement('p');
hint.classList.add('safari-embed-hint'); // Optionale Klasse für Styling
hint.innerHTML = "WP-Embed-Link in Safari:<br>'Enter-Taste' aktiviert oder mit ctrl+alt in neuem Tab)"; // Hinweistext
// Füge das Blockquote an die Stelle des Embeds ein
embed.parentNode.insertBefore(blockquote, embed);
// Füge den Hinweis unterhalb des Blockquotes ein
blockquote.parentNode.insertBefore(hint, blockquote.nextSibling);
// Entferne das ursprüngliche Embed
embed.remove();
// Setze den Fokus auf das Link-Element im Blockquote
const link = blockquote.querySelector('a');
if (link) {
link.focus(); // Fokussiere den Link automatisch nach der Umwandlung
}
}
// Funktion, die den Viewport überwacht und auf Enter reagiert
function observeEmbed(embed) {
let isFocused = false; // Variable zur Überwachung des Fokuszustands
// Intersection Observer erstellen
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// Wenn das Embed im Viewport sichtbar ist
if (entry.isIntersecting) {
// Event-Listener für den Fokus auf das Embed
embed.addEventListener('focus', () => {
isFocused = true; // Markiere das Embed als fokussiert
});
// Event-Listener, wenn das Embed den Fokus verliert
embed.addEventListener('blur', () => {
isFocused = false; // Markiere das Embed als nicht fokussiert
});
// Listener für Enter-Taste
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && isFocused) {
// Ersetze das Embed nur, wenn Enter gedrückt wird und das Embed fokussiert ist
replaceEmbedWithBlockquote(embed);
}
});
}
});
});
// Beobachte das Embed
observer.observe(embed);
}
// Wähle alle Embeds und iframes aus
document.querySelectorAll('embed, iframe').forEach((embed) => {
embed.setAttribute('tabindex', '0'); // Macht das Embed fokussierbar
observeEmbed(embed); // Beginne mit dem Beobachten des Embeds
});
}
/* - Ende (vorherige Ausgabe) SafariEmbedToBlockquote - */
Um die Embeds in Safari grundlegend in einem <blockquote>-Element anzuzeigen:
/* --- (Vorherige Ausgabe) SafariEmbedToBlockquote_v1 --- */
// Überprüfe, ob der Browser Safari ist
if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
// Wähle alle Embeds und iframes aus
document.querySelectorAll('embed, iframe').forEach((embed) => {
// Erstelle ein neues Blockquote-Element
const blockquote = document.createElement('blockquote');
blockquote.classList.add('safari-embed'); // Klasse hinzufügen
blockquote.innerHTML = "WP-Embed-Link in Safari:<br>'Klick' oder 'Enter': Erste fokussiert, zweite aktiviert."; // Alternativtext oder Beschreibung
// Füge das Blockquote an die Stelle des Embed ein
embed.parentNode.insertBefore(blockquote, embed);
// Entferne das ursprüngliche Embed
embed.remove();
});
}
/* - Ende (vorherige Ausgabe) SafariEmbedToBlockquote_v1 - */
Bewusstsein für Sicherheitsrisiken bei eingebetteten Inhalten
Eingebettete Inhalte, wie beispielsweise Videos oder interaktive Elemente von externen Quellen, können die Benutzererfahrung erheblich bereichern. Allerdings bergen sie auch potenzielle Sicherheitsrisiken. Schadhafter Code oder unsichere Verbindungen könnten dazu führen, dass vertrauliche Informationen kompromittiert oder die Website von Angreifern ausgenutzt wird.
Daher ist es von entscheidender Bedeutung, sich der Risiken bewusst zu sein, die mit dem Einsatz solcher Inhalte verbunden sind. Eine sorgfältige Überprüfung und Anpassung von Scripts, wie dem in diesem Beitrag vorgestellten, kann dazu beitragen, die Sicherheit der Website zu gewährleisten und potenzielle Gefahren zu minimieren.
Sicherheit und Funktionsweise des Scripts "SafariEmbedToBlockquote"
Das Script „SafariEmbedToBlockquote“ wurde speziell entwickelt, um WordPress-Embeds in Safari zu optimieren, indem diese in zugängliche Blockelemente (Blockquotes) umgewandelt werden. Diese Umwandlung erfolgt unter der Bedingung, dass das Embed im Viewport sichtbar ist und die Eingabetaste betätigt wird.
Funktionsweise
Browserüberprüfung: Das Script überprüft, ob der Nutzer Safari verwendet und filtert Chrome-Nutzer heraus, um sicherzustellen, dass die Funktionalität spezifisch für Safari optimiert wird.
Ersetzung von Embeds: Bei Betätigung der Eingabetaste, während das Embed fokussiert ist, wird das ursprüngliche Embed durch ein Blockquote ersetzt. Dabei wird der Link extrahiert und die erforderlichen Attribute werden hinzugefügt.
Sicherheit: Sicherheitsaspekte wurden durch die Validierung von Eingabewerten und die Entfernung potenziell gefährlicher Zeichen (z.B. Anführungszeichen) aus dem Titel berücksichtigt. Das Skript stellt sicher, dass nur vertrauenswürdige und relevante Inhalte in die Blockquote-Struktur eingefügt werden.
Sicherheitsüberlegungen
Es besteht ein gewisses Risiko, dass schädlicher Code in einem WP-Embed eingebettet wird. Die Umwandlung in Blockquotes könnte theoretisch dazu führen, dass solche Inhalte in eine weniger kontrollierte Umgebung gelangen. Durch die Implementierung der beschriebenen Validierungs- und Filtermethoden wird jedoch sichergestellt, dass die Gefahr, die von unsicheren Inhalten ausgeht, minimiert wird. Insbesondere wird darauf geachtet, dass keine schädlichen Skripte oder unsichere URLs in die endgültige Blockquote-Struktur gelangen.
Durch die Vermeidung von Inline-Skripten und die Beschränkung auf spezifische Attribute wird eine robuste Lösung geschaffen, die sowohl die Zugänglichkeit als auch die Sicherheit der Benutzererfahrung verbessert.
Schlussfolgerung
Die Umwandlung von Embeds in Blockquotes erhöht nicht nur die Zugänglichkeit, sondern reduziert auch Sicherheitsrisiken. Es ist wichtig, das Script regelmäßig zu überprüfen und zu aktualisieren, um mögliche Bedrohungen proaktiv zu erkennen und zu beheben.
Das Script kann von jedem Nutzer in ChatGPT überprüft und angepasst werden. Die Verantwortung für die korrekte Implementierung und Sicherheit liegt jedoch beim jeweiligen Webmaster der Website. Weger.at übernimmt keine Haftung für etwaige Probleme, die aus der Nutzung des Scripts resultieren.
Anhang zur Sicherheit
Das Verständnis von Sicherheitsrisiken im Zusammenhang mit WP-Embeds und der Umwandlung in Blockquotes ist wichtig, primär, wenn man bedenkt, dass Sicherheit ein fortlaufender Prozess ist. Hier sind einige Punkte, die zu beachten sind:
1. Sicherheit von WP-Embeds
Standardisierte Inhalte: WP-Embeds stammen in der Regel von vertrauenswürdigen Quellen und sind standardisiert, was das Risiko von schädlichen Inhalten reduziert. WordPress selbst hat Mechanismen, um die Einbettung von Inhalten zu kontrollieren und zu validieren.
CORS und X-Frame-Options: Viele Plattformen verwenden Sicherheitsheader wie X-Frame-Options oder CORS-Richtlinien, die die Art und Weise einschränken, wie Inhalte in einem iframe eingebettet werden können. Das bietet zusätzlichen Schutz.
2. Risiken bei der Umwandlung
XSS (Cross-Site Scripting): Wenn du Benutzereingaben oder nicht validierte Daten direkt in das DOM einfügst, besteht das Risiko, dass schädlicher JavaScript-Code ausgeführt wird. Dies kann passieren, wenn ein schädlicher Link oder Titel verarbeitet wird.
Unsichere URLs: Auch wenn die ursprünglichen Embeds sicher sind, könnte der Prozess der URL-Manipulation oder der Verlinkung auf andere Webseiten potenziell riskante Inhalte einführen.
3. Wie das Script verbessert wurde
Validierung von URLs: Das Script enthält jetzt eine Funktion zur Validierung von URLs (isValidUrl()), die sicherstellt, dass nur URLs verarbeitet werden, die einem bestimmten Muster entsprechen. Dadurch wird das Risiko von schädlichen Weiterleitungen oder unzulässigen URLs minimiert.
Verwendung von textContent: Durch die Verwendung von textContent anstelle von innerHTML wird das Risiko von XSS-Angriffen verringert. Damit wird sichergestellt, dass keine HTML-Elemente oder Skripte in den Titel eingefügt werden können, die schädlich sein könnten.
Fazit
Obwohl WP-Embeds als relativ sicher gelten, können zusätzliche Sicherheitsmaßnahmen niemals schaden. Das überarbeitete Script hat Maßnahmen implementiert, um potenzielle Risiken zu minimieren, indem es sicherstellt, dass nur gültige und sichere URLs verwendet und die Inhalte korrekt verarbeitet werden. Dennoch ist es ratsam, regelmäßig Sicherheitsupdates durchzuführen und den Code auf neue Sicherheitsbedrohungen zu überprüfen, um die Sicherheit der Anwendung kontinuierlich zu gewährleisten.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo! – zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Die Erstellung von Website-Inhalten erfordert oft kreative Ideen. Es wäre interessant zu erfahren, wo Ideen für die Gestaltung der Website-Inhalte gefunden werden und wie diese gestaltet werden. Bitte mitteilen, wie typischerweise Inspiration für die Website-Inhalte gefunden wird.
Sie können die Tastaturnavigation nutzen: Tab zum Fokussieren, Leertaste zum Auswählen und Esc zum Schließen der Rundfrage.
Wird geladen ...
Falls alle Optionen ausgewählt werden sollen, empfiehlt es sich, im Ausschlussverfahren festzustellen, auf welche am ehesten verzichtet werden kann, und dann das auszuwählen, was am wichtigsten erscheint.
Hinweis zur Tastaturnavigation: Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
🎶 Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Zur Optimierung unserer Website nutzen wir Tools wie 'Statify' und 'Visit Duration', die anonymisierte Daten wie die Verweildauer erfassen.
'Ist das Plug-in Docket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Lesen Sie die Inhalte nicht bequem?
Erhöhen Sie die Schriftgröße über die der Headerzeile oder gleich hier:
NORMAL, LARGE oder X-LARGE
Möchten Sie das Licht an- oder ausschalten?
Bitte sehr: Licht Ein/Aus
… auch Kontrast -/+ anpassen.
Sie können auch die Tastatur verwenden: Fokus mit Tab, Auswahl mit Space und Schließen mit Esc.
Im Inhalt die Tastaturnavigation:
Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
Tabulator (Tab): Navigiert durch interaktive Elemente.
Shift + Tab: Gehe zurück zum vorherigen Element.
Enter: Erste Betätigung fokussiert, zweite aktiviert.
Pfeiltasten: Scrollen in Texten oder Menüs.
Leertaste: Aktiviert Header-Buttons und scrollt im Content.
