
前后对比滑块
媒体 · 区块左右拖动分割线看改造前后。两层都是真 DOM,不是两张图拼的——所以右边那层照样能交互、能读屏。分割用 clip-path 而不是宽度,拖动时不触发重排;指针用 setPointerCapture 接管,手滑出容器也不会中断。滑块本身是 role="slider",方向键微调、Home/End 到两端,键盘用户不需要鼠标。
React复制 0无障碍
定价卡片
数据展示 · 组件三档并排,用边框粗细与阴影把推荐档抬起来,价格用等宽数字(tabular-nums)对齐——不加这条,¥0 和 ¥399 的小数点会错位,三张卡的价签看起来像没对齐。billing 参数让月付与年付共用同一套 DOM:年付只换数字与角标,不另做一套卡片。
ReactHTML/CSS复制 0深色无障碍