Use os elementos HTML corretos para estruturar o conteúdo de forma compreensível
<!-- 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>Conteúdo principal da página...
<!-- 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>Explicação: Uma estrutura semântica clara ajuda os leitores de tela a navegar e entender o conteúdo. Elementos de seção (header, nav, main, footer) criam marcos importantes.
Acessibilidade web é importante...
Aqui estão algumas técnicas...
HTML Semântico...
Elementos como header, nav...
CSS pode melhorar...
<!-- 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>Acessibilidade web é importante...
Aqui estão algumas técnicas...
HTML Semântico...
Elementos como header, nav...
CSS pode melhorar...
<!-- 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>Explicação: Uma hierarquia lógica de cabeçalhos (h1 → h2 → h3) permite que leitores de tela criem um esboço de navegação e os usuários entendam a estrutura do conteúdo.
<!-- 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>Explicação: Use os elementos corretos para ações: botões para ações, links para navegação. Isso garante semântica adequada e comportamentos esperados do teclado.
<!-- 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>Explicação: Usar elementos de lista apropriados permite que leitores de tela anunciem o número de itens e facilitem a navegação.