Page MenuHomePhabricator

Reconsider OOUI's intentional avoidance of `<fieldset>` and `<legend>` elements due to browser inconsistencies
Closed, ResolvedPublic

Description

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 accessibility issues, especially in the case of radio button or checkbox groups as 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:

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

Before withoutAfter with fieldset and legend
T131823-fieldset+legend-OOjs-UI-Demos-Chrome52_without-fieldset-2016-08-12.png (643×817 px, 83 KB)
- Chrome 52/Mac OS X
T131823-fieldset+legend-OOjs-UI-Demos-Chrome52-2016-08-12.png (639×814 px, 83 KB)
+ Chrome 52/Mac OS X
T131823-fieldset+legend-OOjs-UI-Demos-HorizontalLayout-2016-08-12.png (1×975 px, 76 KB)
+ IE 11/Win 7
T131823-fieldset+legend-OOjs-UI-Demos-Op12.17-2016-08-12.png (1×950 px, 72 KB)
+ Op 12.17/Win 7

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.

Event Timeline

Volker_E changed the task status from Open to Stalled.Apr 5 2016, 4:38 AM
Volker_E updated the task description. (Show Details)
Volker_E removed subscribers: matmarex, Esanders.

Is that Firefox behavior current? Should file an upstream bug report if so.

First of, dear subscribers, I'm sorry about pushing such a blob into your inboxes. It was a nightly addition and meant to be for myself for now while collecting more data. Forgot about the auto-subscribing feature of Phabricator.

@brion There's a long, notorious history to the fieldset and legend rendering inconsistencies across browsers. You are probably as aware of it as I am. An example would be https://bugzilla.mozilla.org/show_bug.cgi?id=269908 which was closed four years later, but the follow-up is still around and let people scratch their heads every day. But this task is not about a browser inconsistency. It's about the following trade-off:

It's meant to be a task challenging OOjs UI's currently avoiding those two (semantic) elements for easier CSS styling.
While it is not easy to style fieldset and legend cross-browser, I'm pretty sure, that we are running into bigger issues with screen readers without those elements. Personally, I'm leaning towards styling might be reasonably accomplishable.
Only, I still lack data.

Volker_E changed the task status from Stalled to Open.Apr 5 2016, 9:53 PM
Volker_E added a project: Accessibility.
Volker_E updated the task description. (Show Details)
Volker_E added subscribers: Jdforrester-WMF, Catrope.
Jdforrester-WMF renamed this task from Challenge usage of `fieldset` and `legend` to Reconsider OOUI's intentional avoidance of `<fieldset>` and `<legend>` elements due to browser inconsistencies .Apr 20 2016, 9:55 PM
Jdforrester-WMF triaged this task as Low priority.

Best compromise might be to visually silently add fieldset and legend and style it with extra markup. Leaving them out completely closes out built-in support by assistive technology.

Please just use them, restyle them, and be done with it. Browser inconsistencies are nothing compared to the horrible glaring inconsistencies with the rest of mediawiki, and this way it's much easier to backport styles and the like.

That being said, I haven't really noticed any meaningful difference between firefox and chrome with the skins I have restyling fieldsets and legends (all of them), but I'm also using normalise.css, which might have something to do with it?

Thanks Isarra for your inputs! There are various articles that cover several cross-browser inconsistencies in fieldset and legend rendering. From rather “old” ones, dating back to 2007 to recent ones from last year, featuring new inconsistencies in responsive layouts. ;) And yes, normalize does a great job.

Still, IMO all doable and the positive accessibility impact outweighs the work needed clearly.

Change 304409 had a related patch set uploaded (by VolkerE):
FieldsetLayout: Make use of fieldset and legend tag

https://gerrit.wikimedia.org/r/304409

Volker_E raised the priority of this task from Low to High.Aug 12 2016, 12:38 AM
Volker_E moved this task from Backlog to Review on the UI-Standardization-Kanban board.
Volker_E moved this task from Backlog to Reviewing on the OOUI board.

I tested with some old browsers, for which we still offer basic support in OOjs UI PHP, to verify that nothing too ridiculous happens:

IE 6
pasted_file (768×1 px, 89 KB)
IE 8
pasted_file (768×1 px, 91 KB)
Opera 11
pasted_file (768×1 px, 72 KB)
Firefox 3.6
pasted_file (1×1 px, 77 KB)
Volker_E lowered the priority of this task from High to Medium.
Volker_E removed a project: Patch-For-Review.
Volker_E moved this task from Reviewing to OOjs-UI-0.17.9 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.17.9); removed OOUI.

Change 304409 merged by jenkins-bot:
FieldsetLayout: Make use of <fieldset> and <legend> tags

https://gerrit.wikimedia.org/r/304409