“由于颜色对比度不足，用户可能难以阅读文本内容”错误

发布于 2025-01-09 19:27:11 字数 260 浏览 1 评论 0原文

Chrome通知对比度问题：

但问题出在这个元素上：

<h3>&nbsp;</h3>

这个元素似乎是可以避免的，但它的高度是必需的。

原文

Chrome notify a contrast problem:

But the problem was on this element:

<h3> </h3>

The element seems avoidable but it's needed for it's height.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬心 2025-01-16 19:27:11

这里的答案是利用 CSS 来增加高度，可以使用边距或填充，并完全删除空标题。

空标题实际上会导致几个问题：

对于使用辅助技术的人来说，它们仍然会被宣布为“标题级别 3”，然后什么也不会说，这很令人困惑。
它会损害您的 SEO 工作。

如果您遇到主题/系统等需要空标题的问题，请在页面加载后立即使用 JavaScript 删除标题，或者更好的是，花点时间在源代码中找到有问题的行并添加一个那里有条件语句。

或者，如果您能够应用类，您甚至可以使用 CSS（OP 的情况似乎如此）。 visibility:hidden 会被屏幕阅读器忽略，但仍会占用空间。这不是最好的选择，但至少可以解决可访问性问题。

h3{
   height: 150px;
}
.empty-heading{
   visibility: hidden;
}

<p>text</p>
<h3 class="empty-heading">&nbps;</h3>
<p>more text</p>

The answer here would be to utilise CSS to add height, either with margin or padding and remove the empty heading entirely.

Empty headings actually cause a couple of issues:

They will still be announced as "heading level 3" for people using assistive technology and then nothing will be said, this is confusing.
It hurts your SEO efforts.

If you have an issue where the theme / system etc. requires a heading that is empty then use JavaScript to remove the heading as soon as the page is loaded or better yet, take the time to locate the offending line in the source and add a conditional statement there.

Or you can even use CSS if you are able to apply classes (as seems to be the case for OP). visibility: hidden is ignored by screen readers but will still take up space. Not the best option but would fix the accessibility issues at least.

h3{
   height: 150px;
}
.empty-heading{
   visibility: hidden;
}

<p>text</p>
<h3 class="empty-heading">&nbps;</h3>
<p>more text</p>

回复收藏 0 原文

神经大条 2025-01-16 19:27:11

“已解决”向元素添加 CSS 颜色属性：

<h3 class="high-contrast-color"> </h3>

在我的 CSS 中：

.high-contrast-color {
color: #XYZ; // depends on background
}

编辑 - 接收建议

正如指出 @slugolicious 和 @Sean 和 @GrahamRitchie 一个空的 H* 元素一样，它作为可访问性和 SEO 很糟糕。
我将应用一种不同的方法来消除空标题元素。

"Solved" adding a CSS color attribute to the element:

<h3 class="high-contrast-color"> </h3>

In my CSS:

.high-contrast-color {
color: #XYZ; // depends on background
}

EDIT - receiving suggestion

As point-out @slugolicious and @Sean and @GrahamRitchie an empty H* element it's bad as accessibility and SEO.
I will apply a different approach that will eliminate the empty heading elements.

回复收藏 0 原文

~没有更多了~