标签

无障碍

12篇文章

11 分钟阅读

400% 放大之后正文只剩 118px:一笔与视口高度无关的固定像素通行费

横向回流判定 8 行全过,320x200 条件下正文顶部却只剩 118px,页面中部更掉到 110px。损失不是随视口缩放的百分比,而是一笔 82px 的恒定像素代价,大半来自应用 CSS 之外的第三方固定容器。本文给出可复现的测量口径、发布回归门槛该怎么划,以及为什么不该定一条通用及格线、而要改用回归比较。

无障碍 WCAG CSS
13 分钟阅读

往下按 Tab 零违规,往上按 16 条:吸顶头部吞掉的键盘焦点

同样六个页面,用 Tab 往下走测出 WCAG 2.4.11 违规 0 条,用 Shift+Tab 往上走测出 16 条。原因在于浏览器把焦点目标滚进视口时,对齐方式取决于你从哪个方向来。一行 CSS 把 16 条降到 0 条的实测记录。测的方向一换,结果就跟着换,这不是偶然误差,而是对齐规则本身。

无障碍 WCAG 键盘
13 分钟阅读

声明标题的七个位置里,只有六个是我写的

一篇文章的标题会在 title、h1、og:title、headline、RSS 等六处被声明,1,296 篇全部一致。真正出问题的是第七处:指向文章的 18,296 条内部链接里,锚文本与目标标题完全一致的只有 0.7%,根源是包住整张卡片的那一个 a 标签。本文给出七个渠道的实测数据与可照做的修复路径。

SEO 无障碍 锚文本
9 分钟阅读

刚要点按钮,页面却跳了一下 — 把 CLS 从 0.559 压到 0.014 的实测记录

加载时布局乱跳不是审美问题,而是一个能量化的指标。我把同一个页面做了两版,用 layout-shift PerformanceObserver 测 CLS,只靠给图片预留盒子、给动态内容预留槽位,就把 0.559(POOR)压到了 0.014(GOOD)。过程有代码,有日志,也有可以照着复现的测量步骤。

Core Web Vitals CLS 网页性能