You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

关于CSS resize属性无障碍访问实现的技术问询

关于CSS resize属性无障碍访问实现的技术问询

我发现CSS里有个特别实用的元素缩放属性resize,但一直摸不准怎么用它才能满足无障碍访问的要求。

这个属性生成的缩放手柄既不在DOM结构里,也不在Tab键的导航顺序中,就我目前摸索到的情况来看,只能通过鼠标拖拽来缩放元素——这明显违反了WCAG的相关规范要求。

这是不是意味着这个特性压根不能用在需要完全支持无障碍的网站上?自己从头写一整套缩放逻辑来模拟浏览器原生的功能,感觉实在是没必要,但就因为无障碍问题砍掉这么好用的特性又有点可惜。

我还抱着一丝希望:有没有什么针对这种情况的无障碍例外规则?或者更好的是,有没有我没发现的键盘操作方式能控制它?

给大家看看我目前的测试代码:

.resizeable {
  resize: both;
  border: 1px solid black;
  width: 15em;
  height: 15em;
  min-width: 5em;
  min-height: 5em;
  overflow: scroll;
}
<div class="resizeable">
  This is a resizeable div using only CSS. This is very handy for popup windows, for example. The lower right corner can be dragged to resize, but no keyboard controls exist that I can find so the accessibility is questionable.
</div>

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 14:18:03