OOjs UI currently (as of v0.16.4) doesn't make use of `fieldset` and `legend` HTML elements due to cross-browser style inconsistencies.
Not using those might lead to [[ http://webaim.org/techniques/forms/ | accessibility issues ]], especially in the case of radio button or checkbox groups as [[ http://www.powermapper.com/tests/screen-readers/labelling/fieldset-with-yes-no-radio-buttons/ | screen readers overwhelmingly ]] use and repeatedly read `legend` preceding every single inputs of such group.
Code example from the test site to give an impression why this is useful:
```lang=html
<fieldset>
<legend>I agree to terms and conditions</legend>
<label><input name=radio_with_legend1 type=radio checked=checked>Yes</label>
<label><input name=radio_with_legend1 type=radio>No</label>
</fieldset>
<fieldset>
<legend>Sign me up to the newsletter</legend>
<label><input name=radio_with_legend2 type=radio checked=checked>Yes</label>
<label><input name=radio_with_legend2 type=radio>No</label>
</fieldset>
```
To cite from [[ https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/ | a 2007(!) article from Paciello Group ]] on support by screen readers:
> The `fieldset` and `legend` elements are well supported by many user agents. While it is helpful to have knowledge of some of the quirks and failings of particular user agents, the poor support in software such as Window Eyes **must not stop** developers using these elements or accessibility practitioners recommending their use. Their use can make it easier for a wide range of disabled users to fill out forms.
---
====Original conversation====
https://gerrit.wikimedia.org/r/#/c/273761/
@MatmaRex @Esanders That OOjs UI doesn't output `<legend>` elements like in this case is by design, correct? Wondering about accessibility implications in other cases. Here it might not have a negative impact overall.
Esanders Feb 29 16:10
Patch Set 2:
Does an legend tag have any tangible accessibility benefits? They are notoriously buggy with regards to CSS so OOUI uses plain DIVs for this and others, instead of blindly jumping on a "semantic HTML" bandwagon.
VolkerE Feb 29 16:29
Patch Set 2:
@Esanders So this was discussed before? Could you point me to the outcomes of the discussion?
`<legend>` contents are generally used in screen readers to be repeated upfront each control in the corresponding `fieldset` in order to give context about the selectable controls. So yes, there might be a good sense of 'jumping on the "semantic HTML" bandwagon'. Blindly jumping should be avoided in any case.
Catrope Feb 29 16:32
Patch Set 2:
I don't know if this was ever discussed in Phabricator, but we did discover that <legend> elements have inconsistent padding/margin/border behavior between Firefox and Chrome, in the worst possible way. In Chrome, setting the padding/margin/border values on a <legend> *overrides* the browser's default values, whereas in Firefox it *adds to* the browser's default values. This means there is no way to make a <legend> tag look the same in both browsers.