Angular组件何时需用<section>/<article>兼顾无障碍与SEO？

在开发Angular项目时，我们可以针对性地使用语义化HTML标签，在兼顾无障碍（Accessibility）、SEO需求的同时避免冗余代码，以下是具体的分析和实践方案：

/

标签的必要性判断 #

• 无障碍场景：非必需。屏幕阅读器等辅助技术主要依靠内容本身、标题标签（<h1>-<h6>）、列表、链接等元素传递信息，<section>和<article>对无障碍体验的提升作用有限。
• Angular组件内部语义：非必需。组件的选择器本身已经能够清晰提供内容用途的上下文，无需额外通过这类标签来强化组件语义。
• SEO场景：有实用价值。<section>和<article>可以帮助搜索引擎更好地理解页面内容结构，优化内容的索引效果。

强制组件配合语义标签使用的方案 #

如果需要确保product-card组件始终配合语义化标签使用，可以通过修改组件的选择器来实现约束：

selector: 'article [app-product-card]'

这种设置下，app-product-card组件只能被放置在<article>标签内部，既满足了SEO所需的语义结构要求，又不会产生冗余代码。

内容的提问来源于stack exchange，提问作者Nau