Question

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

legend { display: none; }

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

Answer 1

添加为答案而非评论，以便我可以获得更多积分。： - ）

如果你真的想要传说，你是否尝试过在图例中放置一个跨度并定位/操纵它？

据我所知，这适用于IE7和Firefox ......

Answer 2

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

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

Browser Bugs

Answer 3

更新了-9999px hack（http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/）：

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

是的，它有一些特别之处。它像许多表单元素一样被替换为元素。浏览器具有非常特定的默认格式。此外，它不能像使用display：block或display：inline一样强制表现为常规元素，导致尝试用CSS覆盖......不能正常工作。

有一些记录良好的技术可以帮助您使用图例来完成某些效果，但是跨浏览器兼容性似乎需要解决方法。

http://www.tyssendesign.com.au/articles/css/legends-of-style/ ... 另见一年左右发布的修订版本。

许多版本的Firefox都特别忽略display：none和绝对定位。

Answer 6

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

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

然后，在CSS中：


    legend span.accessibility {
        position:absolute;
        left:-9999px;
        width:100px;
        height:auto;
        overflow:hidden;
    }

Answer 7

你可以尝试：

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

Answer 8

我知道这已经太晚了2年，但使用visibility: hidden似乎在 FF 中以“无法访问的方式”工作。

使用CSS隐藏HTML表单图例

8 个答案: