From a649859ace22da3120bcf684fd5cd6f72ceb018c Mon Sep 17 00:00:00 2001
From: mdn-bot <108879845+mdn-bot@users.noreply.github.com>
Date: Thu, 23 Jan 2025 19:26:44 +0000
Subject: [PATCH] chore(de): translate diff [5af8d52f5d]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Machine translation from English using gpt-4o-2024-08-06.

Source: https://github.com/mdn/content/commit/5af8d52f5dec28f5a5556b1b98765847098a0071

System prompt:

```md
You are tasked with translating MDN Web Docs content from English to German.

Ensure that the translation is accurate, preserves technical terminology, and follows the rules provided below.

# Rules for Translation

1. Format:

   - The input is a Markdown file.
   - The output should be a Markdown file.
   - Return the raw output, without wrapping it in a Markdown code block.
   - Keep GFM alert syntax untranslated, such as `> [!NOTE]`, `> [!WARNING]`, and `> [!CALLOUT]`.
   - If the input contains HTML tags wrapped in backticks (e.g. `<video>`), make sure they are wrapped in the output.
   - If the input contains HTML tags escaped with a slash (e.g. `\<length>`), make sure they are escaped in the output.

2. Language:

   - Prefer formal language ("Sie") over informal language ("du").

3. Code blocks:

   - Do not translate code blocks.
   - Do not translate terms wrapped in backticks.

4. Macro calls:

   - MDN uses macros for dynamic content insertion. These macros must remain **unchanged** and not translated.
   - Macro calls start with `{{`, followed by the macro name, optional parameters, and end with `}}`.
   - Avoid invalid macro calls by ensuring curly braces, parentheses, and quotes are closed properly.

5. Technical terms and code snippets in text:

   - Keep technical terms like element names, attributes, and method names in **English**. Only translate the surrounding descriptive text.

6. Links and References:

   - Translate link descriptions, but keep the URLs and their structure intact.
   - Do not change the locale in URLs.

7. Glossary:

   - "Browser compatibility" => "Browser-Kompatibilität"
   - "Guide" => "Leitfaden"
   - "How to" => "Anleitung"

# Translation Scope

Translate the following Markdown content from **English** to **German** while adhering to the rules above.
```
---
 .../core/accessibility/html/index.md          | 248 +++++++++---------
 .../getpropertyvalue/index.md                 |  37 ++-
 .../web/api/htmlmodelement/datetime/index.md  |  69 +++++
 .../web/api/htmltimeelement/datetime/index.md |  14 +-
 .../getcurrenttime/index.md                   |  67 +++++
 .../getsimpleduration/index.md                |  68 +++++
 .../svganimationelement/getstarttime/index.md |  69 +++++
 files/de/web/api/window/matchmedia/index.md   |  38 ++-
 files/de/web/html/element/time/index.md       |  56 ++--
 .../web/http/headers/x-frame-options/index.md |  46 ++--
 10 files changed, 508 insertions(+), 204 deletions(-)
 create mode 100644 files/de/web/api/htmlmodelement/datetime/index.md
 create mode 100644 files/de/web/api/svganimationelement/getcurrenttime/index.md
 create mode 100644 files/de/web/api/svganimationelement/getsimpleduration/index.md
 create mode 100644 files/de/web/api/svganimationelement/getstarttime/index.md

diff --git a/files/de/learn_web_development/core/accessibility/html/index.md b/files/de/learn_web_development/core/accessibility/html/index.md
index 4a0819d46..4472ee37c 100644
--- a/files/de/learn_web_development/core/accessibility/html/index.md
+++ b/files/de/learn_web_development/core/accessibility/html/index.md
@@ -2,28 +2,28 @@
 title: "HTML: Eine gute Grundlage für Barrierefreiheit"
 slug: Learn_web_development/Core/Accessibility/HTML
 l10n:
-  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
+  sourceCommit: 667705a73ebb31cebdbe1365c5da148368d7e319
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn_web_development/Core/Accessibility/Tooling","Learn_web_development/Core/Accessibility/CSS_and_JavaScript", "Learn_web_development/Core/Accessibility")}}
 
-Ein Großteil des Webinhalts kann barrierefrei gestaltet werden, indem sichergestellt wird, dass die richtigen Hypertext Markup Language-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel untersucht im Detail, wie HTML eingesetzt werden kann, um maximale Barrierefreiheit zu gewährleisten.
+Ein Großteil der Webinhalte kann zugänglich gemacht werden, indem stets die richtigen Hypertext Markup Language-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel beschreibt ausführlich, wie HTML genutzt werden kann, um maximale Barrierefreiheit sicherzustellen.
 
 <table>
   <tbody>
     <tr>
       <th scope="row">Voraussetzungen:</th>
-      <td>Vertrautheit mit <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a>, ein <a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">grundlegendes Verständnis der Konzepte zur Barrierefreiheit</a>.</td>
+      <td>Vertrautheit mit <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a>, ein <a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">grundlegendes Verständnis von Barrierefreiheitskonzepten</a>.</td>
     </tr>
     <tr>
       <th scope="row">Lernziele:</th>
       <td>
         <ul>
-          <li>Verwendung von semantischem HTML, auch bekannt als "Das richtige Element für den richtigen Zweck", da der Browser so viele integrierte Barrierefreiheits-Hooks bereitstellt.</li>
-          <li>Beste Praktiken für Barrierefreiheit wie Alt-Text, gute Link-Praktiken, Formularbeschriftungen und Zeilen- und Spaltenüberschriften in Tabellen.</li>
-          <li>Verwendung einfacher, klarer Sprache, Vermeidung von Slang und Abkürzungen, wenn möglich, und Bereitstellung von Definitionen, wenn dies nicht möglich ist.</li>
+          <li>Verwenden von semantischem HTML, auch bekannt als "Das richtige Element für den richtigen Zweck", weil der Browser so viele integrierte Barrierefreiheits-Anker bietet.</li>
+          <li>Barrierefreie Best Practices wie Alt-Text, gute Link-Beschriftung, Formularbeschriftungen und Tabellenzeilen- und -spaltenüberschriften und Scoping.</li>
+          <li>Verwendung einfacher, klarer Sprache, Vermeidung von Slang und Abkürzungen, soweit möglich, und Bereitstellung von Definitionen, wenn dies nicht möglich ist.</li>
           <li>Das Konzept und die Praxis der Tastaturzugänglichkeit.</li>
           <li>Die Bedeutung der Quellreihenfolge.</li>
         </ul>
@@ -34,43 +34,43 @@ Ein Großteil des Webinhalts kann barrierefrei gestaltet werden, indem sicherges
 
 ## HTML und Barrierefreiheit
 
-Wenn Sie mehr über HTML lernen — mehr Ressourcen lesen, mehr Beispiele ansehen usw. — sehen Sie immer wieder ein gemeinsames Thema: die Bedeutung der Verwendung von semantischem HTML (manchmal auch als POSH, oder Plain Old Semantic HTML bezeichnet). Dies bedeutet, dass die richtigen HTML-Elemente so oft wie möglich für ihren vorgesehenen Zweck verwendet werden.
+Während Sie mehr über HTML lernen — mehr Ressourcen lesen, sich mehr Beispiele ansehen, usw. — werden Sie ein wiederkehrendes Thema bemerken: die Bedeutung der Verwendung von semantischem HTML (manchmal auch POSH, oder Plain Old Semantic HTML genannt). Das bedeutet, die richtigen HTML-Elemente für ihren beabsichtigten Zweck so oft wie möglich zu verwenden.
 
-Sie fragen sich vielleicht, warum das so wichtig ist. Schließlich können Sie eine Kombination aus CSS und JavaScript verwenden, um jedes HTML-Element so zu gestalten, dass es sich in beliebiger Weise verhält. Zum Beispiel könnte ein Steuerknopf zum Abspielen eines Videos auf Ihrer Website folgendermaßen ausgezeichnet sein:
+Sie fragen sich vielleicht, warum das so wichtig ist. Schließlich können Sie mit einer Kombination aus CSS und JavaScript fast jedes HTML-Element so verhalten lassen, wie Sie es wünschen. Zum Beispiel könnte eine Steuertaste, um ein Video auf Ihrer Website abzuspielen, folgendermaßen markiert sein:
 
 ```html
 <div>Play video</div>
 ```
 
-Aber wie Sie weiter unten ausführlicher sehen werden, macht es Sinn, das richtige Element für die Aufgabe zu verwenden:
+Aber wie Sie später detaillierter sehen werden, macht es Sinn, das richtige Element für den Zweck zu verwenden:
 
 ```html
 <button>Play video</button>
 ```
 
-HTML `<button>`s haben nicht nur einige geeignete Standard-Stile (die Sie vermutlich überschreiben möchten), sie haben auch eine integrierte Tastaturzugänglichkeit — Benutzer können mit der <kbd>Tab</kbd>-Taste zwischen den Schaltflächen navigieren und ihre Auswahl mit <kbd>Space</kbd>, <kbd>Return</kbd> oder <kbd>Enter</kbd> aktivieren.
+Nicht nur haben HTML-`<button>`s einige passende Stylings standardmäßig angewendet (die Sie wahrscheinlich überschreiben möchten), sie haben auch eine eingebaute Tastaturzugänglichkeit — Benutzer können zwischen Schaltflächen mit der <kbd>Tab</kbd>-Taste navigieren und ihre Auswahl mit <kbd>Space</kbd>, <kbd>Return</kbd> oder <kbd>Enter</kbd> aktivieren.
 
-Semantisches HTML dauert nicht länger zu schreiben als nicht-semantische (schlechte) Markierungen, wenn Sie es von Anfang an konsequent umsetzen. Noch besser, semantische Markierungen haben neben der Barrierefreiheit auch andere Vorteile:
+Semantisches HTML dauert nicht länger zu schreiben als nicht-semantisches (schlechtes) Markup, wenn Sie es von Anfang an konsistent tun. Noch besser, semantisches Markup hat neben der Barrierefreiheit noch andere Vorteile:
 
-1. **Einfacher zu entwickeln** — wie bereits erwähnt, erhalten Sie einige Funktionen kostenlos, außerdem ist es wahrscheinlich einfacher zu verstehen.
-2. **Besser auf mobilen Geräten** — semantisches HTML ist tendenziell leichter in der Dateigröße als nicht-semantischer Spaghetti-Code und einfacher responsiv zu gestalten.
-3. **Gut für SEO** — Suchmaschinen geben Schlüsselwörtern in Überschriften, Links usw. mehr Bedeutung als Schlüsselwörter, die in nicht-semantischen `<div>`s enthalten sind, sodass Ihre Dokumente für Kunden leichter auffindbar sind.
+1. **Einfacher zu entwickeln** — wie bereits erwähnt, erhalten Sie einige Funktionalitäten kostenlos, und es ist wohl auch verständlicher.
+2. **Besser auf Mobilgeräten** — semantisches HTML ist tendenziell leichter in der Dateigröße als nicht-semantischer Spaghetti-Code und einfacher, responsive zu gestalten.
+3. **Gut für SEO** — Suchmaschinen geben Schlüsselwörtern in Überschriften, Links usw. mehr Bedeutung als Schlüsselwörtern, die in nicht-semantischen `<div>`s enthalten sind, sodass Ihre Dokumente von Kunden leichter gefunden werden können.
 
-Schauen wir uns barrierefreies HTML genauer an.
+Lassen Sie uns einen detaillierten Blick auf zugängliches HTML werfen.
 
 ## Gute Semantik
 
-Wir haben bereits über die Bedeutung einer richtigen Semantik gesprochen und warum wir das richtige HTML-Element für die Aufgabe verwenden sollten. Dies kann nicht ignoriert werden, da dies einer der Hauptpunkte ist, an denen die Barrierefreiheit bei falscher Handhabung erheblich beeinträchtigt wird.
+Wir haben bereits über die Bedeutung richtiger Semantik gesprochen und warum wir das richtige HTML-Element für den Zweck verwenden sollten. Dies kann nicht ignoriert werden, da es einer der Hauptbereiche ist, in denen Barrierefreiheit stark beeinträchtigt werden kann, wenn es nicht richtig gehandhabt wird.
 
-Im Web machen die Leute mit HTML-Markup die seltsamsten Dinge. Einige Missbräuche von HTML sind auf veraltete Praktiken zurückzuführen, die noch nicht völlig aufgegeben wurden, und einige sind einfach nur Ignoranz. Unabhängig vom Fall sollten Sie solchen schlechten Code ersetzen.
+Draußen im Web ist es wahr, dass Menschen einige sehr seltsame Dinge mit HTML-Markup machen. Einige Missbräuche von HTML sind auf alte Praktiken zurückzuführen, die nicht vollständig vergessen wurden, und andere basieren einfach auf Unwissenheit. Unabhängig vom Fall sollten Sie solchen schlechten Code ersetzen.
 
-Manchmal sind Sie nicht in der Lage, schlechten Markup-Code loszuwerden — Ihre Seiten könnten von einer Art serverseitiger Framework generiert werden, über das Sie keine volle Kontrolle haben, oder Sie könnten Dritt-Inhalte auf Ihrer Seite haben (wie Werbebanner), über die Sie keine Kontrolle haben.
+Manchmal sind Sie nicht in der Lage, schlechtes Markup loszuwerden — Ihre Seiten könnten von einer Art serverseitigem Framework generiert werden, über das Sie keine vollständige Kontrolle haben, oder Sie könnten Inhalt von Drittanbietern auf Ihrer Seite haben (wie Werbebanner), über die Sie keine Kontrolle haben.
 
-Das Ziel ist nicht "alles oder nichts"; jede Verbesserung, die Sie vornehmen können, hilft der Sache der Barrierefreiheit.
+Das Ziel ist nicht "alles oder nichts"; jede Verbesserung, die Sie machen können, wird der Barrierefreiheit helfen.
 
 ### Textinhalt
 
-Eine der besten Hilfen für Benutzer von Screenreadern ist eine exzellente Inhaltsstruktur mit Überschriften, Absätzen, Listen usw. Ein ausgezeichnetes semantisches Beispiel könnte in etwa so aussehen:
+Eine der besten Hilfen für Benutzer eines Screenreaders ist eine hervorragende Inhaltsstruktur mit Überschriften, Absätzen, Listen usw. Ein ausgezeichnetes semantisches Beispiel könnte ungefähr so aussehen:
 
 ```html example-good
 <h1>My heading</h1>
@@ -100,14 +100,14 @@ Eine der besten Hilfen für Benutzer von Screenreadern ist eine exzellente Inhal
 </p>
 ```
 
-Wir haben eine Version mit längerem Text vorbereitet, die Sie mit einem Screenreader ausprobieren können (siehe [good-semantics.html](https://mdn.github.io/learning-area/accessibility/html/good-semantics.html)). Wenn Sie versuchen, darin zu navigieren, werden Sie feststellen, dass dies ziemlich einfach ist:
+Wir haben eine Version mit längerem Text vorbereitet, die Sie mit einem Screenreader ausprobieren können (siehe [good-semantics.html](https://mdn.github.io/learning-area/accessibility/html/good-semantics.html)). Wenn Sie versuchen, durch dies zu navigieren, werden Sie feststellen, dass es ziemlich einfach zu navigieren ist:
 
-1. Der Screenreader liest jede Überschrift vor, während Sie durch den Inhalt fortschreiten und benachrichtigt Sie, was eine Überschrift, ein Absatz usw. ist.
-2. Er stoppt nach jedem Element, sodass Sie in einem für Sie angenehmen Tempo fortfahren können.
+1. Der Screenreader liest jede Überschrift vor, während Sie durch den Inhalt fortschreiten, und informiert Sie, was eine Überschrift ist, was ein Absatz ist, usw.
+2. Es stoppt nach jedem Element, sodass Sie in Ihrem eigenen Tempo fortfahren können.
 3. Sie können in vielen Screenreadern zur nächsten/vorherigen Überschrift springen.
-4. Sie können in vielen Screenreadern auch eine Liste aller Überschriften anzeigen, die Ihnen als praktische Inhaltsübersicht bei der Suche nach bestimmten Inhalten dient.
+4. Sie können auch in vielen Screenreadern eine Liste aller Überschriften anzeigen, die Sie wie ein praktisches Inhaltsverzeichnis verwenden können, um bestimmte Inhalte zu finden.
 
-Menschen schreiben manchmal Überschriften, Absätze usw. mit Zeilenumbrüchen und fügen HTML-Elemente rein für das Styling hinzu, etwas so:
+Manchmal schreiben Menschen Überschriften, Absätze usw. unter Verwendung von Zeilenumbrüchen und fügen HTML-Elemente ausschließlich für die Gestaltung hinzu, etwa so:
 
 ```html example-bad
 <span style="font-size: 3em">My heading</span> <br /><br />
@@ -132,23 +132,23 @@ This is the second subsection of my content. I think is more interesting than
 the last one.
 ```
 
-Wenn Sie unsere längere Version mit einem Screenreader ausprobieren (siehe [bad-semantics.html](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), werden Sie keine sehr gute Erfahrung machen — der Screenreader hat nichts, was als Wegweiser fungiert, sodass Sie keine nützliche Inhaltsübersicht erhalten können, und die gesamte Seite wird als ein einziger gigantischer Block angesehen, der in einem Rutsch, alles auf einmal, vorgelesen wird.
+Wenn Sie unsere längere Version mit einem Screenreader ausprobieren (siehe [bad-semantics.html](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), werden Sie keine sehr gute Erfahrung machen — der Screenreader hat nichts, das er als Wegweiser verwenden kann, sodass Sie kein nützliches Inhaltsverzeichnis abrufen können, und die gesamte Seite wird als ein einziger großer Block gesehen, sodass sie in einem Zug vorgelesen wird.
 
-Es gibt auch andere Probleme über die Barrierefreiheit hinaus — es ist schwieriger, den Inhalt mit CSS zu stylen oder mit JavaScript zu manipulieren, da keine Elemente als Selektoren verwendet werden können.
+Es gibt auch andere Probleme jenseits der Barrierefreiheit — es ist schwieriger, den Inhalt mit CSS zu gestalten oder mit JavaScript zu manipulieren, da es keine Elemente gibt, die als Selektoren verwendet werden können.
 
 #### Verwendung klarer Sprache
 
-Die Sprache, die Sie verwenden, kann ebenfalls die Barrierefreiheit beeinflussen. Im Allgemeinen sollten Sie klare Sprache verwenden, die nicht übermäßig komplex ist und keine unnötigen Fachbegriffe oder Slang-Ausdrücke verwendet. Dies kommt nicht nur Menschen mit kognitiven oder anderen Behinderungen zugute, sondern auch Lesern, für die der Text nicht in ihrer Muttersprache geschrieben ist, jüngeren Menschen …, allen, in der Tat! Abgesehen davon sollten Sie versuchen, Sprache und Zeichen zu vermeiden, die vom Screenreader nicht eindeutig vorgelesen werden. Zum Beispiel:
+Die Sprache, die Sie verwenden, kann auch die Barrierefreiheit beeinflussen. Im Allgemeinen sollten Sie klare Sprache verwenden, die nicht übermäßig komplex ist und keine unnötigen Fachbegriffe oder Slangbegriffe verwendet. Dies kommt nicht nur Menschen mit kognitiven oder anderen Behinderungen zugute; es hilft Lesern, für die der Text nicht in ihrer Muttersprache geschrieben ist, jüngeren Leuten ... eigentlich allen! Abgesehen davon sollten Sie versuchen, Sprache und Zeichen zu vermeiden, die vom Screenreader nicht klar vorgelesen werden. Zum Beispiel:
 
-- Verwenden Sie keine Bindestriche, wenn Sie sie vermeiden können. Anstelle von 5–7 schreiben Sie 5 bis 7.
+- Verwenden Sie keine Bindestriche, wenn dies vermieden werden kann. Schreiben Sie statt 5–7 lieber 5 bis 7.
 - Erweitern Sie Abkürzungen — anstelle von Jan schreiben Sie Januar.
-- Erweitern Sie Akronyme, zumindest einmal oder zweimal, und verwenden Sie dann den [`<abbr>`](/de/docs/Web/HTML/Element/abbr)-Tag, um sie zu beschreiben.
+- Erweitern Sie Akronyme mindestens einmal oder zweimal und verwenden Sie das [`<abbr>`](/de/docs/Web/HTML/Element/abbr) Tag, um sie zu beschreiben.
 
 ### Seitenlayouts
 
-In den schlechten alten Tagen haben Menschen Seitenlayouts mit HTML-Tabellen erstellt — verschiedene Tabellenzellen wurden verwendet, um die Kopfzeile, Fußzeile, Seitenleiste, Hauptinhaltsspalte usw. zu enthalten. Dies ist keine gute Idee, da ein Screenreader wahrscheinlich verwirrende Ausgaben geben wird, besonders wenn das Layout komplex ist und viele geschachtelte Tabellen enthält.
+In den schlechten alten Zeiten verwendeten Leute HTML-Tabellen, um Seitenlayouts zu erstellen — verschiedene Tabellenzellen zur Aufnahme von Kopfzeile, Fußzeile, Seitenleiste, Hauptinhaltsbereich usw. zu verwenden. Dies ist keine gute Idee, da ein Screenreader wahrscheinlich verwirrende Ausgaben liefert, insbesondere wenn das Layout komplex ist und viele verschachtelte Tabellen enthält.
 
-Versuchen Sie unser Beispiel [table-layout.html](https://mdn.github.io/learning-area/accessibility/html/table-layout.html) Beispiel, das ungefähr so aussieht:
+Probieren Sie unser Beispiel [table-layout.html](https://mdn.github.io/learning-area/accessibility/html/table-layout.html) aus, das ungefähr so aussieht:
 
 ```html
 <table width="1200">
@@ -216,9 +216,9 @@ Versuchen Sie unser Beispiel [table-layout.html](https://mdn.github.io/learning-
 </table>
 ```
 
-Wenn Sie versuchen, dies mit einem Screenreader zu navigieren, wird er Ihnen wahrscheinlich sagen, dass es eine Tabelle zu betrachten gibt (obwohl einige Screenreader einen Unterschied zwischen Tabellenlayouts und Datentabellen erkennen können). In Abhängigkeit vom verwendeten Screenreader müssen Sie dann wahrscheinlich in die Tabelle als Objekt gehen und ihre Funktionen separat betrachten, bevor Sie die Tabelle wieder verlassen und den Inhalt weiter navigieren können.
+Wenn Sie versuchen, mit einem Screenreader zu navigieren, wird er Ihnen wahrscheinlich mitteilen, dass sich eine Tabelle zum Ansehen befindet (obwohl einige Screenreader unterscheiden können zwischen Layouts mit Tabellen und Datentabellen). Sie werden dann wahrscheinlich (abhängig davon, welchen Screenreader Sie verwenden) in die Tabelle als Objekt gehen und ihre Merkmale separat ansehen müssen, dann wieder aus der Tabelle heraus, um mit dem Navigieren im Inhalt fortzufahren.
 
-Tabellenlayouts sind ein Relikt der Vergangenheit — sie machten damals Sinn, als CSS-Unterstützung in Browsern noch nicht weit verbreitet war, aber jetzt schaffen sie nur Verwirrung für Screenreader-Benutzer. Darüber hinaus erfordert ihr Quellcode mehr Markup, was sie weniger flexibel und schwieriger zu warten macht. Sie können diese Aussagen überprüfen, indem Sie Ihre vorherige Erfahrung mit einem [moderneren Website-Strukturbeispiel](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/) vergleichen, das ungefähr so aussehen könnte:
+Tabellenlayouts sind ein Relikt der Vergangenheit — sie machten Sinn, als CSS-Unterstützung in Browsern noch nicht weit verbreitet war, aber jetzt verursachen sie nur Verwirrung bei Benutzern von Screenreadern. Darüber hinaus erfordert ihr Quellcode mehr Markup, was sie weniger flexibel und schwerer zu warten macht. Sie können diese Behauptungen verifizieren, indem Sie Ihre vorherige Erfahrung mit einem [moderneren Website-Struktur-Beispiel](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/) vergleichen, das ungefähr so aussehen könnte:
 
 ```html
 <header>
@@ -252,27 +252,27 @@ Tabellenlayouts sind ein Relikt der Vergangenheit — sie machten damals Sinn, a
 </footer>
 ```
 
-Wenn Sie unser moderneres Strukturbeispiel mit einem Screenreader ausprobieren, werden Sie feststellen, dass das Layout-Markup nicht mehr mit der Inhaltssprache interferiert oder Verwirrung stiftet. Es ist auch viel schlanker und kleiner in Bezug auf die Codegröße, was bedeutet, dass der Code einfacher zu warten ist und weniger Bandbreite benötigt, um von Benutzern heruntergeladen zu werden, was besonders für diejenigen von Vorteil ist, die langsame Verbindungen haben.
+Wenn Sie unser moderneres Strukturbeispiel mit einem Screenreader ausprobieren, werden Sie feststellen, dass das Layout-Markup nicht mehr in die Inhalteingabe eingreift oder Verwirrung stiftet. Es ist auch viel schlanker und kleiner in Bezug auf den Codeumfang, was bedeutet, dass der Code einfacher zu warten ist und Benutzer weniger Bandbreite benötigen, um ihn herunterzuladen, was es besonders vorteilhaft für diejenigen macht, die mit langsamen Verbindungen arbeiten.
 
-Ein weiterer zu beachtender Punkt bei der Erstellung von Layouts ist die Verwendung von HTML-Semantik-Elementen, wie im obigen Beispiel gesehen (siehe [content sectioning](/de/docs/Web/HTML/Element#content_sectioning)) — Sie können ein Layout nur mit verschachtelten {{htmlelement("div")}}-Elementen erstellen, aber es ist besser, geeignete Abschnittselemente zu verwenden, um Ihre Hauptnavigation ({{htmlelement("nav")}}), Fußzeile ({{htmlelement("footer")}}), sich wiederholende Inhaltseinheiten ({{htmlelement("article")}}) usw. zu umwickeln. Diese bieten zusätzliche Semantik für Screenreader (und andere Tools), um Benutzern zusätzliche Hinweise auf den von ihnen navigierten Inhalt zu geben (siehe [Screen Reader Support for new HTML5 Section Elements](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/) für eine Vorstellung davon, wie die Unterstützung von Screenreadern aussieht).
+Ein weiterer Aspekt bei der Erstellung von Layouts ist die Verwendung von HTML-semantischen Elementen, wie im obigen Beispiel zu sehen ist (siehe [Inhaltsabschnitte](/de/docs/Web/HTML/Element#content_sectioning)) — Sie können ein Layout nur mit verschachtelten {{htmlelement("div")}}-Elementen erstellen, aber es ist besser, geeignete Abschnittselemente zu verwenden, um Ihre Hauptnavigation ({{htmlelement("nav")}}), den Fußzeilenbereich ({{htmlelement("footer")}}), wiederkehrende Inhaltseinheiten ({{htmlelement("article")}}) usw. zu umwickeln. Diese bieten zusätzliche Semantik für Screenreader (und andere Werkzeuge), um Benutzern zusätzliche Hinweise zu den Inhalten zu geben, die sie durchstöbern (siehe [Screen Reader Support für neue HTML5-Abschnitts-Elemente](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/) für eine Idee, wie gut Screenreader-Unterstützung ist).
 
 > [!NOTE]
-> Zusätzlich zu guten Semantiken und einem ansprechenden Layout sollte Ihr Inhalt in seiner Quellreihenfolge logisch sinnvoll sein — Sie können ihn später immer mit CSS an beliebiger Stelle platzieren, aber Sie sollten die Quellreihenfolge von Anfang an richtig gestalten, damit das, was Screenreader-Benutzern vorgelesen wird, sinnvoll ist.
+> Neben einer guten Semantik und einem attraktiven Layout sollte Ihr Inhalt logisch sinnvoll in seiner Quellreihenfolge sein — Sie können ihn immer später mit CSS an den gewünschten Platz bringen, aber Sie sollten die Quellreihenfolge von Anfang an richtig gestalten, damit das, was den Benutzern von Screenreadern vorgelesen wird, Sinn ergibt.
 
 ### UI-Steuerelemente
 
-Mit UI-Steuerelementen meinen wir die Hauptteile von Webdokumenten, mit denen Benutzer interagieren — meist Tasten, Links und Formularelemente. In diesem Abschnitt werden wir die grundlegenden Barrierefreiheitsbedenken betrachten, die beim Erstellen solcher Steuerelemente bewusst sein sollten. Spätere Artikel zu WAI-ARIA und Multimedia werden andere Aspekte der Benutzeroberflächenzugänglichkeit betrachten.
+Mit UI-Steuerelementen meinen wir die wichtigsten Teile von Webdokumenten, mit denen Benutzer interagieren — meistens Schaltflächen, Links und Formularelemente. In diesem Abschnitt werden wir die grundlegenden Barrierefreiheitsbedenken betrachten, die bei der Erstellung solcher Steuerelemente zu beachten sind. Spätere Artikel über WAI-ARIA und Multimedia werden sich mit anderen Aspekten der UI-Zugänglichkeit befassen.
 
-Ein Schlüsselmerkmal der Zugänglichkeit von UI-Steuerelementen ist, dass sie in den meisten Fällen von der Tastatur standardmäßig manipuliert werden können. Sie können dies mit unserem [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) Beispiel ausprobieren (siehe den [Quellcode](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)). Öffnen Sie dies in einem neuen Tab und versuchen Sie, die Tabulatortaste zu drücken; nach ein paar Tastenanschlägen sollten Sie sehen, dass sich der Tabfocus durch die verschiedenen fokussierbaren Elemente bewegt. Die fokussierten Elemente erhalten in jedem Browser einen hervorgehobenen Standardstil (dieser unterscheidet sich leicht zwischen verschiedenen Browsern), sodass Sie sehen können, welches Element fokussiert ist.
+Ein wesentlicher Aspekt der Barrierefreiheit von UI-Steuerelementen ist, dass Browser standardmäßig ermöglichen, dass diese mit der Tastatur manipuliert werden können. Sie können dies mit unserem [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) Beispiel ausprobieren (siehe den [Quellcode](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)). Öffnen Sie dies in einem neuen Tab und versuchen Sie, die Tab-Taste zu drücken; nach einigen Drücken sollten Sie feststellen, dass der Tab-Schwerpunkt beginnt, sich durch die verschiedenen fokussierbaren Elemente zu bewegen. Die fokussierten Elemente erhalten einen hervorgehobenen Standardstil in jedem Browser (er unterscheidet sich leicht zwischen verschiedenen Browsern), sodass Sie erkennen können, welches Element fokussiert ist.
 
-![Drei Tasten mit dem Text "Click me!", "Click me too!" und "And me!" innen. Die dritte Taste hat einen blauen Umriss, der den aktuellen Tabfocus anzeigt.](button-focused-unfocused.png)
+![Drei Schaltflächen mit dem Text "Klicken Sie mich!", "Klicken Sie mich auch!" und "Und mich!" jeweils in ihnen. Die dritte Schaltfläche hat einen blauen Umriss, um den aktuellen Tab-Fokus anzuzeigen.](button-focused-unfocused.png)
 
 > [!NOTE]
-> Sie können ein Overlay aktivieren, das die Seiten-Tabs-Reihenfolge in Ihren Entwicklertools anzeigt. Weitere Informationen finden Sie unter: [Accessibility Inspector > Show web page tabbing order](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order).
+> Sie können ein Overlay aktivieren, das die Tabulatorreihenfolge der Seite in Ihren Entwicklertools anzeigt. Für weitere Informationen siehe: [Accessibility Inspector > Anzeige der Tabulatorreihenfolge der Webseite anzeigen](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order).
 
-Anschließend können Sie [Enter/Return] drücken, um einen fokussierten Link zu folgen oder eine Schaltfläche zu drücken (wir haben etwas JavaScript eingefügt, um die Schaltflächen eine Nachricht ausgeben zu lassen), oder anfangen, Text in ein Texteingabefeld einzugeben. Andere Formularelemente haben unterschiedliche Steuerelemente; zum Beispiel kann das {{htmlelement("select")}}-Element seine Optionen anzeigen und mit den Pfeiltasten nach oben und unten durchgegangen werden.
+Sie können dann die Eingabetaste/Return drücken, um einem fokussierten Link zu folgen oder eine Schaltfläche zu drücken (wir haben etwas JavaScript hinzugefügt, um die Schaltflächen eine Nachricht ausgeben zu lassen), oder beginnen zu tippen, um Text in ein Texteingabefeld einzugeben. Andere Formularelemente haben unterschiedliche Steuerelemente; zum Beispiel kann das {{htmlelement("select")}}-Element seine Optionen anzeigen und mit den Pfeiltasten oben und unten durchblättern lassen.
 
-Diese Funktionalität erhalten Sie im Wesentlichen kostenlos, einfach durch die Verwendung der geeigneten Elemente, z.B.
+Sie erhalten diese Funktionalität im Grunde kostenlos, indem Sie die entsprechenden Elemente verwenden, z.B.
 
 ```html example-good
 <h1>Links</h1>
@@ -315,9 +315,9 @@ Diese Funktionalität erhalten Sie im Wesentlichen kostenlos, einfach durch die
 </form>
 ```
 
-Das bedeutet, Links, Tasten, Formularelemente und Beschriftungen angemessen zu verwenden (einschließlich des {{htmlelement("label")}}-Elements für Formularkontrollen).
+Das bedeutet, dass Links, Schaltflächen, Formularelemente und Beschriftungen angemessen (einschließlich des {{htmlelement("label")}}-Elements für Formularelemente) verwendet werden sollten.
 
-Es ist jedoch wiederum der Fall, dass Menschen manchmal seltsame Dinge mit HTML machen. Zum Beispiel sehen Sie manchmal Tasten, die mit {{htmlelement("div")}}s ausgezeichnet sind, z.B.:
+Es ist jedoch erneut der Fall, dass Menschen manchmal seltsame Dinge mit HTML machen. Zum Beispiel sehen Sie manchmal Schaltflächen, die mit {{htmlelement("div")}}s markiert sind, zum Beispiel:
 
 ```html example-bad
 <div data-message="This is from the first button">Click me!</div>
@@ -325,11 +325,11 @@ Es ist jedoch wiederum der Fall, dass Menschen manchmal seltsame Dinge mit HTML
 <div data-message="This is from the third button">And me!</div>
 ```
 
-Aber solch ein Code wird nicht empfohlen — Sie verlieren sofort die native Tastaturzugänglichkeit, die Sie hätten haben können, wenn Sie einfach {{htmlelement("button")}}-Elemente verwendet hätten, zudem erhalten Sie keine der Standard-CSS-Stilierungen, die Tasten erhalten. In dem seltenen bis nicht existierenden Fall, dass Sie ein Nicht-Taste-Element für eine Taste verwenden müssen, verwenden Sie die [`button` role](/de/docs/Web/Accessibility/ARIA/Roles/button_role) und implementieren Sie alle Standard-Schaltflächenverhaltensweisen, einschließlich Tastatur- und Mausunterstützung.
+Aber es wird nicht empfohlen, solchen Code zu verwenden — Sie verlieren sofort die native Tastaturzugänglichkeit, die Sie gehabt hätten, wenn Sie nur {{htmlelement("button")}}-Elemente verwendet hätten, plus Sie bekommen keines der Standard-CSS-Stylings, die Schaltflächen erhalten. In den seltenen bis nicht existierenden Fällen, in denen Sie ein Nicht-Schaltflächenelement für eine Schaltfläche verwenden müssen, verwenden Sie die [`button`-Rolle](/de/docs/Web/Accessibility/ARIA/Roles/button_role) und implementieren Sie alle Standard-Schaltflächenverhaltensweisen, einschließlich Tastatur- und Maustastenunterstützung.
 
 #### Tastaturzugänglichkeit wieder einbauen
 
-Solche Vorteile wieder hinzuzufügen, erfordert etwas Arbeit (Sie können ein Beispiel in unserem [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) Beispiel sehen — siehe auch den [Quellcode](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Hier haben wir unseren gefälschten `<div>`-Tasten die Möglichkeit gegeben, fokussierbar zu sein (einschließlich über Tab) indem wir jedem Attribut `tabindex="0"` geben. Wir fügen auch `role="button"` hinzu, damit Screenreader-Benutzer wissen, dass sie sich auf das Element fokussieren und mit ihm interagieren können:
+Solche Vorteile wieder hinzuzufügen, erfordert etwas Arbeit (Sie können ein Beispiel in unserem [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) Beispiel sehen — siehe auch den [Quellcode](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Hier haben wir unseren gefälschten `<div>`-Schaltflächen die Fähigkeit gegeben, fokussiert zu werden (einschließlich über Tab), indem wir jedem das `tabindex="0"` Attribut zuweisen. Wir fügen auch `role="button"` hinzu, sodass Benutzer von Screenreadern wissen, dass sie das Element fokussieren und damit interagieren können:
 
 ```html
 <div data-message="This is from the first button" tabindex="0" role="button">
@@ -343,12 +343,12 @@ Solche Vorteile wieder hinzuzufügen, erfordert etwas Arbeit (Sie können ein Be
 </div>
 ```
 
-Grundsätzlich ist das [`tabindex`](/de/docs/Web/HTML/Global_attributes/tabindex)-Attribut primär dafür gedacht, fokussierbaren Elementen eine benutzerdefinierte Tab-Reihenfolge zu ermöglichen (in positiver numerischer Reihenfolge spezifiziert), anstatt sie einfach in ihrer Standardquellreihenfolge getabt zu durchlaufen. Dies ist fast immer eine schlechte Idee, da es zu großer Verwirrung führen kann. Verwenden Sie es nur, wenn es wirklich nötig ist, zum Beispiel wenn das Layout Dinge in einer sehr unterschiedlichen visuellen Reihenfolge zum Quellcode anzeigt und Sie die Dinge logischer gestalten möchten. Es gibt zwei weitere Optionen für `tabindex`:
+Im Wesentlichen ist das [`tabindex`](/de/docs/Web/HTML/Global_attributes/tabindex)-Attribut hauptsächlich dazu gedacht, es ermöglicht zu machen, dass tabulierbare Elemente eine benutzerdefinierte Tab-Reihenfolge haben (angegeben in positiver numerischer Reihenfolge), anstatt nur in ihrer Standard-Quellreihenfolge durchtabuliert zu werden. Dies ist fast immer eine schlechte Idee, da es zu großen Verwirrungen führen kann. Verwenden Sie es nur, wenn Sie es wirklich brauchen, zum Beispiel, wenn das Layout die Dinge in einer sehr anderen visuellen Reihenfolge als der Quellcode zeigt und Sie möchten, dass die Dinge logischer funktionieren. Es gibt zwei weitere Optionen für `tabindex`:
 
-- `tabindex="0"` — wie oben erwähnt, ermöglicht dieser Wert, dass nicht normalerweise fokussierbare Elemente fokussierbar werden. Dies ist der nützlichste Wert von `tabindex`.
-- `tabindex="-1"` — dadurch können nicht normalerweise fokussierbare Elemente programmatisch fokussiert werden, z.B. über JavaScript oder als Ziel von Links.
+- `tabindex="0"` — wie oben angegeben, ermöglicht dieser Wert, dass Elemente, die normalerweise nicht tabulierbar sind, tabulierbar werden. Dies ist der nützlichste Wert von `tabindex`.
+- `tabindex="-1"` — dies ermöglicht, dass normalerweise nicht tabulierbare Elemente programmgesteuert fokussiert werden können, z.B. über JavaScript oder als Ziel von Links.
 
-Während die obige Ergänzung es uns erlaubt, zu den Tasten zu taben, erlaubt sie uns nicht, sie über die <kbd>Enter</kbd>/<kbd>Return</kbd>-Taste zu aktivieren. Um dies zu tun, mussten wir das folgende JavaScript hinzugefügt:
+Während die obige Ergänzung uns ermöglicht, zu den Schaltflächen zu tabulieren, erlaubt es uns nicht, sie über die <kbd>Enter</kbd>/<kbd>Return</kbd>-Taste zu aktivieren. Dazu mussten wir das folgende bisschen JavaScript-Trick anwenden:
 
 ```js
 document.onkeydown = (e) => {
@@ -359,19 +359,19 @@ document.onkeydown = (e) => {
 };
 ```
 
-Hier fügen wir einen Listener am `document`-Objekt hinzu, um zu erkennen, wann eine Taste auf der Tastatur gedrückt wurde. Wir prüfen, welche Taste gedrückt wurde, über das `key`-Attribut des Ereignisobjektes; wenn die gedrückte Taste <kbd>Enter</kbd>/<kbd>Return</kbd> ist, führen wir die Funktion aus, die im `onclick`-Handler der Taste gespeichert ist, mit `document.activeElement.click()`. [`activeElement`](/de/docs/Web/API/Document/activeElement), das uns das Element gibt, das gerade auf der Seite fokussiert ist.
+Hier fügen wir dem `document`-Objekt einen Listener hinzu, um zu erkennen, wenn eine Taste auf der Tastatur gedrückt wurde. Wir überprüfen, welche Taste über die `key`-Eigenschaft des Ereignisobjekts gedrückt wurde; wenn die gedrückte Taste <kbd>Enter</kbd>/<kbd>Return</kbd> ist, führen wir die Funktion aus, die im `onclick`-Handler der Schaltfläche gespeichert ist, indem wir `document.activeElement.click()` verwenden. [`activeElement`](/de/docs/Web/API/Document/activeElement) gibt uns das Element, das derzeit auf der Seite fokussiert ist.
 
-Dies ist eine Menge zusätzlicher Aufwand, um die Funktionalität wiederherzustellen. Und es gibt mit Sicherheit auch andere Probleme damit. **Besser, einfach von Anfang an das richtige Element für die richtige Aufgabe zu verwenden.**
+Dies ist eine Menge zusätzlicher Aufwand, um die Funktionalität wieder einzubauen. Und es wird sicherlich noch andere Probleme damit geben. **Besser, von Anfang an das richtige Element für den richtigen Zweck zu verwenden.**
 
-#### Bedeutungsvolle Textbezeichnungen
+#### Sinnvolle Textbeschriftungen
 
-Textbezeichnungen von UI-Steuerelementen sind für alle Benutzer sehr nützlich, aber es ist besonders wichtig, dass sie für Benutzer mit Behinderungen korrekt sind.
+Textbeschriftungen für UI-Steuerelemente sind für alle Benutzer sehr nützlich, aber sie richtig hinzubekommen, ist besonders wichtig für Benutzer mit Behinderungen.
 
-Sie sollten sicherstellen, dass Ihre Button- und Linktextbezeichnungen verständlich und unterscheidbar sind. Verwenden Sie nicht einfach "Click here" für Ihre Beschriftungen, da Screenreader-Benutzer manchmal eine Liste von Schaltflächen und Formularelementen abrufen. Der folgende Screenshot zeigt unsere Steuerelemente, die von VoiceOver auf dem Mac aufgelistet werden.
+Sie sollten sicherstellen, dass Ihre Beschriftungen von Schaltflächen und Links verständlich und unverwechselbar sind. Verwenden Sie nicht einfach "Hier klicken" für Ihre Beschriftungen, da Benutzer von Screenreadern manchmal eine Liste von Schaltflächen und Formularelementen erhalten. Der folgende Screenshot zeigt unsere Steuerelemente, die von VoiceOver auf Mac aufgelistet werden.
 
-![Liste von Formulareingabelabels, die von der VoiceOver-Software auf dem Mac aufgelistet werden. Diese Liste enthält bedeutungslose Labels wie 'happy menu button', die verschiedenen Formularelementen wie Tasten, Textfeldern und Links gegeben wurden.](voiceover-formcontrols.png)
+![Liste von Formularbeschriftungsetiketten, aufgelistet von der VoiceOver-Software auf Mac. Diese Liste enthält bedeutungslose Beschriftungen wie 'glückliches Menüschaltfläche`, die verschiedenen Formularelementen wie Schaltflächen, Textfeldern und Links gegeben wurden.](voiceover-formcontrols.png)
 
-Stellen Sie sicher, dass Ihre Bezeichnungen auch ohne Kontext, gelesen für sich allein, als auch im Kontext des Paragraphen, in dem sie sich befinden, sinnvoll sind. Beispiele für gute Linktexte sind:
+Achten Sie darauf, dass Ihre Beschriftungen aus dem Kontext heraus, wenn sie alleine gelesen werden, ebenso sinnvoll sind wie im Kontext des Absatzes, in dem sie sich befinden. Zum Beispiel zeigt das Folgende ein Beispiel für guten Link-Text:
 
 ```html example-good
 <p>
@@ -380,7 +380,7 @@ Stellen Sie sicher, dass Ihre Bezeichnungen auch ohne Kontext, gelesen für sich
 </p>
 ```
 
-aber dies ist ein schlechter Linktext:
+aber dies ist schlechter Link-Text:
 
 ```html example-bad
 <p>
@@ -390,15 +390,15 @@ aber dies ist ein schlechter Linktext:
 ```
 
 > [!NOTE]
-> Sie können viel mehr über die Implementierung von Links und die besten Praktiken in unserem Artikel [Links erstellen](/de/docs/Learn_web_development/Core/Structuring_content/Creating_links) finden. Sie können auch einige gute und schlechte Beispiele in [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) und [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) sehen.
+> Sie können viel mehr über Link-Implementierung und Best Practices in unserem Artikel [Links erstellen](/de/docs/Learn_web_development/Core/Structuring_content/Creating_links) finden. Sie können auch einige gute und schlechte Beispiele unter [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) und [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) sehen.
 
-Formularbezeichnungen sind auch wichtig, da sie Ihnen einen Hinweis darauf geben, was in jedes Formulareingabefeld eingegeben werden muss. Folgendes scheint ein ausreichend vernünftiges Beispiel zu sein:
+Formularbeschriftungen sind auch wichtig, um Ihnen einen Hinweis darauf zu geben, was Sie in jedes Formulareingabefeld eingeben müssen. Das Folgende scheint ein ausreichend gutes Beispiel zu sein:
 
 ```html example-bad
 Fill in your name: <input type="text" id="name" name="name" />
 ```
 
-Dies ist jedoch nicht so nützlich für behinderte Benutzer. Es gibt nichts im obigen Beispiel, das die Beschriftung unmissverständlich mit der Formulareingabe verknüpft und klarstellt, wie man sie ausfüllt, wenn man sie nicht sehen kann. Wenn Sie darauf mit einigen Screenreadern zugreifen, werden Sie möglicherweise mit einer Beschreibung erhalten, die ungefähr so lautet: "edit text."
+Dies ist jedoch nicht so nützlich für behinderte Benutzer. Es gibt im obigen Beispiel nichts, um die Beschriftung eindeutig mit dem Formulareingabefeld zu verknüpfen und klar zu machen, wie es auszufüllen ist, wenn Sie es nicht sehen können. Wenn Sie darauf mit einigen Screenreadern zugreifen, erhalten Sie möglicherweise nur eine Beschreibung, die "Text bearbeiten" oder ähnlich lautet.
 
 Das Folgende ist ein viel besseres Beispiel:
 
@@ -409,22 +409,22 @@ Das Folgende ist ein viel besseres Beispiel:
 </div>
 ```
 
-Mit solchem Code wird die Beschriftung eindeutig mit der Eingabe verknüpft; die Beschreibung wird eher lauten: "Fill in your name: edit text."
+Mit einem solchen Code wird die Beschriftung klar mit dem Eingabefeld verknüpft; die Beschreibung lautet eher "Füllen Sie Ihren Namen ein: Text bearbeiten".
 
-![Eine gute Formularbezeichnung, die 'Fill in your name' liest und einer Texteingabe-Formularsteuerung gegeben wurde. ](voiceover-good-form-label.png)
+![Eine gute Formularbeschriftung, die 'Füllen Sie Ihren Namen ein' liest, wird einer Formulareingabesteuerung gegeben.](voiceover-good-form-label.png)
 
-Als zusätzlicher Bonus bedeutet das Verknüpfen einer Bezeichnung mit einer Formulareingabe in den meisten Browsern, dass Sie die Bezeichnung anklicken können, um das Formularfeld auszuwählen oder zu aktivieren. Dadurch erhält die Eingabe eine größere Trefffläche, was es einfacher macht, sie auszuwählen.
+Zusätzlich ist in den meisten Browsern die Verknüpfung einer Beschriftung mit einem Formulareingabefeld so, dass Sie auf die Beschriftung klicken können, um das Formularelement auszuwählen oder zu aktivieren. Dies gibt der Eingabe eine größere Trefferfläche, was es einfacher macht, sie auszuwählen.
 
 > [!NOTE]
 > Sie können einige gute und schlechte Formularbeispiele in [good-form.html](https://mdn.github.io/learning-area/accessibility/html/good-form.html) und [bad-form.html](https://mdn.github.io/learning-area/accessibility/html/bad-form.html) sehen.
 
-Sie können eine schöne Erklärung der Bedeutung von richtigen Textlabels und wie man Textlabel-Probleme mit dem [Firefox Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html) untersucht, im folgenden Video finden:
+Sie finden eine schöne Erklärung der Bedeutung richtiger Textbeschriftungen und wie Sie Textbeschriftungsprobleme mit Hilfe des [Firefox Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html) untersuchen, im folgenden Video:
 
 {{EmbedYouTube("YhlAVlfH0rQ")}}
 
 ## Zugängliche Datentabellen
 
-Eine grundlegende Datentabelle kann mit sehr einfachem Markup geschrieben werden, zum Beispiel:
+Eine einfache Datentabelle kann mit sehr einfachem Markup geschrieben werden, zum Beispiel:
 
 ```html
 <table>
@@ -451,21 +451,21 @@ Eine grundlegende Datentabelle kann mit sehr einfachem Markup geschrieben werden
 </table>
 ```
 
-Aber das hat Probleme — es gibt keine Möglichkeit für einen Screenreader-Benutzer, Reihen oder Spalten als Gruppierungen von Daten zu assoziieren. Dazu müssen Sie wissen, was die Überschriftenzeilen sind und ob sie Reihen oder Spaltenüberschriften sind. Dies kann nur visuell für die obige Tabelle getan werden (siehe [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html) und versuchen Sie das Beispiel selbst).
+Aber dies hat Probleme — es gibt keine Möglichkeit für einen Screenreader-Benutzer, Zeilen oder Spalten als Datenblöcke zu gruppieren. Um dies zu tun, müssen Sie wissen, was die Kopfzeilenzeilen sind und ob sie Zeilen oder Spalten übersetzen usw. Dies kann nur visuell für die obige Tabelle geschehen (siehe [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html) und versuchen Sie das Beispiel selbst).
 
-Schauen Sie sich jetzt unser [Punk-Bands-Tabellen-Beispiel](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html) an — Sie können hier einige Barrierefreiheitshilfen in Aktion sehen:
+Sehen Sie sich nun unser [Punk-Bands-Tabellenbeispiel](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html) an — Sie können einige Barrierefreiheitswerkzeuge hier in Aktion sehen:
 
-- Tabellenüberschriften werden mit {{htmlelement("th")}}-Elementen definiert — Sie können auch angeben, ob sie Kopfzeilen für Reihen oder Spalten sind, indem Sie das `scope`-Attribut verwenden. Dies gibt Ihnen vollständige Datengruppen, die von Screenreadern als einzelne Einheiten konsumiert werden können.
-- Das {{htmlelement("caption")}}-Element und das `summary`-Attribut des `<table>`-Elements erfüllen ähnliche Aufgaben — sie wirken als Alt-Text für eine Tabelle und geben einem Screenreader-Benutzer eine nützliche kurze Zusammenfassung der Inhalte der Tabelle. Das `<caption>`-Element wird im Allgemeinen bevorzugt, da es seinen Inhalt auch für sehende Benutzer zugänglich macht, die es ebenfalls nützlich finden könnten. Sie brauchen nicht wirklich beide.
+- Tabellenüberschriften sind mit {{htmlelement("th")}}-Elementen definiert — Sie können auch angeben, ob sie Überschriften für Zeilen oder Spalten sind, indem Sie das `scope`-Attribut verwenden. Dies gibt Ihnen komplette Datenblöcke, die von Screenreadern als einzelne Einheiten konsumiert werden können.
+- Das {{htmlelement("caption")}}-Element und das `summary`-Attribut des `<table>`-Elements machen einen ähnlichen Job — sie fungieren als Alt-Text für eine Tabelle und geben einem Screenreader-Benutzer eine nützliche schnelle Zusammenfassung der Tabelleninhalte. Das `<caption>`-Element wird allgemein bevorzugt, da es auch sichtbare Benutzer anspricht, die es ebenfalls nützlich finden könnten. Sie brauchen nicht wirklich beides.
 
 > [!NOTE]
-> Siehe unseren Artikel [HTML-Tabellen-Barrierefreiheit](/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) für mehr Details zu zugänglichen Datentabellen.
+> Siehe unseren Artikel [HTML-Tabellen-Barrierefreiheit](/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) für mehr Details über zugängliche Datentabellen.
 
 ## Textalternativen
 
-Während textbasierte Inhalte von Natur aus zugänglich sind, kann das gleiche nicht unbedingt für Multimedia-Inhalte gesagt werden — Bild- und Videoinhalte können von sehbehinderten Menschen nicht gesehen und Audiomaterial von hörgeschädigten Menschen nicht gehört werden. Wir behandeln Video- und Audiomaterialien detailliert in [Barrierefreies Multimedia](/de/docs/Learn_web_development/Core/Accessibility/Multimedia), aber für diesen Artikel werden wir die Barrierefreiheit für das bescheidene {{htmlelement("img")}}-Element betrachten.
+Während textuelle Inhalte von Natur aus zugänglich sind, kann dasselbe nicht unbedingt über multimediale Inhalte gesagt werden — Bild- und Video-Inhalte können von sehbehinderten Menschen nicht gesehen werden, und Audio-Inhalte können von hörbehinderten Menschen nicht gehört werden. Wir behandeln Video- und Audioinhalte im Detail in den [Barrierefreien Multimedia](/de/docs/Learn_web_development/Core/Accessibility/Multimedia), aber für diesen Artikel schauen wir uns die Barrierefreiheit des bescheidenen {{htmlelement("img")}}-Elements an.
 
-Wir haben ein einfaches Beispiel geschrieben, [accessible-image.html](https://mdn.github.io/learning-area/accessibility/html/accessible-image.html), das vier Kopien desselben Bildes enthält:
+Wir haben ein einfaches Beispiel geschrieben, [accessible-image.html](https://mdn.github.io/learning-area/accessibility/html/accessible-image.html), das vier Kopien desselben Bildes zeigt:
 
 ```html
 <img src="dinosaur.png" />
@@ -487,32 +487,32 @@ Wir haben ein einfaches Beispiel geschrieben, [accessible-image.html](https://md
 </p>
 ```
 
-Das erste Bild bietet dem Benutzer, wenn es von einem Screenreader betrachtet wird, wenig Hilfe — VoiceOver zum Beispiel liest "/dinosaur.png, image" vor. Es liest den Dateinamen vor, um etwas Hilfe zu leisten. In diesem Beispiel wird der Benutzer zumindest wissen, dass es eine Art Dinosaurier ist, aber oft können Dateien mit maschinengenerierten Dateinamen hochgeladen werden (z.B. aus einer Digitalkamera), die wahrscheinlich keinen Kontext zum Inhalt des Bildes bieten würden.
+Das erste Bild bietet, wenn es von einem Screenreader betrachtet wird, dem Benutzer nicht wirklich viel Hilfe — VoiceOver zum Beispiel liest "/dinosaur.png, image" vor. Es liest den Dateinamen vor, um einen Versuch zu machen, Hilfe zu leisten. In diesem Beispiel wird der Benutzer zumindest wissen, dass es eine Art Dinosaurier ist, aber oft können Dateien mit maschinen-generierten Dateinamen hochgeladen werden (z.B. von einer Digitalkamera) und diese Dateinamen würden wahrscheinlich keinen Kontext zu den Bildinhalten bieten.
 
 > [!NOTE]
-> Aus diesem Grund sollten Sie niemals Textinhalte in ein Bild einbetten — Screenreader können es nicht darauf zugreifen. Es gibt auch andere Nachteile — man kann es nicht auswählen und kopieren/einfügen. Tun Sie es einfach nicht!
+> Dies ist der Grund, warum Sie niemals Textinhalt in einem Bild enthalten sollten — Screenreader können nicht darauf zugreifen. Es gibt auch andere Nachteile — Sie können ihn nicht auswählen und ausschneiden/einfügen. Tun Sie es einfach nicht!
 
-Wenn ein Screenreader auf das zweite Bild stößt, liest er das vollständige alt-Attribut vor — "A red Tyrannosaurus rex: A two-legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".
+Wenn ein Screenreader auf das zweite Bild stößt, liest er das gesamte alt-Attribut vor — "Ein roter Tyrannosaurus Rex: Ein Dinosaurier mit zwei Beinen, der aufrecht steht wie ein Mensch, mit kleinen Armen und einem großen Kopf mit vielen scharfen Zähnen."
 
-Dies unterstreicht die Wichtigkeit, nicht nur bedeutungsvolle Dateinamen zu verwenden, falls sogenannter **Alt-Text** nicht verfügbar ist, sondern auch sicherzustellen, dass wo immer möglich Alt-Text in `alt`-Attributen bereitgestellt wird.
+Dies hebt die Bedeutung hervor, nicht nur aussagekräftige Dateinamen zu verwenden, falls kein sogenannter **Alt-Text** verfügbar ist, sondern auch sicherzustellen, dass Alt-Text immer in `alt`-Attributen bereitgestellt wird, wo immer möglich.
 
-Der Inhalt des `alt`-Attributs sollte immer eine direkte Darstellung des Bildes und seiner visuellen Aussage bieten. Der Alt-Text sollte kurz und prägnant sein und alle im Bild enthaltenen Informationen umfassen, die nicht in den umgebenden Text dupliziert sind.
+Beachten Sie, dass der Inhalt des `alt`-Attributs stets eine direkte Darstellung des Bildes und dessen visuellen Ausdrucks bieten sollte. Der Alt-Text sollte knapp und prägnant sein und alle Informationen enthalten, die im Bild vermittelt werden und nicht in den umgebenden Texten dupliziert werden.
 
-Der Inhalt des `alt`-Attributs für ein einzelnes Bild unterscheidet sich je nach Kontext. Wenn das Foto von Fluffy zum Beispiel ein Avatar neben einer Rezension für Yuckymeat-Hundefutter ist, ist `alt="Fluffy"` angemessen. Wenn das Foto Teil der Adoptionsseite von Fluffy für die Tierrettungsgesellschaft ist, sollten Informationen, die im Bild vermittelt werden und die für einen potenziellen Hundebesitzer relevant sind und nicht im umgebenden Text dupliziert werden, aufgenommen werden. Eine längere Beschreibung, wie etwa `alt="Fluffy, ein dreifarbiger Terrier mit sehr kurzem Haar, mit einem Tennisball im Maul."` ist angemessen. Da der umgebende Text wahrscheinlich bereits Fluffys Größe und Rasse enthält, wird dies nicht in den `alt` aufgenommen. Da jedoch die Biographie des Hundes wahrscheinlich keine Haarlänge, Farben oder Spielzeugpräferenzen enthält, die ein potenzieller Besitzer wissen muss, wird dies aufgenommen. Ist das Bild im Freien, oder hat Fluffy ein rotes Halsband mit einer blauen Leine? Nicht wichtig im Hinblick auf die Adoption des Haustiers und daher nicht mit eingeschlossen. Alle Informationen, die ein Bild vermittelt und auf die ein sitativer Benutzer zugreifen kann und die im Kontext relevant sind, müssen vermittelt werden; nicht mehr. Halten Sie es kurz, präzise und nützlich.
+Der Inhalt des `alt`-Attributs für ein einzelnes Bild variiert je nach Kontext. Wenn beispielsweise das Foto von Fluffy ein Avatar neben einer Bewertung für Yuckymeat für Hunde ist, wäre `alt="Fluffy"` angemessen. Wenn das Foto Teil von Fluffys Adoptionsseite für die Tierschutzgesellschaft ist, sollten Informationen vermittelt werden, die im Bild sichtbar sind und für potenzielle Hundebesitzer relevant sind, jedoch nicht im umgebenden Text dupliziert werden. Eine längere Beschreibung, wie `alt="Fluffy, ein dreifarbiger Terrier mit sehr kurzem Haar, mit einem Tennisball im Maul."` ist angemessen. Da der umgebende Text wahrscheinlich Fluffys Größe und Rasse enthält, ist dies nicht im `alt.` enthalten. Jedoch, da die Kurzbiografie des Hundes wahrscheinlich Haarlänge, Farben oder Spielzeugvorlieben, die der potenzielle Besitzer wissen muss, nicht enthält, wird dies eingeschlossen. Ist das Bild im Freien aufgenommen, oder hat Fluffy ein rotes Halsband mit einer blauen Leine? Nicht wichtig im Hinblick auf die Adoption des Haustiers und daher nicht enthalten. Alle Informationen, die das Bild zeigt, die ein sehender Benutzer zugreifen kann und für den Kontext relevant sind, sind das, was vermittelt werden muss; nicht mehr. Halten Sie es kurz, präzise und nützlich.
 
-Jede persönliche Kenntnis oder zusätzliche Beschreibung sollte hier nicht eingefügt werden, da sie für Personen, die das Bild nicht vorher gesehen haben, nicht nützlich ist. Wenn der Ball Fluffys Lieblingsspielzeug ist oder wenn der sitativer Benutzer das nicht aus dem Bild wissen kann, dann fügen Sie es nicht hinzu.
+Jegliches persönliches Wissen oder eine zusätzliche Beschreibung sollte hier nicht eingeschlossen werden, da dies für Menschen, die das Bild zuvor nicht gesehen haben, nicht nützlich ist. Wenn der Ball Fluffys Lieblingsspielzeug ist oder wenn ein sehender Benutzer das nicht aus dem Bild erkennen kann, dann schließen Sie es nicht ein.
 
-Eine Sache, die Sie berücksichtigen sollten, ist, ob Ihre Bilder innerhalb Ihres Inhalts eine Bedeutung haben oder ob sie rein zur visuellen Verzierung dienen und somit keine Bedeutung haben. Wenn sie dekorativ sind, ist es besser, einen leeren Text als Wert für das `alt`-Attribut zu schreiben (siehe [Leere alt attribute](#leere_alt_attribute)) oder sie einfach auf der Seite als CSS-Hintergrundbilder einzuschließen.
+Eine Sache, die in Betracht gezogen werden sollte, ist, ob Ihre Bilder Bedeutungen innerhalb Ihres Inhalts haben oder ob sie rein zur visuellen Dekoration und damit bedeutungslos sind. Wenn sie dekorativ sind, ist es besser, einen leeren Text als Wert für das `alt`-Attribut zu schreiben (siehe [Leere alt-Attribute](#leere_alt-attribute)) oder sie einfach auf der Seite als CSS-Hintergrundbilder einzubinden.
 
 > [!NOTE]
-> Lesen Sie [HTML-Bilder](/de/docs/Learn_web_development/Core/Structuring_content/HTML_images) und [Responsive images](/de/docs/Web/HTML/Responsive_images) für viele weitere Informationen über die Implementierung von Bildern und bewährte Verfahren.
-> Sie können auch den [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) überprüfen, um zu erfahren, wie Sie ein alt-Attribut für Bilder in verschiedenen Situationen verwenden.
+> Lesen Sie [HTML images](/de/docs/Learn_web_development/Core/Structuring_content/HTML_images) und [Responsive images](/de/docs/Web/HTML/Responsive_images) für viele weitere Informationen über Bildimplementation und Best Practices.
+> Sie können auch den [Alt-Entscheidungsbaum](https://www.w3.org/WAI/tutorials/images/decision-tree/) überprüfen, um zu erfahren, wie in verschiedenen Situationen ein alt-Attribut für Bilder verwendet werden sollte.
 
-Wenn Sie zusätzliche kontextuelle Informationen bereitstellen möchten, sollten Sie diese im textlichen Kontext um das Bild herum oder in einem `title`-Attribut platzieren, wie oben gezeigt. In diesem Fall lesen die meisten Screenreader den Alt-Text, das Title-Attribut und den Dateinamen vor. Außerdem zeigen die Browser den Title-Text als Tooltips an, wenn sie mit der Maus darüber gefahren wird.
+Wenn Sie zusätzliches Kontextwissen bereitstellen möchten, sollten Sie es in den umgebenden Text des Bildes oder in ein `title`-Attribut, wie oben gezeigt, einfügen. In diesem Fall werden die meisten Screenreader den Alt-Text, das Title-Attribut und den Dateinamen vorlesen. Darüber hinaus zeigen Browser Titeltext als QuickInfos beim Mouseover an.
 
-![Screenshot eines roten Tyrannosaurus Rex mit dem Text "The mozilla red dinosaur", der bei Mouseover als Tooltip angezeigt wird.](title-attribute.png)
+![Screenshot eines roten Tyrannosaurus Rex mit dem Text "Der Mozilla rote Dinosaurier" angezeigt als QuickInfo bei Mouseover.](title-attribute.png)
 
-Werfen wir noch einen schnellen Blick auf die vierte Methode:
+Werfen Sie einen weiteren schnellen Blick auf die vierte Methode:
 
 ```html
 <img src="dinosaur.png" aria-labelledby="dino-label" />
@@ -520,13 +520,13 @@ Werfen wir noch einen schnellen Blick auf die vierte Methode:
 <p id="dino-label">The Mozilla red Tyrannosaurus…</p>
 ```
 
-In diesem Fall verwenden wir das `alt`-Attribut überhaupt nicht — stattdessen haben wir unsere Beschreibung des Bildes als regulären Textabsatz präsentiert, ihm eine `id` gegeben und dann das `aria-labelledby`-Attribut verwendet, um auf diese `id` zu verweisen, was von Screenreadern dazu genutzt wird, diesen Absatz als Alt-Text/Beschriftung für dieses Bild zu verwenden. Dies ist besonders nützlich, wenn Sie denselben Text als Beschriftung für mehrere Bilder verwenden möchten — etwas, das mit `alt` nicht möglich ist.
+In diesem Fall verwenden wir das `alt`-Attribut überhaupt nicht — stattdessen haben wir unsere Beschreibung des Bildes als regulären Textabschnitt präsentiert, ihm eine `id` zugewiesen und dann das `aria-labelledby`-Attribut verwendet, um auf diese `id` zu verweisen, was dazu führt, dass Screenreader diesen Absatz als Alt-Text/Beschriftung für das Bild verwenden. Dies ist besonders nützlich, wenn Sie denselben Text als Beschriftung für mehrere Bilder verwenden möchten — etwas, das mit `alt` nicht möglich ist.
 
-> **Hinweis:** [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) ist Teil der [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) Spezifikation, die es Entwicklern ermöglicht, zusätzliche Semantik in ihr Markup einzufügen, um die Barrierefreiheit von Screenreadern dort zu verbessern, wo sie benötigt wird.
+> **Hinweis:** [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) ist Teil der [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) Spec, die es Entwicklern ermöglicht, ihrer Markup extra Semantik hinzuzufügen, um die Zugänglichkeit von Screenreadern dort, wo nötig, zu verbessern.
 
-### Abbildungen und Bildunterschriften
+### Figuren und Bildunterschriften
 
-HTML inkludiert zwei Elemente — {{htmlelement("figure")}} und {{htmlelement("figcaption")}} — die eine Abbildung jeglicher Art (es könnte alles sein, nicht unbedingt ein Bild) mit einer Bildunterschrift verknüpfen:
+HTML enthält zwei Elemente — {{htmlelement("figure")}} und {{htmlelement("figcaption")}} — die eine Abbildung irgendeiner Art (es könnte alles sein, nicht unbedingt ein Bild) mit einer Bildunterschrift assoziieren:
 
 ```html
 <figure>
@@ -541,9 +541,9 @@ HTML inkludiert zwei Elemente — {{htmlelement("figure")}} und {{htmlelement("f
 </figure>
 ```
 
-Obwohl die Unterstützung von Screenreadern für die Verknüpfung von Bildunterschriften mit ihren Abbildungen gemischt ist, schafft die Einfügung von [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) oder [`aria-describedby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) die Verbindung, wenn keine vorhanden ist. Dennoch ist die Elementstruktur nützlich für CSS-Stilierungen, zudem bietet sie einen Weg, eine Beschreibung des Bildes im Quellinhalt daneben zu platzieren.
+Während es gemischte Unterstützung von Screenreader-Unterstützung für die Verknüpfung von Bildunterschriften mit ihren Abbildungen gibt, wird das Einfügen von [`aria-labelledby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) oder [`aria-describedby`](/de/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) die Assoziation schaffen, wenn keine vorhanden ist. Abgesehen davon ist die Elementstruktur nützlich für das CSS-Styling, plus es bietet eine Möglichkeit, eine Beschreibung des Bildes in der Nähe im Quellcode zu platzieren.
 
-### Leere alt attribute
+### Leere alt-Attribute
 
 ```html
 <h3>
@@ -552,34 +552,34 @@ Obwohl die Unterstützung von Screenreadern für die Verknüpfung von Bildunters
 </h3>
 ```
 
-Es kann Zeiten geben, in denen ein Bild im Design einer Seite enthalten ist, aber sein primärer Zweck nur die visuelle Dekoration ist. Sie werden im obigen Codebeispiel bemerken, dass das `alt`-Attribut des Bildes leer ist — dies veranlasst Screenreader, das Bild zu erkennen, ohne zu versuchen, es zu beschreiben (stattdessen würden sie einfach "image", oder ähnliches sagen).
+Es kann Zeiten geben, in denen ein Bild im Design einer Seite enthalten ist, dessen primärer Zweck es ist, visuelle Dekoration bereitzustellen. Sie werden im obigen Codebeispiel bemerken, dass das `alt`-Attribut des Bildes leer ist — dies soll dafür sorgen, dass Screenreader das Bild erkennen, es aber nicht versuchen zu beschreiben (stattdessen würden sie einfach "Bild", oder ähnliches, sagen).
 
-Der Grund, ein leeres `alt` anstelle es auszulassen, ist, weil viele Screenreader die gesamte Bild-URL ankündigen, wenn kein `alt` bereitgestellt wird. Im obigen Beispiel fungiert das Bild als visuelle Dekoration für die Überschrift, mit der es verbunden ist. In solchen Fällen und in Fällen, in denen ein Bild nur zur Dekoration dient und keinen Inhaltswert hat, sollten Sie ein leeres `alt` in Ihren `img`-Elementen beifügen. Eine Alternative ist die Verwendung des [role](/de/docs/Web/Accessibility/ARIA/Roles)-Attributs [`role="presentation"`](/de/docs/Web/Accessibility/ARIA/Roles/presentation_role), das ebenfalls verhindert, dass Screenreader alternativen Text vorlesen.
+Der Grund, einen leeren `alt` statt keinen einzuschließen, ist, dass viele Screenreader die gesamte Bild-URL ankündigen, wenn kein `alt` bereitgestellt wird. Im obigen Beispiel fungiert das Bild als visuelle Dekoration zu der zugehörigen Überschrift. In solchen Fällen und in Fällen, in denen ein Bild nur dekorativ ist und keinen Inhaltwert hat, sollten Sie einen leeren `alt` in Ihren `img`-Elementen einschließen. Eine andere Alternative ist die Verwendung des `aria` [`role`](/de/docs/Web/Accessibility/ARIA/Roles) Attributs [`role="presentation"`](/de/docs/Web/Accessibility/ARIA/Roles/presentation_role), da dies auch Screenreader davon abhält, alternativen Text vorzulesen.
 
 > [!NOTE]
-> Wenn möglich, sollten Sie CSS verwenden, um Bilder darzustellen, die nur dekorativ sind.
+> Wenn möglich, sollten Sie CSS verwenden, um Bilder anzuzeigen, die nur dekorativ sind.
 
-## Mehr zu Links
+## Mehr über Links
 
-Links (das [`<a>`](/de/docs/Web/HTML/Element/a) Element mit einem `href`-Attribut), je nach ihrer Verwendung, können sie die Barrierefreiheit unterstützen oder schaden. Standardmäßig sind Links in Aussehen barrierefrei. Sie können die Barrierefreiheit unterstützen, indem sie dem Benutzer helfen, schnell zu verschiedenen Abschnitten eines Dokuments zu navigieren. Sie können jedoch auch die Barrierefreiheit beeinträchtigen, wenn ihr barrierefreies Styling entfernt wird oder wenn JavaScript dazu führt, dass sie sich unerwartet verhalten.
+Links (das [`<a>`](/de/docs/Web/HTML/Element/a) Element mit einem `href`-Attribut), je nachdem, wie sie verwendet werden, können sie Barrierefreiheit verbessern oder beeinträchtigen. Standardmäßig sind Links in ihrer Erscheinung zugänglich. Sie können die Barrierefreiheit verbessern, indem sie einem Benutzer helfen, schnell zu verschiedenen Abschnitten eines Dokuments zu navigieren. Sie können auch Barrierefreiheit beeinträchtigen, wenn ihr zugängliches Styling entfernt wird oder wenn JavaScript dazu führt, dass sie sich auf unerwartete Weise verhalten.
 
-### Link Styling
+### Link-Styling
 
-Standardmäßig sind Links visuell von anderen Texten unterschiedlich in sowohl Farbe als auch [text-decoration](/de/docs/Web/CSS/text-decoration), wobei Links standardmäßig blau und unterstrichen, violett und unterstrichen sind, wenn sie besucht wurden, und mit einem [focus-ring](/de/docs/Web/CSS/:focus), wenn sie Tastaturfokus erhalten.
+Standardmäßig unterscheiden sich Links visuell von anderem Text sowohl in der Farbe als auch in [text-decoration](/de/docs/Web/CSS/text-decoration), wobei Links standardmäßig blau und unterstrichen sind, lila und unterstrichen, wenn sie besucht wurden, und mit einem [focus-ring](/de/docs/Web/CSS/:focus), wenn sie Tastaturfokus erhalten.
 
-Farbe sollte nicht als das einzige Mittel verwendet werden, um Links von nicht-verlinkten Inhalten zu unterscheiden. Die Linktextfarbe, wie aller Text, muss sich erheblich von der Hintergrundfarbe abheben ([ein 4.5:1 Kontrast](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)). Darüber hinaus sollten sich Links visuell erheblich von nicht-verlinktem Text unterscheiden, mit einer Mindestkontrastanforderung von 3:1 zwischen Linktext und umgebendem Text sowie zwischen Standard, Besuchs- und Fokus/Aktiv-Zuständen und einem 4.5:1 Kontrast zwischen all diesen Zustandfarben und der Hintergrundfarbe.
+Farbe sollte nicht als einzige Methode verwendet werden, um Links von nicht-verlinkendem Inhalt zu unterscheiden. Die Linktextfarbe, wie aller Text, muss sich signifikant von der Hintergrundfarbe unterscheiden ([ein Kontrastverhältnis von 4.5:1](/de/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)). Darüber hinaus sollten Links visuell signifikant anders sein als nicht-verlinkender Text, mit minimalen Kontrastanforderungen von 3:1 zwischen Linktext und umgebendem Text und zwischen Standard-, besuchten und Fokus-/Aktivzuständen und einem 4.5:1 Kontrast zwischen all diesen Zustandsfarben und der Hintergrundfarbe.
 
 ### `onclick`-Ereignisse
 
-Ankertags werden oft in Verbindung mit dem `onclick`-Ereignis zur Erstellung von Pseudo-Schaltflächen missbraucht, indem **href** auf `"#"` oder `"javascript:void(0)"` gesetzt wird, um zu verhindern, dass die Seite aktualisiert wird.
+Ankertags werden oft mit dem `onclick`-Ereignis missbräuchlich verwendet, um Pseudo-Schaltflächen zu erstellen, indem **href** auf `"#"` oder `"javascript:void(0)"` gesetzt wird, um zu verhindern, dass die Seite aktualisiert wird.
 
-Diese Werte verursachen unerwartetes Verhalten beim Kopieren oder Ziehen von Links, Öffnen von Links in einem neuen Tab oder Fenster, beim Erstellen von Lesezeichen und wenn JavaScript noch heruntergeladen wird, fehlerhaft ist oder deaktiviert ist. Dies vermittelt auch falsche Semantik an assistive Technologien (z.B. Screenreader). In diesen Fällen wird empfohlen, stattdessen einen {{HTMLElement("button")}} zu verwenden. Im Allgemeinen sollten Sie eine Verknüpfung für die Navigation mit einer richtigen URL verwenden.
+Diese Werte verursachen unerwartetes Verhalten beim Kopieren oder Ziehen von Links, beim Öffnen von Links in einem neuen Tab oder Fenster, beim Lesezeichen setzen und wenn JavaScript noch heruntergeladen wird, fehlschlägt oder deaktiviert ist. Dies vermittelt auch falsche Semantik an unterstützende Technologien (z.B. Screenreader). In diesen Fällen wird empfohlen, eine {{HTMLElement("button")}} statt dessen zu verwenden. Im Allgemeinen sollten Sie nur ein Anker für die Navigation mit einem richtigen URL verwenden.
 
-### Externe Links und Verlinkung zu nicht-HTML-Ressourcen
+### Externe Links und Verlinkung auf nicht-HTML-Ressourcen
 
-Links, die über die `target="_blank"`-Deklaration in einem neuen Tab oder Fenster geöffnet werden, und Links zu deren `href`-Wert auf eine Dateiquelle zeigt, sollten einen Indikator darüber enthalten, welches Verhalten zu erwarten ist, wenn der Link aktiviert wird.
+Links, die in einem neuen Tab oder Fenster über die Deklaration `target="_blank"` geöffnet werden und Links, deren `href`-Wert auf eine Dateiresource zeigt, sollten einen Indikator über das Verhalten enthalten, das auftritt, wenn der Link aktiviert wird.
 
-Personen mit Sehbehinderungen, die mit Hilfe von Screenreadern navigieren, oder die kognitive Bedenken haben, können verwirrt werden, wenn unerwartet ein neuer Tab, Fenster oder eine Anwendung geöffnet wird. Ältere Versionen von Screenreading-Software geben möglicherweise nicht einmal das Verhalten an.
+Menschen mit Sehbehinderung, die mit Hilfe von Screenreading-Technologie navigieren, oder die kognitive Bedenken haben, könnten verwirrt sein, wenn der neue Tab, das Fenster oder die Anwendung unerwartet geöffnet wird. Ältere Versionen von Screenreader-Software können das Verhalten möglicherweise nicht einmal anzeigen.
 
 #### Link, der einen neuen Tab oder ein neues Fenster öffnet
 
@@ -589,7 +589,7 @@ Personen mit Sehbehinderungen, die mit Hilfe von Screenreadern navigieren, oder
 >
 ```
 
-#### Link zu einer nicht-HTML-Ressource
+#### Link auf eine nicht-HTML-Ressource
 
 ```html
 <a target="_blank" href="2017-annual-report.ppt"
@@ -597,38 +597,38 @@ Personen mit Sehbehinderungen, die mit Hilfe von Screenreadern navigieren, oder
 >
 ```
 
-Wenn ein Symbol verwendet wird, um dieses Verhalten von Links anstelle von Text anzuzeigen, stellen Sie sicher, dass es eine [alternative Beschreibung](/de/docs/Web/HTML/Element/img#alt) enthält.
+Wenn ein Symbol anstelle von Text verwendet wird, um dieses Linksverhalten anzuzeigen, stellen Sie sicher, dass es eine [alternative Beschreibung](/de/docs/Web/HTML/Element/img#alt) enthält.
 
-- [WebAIM: Links und Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links)
-- [MDN Understanding WCAG, Guideline 3.2 explanations](/de/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)
-- [G200: Öffnen neuer Fenster oder Tabs von einem Link nur, wenn nötig | W3C-Techniken für WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
-- [G201: Gibt Benutzern eine Vorwarnung, wenn ein neues Fenster geöffnet wird | W3C-Techniken für WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/G201.html)
+- [WebAIM: Links und Hypertext - Hypertext-Links](https://webaim.org/techniques/hypertext/hypertext_links)
+- [MDN Understanding WCAG, Guideline 3.2 Erläuterungen](/de/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)
+- [G200: Öffnen neuer Fenster und Tabs über einen Link nur bei Bedarf | W3C-Techniken für WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
+- [G201: Den Benutzern eine Vorwarnung geben, wenn ein neues Fenster geöffnet wird | W3C-Techniken für WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/G201.html)
 
-### Skip Links
+### Skip-Links
 
-Ein Skip-Link, auch als Skipnav bekannt, ist ein `a`-Element, das so nah wie möglich am Beginn des {{HTMLElement("body")}}-Elements platziert wird und der zum Beginn des Hauptinhalts der Seite verlinkt. Dieser Link ermöglicht es Personen, Inhalt, der sich auf mehreren Seiten einer Website wiederholt, wie die Kopfzeile und die Hauptnavigation, zu überspringen.
+Ein Skip-Link, auch als Skipnav bekannt, ist ein `a`-Element, das so nah wie möglich an dem öffnenden {{HTMLElement("body")}}-Element platziert wird und zum Anfang des Hauptinhalts der Seite verlinkt. Dieser Link ermöglicht es Menschen, Inhalte zu umgehen, die auf mehreren Seiten einer Website wiederholt werden, z.B. die Kopfzeile und die Hauptnavigation einer Website.
 
-Skip Links sind besonders nützlich für Menschen, die mit Unterstützungstechnologien wie Steuerungen, Sprachbefehlen oder Mundstäben/Kopfstöcken navigieren, bei denen das Durchgehen von sich wiederholenden Links eine mühsame Aufgabe sein kann.
+Skip-Links sind besonders nützlich für Menschen, die mit Unterstützungstechnologien wie Schaltersteuerung, Sprachbefehl oder Mundstäben/Kopfstöcken navigieren, bei denen das Durchlaufen sich wiederholender Links eine mühsame Aufgabe sein kann.
 
-- [WebAIM: "Navigation überspringen" Links](https://webaim.org/techniques/skipnav/)
-- [Anleitung: Verwenden von Skip-Navigation Links - The A11Y Project](https://www.a11yproject.com/posts/skip-nav-links/)
-- [MDN Understanding WCAG, Guideline 2.4 explanations](/de/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_—_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
-- [Verständnis des Erfolgskriteriums 2.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
+- [WebAIM: "Skip Navigation"-Links](https://webaim.org/techniques/skipnav/)
+- [Wie man: Skip-Navigations-Links verwendet - Das A11Y-Projekt](https://www.a11yproject.com/posts/skip-nav-links/)
+- [MDN Understanding WCAG, Guideline 2.4 Erläuterungen](/de/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [Verständnis der Erfolgskriterien 2.4.1 | W3C Verständnis WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
 
 ### Nähe
 
-Große Mengen an interaktivem Inhalt — einschließlich Anker — sollten in enger visueller Nähe zueinander Platze eingefügt haben, um sie zu trennen. Dieser Abstand ist vorteilhaft für Personen, die an feinmotorischen Kontrollproblemen leiden und beim Navigieren versehentlich den falschen interaktiven Inhalt aktivieren können.
+Große Mengen an interaktivem Inhalt — einschließlich Anker — die sich in enger visueller Nähe zueinander befinden sollten mit Abstand voneinander getrennt werden. Dieser Abstand ist vorteilhaft für Menschen, die an feiner Motorikstörungen leiden und die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren, während sie navigieren.
 
-Abstand kann mit CSS-Eigenschaften wie {{CSSxRef("margin")}} erstellt werden.
+Der Abstand kann mit CSS-Eigenschaften wie {{CSSxRef("margin")}} erstellt werden.
 
-- [Handzittern und das Problem mit großen Tasten - Axess Lab](https://axesslab.com/hand-tremors/)
+- [Handzittern und das Riesenknopf-Problem - Axess Lab](https://axesslab.com/hand-tremors/)
 
 ## Testen Sie Ihre Fähigkeiten
 
-Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sehen Sie [Test your skills: HTML Accessibility](/de/docs/Learn_web_development/Core/Accessibility/Test_your_skills:_HTML_accessibility), um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen.
+Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sehen Sie [Testen Sie Ihre Fähigkeiten: HTML-Zugänglichkeit](/de/docs/Learn_web_development/Core/Accessibility/Test_your_skills:_HTML_accessibility) an, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren.
 
 ## Zusammenfassung
 
-Sie sollten nun gut in der Lage sein, zugängliches HTML für die meisten Anlässe zu schreiben. Unser Artikel über WAI-ARIA-Grundlagen wird helfen, Lücken in diesem Wissen zu schließen, aber dieser Artikel hat die Grundlagen behandelt. Als Nächstes werden wir CSS und JavaScript erforschen und wie Barrierefreiheit durch deren gutes oder schlechtes Einsatz beeinflusst wird.
+Sie sollten jetzt in der Lage sein, zugängliches HTML für die meisten Gelegenheiten zu schreiben. Unser Artikel über WAI-ARIA-Grundlagen wird helfen, Wissenslücken zu schließen, aber dieser Artikel hat die Grundlagen abgedeckt. Als Nächstes werden wir uns mit CSS und JavaScript befassen und wie Barrierefreiheit durch deren gute oder schlechte Nutzung beeinflusst wird.
 
 {{PreviousMenuNext("Learn_web_development/Core/Accessibility/Tooling","Learn_web_development/Core/Accessibility/CSS_and_JavaScript", "Learn_web_development/Core/Accessibility")}}
diff --git a/files/de/web/api/cssstyledeclaration/getpropertyvalue/index.md b/files/de/web/api/cssstyledeclaration/getpropertyvalue/index.md
index 20ef46145..3579f2c4b 100644
--- a/files/de/web/api/cssstyledeclaration/getpropertyvalue/index.md
+++ b/files/de/web/api/cssstyledeclaration/getpropertyvalue/index.md
@@ -1,15 +1,14 @@
 ---
-title: "CSSStyleDeclaration: getPropertyValue()-Methode"
+title: "CSSStyleDeclaration: Methode getPropertyValue()"
 short-title: getPropertyValue()
 slug: Web/API/CSSStyleDeclaration/getPropertyValue
 l10n:
-  sourceCommit: 53b1989260054e651bcf001bacee9b843b8ca9c8
+  sourceCommit: 5af8d52f5dec28f5a5556b1b98765847098a0071
 ---
 
 {{ APIRef("CSSOM") }}
 
-Die **CSSStyleDeclaration.getPropertyValue()**-Methodenschnittstelle gibt
-einen String zurück, der den Wert einer angegebenen CSS-Eigenschaft enthält.
+Die **CSSStyleDeclaration.getPropertyValue()** Methodenschnittstelle gibt einen String zurück, der den Wert einer angegebenen CSS-Eigenschaft enthält.
 
 ## Syntax
 
@@ -20,22 +19,44 @@ getPropertyValue(property)
 ### Parameter
 
 - `property`
-  - : Ein String, der den Eigenschaftsnamen (im Bindestrich-Format) darstellt, der überprüft werden soll.
+  - : Ein String, der den Eigenschaftsnamen (in Bindestrich-Schreibweise) darstellt, der überprüft werden soll.
 
 ### Rückgabewert
 
-Ein String, der den Wert der Eigenschaft enthält. Falls nicht gesetzt, wird der leere String zurückgegeben.
+Ein String, der den Wert der Eigenschaft enthält. Wenn nicht gesetzt, wird der leere String zurückgegeben.
+
+Der Eigenschaftswert wird dynamisch berechnet, nicht so wie ursprünglich in der Deklaration angegeben. Die Serialisierung erfolgt wie folgt:
+
+- Wenn `property` eine Kurzschreibweise-Eigenschaft ist, dann holen Sie alle Langschreibweise-Eigenschaften, denen sie entspricht. Beachten Sie, dass Kurzschreibweise-Eigenschaften, die im ursprünglichen Stylesheet angegeben wurden, bereits während der Parsezeit erweitert wurden. Wenn mindestens eine dieser Langschreibweise-Eigenschaften nicht deklariert ist oder sich ihre `!important`-Status unterscheiden, dann ist das Ergebnis der leere String. Andernfalls wird ein Eigenschaftswert zurückgegeben, der sich auf die gleiche Liste von Langschreibweise-Eigenschaften erweitert, und dieser Kurzschreibweise-Wert wird so viele Komponenten wie möglich weglassen und in der formalen Definition in der kanonischen Reihenfolge neu anordnen, wenn möglich. Wenn eine der obigen syntaktischen Übersetzungen weniger abwärtskompatibel wäre, führen Sie sie nicht durch.
+- Andernfalls wird die Eigenschaft gemäß ihrem Datentyp serialisiert. Jeder Datentyp hat eine kanonische Darstellung; zum Beispiel verwenden `<color>`-Werte immer `rgb(R, G, B)` oder `rgba(R, G, B, A)`.
+
+Im Wesentlichen wird der Eigenschaftswert _kanonisiert_, um sicherzustellen, dass zwei Eigenschaftswerte mit demselben Rendering-Effekt gleich verglichen werden, auch wenn sie unterschiedlich deklariert sind.
 
 ## Beispiele
 
-Der folgende JavaScript-Code fragt den Wert der `margin`-Eigenschaft in
-einer CSS-Selektorregel ab:
+Der folgende JavaScript-Code fragt den Wert der `margin`-Eigenschaft in einer CSS-Selektorregel ab:
 
 ```js
 const declaration = document.styleSheets[0].cssRules[0].style;
 const value = declaration.getPropertyValue("margin"); // "1px 2px"
 ```
 
+Der zurückgegebene String kann von dem in der Stil-Spezifikation des Elements angegebenen Wert abweichen. Beispielsweise wird dieser Stil:
+
+```html
+<style>
+  p#blueish {
+    color: hsl(250 90 50);
+  }
+</style>
+<script>
+  const declaration = document.styleSheets[0].cssRules[0].style;
+  const value = declaration.getPropertyValue("color");
+</script>
+```
+
+Einen Wert `rgb(51, 13, 242);` setzen. Dies ist wichtig beim Vergleich von Stilen durch Strings.
+
 ## Spezifikationen
 
 {{Specifications}}
diff --git a/files/de/web/api/htmlmodelement/datetime/index.md b/files/de/web/api/htmlmodelement/datetime/index.md
new file mode 100644
index 000000000..47911df02
--- /dev/null
+++ b/files/de/web/api/htmlmodelement/datetime/index.md
@@ -0,0 +1,69 @@
+---
+title: "HTMLModElement: dateTime-Eigenschaft"
+short-title: dateTime
+slug: Web/API/HTMLModElement/dateTime
+l10n:
+  sourceCommit: 51caa17b040ab8c591d1c9e38ff9c859935b8fbe
+---
+
+{{ APIRef("HTML DOM") }}
+
+Die **`dateTime`**-Eigenschaft der [`HTMLModElement`](/de/docs/Web/API/HTMLModElement)-Schnittstelle ist eine Zeichenkette, die ein maschinenlesbares Datum mit einem optionalen Zeitwert enthält. Sie entspricht dem HTML-Attribut [`datetime`](/de/docs/Web/HTML/Element/time#datetime) der Elemente {{HTMLElement("del")}} und {{HTMLElement("ins")}}.
+
+## Wert
+
+Eine Zeichenkette. Für gültige Zeichenfolgenformate siehe die [gültigen `datetime`-Werte](/de/docs/Web/HTML/Element/time#valid_datetime_values).
+
+## Beispiele
+
+Das folgende HTML ist gegeben:
+
+```html
+<p>The paragraph <del datetime="2021-11-01">has been</del> changed</p>
+```
+
+Wir können den Wert des `dateTime`-Attributs des `<del>`-Elements abrufen:
+
+```js
+const deletedText = document.querySelector("del");
+console.log(deletedText.dateTime); // "2021-11-01"
+```
+
+Wir können auch die `dateTime`-Eigenschaft festlegen. Hier erstellen wir ein `<ins>`-Element, setzen dann die `dateTime`-Eigenschaft des `<ins>`-Elements auf das aktuelle Datum im `YYYY-MM-DD`-Format und fügen es nach dem gelöschten Text ein:
+
+```js
+const insertedText = document.createElement("ins");
+const now = new Date();
+insertedText.dateTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+insertedText.appendChild(document.createTextNode("was"));
+deletedText.insertAdjacentElement("afterend", insertedText);
+```
+
+Wenn unser Skript am 9. Januar 2025 ausgeführt wird, sieht unser HTML wie folgt aus:
+
+```html
+<p>
+  The paragraph <del datetime="2021-11-01">has been</del
+  ><ins datetime="2025-1-9">was</ins> changed
+</p>
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- {{HTMLElement("del")}}
+- {{HTMLElement("ins")}}
+- [`HTMLModElement`](/de/docs/Web/API/HTMLModElement)
+- [`HTMLModElement.cite`](/de/docs/Web/API/HTMLModElement/cite)
+- [`HTMLTimeElement.dateTime`](/de/docs/Web/API/HTMLTimeElement/dateTime)
+- [Datumszeichenfolgen](/de/docs/Web/HTML/Date_and_time_formats#date_strings)
+- [Lokale Datums- und Zeitzeichenfolgen](/de/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)
+- {{jsxref("Date")}}
+- [`Element.insertAdjacentElement()`](/de/docs/Web/API/Element/insertAdjacentElement)
diff --git a/files/de/web/api/htmltimeelement/datetime/index.md b/files/de/web/api/htmltimeelement/datetime/index.md
index 0e064cb80..73d297905 100644
--- a/files/de/web/api/htmltimeelement/datetime/index.md
+++ b/files/de/web/api/htmltimeelement/datetime/index.md
@@ -3,19 +3,18 @@ title: "HTMLTimeElement: dateTime-Eigenschaft"
 short-title: dateTime
 slug: Web/API/HTMLTimeElement/dateTime
 l10n:
-  sourceCommit: 835c199410845eed61aaf8439cb2e9719e7e9f98
+  sourceCommit: 51caa17b040ab8c591d1c9e38ff9c859935b8fbe
 ---
 
 {{ APIRef("HTML DOM") }}
 
 Die
-**`HTMLTimeElement.dateTime`**
-Eigenschaft ist ein String, der das [`datetime`](/de/docs/Web/HTML/Element/time#datetime) HTML-Attribut widerspiegelt und eine maschinenlesbare Form des Datums- und
-Uhrzeitwerts des Elements enthält.
+**`dateTime`**
+Eigenschaft des [`HTMLTimeElement`](/de/docs/Web/API/HTMLTimeElement) Interfaces ist ein String, der das [`datetime`](/de/docs/Web/HTML/Element/time#datetime) HTML-Attribut widerspiegelt und eine maschinenlesbare Form des Datums und Zeitwertes des Elements enthält.
 
 ## Wert
 
-Ein String. Für gültige String-Formate siehe die [`datetime`](/de/docs/Web/HTML/Element/time#valid_datetime_values) gültigen Werte.
+Ein String. Für gültige String-Formate siehe die [`datetime` gültige Werte](/de/docs/Web/HTML/Element/time#valid_datetime_values).
 
 ## Beispiele
 
@@ -36,4 +35,7 @@ t.dateTime = "6w 5h 34m 5s";
 
 ## Siehe auch
 
-- Das [`HTMLTimeElement`](/de/docs/Web/API/HTMLTimeElement) Interface, zu dem es gehört.
+- [`HTMLTimeElement`](/de/docs/Web/API/HTMLTimeElement)
+- [`HTMLModElement.dateTime`](/de/docs/Web/API/HTMLModElement/dateTime)
+- [Datumsstrings](/de/docs/Web/HTML/Date_and_time_formats#date_strings)
+- [Lokale Datums- und Zeitstrings](/de/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)
diff --git a/files/de/web/api/svganimationelement/getcurrenttime/index.md b/files/de/web/api/svganimationelement/getcurrenttime/index.md
new file mode 100644
index 000000000..20216970d
--- /dev/null
+++ b/files/de/web/api/svganimationelement/getcurrenttime/index.md
@@ -0,0 +1,67 @@
+---
+title: "SVGAnimationElement: getCurrentTime() Methode"
+short-title: getCurrentTime()
+slug: Web/API/SVGAnimationElement/getCurrentTime
+l10n:
+  sourceCommit: f95c5bf30c37292e8dba047346a19f937421c3e1
+---
+
+{{APIRef("SVG")}}
+
+Die Methode `getCurrentTime()` des [`SVGAnimationElement`](/de/docs/Web/API/SVGAnimationElement) gibt einen Float-Wert zurück, der die aktuelle Zeit in Sekunden relativ zur Zeit null des angegebenen Zeitcontainers darstellt.
+
+Die Zeit null bezieht sich auf den Moment, in dem der Zeitcontainer seine Zeitleiste beginnt. Sie fungiert als Startreferenzpunkt für alle Animationen innerhalb dieses Containers.
+
+Ein Zeitcontainer ist ein Element oder Kontext, das eine lokale Zeitleiste für eine oder mehrere Animationen definiert. Animationen innerhalb des Zeitcontainers werden relativ zu dessen Zeitleiste gemessen. Wenn ein Zeitcontainer verzögert, angehalten oder manipuliert wird, passen sich alle Animationen darin entsprechend an.
+
+## Syntax
+
+```js-nolint
+getCurrentTime()
+```
+
+### Parameter
+
+Keine ({{jsxref('undefined')}}).
+
+### Rückgabewert
+
+Ein Float.
+
+## Beispiele
+
+Dieses Beispiel demonstriert, wie die `getCurrentTime()`-Methode die Zeit abruft, die seit der Zeit null des Zeitcontainers verstrichen ist.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate
+      attributeName="cx"
+      from="50"
+      to="150"
+      dur="4s"
+      repeatCount="indefinite" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+setInterval(() => {
+  const currentTime = animationElement.getCurrentTime();
+  console.log(
+    `Current time relative to the time container: ${currentTime} seconds`,
+  );
+}, 1000);
+```
+
+Die Animation startet bei `time zero = 0` und läuft unendlich, und der `getCurrentTime()`-Wert erhöht sich kontinuierlich im Kontext des Zeitcontainers.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/svganimationelement/getsimpleduration/index.md b/files/de/web/api/svganimationelement/getsimpleduration/index.md
new file mode 100644
index 000000000..b4a20fe12
--- /dev/null
+++ b/files/de/web/api/svganimationelement/getsimpleduration/index.md
@@ -0,0 +1,68 @@
+---
+title: "SVGAnimationElement: getSimpleDuration()-Methode"
+short-title: getSimpleDuration()
+slug: Web/API/SVGAnimationElement/getSimpleDuration
+l10n:
+  sourceCommit: f95c5bf30c37292e8dba047346a19f937421c3e1
+---
+
+{{APIRef("SVG")}}
+
+Die Methode `getSimpleDuration()` des [`SVGAnimationElement`](/de/docs/Web/API/SVGAnimationElement) gibt einen Float-Wert zurück, der die Anzahl der Sekunden für die einfache Dauer dieser Animation darstellt.
+
+Die einfache Dauer bezieht sich auf die Zeitspanne, die eine Animation in einer einzigen Iteration laufen soll, ohne Wiederholungen, Neustarts oder Verlängerungen zu berücksichtigen.
+
+Diese Eigenschaft spiegelt das {{SVGAttr("dur")}}-Attribut des {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} oder {{SVGElement("animateTransform")}}-Elements wider.
+
+## Syntax
+
+```js-nolint
+getSimpleDuration()
+```
+
+### Parameter
+
+Keine ({{jsxref('undefined')}}).
+
+### Rückgabewert
+
+Ein Float.
+
+### Ausnahmen
+
+- `NotSupportedError` [`DOMException`](/de/docs/Web/API/DOMException)
+  - : Wird ausgelöst, wenn die einfache Dauer des `SVGAnimationElement` undefiniert ist (z. B. wenn die Endzeit unbestimmt ist). Dies geschieht, wenn das {{SVGAttr("dur")}}-Attribut auf `indefinite` gesetzt ist oder undefiniert ist, da in diesem Fall die einfache Dauer als undefiniert gilt.
+
+## Beispiele
+
+Dieses Beispiel demonstriert, wie das Attribut `dur="3s"` eine einfache Dauer von 3 Sekunden definiert.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate
+      attributeName="cx"
+      from="50"
+      to="150"
+      dur="3s"
+      repeatCount="indefinite" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+const simpleDuration = animationElement.getSimpleDuration();
+console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3
+```
+
+Da `repeatCount="indefinite"` kontinuierliches Schleifen spezifiziert, ist die effektive Dauer unendlich, aber die einfache Dauer bleibt 3 Sekunden pro Iteration.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/svganimationelement/getstarttime/index.md b/files/de/web/api/svganimationelement/getstarttime/index.md
new file mode 100644
index 000000000..b26fe7593
--- /dev/null
+++ b/files/de/web/api/svganimationelement/getstarttime/index.md
@@ -0,0 +1,69 @@
+---
+title: "SVGAnimationElement: getStartTime() Methode"
+short-title: getStartTime()
+slug: Web/API/SVGAnimationElement/getStartTime
+l10n:
+  sourceCommit: f95c5bf30c37292e8dba047346a19f937421c3e1
+---
+
+{{APIRef("SVG")}}
+
+Die Methode `getStartTime()` des [`SVGAnimationElement`](/de/docs/Web/API/SVGAnimationElement) gibt einen float-Wert zurück, der die Startzeit in Sekunden für das aktuelle Intervall dieses Animationselements darstellt, falls es existiert, unabhängig davon, ob das Intervall bereits begonnen hat.
+
+Die von `getStartTime()` zurückgegebene Startzeit wird in Sekunden relativ zur Zeit null des Zeitcontainers gemessen.
+
+Zeit null bezieht sich auf den Moment, in dem der Zeitcontainer seine Zeitleiste beginnt. Sie fungiert als Ausgangsreferenzpunkt für alle Animationen innerhalb dieses Containers.
+
+Ein Zeitcontainer ist ein Element oder Kontext, das eine lokale Zeitleiste für eine oder mehrere Animationen definiert. Animationen innerhalb des Zeitcontainers werden relativ zu seiner Zeitleiste gemessen. Wenn ein Zeitcontainer verzögert, angehalten oder manipuliert wird, passen sich alle darin enthaltenen Animationen entsprechend an.
+
+Diese Eigenschaft spiegelt das {{SVGAttr("begin")}} Attribut des {{SVGElement("animate")}}, {{SVGElement("animateMotion")}} oder {{SVGElement("animateTransform")}} Elements wider.
+
+## Syntax
+
+```js-nolint
+getStartTime()
+```
+
+### Parameter
+
+Keine ({{jsxref('undefined')}}).
+
+### Rückgabewert
+
+Ein float-Wert.
+
+### Ausnahmen
+
+- `InvalidStateError` [`DOMException`](/de/docs/Web/API/DOMException)
+  - : Wird ausgelöst, wenn das `SVGAnimationElement` kein aktuelles Intervall hat. Dies passiert, wenn die {{SVGAttr("begin")}} Zeit des Animationselements nicht erreicht oder definiert ist, sodass die `getStartTime()` Methode keine gültige Startzeit ermitteln kann. Ein Beispiel wäre, wenn die Animation auf `begin="click"` gesetzt ist, aber der Benutzer noch nicht geklickt hat, um sie zu starten.
+
+## Beispiele
+
+Dieses Beispiel zeigt, wie das Attribut `begin="3s"` die Animation 3 Sekunden nach Beginn der Zeitleiste des Zeitcontainers starten lässt.
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
+    <animate attributeName="cx" from="50" to="150" dur="5s" begin="3s" />
+  </circle>
+</svg>
+```
+
+```js
+const animationElement = document.querySelector("animate");
+
+const startTime = animationElement.getStartTime();
+console.log(
+  `The animation starts at: ${startTime} seconds relative to the time container's timeline`,
+); // Output: 3
+```
+
+Die `getStartTime()` Methode gibt `3.0` zurück, da dies die Zeit relativ zur Zeit null des Zeitcontainers ist.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/window/matchmedia/index.md b/files/de/web/api/window/matchmedia/index.md
index 68ae308c0..05d0b9926 100644
--- a/files/de/web/api/window/matchmedia/index.md
+++ b/files/de/web/api/window/matchmedia/index.md
@@ -3,13 +3,14 @@ title: "Window: matchMedia() Methode"
 short-title: matchMedia()
 slug: Web/API/Window/matchMedia
 l10n:
-  sourceCommit: b71d118ffc6d72b77efad9661110fcc9ede464eb
+  sourceCommit: 7eb271b638ce9fccd7e8866649d51f2710b481d2
 ---
 
 {{APIRef}}
 
-Die **`matchMedia()`**-Methode des [`Window`](/de/docs/Web/API/Window)-Interfaces
-gibt ein neues [`MediaQueryList`](/de/docs/Web/API/MediaQueryList)-Objekt zurück, das verwendet werden kann, um zu bestimmen, ob das [`document`](/de/docs/Web/API/Document) die [Media-Query](/de/docs/Web/CSS/CSS_media_queries/Using_media_queries) Zeichenfolge erfüllt und um das Dokument zu überwachen, um zu erkennen, wann es diese Media-Query erfüllt (oder nicht mehr erfüllt).
+Die **`matchMedia()`** Methode des [`Window`](/de/docs/Web/API/Window) Interfaces
+gibt ein neues [`MediaQueryList`](/de/docs/Web/API/MediaQueryList) Objekt zurück, das verwendet werden kann, um festzustellen, ob
+das [`document`](/de/docs/Web/API/Document) der [Media-Query](/de/docs/Web/CSS/CSS_media_queries/Using_media_queries)-Zeichenkette entspricht. Außerdem kann damit das Dokument überwacht werden, um festzustellen, wann es dieser Media-Query entspricht (oder nicht mehr entspricht).
 
 ## Syntax
 
@@ -20,23 +21,32 @@ matchMedia(mediaQueryString)
 ### Parameter
 
 - `mediaQueryString`
-  - : Ein String, der die zu parsende Media-Query als [`MediaQueryList`](/de/docs/Web/API/MediaQueryList) angibt.
+
+  - : Ein String, der die Media-Query spezifiziert, die in eine [`MediaQueryList`](/de/docs/Web/API/MediaQueryList) geparst wird.
+
+    Genau wie in CSS muss jede [Media-Funktion](/de/docs/Web/CSS/@media#media_features) in der Expression in Klammern gesetzt werden. Zum Beispiel: `matchMedia("(max-width: 600px)")` funktioniert, während `matchMedia("max-width: 600px")` nicht funktioniert. Schlüsselwörter für Medientypen (`all`, `print`, `screen`) und logische Operatoren (`and`, `or`, `not`, `only`) müssen nicht in Klammern gesetzt werden.
 
 ### Rückgabewert
 
-Ein neues [`MediaQueryList`](/de/docs/Web/API/MediaQueryList)-Objekt für die Media-Query. Verwenden Sie die Eigenschaften und Ereignisse dieses Objekts, um Übereinstimmungen zu erkennen und um Änderungen dieser Übereinstimmungen im Laufe der Zeit zu überwachen.
+Ein neues [`MediaQueryList`](/de/docs/Web/API/MediaQueryList) Objekt für die Media-Query. Verwenden Sie die Eigenschaften und Ereignisse dieses Objekts, um Übereinstimmungen zu erkennen und Änderungen dieser Übereinstimmungen über die Zeit zu überwachen.
 
-## Hinweise zur Verwendung
+## Verwendungshinweise
 
-Sie können die zurückgegebene Media-Query sowohl für sofortige als auch für ereignisgesteuerte Überprüfungen verwenden, um festzustellen, ob das Dokument die Media-Query erfüllt.
+Sie können die zurückgegebene Media-Query sowohl für sofortige als auch ereignisgesteuerte
+Überprüfungen verwenden, um zu sehen, ob das Dokument der Media-Query entspricht.
 
-Um eine einmalige, sofortige Überprüfung durchzuführen, ob das Dokument die Media-Query erfüllt, schauen Sie sich den Wert der [`matches`](/de/docs/Web/API/MediaQueryList/matches)-Eigenschaft an, die `true` ist, wenn das Dokument die Anforderungen der Media-Query erfüllt.
+Um eine einmalige, sofortige Überprüfung durchzuführen, ob das Dokument der Media-Query entspricht, betrachten Sie den Wert der [`matches`](/de/docs/Web/API/MediaQueryList/matches)
+Eigenschaft, die `true` sein wird, wenn das Dokument die Anforderungen der Media-Query erfüllt.
 
-Wenn Sie jederzeit informiert bleiben müssen, ob das Dokument die Media-Query erfüllt oder nicht, können Sie stattdessen das [`change`](/de/docs/Web/API/MediaQueryList/change_event)-Ereignis beobachten, das an das Objekt gesendet wird. Es gibt [ein gutes Beispiel dafür](/de/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes) im Artikel über [`Window.devicePixelRatio`](/de/docs/Web/API/Window/devicePixelRatio).
+Wenn Sie ständig informiert werden müssen, ob das Dokument der Media-Query entspricht oder nicht, können Sie stattdessen auf das [`change`](/de/docs/Web/API/MediaQueryList/change_event) Ereignis achten, das dem Objekt übermittelt wird. Es gibt [ein gutes Beispiel dafür](/de/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes)
+im Artikel über [`Window.devicePixelRatio`](/de/docs/Web/API/Window/devicePixelRatio).
 
 ## Beispiele
 
-Dieses Beispiel führt die Media-Query `(max-width: 600px)` aus und zeigt den Wert der `matches`-Eigenschaft der resultierenden `MediaQueryList` in einem {{HTMLElement("span")}} an. Das Ergebnis zeigt "true", wenn der Viewport kleiner oder gleich 600 Pixel breit ist, und "false", wenn das Fenster breiter ist.
+Dieses Beispiel führt die Media-Query `(max-width: 600px)` aus und zeigt den
+Wert der `matches` Eigenschaft des resultierenden `MediaQueryList` in einem
+{{HTMLElement("span")}} an. Das Ergebnis wird "true" anzeigen, wenn das Ansichtsfenster
+kleiner oder gleich 600 Pixel breit ist, und "false", wenn das Fenster breiter ist als das.
 
 ### JavaScript
 
@@ -46,7 +56,7 @@ let mql = window.matchMedia("(max-width: 600px)");
 document.querySelector(".mq-value").innerText = mql.matches;
 ```
 
-Der JavaScript-Code übergibt die Media-Query an `matchMedia()`, um sie zu kompilieren, und setzt dann den [`innerText`](/de/docs/Web/API/HTMLElement/innerText) des `<span>` auf den Wert der [`matches`](/de/docs/Web/API/MediaQueryList/matches)-Eigenschaft der Ergebnisse, um anzugeben, ob das Dokument die Media-Query zum Zeitpunkt des Ladevorgangs der Seite erfüllt.
+Der JavaScript-Code übergibt die zu prüfende Media-Query an `matchMedia()`, um sie zu kompilieren, und setzt dann die `<span>` [`innerText`](/de/docs/Web/API/HTMLElement/innerText) auf den Wert der `matches` Eigenschaft des Ergebnisses, sodass deutlich wird, ob das Dokument momentan der Media-Query entspricht, als die Seite geladen wurde.
 
 ### HTML
 
@@ -54,7 +64,7 @@ Der JavaScript-Code übergibt die Media-Query an `matchMedia()`, um sie zu kompi
 <span class="mq-value"></span>
 ```
 
-Ein einfaches `<span>`, um die Ausgabe zu empfangen.
+Ein einfaches `<span>`, um die Ausgabe zu erhalten.
 
 ```css hidden
 .mq-value {
@@ -72,7 +82,7 @@ Ein einfaches `<span>`, um die Ausgabe zu empfangen.
 
 {{EmbedLiveSample("Examples", "100%", "60")}}
 
-Siehe [Programmatische Tests von Media-Queries](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries) für zusätzliche Codebeispiele.
+Siehe [Media-Queries programmatisch testen](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries) für zusätzliche Code-Beispiele.
 
 ## Spezifikationen
 
@@ -85,5 +95,5 @@ Siehe [Programmatische Tests von Media-Queries](/de/docs/Web/CSS/CSS_media_queri
 ## Siehe auch
 
 - [Media-Queries](/de/docs/Web/CSS/CSS_media_queries/Using_media_queries)
-- [Verwendung von Media-Queries im Code](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+- [Media-Queries mit Code verwenden](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
 - [`MediaQueryList`](/de/docs/Web/API/MediaQueryList)
diff --git a/files/de/web/html/element/time/index.md b/files/de/web/html/element/time/index.md
index d549234c3..ebb323ab0 100644
--- a/files/de/web/html/element/time/index.md
+++ b/files/de/web/html/element/time/index.md
@@ -1,17 +1,17 @@
 ---
-title: "<time>: Das (Datum-) Zeitelement"
+title: "<time>: Das (Datum-) Zeit-Element"
 slug: Web/HTML/Element/time
 l10n:
-  sourceCommit: f10015d1752d5668d8fe0de29f9d9807de475d58
+  sourceCommit: ff11f3927a1b7d0e28ececb7932de1464642925d
 ---
 
 {{HTMLSidebar}}
 
-Das **`<time>`** [HTML](/de/docs/Web/HTML) Element repräsentiert einen bestimmten Zeitraum. Es kann das `datetime`-Attribut enthalten, um Daten in ein maschinenlesbares Format zu übersetzen, was zu besseren Ergebnissen in Suchmaschinen oder benutzerdefinierten Funktionen wie Erinnerungen führen kann.
+Das **`<time>`** [HTML](/de/docs/Web/HTML)-Element repräsentiert einen bestimmten Zeitraum. Es kann das `datetime`-Attribut enthalten, um Daten in ein maschinenlesbares Format zu übersetzen, was zu besseren Suchmaschinenergebnissen oder benutzerdefinierten Funktionen wie Erinnerungen führt.
 
-Es kann eines der folgenden darstellen:
+Es kann Folgendes darstellen:
 
-- Eine Uhrzeit in einem 24-Stunden-Format.
+- Eine Uhrzeit im 24-Stunden-Format.
 - Ein genaues Datum im [Gregorianischen Kalender](https://en.wikipedia.org/wiki/Gregorian_calendar) (mit optionalen Zeit- und Zeitzoneninformationen).
 - [Eine gültige Zeitdauer](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-duration-string).
 
@@ -26,11 +26,11 @@ Wie alle anderen HTML-Elemente unterstützt dieses Element die [globalen Attribu
 
 ## Verwendungshinweise
 
-Dieses Element dient zur Darstellung von Daten und Zeiten in einem maschinenlesbaren Format. Beispielsweise kann dies einem Benutzeragenten helfen, einem Benutzer anzubieten, ein Ereignis in seinen Kalender hinzuzufügen.
+Dieses Element dient der Darstellung von Daten und Zeiten in einem maschinenlesbaren Format. Zum Beispiel kann dies einem Benutzeragenten helfen, dem Benutzer anzubieten, ein Ereignis in dessen Kalender hinzuzufügen.
 
-Dieses Element sollte nicht für Daten vor der Einführung des Gregorianischen Kalenders verwendet werden (aufgrund von Berechnungskomplikationen).
+Dieses Element sollte nicht für Daten verwendet werden, die vor der Einführung des Gregorianischen Kalenders liegen (aufgrund von Komplikationen bei der Berechnung dieser Daten).
 
-Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `datetime`-Attributs des Elements, der im richtigen Format vorliegen muss (siehe unten). Wenn das Element kein `datetime`-Attribut hat, **darf es keine anderen Elementnachfahren haben**, und der _datetime-Wert_ ist der Textinhalt des Elements.
+Der _datetime-Wert_ (der maschinenlesbare Wert von datetime) ist der Wert des `datetime`-Attributs des Elements, das im richtigen Format vorliegen muss (siehe unten). Wenn das Element kein `datetime`-Attribut hat, darf es **keine Nachkommenelemente** haben, und der _datetime-Wert_ ist der Kindtextinhalt des Elements.
 
 ### Gültige datetime-Werte
 
@@ -44,22 +44,22 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
   </thead>
   <tbody>
     <tr>
-      <td>Gültige Monatszeichenkette</td>
+      <td>Gültiger Monatsstring</td>
       <td><code><em>YYYY</em>-<em>MM</em></code></td>
       <td><code>2011-11</code>, <code>2013-05</code></td>
     </tr>
     <tr>
-      <td>Gültige Datumszeichenkette</td>
+      <td>Gültiger Datumsstring</td>
       <td><code><em>YYYY</em>-<em>MM</em>-<em>DD</em></code></td>
       <td><code>1887-12-01</code></td>
     </tr>
     <tr>
-      <td>Gültige Jahreslose Datumszeichenkette</td>
+      <td>Gültiger jahrfreier Datumsstring</td>
       <td><code><em>MM</em>-<em>DD</em></code></td>
       <td><code>11-12</code></td>
     </tr>
     <tr>
-      <td>Gültige Zeitzeichenkette</td>
+      <td>Gültiger Zeitstring</td>
       <td>
         <code><em>HH</em>:<em>MM</em></code><br />
         <code><em>HH</em>:<em>MM</em>:<em>SS</em></code><br />
@@ -72,9 +72,9 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       </td>
     </tr>
     <tr>
-      <td>Gültige lokale Datum- und Zeitzeichenkette</td>
+      <td>Gültiger lokaler Datums- und Zeitstring</td>
       <td>
-        <code><em>YYYY</em>-<em>MM</em>-<em>DD</em><em>HH</em>:<em>MM</em></code><br />
+        <code><em>YYYY</em>-<em>MM</em>-<em>DD</em> <em>HH</em>:<em>MM</em></code><br />
         <code><em>YYYY</em>-<em>MM</em>-<em>DD</em> <em>HH</em>:<em>MM</em>:<em>SS</em></code><br />
         <code><em>YYYY</em>-<em>MM</em>-<em>DD</em> <em>HH</em>:<em>MM</em>:<em>SS</em>.<em>mmm</em></code><br />
         <code><em>YYYY</em>-<em>MM</em>-<em>DD</em>T<em>HH</em>:<em>MM</em></code><br />
@@ -91,7 +91,7 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       </td>
     </tr>
     <tr>
-      <td>Gültige Zeitzonen-Offset-Zeichenkette</td>
+      <td>Gültige Zeitzonen-Offset-String</td>
       <td>
         <code>Z</code><br />
         <code>+<em>HHMM</em></code><br />
@@ -108,10 +108,10 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       </td>
     </tr>
     <tr>
-      <td>Gültige globale Datum- und Zeitzeichenkette</td>
+      <td>Gültiger globaler Datums- und Zeitstring</td>
       <td style="max-width:12em">
-        Jede Kombination einer gültigen lokalen Datum- und Zeitzeichenkette gefolgt
-        von einer gültigen Zeitzonen-Offset-Zeichenkette
+        Jede Kombination eines gültigen lokalen Datums- und Zeitstrings gefolgt
+        von einem gültigen Zeitzonen-Offset-String
       </td>
       <td>
         <code>2013-12-25 11:12+0200</code><br />
@@ -121,7 +121,7 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       </td>
     </tr>
     <tr>
-      <td>Gültige Wochenzeichenkette</td>
+      <td>Gültiger Wochenstring</td>
       <td><code><em>YYYY</em>-W<em>WW</em></code></td>
       <td><code>2013-W46</code></td>
     </tr>
@@ -131,7 +131,7 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       <td><code>2013</code>, <code>0001</code></td>
     </tr>
     <tr>
-      <td>Gültige Dauerdarstellung</td>
+      <td>Gültiger Dauerstring</td>
       <td>
         <code>P<em>d</em>DT<em>h</em>H<em>m</em>M<em>s</em>S</code><br />
         <code>P<em>d</em>DT<em>h</em>H<em>m</em>M<em>s</em>.<em>X</em>S<br />
@@ -198,31 +198,31 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
       </th>
       <td>
         <a href="/de/docs/Web/HTML/Content_categories#flow_content"
-          >Fließendes Inhalt</a
+          >Fließender Inhalt</a
         >,
         <a href="/de/docs/Web/HTML/Content_categories#phrasing_content"
-          >Phrasierungsinhalt</a
-        >, greifbarer Inhalt.
+          >phrasierender Inhalt</a
+        >, handhabbarer Inhalt.
       </td>
     </tr>
     <tr>
       <th scope="row">Erlaubter Inhalt</th>
       <td>
         <a href="/de/docs/Web/HTML/Content_categories#phrasing_content"
-          >Phrasierungsinhalt</a
+          >Phrasierender Inhalt</a
         >.
       </td>
     </tr>
     <tr>
       <th scope="row">Tag-Auslassung</th>
-      <td>Keine, sowohl die Start- als auch die End-Tag sind erforderlich.</td>
+      <td>Keine, sowohl das Start- als auch das End-Tag sind erforderlich.</td>
     </tr>
     <tr>
       <th scope="row">Erlaubte Eltern</th>
       <td>
         Jedes Element, das
         <a href="/de/docs/Web/HTML/Content_categories#phrasing_content"
-          >Phrasierungsinhalt</a
+          >phrasierenden Inhalt</a
         > akzeptiert.
       </td>
     </tr>
@@ -237,7 +237,7 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
     </tr>
     <tr>
       <th scope="row">Erlaubte ARIA-Rollen</th>
-      <td>Beliebig</td>
+      <td>Jede</td>
     </tr>
     <tr>
       <th scope="row">DOM-Schnittstelle</th>
@@ -256,4 +256,4 @@ Der _datetime-Wert_ (der maschinenlesbare Wert des datetime) ist der Wert des `d
 
 ## Siehe auch
 
-- Das {{HTMLElement("data")}} Element, das andere Arten von Werten signalisiert.
+- Das {{HTMLElement("data")}}-Element, das andere Arten von Werten signalisiert.
diff --git a/files/de/web/http/headers/x-frame-options/index.md b/files/de/web/http/headers/x-frame-options/index.md
index b0fc7701a..532ecd8aa 100644
--- a/files/de/web/http/headers/x-frame-options/index.md
+++ b/files/de/web/http/headers/x-frame-options/index.md
@@ -2,17 +2,15 @@
 title: X-Frame-Options
 slug: Web/HTTP/Headers/X-Frame-Options
 l10n:
-  sourceCommit: be3f184d89979d413204b8f9cbecfc8dd0e5ecf9
+  sourceCommit: ca0ac39a49a73006c868777dcc2aa62c3a6d7ca5
 ---
 
-{{HTTPSidebar}}{{deprecated_header}}
+> [!NOTE]
+> Für umfassendere Optionen als die, die von diesem Header angeboten werden, lesen Sie die {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} Direktive in einem {{HTTPHeader("Content-Security-Policy")}} Header.
 
-> [!WARNING]
-> Anstatt dieses Headers verwenden Sie die {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}}-Direktive in einem {{HTTPHeader("Content-Security-Policy")}}-Header.
-
-Der HTTP **`X-Frame-Options`** {{Glossary("response_header", "Antwort-Header")}} kann verwendet werden, um anzugeben, ob ein Browser eine Seite in einem {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} oder {{HTMLElement("object")}} rendern darf. Websites können dies nutzen, um [Clickjacking](/de/docs/Web/Security/Types_of_attacks#clickjacking)-Angriffe zu vermeiden, indem sie sicherstellen, dass ihre Inhalte nicht in andere Seiten eingebettet werden.
+Der HTTP **`X-Frame-Options`** {{Glossary("response_header", "Antwort-Header")}} kann verwendet werden, um zu signalisieren, ob ein Browser eine Seite in einem {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} oder {{HTMLElement("object")}} rendern darf. Websites können dies verwenden, um [Clickjacking](/de/docs/Web/Security/Types_of_attacks#clickjacking)-Angriffe zu vermeiden, indem sie sicherstellen, dass ihre Inhalte nicht in andere Seiten eingebettet werden.
 
-Die zusätzliche Sicherheit wird nur bereitgestellt, wenn der Benutzer, der auf das Dokument zugreift, einen Browser verwendet, der `X-Frame-Options` unterstützt.
+Die zusätzliche Sicherheit wird nur geboten, wenn der Benutzer, der auf das Dokument zugreift, einen Browser verwendet, der `X-Frame-Options` unterstützt.
 
 <table class="properties">
   <tbody>
@@ -38,29 +36,29 @@ X-Frame-Options: SAMEORIGIN
 
 ### Direktiven
 
-Wenn Sie `DENY` angeben, wird der Versuch des Browsers, die Seite in einem Frame zu laden, nicht nur beim Laden von anderen Seiten fehlschlagen, sondern auch beim Laden von derselben Seite. Wenn Sie hingegen `SAMEORIGIN` angeben, können Sie die Seite weiterhin in einem Frame verwenden, solange die Seite, die sie in einem Frame einfügt, dieselbe ist wie diejenige, die die Seite bereitstellt.
+Wenn Sie `DENY` angeben, wird der Versuch des Browsers, die Seite in einem Frame zu laden, nicht nur fehlschlagen, wenn sie von anderen Seiten geladen wird, sondern auch, wenn sie von der gleichen Seite geladen wird. Wenn Sie hingegen `SAMEORIGIN` angeben, können Sie die Seite immer noch in einem Frame verwenden, solange die Seite, die sie in einem Frame einschließt, die gleiche ist wie die, die die Seite bereitstellt.
 
 - `DENY`
-  - : Die Seite kann in keinem Frame angezeigt werden, unabhängig von der Seite, die es versucht.
-- `SAMEORIGIN` {{deprecated_inline}}
-  - : Die Seite kann nur angezeigt werden, wenn alle übergeordneten Frames denselben Ursprung wie die Seite selbst haben.
+  - : Die Seite kann nicht in einem Frame angezeigt werden, unabhängig von der Seite, die versucht, dies zu tun.
+- `SAMEORIGIN`
+  - : Die Seite kann nur angezeigt werden, wenn alle übergeordneten Frames den gleichen Ursprung wie die Seite selbst haben.
 - `ALLOW-FROM origin` {{deprecated_inline}}
-  - : Dies ist eine veraltete Direktive. Moderne Browser, die Antwort-Header mit dieser Direktive vorfinden, ignorieren den Header vollständig. Der {{HTTPHeader("Content-Security-Policy")}} HTTP-Header hat eine {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}}-Direktive, die Sie stattdessen verwenden sollten.
+  - : Dies ist eine veraltete Direktive. Moderne Browser, die auf Antwort-Header mit dieser Direktive stoßen, ignorieren den Header vollständig. Der {{HTTPHeader("Content-Security-Policy")}} HTTP-Header hat eine {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} Direktive, die stattdessen verwendet werden sollte.
 
 ## Beispiele
 
 > [!WARNING]
-> Das Setzen von `X-Frame-Options` innerhalb des {{HTMLElement("meta")}}-Elements (z.B. `<meta http-equiv="X-Frame-Options" content="deny">`) hat keine Wirkung. `X-Frame-Options` wird nur über HTTP-Header erzwungen, wie in den folgenden Beispielen gezeigt.
+> Das Setzen von `X-Frame-Options` im {{HTMLElement("meta")}} Element (z.B., `<meta http-equiv="X-Frame-Options" content="deny">`) hat keine Wirkung. `X-Frame-Options` wird nur über HTTP-Header durchgesetzt, wie in den unten stehenden Beispielen gezeigt.
 
 ### Konfiguration von Apache
 
-Um Apache so zu konfigurieren, dass der `X-Frame-Options`-Header für alle Seiten gesendet wird, fügen Sie dies zur Konfiguration Ihrer Website hinzu:
+Um Apache so zu konfigurieren, dass der `X-Frame-Options` Header für alle Seiten gesendet wird, fügen Sie dies der Konfiguration Ihrer Website hinzu:
 
 ```apacheconf
 Header always set X-Frame-Options "SAMEORIGIN"
 ```
 
-Um Apache so zu konfigurieren, dass `X-Frame-Options` auf `DENY` gesetzt wird, fügen Sie dies zur Konfiguration Ihrer Website hinzu:
+Um Apache so zu konfigurieren, dass `X-Frame-Options` auf `DENY` gesetzt wird, fügen Sie dies der Konfiguration Ihrer Website hinzu:
 
 ```apacheconf
 Header set X-Frame-Options "DENY"
@@ -68,13 +66,13 @@ Header set X-Frame-Options "DENY"
 
 ### Konfiguration von Nginx
 
-Um Nginx so zu konfigurieren, dass der `X-Frame-Options`-Header gesendet wird, fügen Sie dies entweder zu Ihrer http-, server- oder location-Konfiguration hinzu:
+Um Nginx so zu konfigurieren, dass der `X-Frame-Options` Header gesendet wird, fügen Sie dies entweder Ihrer http-, server- oder location-Konfiguration hinzu:
 
 ```nginx
 add_header X-Frame-Options SAMEORIGIN always;
 ```
 
-Sie können den `X-Frame-Options`-Header auf `DENY` setzen, indem Sie:
+Sie können den `X-Frame-Options` Header auf `DENY` setzen, indem Sie:
 
 ```nginx
 add_header X-Frame-Options DENY always;
@@ -82,7 +80,7 @@ add_header X-Frame-Options DENY always;
 
 ### Konfiguration von IIS
 
-Um IIS so zu konfigurieren, dass der `X-Frame-Options`-Header gesendet wird, fügen Sie dies zur Datei `Web.config` Ihrer Website hinzu:
+Um IIS so zu konfigurieren, dass der `X-Frame-Options` Header gesendet wird, fügen Sie dies in Ihrer `Web.config` Datei hinzu:
 
 ```xml
 <system.webServer>
@@ -96,17 +94,17 @@ Um IIS so zu konfigurieren, dass der `X-Frame-Options`-Header gesendet wird, fü
 </system.webServer>
 ```
 
-Für weitere Informationen lesen Sie den [Microsoft Support-Artikel zur Einstellung dieser Konfiguration mit der IIS Manager-Benutzeroberfläche](https://support.microsoft.com/en-US/office/mitigating-framesniffing-with-the-x-frame-options-header-1911411b-b51e-49fd-9441-e8301dcdcd79).
+Für weitere Informationen lesen Sie den [Microsoft Support-Artikel über die Konfiguration dieser Einstellung mithilfe der IIS Manager](https://support.microsoft.com/en-US/office/mitigating-framesniffing-with-the-x-frame-options-header-1911411b-b51e-49fd-9441-e8301dcdcd79) Benutzeroberfläche.
 
 ### Konfiguration von HAProxy
 
-Um HAProxy so zu konfigurieren, dass der `X-Frame-Options`-Header gesendet wird, fügen Sie dies Ihrer Frontend-, Listener- oder Backend-Konfiguration hinzu:
+Um HAProxy so zu konfigurieren, dass der `X-Frame-Options` Header gesendet wird, fügen Sie dies Ihrer front-end, listen oder backend Konfiguration hinzu:
 
 ```plain
 rspadd X-Frame-Options:\ SAMEORIGIN
 ```
 
-Alternativ, in neueren Versionen:
+Alternativ in neueren Versionen:
 
 ```plain
 http-response set-header X-Frame-Options SAMEORIGIN
@@ -114,7 +112,7 @@ http-response set-header X-Frame-Options SAMEORIGIN
 
 ### Konfiguration von Express
 
-Um `X-Frame-Options` auf `SAMEORIGIN` zu setzen, verwenden Sie [Helmet](https://helmetjs.github.io/) und fügen Sie das Folgende zu Ihrer Server-Konfiguration hinzu:
+Um `X-Frame-Options` auf `SAMEORIGIN` mit [Helmet](https://helmetjs.github.io/) zu setzen, fügen Sie folgendes Ihrer Serverkonfiguration hinzu:
 
 ```js
 const helmet = require("helmet");
@@ -136,6 +134,6 @@ app.use(
 
 ## Siehe auch
 
-- {{HTTPHeader("Content-Security-Policy")}}-Direktive {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}}
-- [ClickJacking-Abwehr - IEBlog](https://learn.microsoft.com/en-us/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses)
+- {{HTTPHeader("Content-Security-Policy")}} Direktive {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}}
+- [ClickJacking-Abwehrmaßnahmen - IEBlog](https://learn.microsoft.com/en-us/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses)
 - [Bekämpfung von ClickJacking mit X-Frame-Options - IEInternals](https://learn.microsoft.com/en-us/archive/blogs/ieinternals/combating-clickjacking-with-x-frame-options)