Don’t use fieldsets to create tabular interface

[thomasmassmann]

Forms are grouped and displayed as tabs using fieldsets and the pat-autotoc pattern: https://github.com/plone/plone.app.z3cform/blob/master/plone/app/z3cform/templates/macros.pt#L56

With this approach it is not possible to use fieldsets to group checkbox and radio fields (which makes them more accessible).

Nested fieldsets are possible, but screenreaders have problems distinguishing between the outer inner fieldsets, as Lèonie Watson describes in her article about fieldsets and legends: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/. There is also an automated test suite available from Russ Weakley: https://russmaxdesign.github.io/accessible-forms/support-nested-fieldsets.html

Sidenote: the from pat-autotoc generated structure is not accessible. A better and lighter implementation is described in the chapter “Tabbed interfaces” in Haydon Pickering’s book “Inclusive Components” An example is available: https://heydon.github.io/inclusive-components-demos/tab-interface/true-tabbed-interface.html

Instead of using fieldset and legend to create the tabbed representation, a div or section should be used with a corresponding heading:

<form data-pat-autotoc="levels: .fieldgroup__title; section: div.fieldgroup; className: autotabs">
  <!-- ... -->
  <div class="fieldgroup" id="fieldset-default" tal:omit-tag="not:show_default_label">
    <h2 class="fieldgroup__title" tal:condition="show_default_label"
        tal:attributes="id string:fieldsetlegend-default"
        tal:content="default_fieldset_label">Form name</h2>
    <!-- ... -->
  </div>
  <!-- ... -->
</form>