Usa los elementos HTML correctos para estructurar el contenido de manera comprensible
<!-- 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>Contenido principal de la 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>Explicación: Una estructura semántica clara ayuda a los lectores de pantalla a navegar y comprender el contenido. Los elementos de sección (header, nav, main, footer) crean puntos de referencia importantes.
La accesibilidad web es importante...
Aquí hay algunas técnicas...
El HTML semántico...
Elementos como header, nav...
CSS puede mejorar...
<!-- 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>La accesibilidad web es importante...
Aquí hay algunas técnicas...
El HTML semántico...
Elementos como header, nav...
CSS puede mejorar...
<!-- 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>Explicación: Una jerarquía lógica de encabezados (h1 → h2 → h3) permite a los lectores de pantalla crear un esquema de navegación y a los usuarios comprender la estructura del contenido.
<!-- 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>Explicación: Usa los elementos correctos para las acciones: botones para acciones, enlaces para navegación. Esto asegura la semántica adecuada y los comportamientos de teclado esperados.
<!-- 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>Explicación: Usar elementos de lista apropiados permite a los lectores de pantalla anunciar el número de elementos y facilitar la navegación.