字段集图例中是否允许使用h3标签？
[英]Is a h3-tag allowed within legend of fieldset?
问题描述
I have developed an application with forms. 
我已经开发了带有表格的应用程序。 These forms are structured with fieldsets so you can see which input fields belong to a section. 这些表单由字段集构成，因此您可以查看哪些输入字段属于某个部分。 Each fieldset has a legend. 每个字段集都有一个图例。 The code looks like: 代码如下：
<fieldset>
<legend>Title</legend>
<label>Title: <input id="title" type="text"/></label>
<button>Create Object</button>
</fieldset>
Now we did a screenreader test, because we have blind users. 现在，我们进行了屏幕阅读器测试，因为我们有盲人用户。 We mentioned, that the screenreader (JAWS) reads the Title in legend just as normal text. 我们提到，屏幕阅读器（JAWS）读取legend的标题与普通文本一样。 So it reads:"Title. Title. Input for title." 因此显示为：“标题。标题。输入标题。” However we expect sth like: "Caption Title. Title. Input for title." 但是，我们希望这样：“标题标题。标题。输入标题。”
The user said it would be better if the legend would be a caption so she can jump to section with a JAWL-command. 用户说如果将图例作为标题会更好，因此她可以使用JAWL命令跳转到该部分。
Now my question is: Is it allowed (HTML specification) to wrap the filedset-legend around a eg h3 tag? 现在我的问题是：是否允许（HTML规范）将filedset-legend包裹在例如h3标签周围？ - Better question: Does it matter for an internal application, if I put a h3 -tag inside the legend -tag even it is not w3c-conform?: -更好的问题：如果我将h3 -tag放在legend -tag中，即使它不是w3c-conform，它对内部应用程序也有影响吗？：
<fieldset>
<legend><h3>Title</h3></legend>
<label>Title: <input id="title" type="text"/></label>
<button>Create Object</button>
</fieldset>
If it is not allowed what would be your solution for this issue? 如果不允许，您将如何解决此问题？ Programming an customized fieldset? 编写自定义字段集？
The goal is that the screenreader makes a difference between legend-text and normal text when reading the page. 目的是在阅读页面时，屏幕阅读器使图例文本和普通文本有所不同。 How can I achieve this? 我该如何实现？
2 个解决方案
解决方案1
2 2016-11-23 14:37:10
No, your code produces invalid HTML: 不，您的代码产生无效的HTML：
Error: Element
h3not allowed as child of elementlegendin this context.h3不允许作为元素legend子元素。
You can find this out yourself by running the following code through the W3C validator : 您可以通过W3C验证器运行以下代码来自己找到答案 ：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<fieldset>
<legend><h3>Title</h3></legend>
<label>Title: <input id="title" type="text"/></label>
<button>Create Object</button>
</fieldset>
</body>
</html>
Solution 解
I recommend just doing this : 我建议这样做：
legend { font-weight: bold; font-size: 1.17em; } .screen-reader-only { position: absolute; left: -999em; }
<fieldset> <legend><span class="screen-reader-only">Caption </span>Title</legend> <label>Title: <input id="title" type="text"/></label> <button>Create Object</button> </fieldset>
See also this Fiddle . 另请参见此Fiddle 。
That way, Caption is always read by screen readers but never displayed visually. 这样， Caption始终由屏幕阅读器读取，但从不可视显示。
解决方案2
0 已采纳 2016-11-23 14:59:56
Personally i would rather provide for my users than stick to the rules when it comes to this. 就个人而言，我宁愿为我的用户提供服务，也不愿遵守规则。
If you do indeed use a h3 tag in your legends, so be it - your users will be most grateful. 如果您确实在图例中使用了h3标签，那就顺其自然-您的用户将不胜感激。 The only person that wins by sticking to valid html here is you, and that's of no benefit to the user. 坚持使用有效的html赢得胜利的唯一人就是您，这对用户没有任何好处。 -- However, im not sure you actually need a fieldset/legend here. -但是，我不确定您是否确实需要此处的字段集/传说。
As OP is using this for an internal app / intranet, i beleive it is perfectly ok to disregard SEO and search engine / spiders.. 由于OP将此用于内部应用程序/内部网，因此我相信完全可以忽略SEO和搜索引擎/蜘蛛程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.