在本周的综述中,两个表情符号的字符串长度并不总是相等,在制作圆角按钮之前需要考虑这一点,并且我们可能有一种新的方法可以在设备之间共享 Web 应用程序,即使它们处于离线状态。
Emoji 字符的 JavaScript 字符串长度
如果单个渲染的表情符号包含表示肤色修饰符、性别规范和多色渲染的附加Unicode 标量值 ,则其 JavaScript 字符串长度最多可以为7
。
(来自 Henri Sivonen )
圆角按钮的无障碍性问题
请注意,将 CSS border-radius
应用于
元素会减小按钮的交互区域(“那些丢失的角像素不再可点击”)。
您可以在 CSS 中避免此无障碍性问题,例如,通过使用border-image
模拟圆角,或通过使用绝对定位的透明::before
伪元素覆盖按钮。
(来自 Tyler Sticka )
使用捆绑式交换在离线状态下共享网页
Chrome 计划添加对导航到捆绑式交换(Web 包装的一部分)的支持。捆绑式交换 是HTTP 请求/响应对的集合,可用于捆绑网页及其所有资源。
浏览器应该能够解析并验证捆绑包的签名,然后导航到捆绑包表示的网站,而无需实际连接到该站点,因为所有必要的子资源都可以由捆绑包提供服务。
来自 Google 的 Kinuko Yasuda 发布了一段视频,演示了捆绑式交换如何实现离线状态下与其他设备共享网页(例如 Web 游戏)。
(来自 Kinuko Yasuda )
在我的每周星期日版 中阅读更多新闻,该版本每周一早上通过电子邮件发送给您。访问 webplatform.news 获取更多信息。
圆角按钮真的是一个无障碍性问题吗?
我明白您会丢失一些可点击的像素,但我们讨论的并不是很多区域。我无法想象有人会使用如此精细的触摸来使用触摸屏,以至于在这里有关系。
如果按钮是正方形(例如,图标按钮),那么通过
border-radius
将其变成圆形会丢失超过 20%的交互区域。这不可忽视。如果用户手部震颤、视力下降或手指较大,他们可能会点击那些没有交互性的边缘。还有一个指南是触摸目标至少应为 44 x 44 像素。一旦按钮的角被圆角化,满足此规则的按钮可能不再满足。以 Twitter 的浮动操作按钮为例。它在移动设备上为 55 x 55 像素,但由于它是圆形,44 x 44 正方形会突出。幸运的是,Twitter 确保了整个正方形都是可交互的,而不仅仅是可见的按钮,这也是我的建议。
我同意,我认为圆角不是无障碍性问题。只要元素的宽度和高度足够大(WCAG 2.1 将 44 x 44 CSS 像素确定为目标大小),角就无关紧要。
我认为创建不可见的可点击区域本身就是一个问题;如果我点击可见按钮区域之外,我希望什么也不会发生。我认为这与键盘或触摸交互无关,但可能会与光标有关。使用悬停来显示“真实”按钮区域可以解决此问题。
可以这样想:如果在触摸屏设备上,有人点击按钮角落中被圆角边框切掉的部分,他们是否打算点击按钮?我认为是的。他们是否有可能打算点击其他一些交互式元素?我认为不太可能。它离按钮太近了。
因此,通过将圆角按钮的交互区域设为正确的矩形,我们所做的只是确保永远不会因为用户点击得太靠近其角落而导致按钮未被激活。
我一直讨厌当您实际上不在按钮区域内时就可以与按钮交互。我认为将这种过时的按钮样式带回来不是一个好主意。当我想点击按钮时,我只会点击按钮,而不是其他东西。如果担心无障碍性,只需使按钮更大即可 - 很简单 :)
这与每周综述无关,但只想说这个网站拥有我见过的任何博客中最漂亮的博客设计。即使在深色背景下,它也是如此独特和简洁。如果这是一个付费主题,我会毫不犹豫地购买!(翘首以待)
假设一个按钮是 44px 正方形,但具有 border-radius: 50% 使其成为 44px 直径的圆形。正方形的角将距中心 31px,圆形的边缘距中心 22px,相差 9px。指尖的宽度为 8-10 毫米,并使用许多 Apple 移动显示器(2x Retina)作为代表,因此从中心到指尖边缘为 6.4 CSS px/mm,所以从中心到指尖边缘为 25.6-32px。如果按钮正方形的角位于指尖中心的下方,则指尖仍会轻松触及圆形并激活按钮。如果角位于中心和指尖边缘之间的一半,它仍会触及圆形。圆形按钮必须跨度约 130px,才能使以角为中心的指尖不激活它;这是一个很难错过的目标。
您建议如果有人点击不可见的目标角,那是因为他们打算激活它所属的视觉元素。但这可能并非如此,尤其是在按钮位于某个交互式元素的顶部时。想象一下:他们正在购物买裤子,裤子的图片上有四个圆形颜色色样按钮(黑色、海军蓝、棕色、卡其色)在图片的顶部;他们点击一个色样以更改颜色,然后认为他们点击了图片以放大它,但由于他们没有移动手指太多,指尖的边缘点击了不可见的角并激活了颜色更改。
一般来说,交互式目标形状应与其视觉形状相同。我遇到过它们不匹配的问题:有一个使用山形符号的面包屑导航,我点击了视觉上正确的链接,但由于光标位于左侧链接尖端下方,因此激活了左侧链接。
我在 iPhone 上的 Safari 中测试过。如果按钮是 44px 正方形,仍然有可能点击圆形外部的正方形角。在移动设备上尝试我的演示。您可以点击黑色剪切部分(它将在下方显示“正方形”)。
这就是问题所在。有人错过了圆角按钮,而是点击了剪切部分。正如我之前所说,我认为可以安全地假设,如果用户点击了剪切部分,他们是想点击圆角按钮。
关于您按钮位于不同交互式元素顶部的场景,我认为这是另一个(甚至更大的)无障碍性问题。最好在交互式元素之间留出足够的空间,而不是将它们堆叠在一起。
相关:手抖和巨型按钮问题