5. Reconsidering Non-Semantic Tags and Accessibility
Using semantic tags doesn't mean completely excluding <div> or <span>. These elements are still useful as wrappers for styling (CSS) or as hooks for JavaScript functionality.
5.1. Appropriate Use of <div> and <span>
<div> (Block level) and <span> (Inline level) should be used when you need a wrapper purely for styling purposes, not to convey meaning to the content. Use them only when a semantic tag is not appropriate or if the purpose is strictly CSS layout.
<div class="card-wrapper"> <!-- For CSS layout purposes -->
<article>...</article>
</div>
<p>The price has been <span class="highlight">discounted by 50%</span>.</p> <!-- For inline styling purposes -->
5.2. Semantic Markup and ARIA
Semantic tags automatically provide essential ARIA Role information to screen readers. For instance, <nav> inherently has the role of role="navigation".
- Benefit: Using semantic tags reduces the need to manually add ARIA attributes, resulting in cleaner code and fewer potential errors.
- Exception: When creating custom components using <div> (e.g., a custom button), you must explicitly use
aria-*attributes to ensure accessibility.
The ultimate goal is to enable all users to easily access and understand the content through meaningful markup.