Die richtigen HTML-Elemente verwenden, um Inhalte auf verständliche Weise zu strukturieren
<!-- pageStructure.badComment -->
<div class="page-header">
<div class="site-title">pageStructure.siteTitle</div>
<div class="navigation">
<div>pageStructure.home</div>
<div>pageStructure.about</div>
</div>
</div>
<div class="page-content">
<div class="content-title">pageStructure.welcome</div>
<div>pageStructure.mainContent</div>
</div>
<div class="page-footer">
pageStructure.copyright
</div>Hauptseiteninhalt...
<!-- pageStructure.goodComment -->
<header>
<div class="site-title">pageStructure.siteTitle</div>
<nav aria-label="pageStructure.mainNav">
<ul>
<li><a href="/">pageStructure.home</a></li>
<li><a href="/about">pageStructure.about</a></li>
</ul>
</nav>
</header>
<main>
<h1>pageStructure.welcome</h1>
<p>pageStructure.mainContent</p>
</main>
<footer>
<p>pageStructure.copyright</p>
</footer>Erklärung: Eine klare semantische Struktur hilft Bildschirmleseprogrammen, Inhalte zu navigieren und zu verstehen. Abschnittselemente (header, nav, main, footer) schaffen wichtige Orientierungspunkte.
Web-Barrierefreiheit ist wichtig...
Hier sind einige Techniken...
Semantisches HTML...
Elemente wie header, nav...
CSS kann verbessern...
<!-- headings.badComment -->
<div class="title-large">headings.intro</div>
<p>headings.content</p>
<div class="title-medium">headings.section1</div>
<p>headings.content</p>
<div class="title-medium">headings.section2</div>
<p>headings.content</p>
<div class="title-small">headings.subsection</div>
<p>headings.content</p>Web-Barrierefreiheit ist wichtig...
Hier sind einige Techniken...
Semantisches HTML...
Elemente wie header, nav...
CSS kann verbessern...
<!-- headings.goodComment -->
<h1>headings.intro</h1>
<p>headings.content</p>
<h2>headings.basicTechniques</h2>
<p>headings.content</p>
<h3>headings.semanticHTML</h3>
<p>headings.content</p>
<h4>headings.structureElements</h4>
<p>headings.content</p>
<h3>headings.cssAccessibility</h3>
<p>headings.content</p>Erklärung: Eine logische Überschriftenhierarchie (h1 → h2 → h3) ermöglicht es Bildschirmleseprogrammen, eine Navigationsgliederung zu erstellen, und Benutzern, die Inhaltsstruktur zu verstehen.
<!-- buttonsVsLinks.badComment -->
<div @click="handleSave" style="cursor: pointer;">
💾 buttonsVsLinks.save
</div>
<div @click="handleDelete" style="cursor: pointer;">
🗑️ buttonsVsLinks.delete
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
👤 buttonsVsLinks.profile
</span><!-- buttonsVsLinks.goodComment -->
<button type="button" @click="handleSave">
💾 buttonsVsLinks.save
</button>
<button type="button" @click="handleDelete">
🗑️ buttonsVsLinks.delete
</button>
<a href="/profile">
👤 buttonsVsLinks.profile
</a>
<button type="button" @click="toggleModal">
ℹ️ buttonsVsLinks.moreInfo
</button>Erklärung: Verwenden Sie die richtigen Elemente für Aktionen: Schaltflächen für Aktionen, Links für Navigation. Dies gewährleistet die richtige Semantik und erwartete Tastaturverhalten.
<!-- lists.badComment -->
<div class="list-title">lists.ingredientsTitle</div>
<div>lists.eggs</div>
<div>lists.milk</div>
<div>lists.seasoning</div>
<div class="list-title">lists.stepsTitle</div>
<div>1. lists.step1</div>
<div>2. lists.step2</div>
<div>3. lists.step3</div><!-- lists.goodComment -->
<h3>lists.ingredientsTitle</h3>
<ul>
<li>lists.eggs</li>
<li>lists.milk</li>
<li>lists.seasoning</li>
</ul>
<h3>lists.stepsTitle</h3>
<ol>
<li>lists.step1Full</li>
<li>lists.step2</li>
<li>lists.step3</li>
<li>lists.step4</li>
</ol>Erklärung: Die Verwendung geeigneter Listenelemente ermöglicht es Bildschirmleseprogrammen, die Anzahl der Elemente anzusagen und die Navigation zu erleichtern.