Skip to end of metadata
Go to start of metadata

Purpose

Multiple interactive elements can be grouped with an input field or other user control, with the relationships made clear to the sighted user by the visual arrangement.   But if the relationships are not programmatically encoded, these relationships can't be understood and conveyed to the user by assistive technologies such as screen-readers.  

It's important that the semantic relationship among the controls is programmatically encoded and there are defined standards for doing so.

Detailed Description

Fieldset and legend tags should be used to associate multiple controls, for example to associate those that apply to the same user input field.

For example, the following controls can be grouped where it makes sense to do so in KRAD 2.0:

User Controls:

  • an input field
  • an inquiry icon
  • a lookup icon
  • a help icon
  • a combo box
  • radio buttons
  • checkboxes
  • an expand/collapse control
  • a sort control 

Associated information:

  • a field label (for example "Travel Account Number”)
  • instructional text
  • constraint text
  • a tooltip (future)
  • an input validation message
  • an error message

See Mocks and Diagrams section below for additional details.

Usage Scenarios

A sighted user can infer from visual layout, for example, that a lookup or inquiry icon is associated with an input field located just to the left of the icon, and that they are both associated with a visual label (such as "Travel Account Number") that is placed in a cell to the left of the field and these other associated elements. 

The usage scenario is that a non-sighted user can also infer these associations based upon the standard code structures, interpreted and conveyed by screen readers or other assistive technologies.

Mocks and Diagrams

For example, to programmatically encode the fact that the input field below and its inquiry icon relate to each other and that both relate to the travel account number, you should encapsulate them into a field set with the same legend.  (To prevent visual clutter, the fieldset border/spacing and the legend element can be hidden visually.)

See code snippet example below (includes the CSS and the HTML):

Performance

If applicable, list expectations for performance (optimal and worst cases would be fine, give time in seconds):

References

See http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H82.html

Thanks also go to Hans Hillen from The Paciello Group for consultations on this code structure.

Requirements Listing

Primary:
  1. Input fields and their associated controls, such as inquiry and lookup icons, help or tooltip elements, datepicker and combo box controls, should be encapsulated together in a single fieldset with a single legend (legend text should be the field's label or title or other associated semantic information where those are not sufficient or don't exist).
  2. Radio buttons and their associated controls, such as inquiry and lookup icons, help or tooltip elements,  should be encapsulated together in a single fieldset with a single legend (legend text should be the radio button group's label or title or other associated semantic information where those are not sufficient or don't exist).
  3. Checkboxes and their associated controls, such as inquiry and lookup icons, help or tooltip elements,  should be encapsulated together in a single fieldset with a single legend (legend text should be the checkbox group's label or title or other associated semantic information where those are not sufficient or don't exist).

For more details, see code snippet example in the Mocks and Diagrams section above.

Secondary:
  1. item
  2. item

Dependencies

List any functional or technical work that must be completed before work on this item can begin:

  1. item

Issues

List any issues that need to be resolved before work on this item can begin:

Functional:
  1. item
  2. item
Technical:
  1. item
  2. item

QA or Regression Testing Plan

List steps needed to test the basic functionality of this update, enhancement, bug fix

  1. test/steps
  2. test/steps

Checkoff

Functional Analysis Complete? No (completed by SME)

Needs Review by KAI? No (completed by SME)

Technical Analysis Complete? No (completed by DM)

Needs Review by KTI? No (completed by DM)

Estimate: 30 hours (completed by DM)

Technical Design: Link Here (completed by DM)

Jira: Link Here (completed by SME)

Final Documentation: Link Here (completed by DM)

  • No labels

2 Comments

  1. The html snippet doesn't seem right to me, hidden would hide the inner elements.

  2. Thx and check it again when you have a chance, pls (revised the css, which did have an error).

    More info: when a fieldset has the class "hidden", two things happen:

    1. The fieldset's border, padding and margin are removed.
    2. The fieldset's legend element (in the CSS the legend is a child selector after the fieldset.hidden selector) is hidden off screen, just like elements with the "offScreen" class are.