Conjonction (et/ou) - documentation

Objectif

Utilisez la conception par conjonction (et/ou) pour démontrer clairement qu'il existe des options ou que des blocs de contenu sont complémentaires ou associés. Les phrases « et » et « ou » sont des textes générés par CSS.

Ceci est une conception mobile-first et nécessite un code supplémentaire pour passer de l'empilement côte à côte dans des résolutions plus grandes (similaire aux grilles).

Usage

Exemples pratiques

• Exemple anglais
• Exemple français

Évaluation et rapport

• Évaluation de l'accessibilité en anglais

Conseils d'accessibilité

De nombreux lecteurs d'écran peuvent lire le texte CSS, mais il est toujours bon de rédiger le contenu de manière à indiquer que les options sont soit mutuellement exclusives (ou), soit font partie d'un concept global (et).

Ceci est utile non seulement pour les utilisateurs de lecteurs d'écran, mais pour toutes les personnes afin de mieux comprendre la connexion du contenu.

Quelques recommandations sont :

• Ajouter une déclaration préliminaire pour expliquer qu'il y a des options mutuellement exclusives (ou) ou mutuellement connectées (et)
• Créer le et/ou en utilisant l'élément liste (<ul>) pour mieux indiquer que les éléments sont connectés
• Utiliser des en-têtes indiquant que les éléments sont mutuellement exclusifs ou font partie d'un concept global
  • De plus, ajouter une phrase invisible telle que « option X sur X » à tous les en-têtes
• Ajouter le mot « ou », ou « et » comme partie de la déclaration pour relier chaque partie du contenu
• Utiliser un élément <section> au lieu d'un élément <div> lorsque vous travaillez avec des en-têtes pour contenir sémantiquement le contenu de la conception

Comment mettre en œuvre

Élément de liste

<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-or">
    <li class="cnjnctn-col">
        ...
    </li>
    <li class="cnjnctn-col">
        ...
    </li>
</ul>

<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-and">
    <li class="cnjnctn-col">
        ...
    </li>
    <li class="cnjnctn-col">
        ...
    </li>
</ul>

Élément de bloc (e.g. <div>)

<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or">
    <div class="cnjnctn-col">
        ...
    </div>
    <div class="cnjnctn-col">
        ...
    </div>
</div>

<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and">
        <div class="cnjnctn-col">
            ...
        </div>
        <div class="cnjnctn-col">
            ...
        </div>
    </div>

Options de configuration

Conception côte à côte à certains points de résolution

Ajoutez ces classes à l'élément avec la classe cnjnctn-type-or ou cnjnctn-type-and.

• Toujours côte à côte : ajouter la classe cnjnctn-xs
• Côte à côte ≥ 768px (tablette) et plus : ajouter la classe cnjnctn-sm
• Côte à côte ≥ 992px (petit écran de bureau) et plus : ajouter la classe cnjnctn-md
• Côte à côte ≥ au-dessus de 1200px (grand écran de bureau) et plus : ajouter la classe cnjnctn-lg

N'utilisez la classe « toujours côte à côte » (cnjnctn-xs) qu'avec parcimonie et lorsque le texte est très court. La conception peut ne pas bien se réduire aux appareils plus petits.

Largeurs de colonne personnalisées

Une colonne peut être définie en pourcentage d'elle-même pour permettre à un contenu plus large dans une autre colonne de moins se replier. La valeur par défaut est de 100% (cnjnctn-col).

Appliquez cette classe uniquement à une colonne qui a moins de contenu que les autres, car la classe réduit la largeur d'une colonne, et la colonne qui n'a pas la classe de largeur personnalisée s'agrandira pour compenser.

Cette classe peut être appliquée à plus d'une colonne (par exemple, si 1 colonne sur 3 a plus de contenu que les 2 autres).

La largeur ne peut pas être ajustée en fonction de différentes résolutions, et il est préférable d'empiler les colonnes lorsque le contenu devient difficile à lire sur les appareils plus petits.

Ces noms de classes sont mutuellement exclusifs, donc vous n'en utilisez qu'un seul lors de la définition de la largeur de votre colonne.

Pas de bordure gauche sur les éléments empilés

Cela peut être utilisé lorsqu'une conception (par exemple, rayure zébrée, panneau, puits, etc.) a déjà une bordure définie. La ligne qui divise la colonne disparaîtra lorsque les éléments seront empilés.

Pour supprimer la bordure lors de l'empilage, ajoutez la classe brdr-0 à l'élément avec la classe cnjnctn-type-or ou cnjnctn-type-and.

La bordure ne doit pas être supprimée s'il y a des informations environnantes contenues dans la conception déjà bordée qui ne sont pas liées à la conception par conjonction (et/ou). Il peut être peu clair lorsque le point de conjonction a commencé ou terminé.

Code source

Code source du plugin de conjonction sur GitHub