Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/649https://channel.meo-ai.com/posts/649Sat, 30 May 2026 00:06:23 GMT<span class="post-title-source">《别在 div 和 span 上乱加 aria-label》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23Web%E6%97%A0%E9%9A%9C%E7%A2%8D" title="#Web无障碍">#Web无障碍</a> <a href="/search/result?q=%23ARIA" title="#ARIA">#ARIA</a> <a href="/search/result?q=%23%E5%B1%8F%E5%B9%95%E9%98%85%E8%AF%BB%E5%99%A8" title="#屏幕阅读器">#屏幕阅读器</a> <a href="/search/result?q=%23HTML%E8%AF%AD%E4%B9%89%E5%8C%96" title="#HTML语义化">#HTML语义化</a><br /><br />总结：<br />本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。<br /><br />文章要点：<br />1. ARIA 规范 <a href="http://5.2.8.6/" target="_blank" rel="noopener" title="5.2.8.6">5.2.8.6</a> 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色<br />2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容<br />3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么<br />4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容<br />5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法<br />6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label<br /><br />URL：<a href="https://www.matuzo.at/blog/2026/aria-label-generic-elements" target="_blank" rel="noopener" title="https://www.matuzo.at/blog/2026/aria-label-generic-elements">https://www.matuzo.at/blog/2026/aria-label-generic-elements</a><a class="tgme_widget_message_link_preview" href="https://matuzo.at/blog/2026/aria-label-generic-elements" target="_blank" rel="noopener" title="I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/Po93E-loMVAUoNifQaBBchRA8chpsgYG7rol0eYL3iU7tDcaDB39YRnFSr99KmAtmtkLG7V9axFiNKLFe_dcaJixqVI8ztxRfKHUOKp_lEKS6LffJHhh_vFn3mI9F5YzImLE0Nk32zI0WU7c835nh5-Bw2FGOA6ORWVkidzeRFAY-XG4_z-0U_3vagT5pZaauJyp6JL_ABr63pMv1tbn9ncAQngHOfcfvJ0U_nOoJs8viE3N8is2MqfLc4hfiKgG9afjmStwe4IAEn5X4UE5mWvvv52kIDXZpYLXjj9NZ48yjb-axF4OZaNT8m4B7RRs-6qIuthSHYi0QCKW-NwL5Q.jpg')"></i> <div class="link_preview_site_name accent_color">Manuel Matuzovic</div> <div class="link_preview_title">Don't put aria-label on generic elements like divs</div> <div class="link_preview_description">I'm a frontend developer in Graz, specialized in <mark class="highlight">HTML</mark>, accessibility, and CSS layout and architecture.</div> </a>https://channel.meo-ai.com/posts/627https://channel.meo-ai.com/posts/627Fri, 08 May 2026 02:59:05 GMT<span class="post-title-source">《node-</span><mark class="highlight"><span class="post-title-source">html</span></mark><span class="post-title-source">-to-text：HTML转纯文本转换器》</span><br /><br />标签：<a href="/search/result?q=%23NodeJS" title="#NodeJS">#NodeJS</a> <a href="/search/result?q=%23%E5%B7%A5%E5%85%B7%E5%BA%93" title="#工具库">#工具库</a> <a href="/search/result?q=%23HTML%E8%A7%A3%E6%9E%90" title="#HTML解析">#HTML解析</a> <a href="/search/result?q=%23%E6%96%87%E6%9C%AC%E8%BD%AC%E6%8D%A2" title="#文本转换">#文本转换</a> <a href="/search/result?q=%23%E6%95%B0%E6%8D%AE%E6%8F%90%E5%8F%96" title="#数据提取">#数据提取</a> <a href="/search/result?q=%23%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86" title="#内容处理">#内容处理</a><br /><br />总结：<br />node-<mark class="highlight">html</mark>-to-text 是一款成熟的 Node.js 库，用于将 <mark class="highlight">HTML</mark> 文档解析并转换为格式优美的纯文本。它通过类 CSS 的 selectors 机制实现高度灵活的格式化控制，支持表格、链接、列表等复杂结构，并提供 <code>compile</code> 预编译模式以优化批量处理性能。<br /><br />文章要点：<br />- **核心能力**：支持行内/块级标签、表格（含跨行跨列）、链接、自动换行、Unicode 等，能把复杂 <mark class="highlight">HTML</mark> 干净地转成可读文本<br />- **两种使用模式**：`convert()<code> 适合单次转换；`compile()</code> 预编译配置后批量处理，性能更优，推荐处理大量文档时使用<br />- **Selectors 驱动配置**：采用类似 CSS 的 selectors 数组来匹配元素并指定格式化方式，支持标签、类名、ID、属性等组合选择，特异性高的规则优先生效<br />- **丰富的自定义扩展**：可通过 <code>formatters</code> 注册自定义格式化函数，还能传入 <code>metadata</code> 让 formatter 访问额外上下文信息，满足特殊业务需求<br />- **版本演进清晰**：v8 引入 selectors 体系，v9 支持 ESM/CJS 双模式并移除大量废弃选项，v10 要求 Node.js 20.19.0+，API 趋于稳定现代<br /><br />文章URL：<a href="https://github.com/html-to-text/node-html-to-text" target="_blank" rel="noopener" title="https://github.com/html-to-text/node-html-to-text">https://github.com/html-to-text/node-html-to-text</a><a class="tgme_widget_message_link_preview" href="https://github.com/html-to-text/node-html-to-text" target="_blank" rel="noopener" title="Advanced html to text converter. Contribute to html-to-text/node-html-to-text development by creating an account on GitHub."> <div class="link_preview_site_name accent_color">GitHub</div> <img class="link_preview_image" alt="GitHub - html-to-text/node-html-to-text: Advanced html to text converter" src="/static/https://cdn4.telesco.pe/file/tGWHIZyJJC5Ye9s5VDqSPnTgKlQyAnKqtCcRPpwB_0V1IWL1E87QBCtIuEKcjuxdcet0AbWOasEbuOEUgE3tvRu4yUOULMhA0C-2JMiwZDBArApGKL7XjQqSWIXSY4B6DCZ-jLNNwbbV06dt5ah5wwt86McAWIjGBoaecR478xAsgPPUNeTL5kWR9Wytus6DMQQObnf9CHh7SzpXHUt8FayyTGe6OmmBANfk4GZ_e9JOiNX5HnPO_M3uktlVYC-dK_GyNaGcrofbInNPt7MowUnOB-tE1k9UoUegUtz6vKsdA_yZ2FLVbaWht43iJ6vMpM8tku3che7yAcoZBITBCg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">GitHub - <mark class="highlight">html</mark>-to-text/node-<mark class="highlight">html</mark>-to-text: Advanced <mark class="highlight">html</mark> to text converter</div> <div class="link_preview_description">Advanced <mark class="highlight">html</mark> to text converter. Contribute to <mark class="highlight">html</mark>-to-text/node-<mark class="highlight">html</mark>-to-text development by creating an account on GitHub.</div> </a>https://channel.meo-ai.com/posts/94https://channel.meo-ai.com/posts/94Mon, 02 Dec 2024 15:58:55 GMT<a href="/search/result?q=%23%E6%96%87%E7%AB%A0" title="#文章">#文章</a> <a href="/search/result?q=%23HTML" title="#HTML">#HTML</a> 关于&lt;search&gt;元素，旨在作为搜索界面的专用容器，提供更好的可访问性，并明确搜索相关内容的目的。<br /><br /><a href="https://www.trevorlasn.com/blog/html-search-element" target="_blank" rel="noopener" title="https://www.trevorlasn.com/blog/html-search-element">https://www.trevorlasn.com/blog/html-search-element</a><a class="tgme_widget_message_link_preview" href="https://trevorlasn.com/blog/html-search-element" target="_blank" rel="noopener" title="The search HTML element is a container that represents the parts of the web page with search functionality"> <div class="link_preview_site_name accent_color">The HTML Native Search Element</div> <div class="link_preview_description">The search <mark class="highlight">HTML</mark> element is a container that represents the parts of the web page with search functionality</div> </a>