作者:Duanzd09 | 来源:互联网 | 2023-09-24 14:21
根据我在this SO post中所读到的内容,fieldset标签的主要目的不是在逻辑上对其他标签和输入进行语义分组并对其进行样式化。
如果我不想样式选项,但想要语义,我应该隐藏它吗?还是根本不使用它?
如果您的设计在视觉上仍然正确(即正确地指示了焦点,布局有意义,逻辑上的制表符顺序等),则可以使用fieldset
并在视觉上隐藏它(不能在视觉上隐藏fieldset
本身的类,因为那样会隐藏所有内容。
为了正确使用它,您确实需要添加legend
来说明fieldset
的含义。
fieldset
和legend
可以提高屏幕阅读器用户的可用性(并帮助Google了解您的表单,从而为SEO带来一点好处),因此,如果合适的话,您应该在表单中包括它语义上。
要删除样式,请删除fieldset
上的边框,然后向图例中添加visually-hidden
css类。
我整理了一个简短的代码段,向您展示了如何在没有任何视觉样式的情况下进行设置。
该组将显示为:“按筛选条件过滤工作”和屏幕阅读器选择的选项。