Utilizzare gli elementi HTML giusti per strutturare il contenuto in modo comprensibile
<!-- 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>Contenuto principale della pagina...
<!-- 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>Spiegazione: Una struttura semantica chiara aiuta gli screen reader a navigare e comprendere il contenuto. Gli elementi di sezionamento (header, nav, main, footer) creano punti di riferimento importanti.
L'accessibilità web è importante...
Ecco alcune tecniche...
L'HTML semantico...
Elementi come header, nav...
Il CSS può migliorare...
<!-- 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>L'accessibilità web è importante...
Ecco alcune tecniche...
L'HTML semantico...
Elementi come header, nav...
Il CSS può migliorare...
<!-- 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>Spiegazione: Una gerarchia logica delle intestazioni (h1 → h2 → h3) consente agli screen reader di creare una struttura di navigazione e agli utenti di comprendere la struttura del contenuto.
<!-- 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>Spiegazione: Usa gli elementi giusti per le azioni: pulsanti per azioni, link per navigazione. Questo garantisce semantica corretta e comportamenti da tastiera previsti.
<!-- 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>Spiegazione: L'utilizzo di elementi di lista appropriati consente agli screen reader di annunciare il numero di elementi e facilitare la navigazione.