产品判断

无 JavaScript 也能发现内容:文章筛选的渐进增强

以文章分类和标签筛选为例,拆解如何先交付完整静态列表,再用少量脚本增强 URL 条件读取与结果反馈。

· 约 2 分钟阅读

示例文章:以下交互讨论用于验证页面能力,不代表已经发生的用户研究结论。

渐进增强不是“禁用 JavaScript”,而是先保证基础任务不依赖它。文章列表的基础任务是浏览与进入文章,所以服务器生成的 HTML 应该包含全部已发布内容和普通聚合链接。

先定义无脚本路径

读者可以从文章列表查看全部条目,也能通过分类与标签链接进入独立页面。即使筛选脚本加载失败,发现路径仍然完整。

增强只处理现有 DOM

小脚本读取经过白名单验证的 URL query,隐藏不匹配条目并更新结果说明。它不请求接口,也不创建第二份文章数据。

错误时回到完整列表

增强失败后最安全的回退是移除隐藏状态、展示全部文章,并用礼貌提示说明筛选暂时不可用。错误不应该让首屏变成空白。

保留可访问反馈

筛选条件不能只靠颜色表达。当前条件、结果数量和清除操作都应有文字;键盘焦点保留在触发项,结果变化通过 live region 轻量宣布。

继续阅读