Conjunctions (and/or) - documentation

Purpose

Use the conjunction (and/or) design to clearly demonstrate that there are options or that there are content blocks that are complementary or associated.

This is a mobile first design, and requires extra code for it to go from stacked to side-by-side in larger resolutions (similar to grids).

Usage

Working examples

• English example
• French example

Evaluation and report

• English accessibility assessment

Accessibility guidance

Most screen readers can read CSS text these days, but it's still good practice to use text to convey that the options are either mutually exclusive (or), or part of an entire concept (and).

Some recommendations are:

• Adding in a lead in statement to explain there are options that are mutually exclusive (or), or mutually connected (and)
• Creating the and/or using the list (<ul>) element to better indicate that the items are connected
• Use headers that indicate the items are mutually exclusive or part of an entire concept
  • Additionally append an invisible phrase such as "option X of X" to all headers
• Adding the word "or", or "and" as part of the statement to connect each part of content
• Use a <section> element instead of a <div> element when working with headers to semantically contain the design's content

How to implement

List element

<p>Lead in statement</p>
    <ul class="cnjnctn-type-or">
        <li class="cnjnctn-col">
            ...
        </li>
        <li class="cnjnctn-col">
            ...
        </li>
    </ul>

<p>Lead in statement</p>
   <ul class="cnjnctn-type-and">
        <li class="cnjnctn-col">
            ...
        </li>
        <li class="cnjnctn-col">
            ...
        </li>
    </ul>

Block element (e.g. <div>)

<div class="cnjnctn-type-or">
        <div class="cnjnctn-col">
            ...
        </div>
        <div class="cnjnctn-col">
            ...
        </div>
    </div>

<div class="cnjnctn-type-and">
        <div class="cnjnctn-col">
            ...
        </div>
        <div class="cnjnctn-col">
            ...
        </div>
    </div>

Configuration options

Side-by-side design at certain resolution points

Add these classes to the element with the cnjnctn-type-or or cnjnctn-type-and class.

• Always side-by-side: add class cnjnctn-xs
• Side-by-side ≥ 768px (tablet) and above: add class cnjnctn-sm
• Side-by-side ≥ 992px (small desktop screen) and above: add class cnjnctn-md
• Side-by-side ≥ above 1200px (large desktop screen) and above: add class cnjnctn-lg

Only use the "always side-by-side" class (cnjnctn-xs) sparingly and when there is very little text. The design may not scale down well to smaller devices.

Custom column widths

A column can be set to a percentage of itself to allow larger content in another column to wrap less. The default is 100% (cnjnctn-col).

Only apply to a column that have less content than others, as the class reduces the width of a column, and the column that does not have the custom width class will expand to compensate.

This class can be applied to more than one column (e.g. if 1 column out of 3 has more content than the other 2).

The width cannot be adjusted based on different resolutions, and it best to stack the columns when content becomes difficult to read on smaller devices.

These class names are mutually exclusive, so you only use one of them when defining your column width.

No left border on stacked

This can be used when a design (e.g. zebra striping, panel, well, etc.) already has a defined border. The line that splits the column will disappear when the items are stacked.

To remove the border when stacked, add the class brdr-0 to the element with the cnjnctn-type-or or cnjnctn-type-and class.

The border should not be removed if there is sibling (surrounding) information contained within the existing bordered design that does not relate to the conjunction (and/or) design. It may be unclear when the conjunction point has started or ended.

Source code

Source code for the conjunction plugin on GitHub