1. 语义化标记与可访问性
1.1 为什么要在搜索结果数量上使用语义标签
在前端应用中，搜索结果数量不仅要呈现给普通用户，更需要被屏幕阅读器和搜索引擎正确理解。语义化标记提供了结构和含义，帮助辅助技术快速定位数量信息。
通过清晰的语义结构，可访问性和可维护性都将提升，同时对 SEO 也有正向影响，因为爬虫可以更好地解析页面中关于结果集的信息。
共 128 条结果
...
1.2 如何提高无障碍性
为动态更新的数量信息设置aria-live区域，可以让用户在结果发生变化时获得即时反馈。
将文本信息放在一个可定位的区域中，避免把数量信息混合在按钮文本或图标里，以免屏幕阅读器产生混淆。
共 128 条结果
2. 在 HTML 中标记搜索结果数量的正确做法
2.1 使用明确的可读文本与结构
优先使用一个清晰的文本节点来显示总数，如 <p>共 128 条结果</p>，并将文本放置在独立的容器中，以便样式与屏幕阅读器能保持一致。
对于机器处理和可搜索性，可以搭配data元素或aria-live等无障碍特性实现数据的可发现性。
共 128 条结果
2.2 选择合适的语义标签与属性
使用section、main之外，保留专门的计数区域，尽量避免将数量嵌在控件文本中。合适的做法是把数量放在<data>、<output>或独立的段落中，并给予清晰的文本描述。
128 条结果
3. 最佳实践与常见陷阱
3.1 避免重复信息与数据不一致
确保页面每次数据变更时，页面中的数量信息也同步更新，避免文本错位或计数错误，否则会降低用户信任度和 SEO 表现。
将数量信息从渲染逻辑中分离，使用一个单独的数据源更新相关文本，可以降低错误率并提高可维护性。
// 示例伪代码
let total = fetchTotalResults();
document.getElementById('result-count').textContent = total + ' 条结果';
3.2 国际化与数字格式
不同语言环境对数字的呈现有差异，应使用本地化格式化函数来呈现计数，例如使用Intl.NumberFormat按用户语言环境格式化。
const nf = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
const total = 128;
document.getElementById('result-count').textContent = nf.format(total) + ' 条结果';
