有什么方法可以避免在 WAVE 辅助功能工具上出现此警告(文本太小),但保持字体大小不变?

Is that any way I can avoid this warning (text too small) on WAVE accessibility tool, but keep the font size unchanged?

我的HTML:

<p id="text">test</p>

我的CSS:

#test {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.7em;
  text-align: center;
}

如何避免在 WAVE 辅助功能工具上出现此警告?这是保持文本小的要求之一。

简答

没有

中等答案

不,你也不应该尝试避免警告,你应该修复它们。

长答案

没有

之所以发出此警告,是因为视力不佳的人难以阅读小字体。 (即使是那些拥有完美视力的人也不想眯着眼睛看东西——这是一种糟糕的用户体验!)

您不应该尝试修复警告,您应该解决问题。

如果要求保持文本较小,则该要求需要更改。

如果布局不够大以适应更大尺寸的文本(最小尺寸为 1 雷姆),则调整设计以包含大文本,或者更改简介并解释为什么文本需要更大(如果需要)是规范要求。

如果这是一个布局问题,您还必须记住,通过使用 em 单位,您已经必须容纳更大的文本,因为用户可能将他们的浏览器字体大小设置为非常大并且 em 单位将与之相关。

Wave 报告小于 10 像素的文本错误。对于标准浏览器,如果不嵌套标签,0.7em 相当于 11px。您可以将字体基于 rem 单位而不是 em 或使用 px 单位(这对可访问性完全有效,因为它代表 CSS 像素而不是物理像素)。话虽如此,Graham Ritchie 的回答为您提供了处理这种情况的好方法:不要试图通过隐藏警告来解决问题。