使用 CSS 隐藏 HTML 表单图例

Question

如何使用 CSS 以可访问的方式从可视浏览器中隐藏 HTML 表单图例？

legend { display: none; }

不是一个选项，因为据我了解，这将从屏幕阅读器中“隐藏”图例。我所做的其他尝试并未从布局中删除图例 - 即它继续占用空间。

Answer 1

添加为答案而不是评论，这样我可以获得更多积分。:-)

如果您真的想要图例，您是否尝试过在图例中放置一个跨度并对其进行定位/操作？

我知道这在 IE7 和 Firefox 中有效...

Answer 2

您无法在 Firefox 中执行此操作，因为这是浏览器中的一个错误。

您可以在这里阅读更多内容

Answer 3

HTML：

<legend><span>Your description</span></legend>

CSS：

legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Answer 4

无论它的价值如何——我确信我会因此而受到批评——图例标签是我故意将它们排除在外的少数几个地方之一。我用适当级别的标题替换它们，该标题向用户提供相同的信息，但没有浏览器错误。

（如果有人能看到一些的话，我很高兴听到现实世界的缺点）

编辑：哦，你应该问自己，为什么辅助技术用户想要听到图例，而使用浏览器的用户却不想听到。如果答案只是为了满足 HTML 规范，请使用 display:none 并完成它 - 不要仅仅为了形式而提供无用的信息来阻碍一组用户的体验。

Answer 5

已在 IE7、IE8、IE9、FF、Opera、Safari 和 Chrome 中解决并测试。图例将从屏幕阅读器中读取，用户不会看到它：

<legend><span class="accessibility">Your description</span></legend>

然后，在 CSS 中：


    图例 span.accessibility {
        位置：绝对；
        左：-9999px；
        宽度：100px；
        高度：自动；
        溢出：隐藏；
    }

Answer 6

是的，它有一些特别之处。与许多表单元素一样，它是一个被替换的元素。浏览器有非常特定的默认格式。此外，不能强迫它像使用 display:block 或 display:inline 的常规元素一样运行，从而导致尝试使用 CSS 覆盖......无法正常工作。

有一些记录良好的技术可以帮助您实现一些图例效果，尽管为了实现跨浏览器兼容性，需要采取变通办法。

许多版本的 Firefox 特意忽略了 display:none 和绝对定位。

Answer 7

你可以尝试：

legend
{
    position: absolute;
    top: -1000px;
}

Answer 8

我知道这已经晚了 2 年，但使用

visibility: hidden

似乎可以在 FF 中“以可访问的方式”工作。

Answer 9

您可以结合使用可见性和位置规则，请参见下文：

legend {
    visibility: hidden;
    position: absolute;
}

Answer 10

这就是使用 CSS 的方法

fieldset>legend, table>caption {
     display: none;
}