Now vibe coding, so learning hammer FE ?
《别在 div 和 span 上乱加 aria-label》
标签：#前端 #Web无障碍 #ARIA #屏幕阅读器 #HTML语义化
总结：
本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。
文章要点：
1. ARIA 规范 5.2.8.6 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色
2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容
3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么
4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容
5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法
6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label
URL：https://www.matuzo.at/blog/2026/aria-label-generic-elements
标签：#前端 #Web无障碍 #ARIA #屏幕阅读器 #HTML语义化
总结：
本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。
文章要点：
1. ARIA 规范 5.2.8.6 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色
2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容
3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么
4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容
5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法
6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label
URL：https://www.matuzo.at/blog/2026/aria-label-generic-elements
《node-html-to-text：HTML转纯文本转换器》
标签：#NodeJS #工具库 #HTML解析 #文本转换 #数据提取 #内容处理
总结：
node-html-to-text 是一款成熟的 Node.js 库，用于将 HTML 文档解析并转换为格式优美的纯文本。它通过类 CSS 的 selectors 机制实现高度灵活的格式化控制，支持表格、链接、列表等复杂结构，并提供
文章要点：
- **核心能力**：支持行内/块级标签、表格（含跨行跨列）、链接、自动换行、Unicode 等，能把复杂 HTML 干净地转成可读文本
- **两种使用模式**：`convert()
- **Selectors 驱动配置**：采用类似 CSS 的 selectors 数组来匹配元素并指定格式化方式，支持标签、类名、ID、属性等组合选择，特异性高的规则优先生效
- **丰富的自定义扩展**：可通过
- **版本演进清晰**：v8 引入 selectors 体系，v9 支持 ESM/CJS 双模式并移除大量废弃选项，v10 要求 Node.js 20.19.0+，API 趋于稳定现代
文章URL：https://github.com/html-to-text/node-html-to-text
标签：#NodeJS #工具库 #HTML解析 #文本转换 #数据提取 #内容处理
总结：
node-html-to-text 是一款成熟的 Node.js 库，用于将 HTML 文档解析并转换为格式优美的纯文本。它通过类 CSS 的 selectors 机制实现高度灵活的格式化控制，支持表格、链接、列表等复杂结构，并提供
compile 预编译模式以优化批量处理性能。文章要点：
- **核心能力**：支持行内/块级标签、表格（含跨行跨列）、链接、自动换行、Unicode 等，能把复杂 HTML 干净地转成可读文本
- **两种使用模式**：`convert()
适合单次转换；`compile() 预编译配置后批量处理，性能更优，推荐处理大量文档时使用- **Selectors 驱动配置**：采用类似 CSS 的 selectors 数组来匹配元素并指定格式化方式，支持标签、类名、ID、属性等组合选择，特异性高的规则优先生效
- **丰富的自定义扩展**：可通过
formatters 注册自定义格式化函数，还能传入 metadata 让 formatter 访问额外上下文信息，满足特殊业务需求- **版本演进清晰**：v8 引入 selectors 体系，v9 支持 ESM/CJS 双模式并移除大量废弃选项，v10 要求 Node.js 20.19.0+，API 趋于稳定现代
文章URL：https://github.com/html-to-text/node-html-to-text
GitHub
GitHub - html-to-text/node-html-to-text: Advanced html to text converter
Advanced html to text converter. Contribute to html-to-text/node-html-to-text development by creating an account on GitHub.
#文章 #HTML 关于<search>元素，旨在作为搜索界面的专用容器，提供更好的可访问性，并明确搜索相关内容的目的。
https://www.trevorlasn.com/blog/html-search-element
https://www.trevorlasn.com/blog/html-search-element
