Allow specifying a CSS class for fieldset legend

[csutter]

A common pattern for simple question pages with a single fieldset is to hide the legend using CSS so as to avoid duplication (the question will already have been asked in an <hX> tag) but still allow screenreaders to access it.

This change allows the user to specify an HTML class attribute on the legend to do this (or indeed something else).

[robmckinnon]

@cfq Could give this PR on the govuk_elements_form_builder an accessibility review?

[cfq]

That's correct, also make sure you're following Léonie's notes on fieldsets and legends.

For a single question page, it's still an open question and we're trying to find the best way possible. We will be doing our research in the future but for now, I'd be careful to make sure these were in place:

• Title, the only H1 and the the only fieldset's legend should either be the same text or make sure they complement each other. A little bit of repetition doesn't seem to hurt screenreader users but helps a lot with giving a context to grouped form elements like radio buttons
• The legend should be visually hidden using WebAim's technique

You can extend this technique for multiple questions by having a generic Title/H1 for the page and specific questions in visible fieldset legends.

Hope this helps

[csutter]

@cfq Just what I thought, thanks!

We would be having the specific questions visible as legends for multi-part questions, it's just for the situations where the one single question asked is identical to the only <h1>.

@robmckinnon @aliuk2012 Any more comments or does it look okay otherwise?

[csutter]

Actually, scratch this, this would also hide the error on the field as that gets added to the legend.

I will rethink this PR and open another one later, perhaps with a more semantic visually_hide_legend: true/false option.

[cfq]

@csutter Why does the error get added to the legend?

[csutter]

@cfq Wish I knew.

But this behaviour matches that of GOV.UK Elements: http://govuk-elements.herokuapp.com/errors/#summarise-errors

[cfq]

@csutter Ah yes, of course. I reckon it's important to understand why it's that way rather than just copying and pasting it as a generic pattern.

As you can see again in Léonie's blog post, she mentions how the screenreaders use these tags to give context to the radio buttons.

Now when you use the tab key to navigate through the form, your screen reader will announce the question before it announces the first field in the group and its label. So in our example you hear something like "Do you have a passport? Yes, radio button".

Note: when used with Internet Explorer, the Jaws screen reader will announce the legend for every field in the fieldset (not just the first field). This is not the expected behaviour.

Therefore it's important to include the error in the legend. So screenreader users will have the context in mind when going through the errors in the page.

You might have to create multiple version for multiple use cases if you're trying to generalise every edge case that can be expressed in a form.