-1

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. 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.

Now my question is: Is it allowed (HTML specification) to wrap the filedset-legend around a e.g. h3 tag? - 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?:

<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?

zuluk
  • 1,557
  • 8
  • 29
  • 49
  • 2
    Possible duplicate of [Is header in legend valid?

    Caption

    ](http://stackoverflow.com/questions/8005887/is-header-in-legend-valid-legendh1caption-h1-legend)     – Pete Nov 23 '16 at 14:36
  • Ok, first part of my question is answered. But how to solve this issue for best user experience with JAWS? – zuluk Nov 23 '16 at 14:38
  • Do you need a fieldset if there is only one input there? If you do then perhaps you should be putting the header title above the fieldset describing that section and then use legend to describe the grouping of inputs inside it – Pete Nov 23 '16 at 14:55
  • @Pete: The code is just an example. I have several fieldsets and each contains several form-elements. But it is a good advice! – zuluk Nov 23 '16 at 15:00

2 Answers2

2

No, your code produces invalid HTML:

Error: Element h3 not allowed as child of element legend in this context.

You can find this out yourself by running the following code through the W3C validator :

<!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.

That way, Caption is always read by screen readers but never displayed visually.

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • I am not interested in styling the legend. I want the screenreader to make a difference between legend-text and normal text when reading the page. – zuluk Nov 23 '16 at 14:41
  • 1
    In that case, you might want to take a look at https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/ or https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/ – John Slegers Nov 23 '16 at 14:51
  • 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. The only person that wins by sticking to valid html here is you, and that's of no benefit to the user. -- However, im not sure you actually need a fieldset/legend here. – Stuart Nov 23 '16 at 14:51
  • @Stuart bad move, you will be heavily punished by search engines for having invalid html – Pete Nov 23 '16 at 14:56
  • @Stuart: Please post your comment as an answer so I will accept it as the best one. More or less I knew that it is not allowed to put h3 into legend, but I wanted to know if it is allowed to break the rules to support screenreaders and make so a better experience for blind users. – zuluk Nov 23 '16 at 14:56
  • @Pete: It is an internal application so search engines cannot punish the page ;-) – zuluk Nov 23 '16 at 14:57
  • I agree @Pete - but it depends where this is to be deployed - i have built intranets that are only used by my users (blind, deaf, all faculties in tact, whatever) and SEO matters not. – Stuart Nov 23 '16 at 14:57
  • @zuluk - exactly my use case(s), hence the response being unforgiving to SEO. – Stuart Nov 23 '16 at 14:58
  • @zuluk No problems if it is internal, why are you even bothered about validation then? as long as it renders and does what you want then do whatever you like! – Pete Nov 23 '16 at 14:58
  • 1
    You have a point @Pete! I think OP is just conscientious of this - no bad thing eh. Every one is a winner it seems. – Stuart Nov 23 '16 at 15:00
  • @zuluk : I updated my answer. Does this solution work for you? – John Slegers Nov 23 '16 at 15:03
  • @JohnSlegers: Yes, I also do this trick for more informative button text. `` combined with your css-code. – zuluk Nov 23 '16 at 15:05
  • 2
    The legend element allows for phrasing content and heading tags 1-6, so `

    Hello

    ` is perfectly valid HTML.     – James Ives Sep 17 '20 at 16:22
0

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. The only person that wins by sticking to valid html here is you, and that's of no benefit to the user. -- 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..

Stuart
  • 6,630
  • 2
  • 24
  • 40