Sélectionnez les options. Actuellement :

Kortic dispose de raccourcis de navigation et d'options d'affichage.

Apparence / Couleurs

Vous utilisez le mode sombre, les couleurs sont adaptées automatiquement.

Vous utilisez le mode clair, les couleurs sont adaptées automatiquement.

Le mode contrasté de votre terminal est pris en compte.

Infos apparence et couleurs
  1. Renforcer le contraste des textes, boutons et bordures avec l'arrière-plan. Raccourci clavier Touche clavier c
  2. Diminuer l'intensité lumineuse de 25%. Raccourci clavier Touche clavier l Diminuer l'intensité lumineuse de 20%. Raccourci clavier Touche clavier l
  3. Supprimer les couleurs et afficher le contenu en niveaux de gris. Raccourci clavier Touche clavier g
Mouvements
Infos mouvements

Limiter les effets au défilement et autres animations éventuellement présentes. Selon la configuration du terminal, cette option est automatique.
Rechargement de la page automatique.

Typographie
Infos typographie
  1. Cette option permet d'augmenter la taille des caractères utilisée par votre configuration (16 par défaut)
  2. Cette option permet de diminuer la taille des caractères utilisée par votre configuration (16 par défaut)
  3. L'écart vertical entre deux lignes est augmenté pour faciliter la lecture en retour à la ligne. Cette option s'applique sur les contenus des pages, hors navigations et titres.
    Raccourci clavier Touche clavier i
  4. Augmenter l'espacement entre les lettres et les mots.
Police de caractères
Infos police de caractères
  1. La police de caractères par défaut de votre navigateur est appliquée
  2. La police de caractères « Accessible Design For All » (dyslexie) est appliquée sur l'ensemble des pages. Les lettres et les mots sont légèrement plus espacés, les césures de mots en fin de ligne sont supprimées.
    Raccourci clavier Touche clavier d
  3. Applique la police système Comic Sans MS si elle est disponible sur votre terminal
Navigation
Infos navigation
  1. Les liens n'ouvrent pas de nouvelles fenêtres ou nouveaux onglets.
  2. Les listes défilantes horizontales ont toujours des boutons de contrôle visibles.
  3. Le contenu des pages s'affiche en pleine largeur de la fenêtre du navigateur (limité à 160rem - 2560px). Raccourci clavier Touche clavier v

Exemple de bloc produit accessible et compatible Search Engine Optimization

Comment rendre un bloc de présentation de produit compatible Search Engine Optimization, Accessible (Web Accessibility Initiative-Accessible Rich Internet Applications) et performant ?

Type de ressource
accessibilité
html
Search Engine Optimization
 

Exemple de liste de blocs produits avec hover image, aperçu en popin et lazy loading. Compatible lecteurs d'écran, navigation clavier et terminaux mobile.

Côté Accessibilité, l'exemple de la liste ci-dessous permet de gérer le fonctionnement en navigation clavier de la même manière que pour un utilisateur disposant d'une souris ou d'un pavé tactile.

L'affichage des aperçus se fait via la fonction .

Liste de 12 produits

Aperçu HTML d'un bloc

Code HTML

<li class="simca-list-item product-card" itemprop="itemListElement" itemscope itemtype="https://schema.org/Product">
  <button type="button" data-sku="F2000141" class="pictures ratio-100" aria-label="Ouvrir l'aperçu de Complément Alimentaire avec Collagène et Acide Hyaluronique Sbelta Plus (120 comprimés)">
            
      <picture data-view="secondary">
        <img itemprop="image" loading="lazy" decoding="async" src="https://placeholder.kortic.com/500x500/633765.avif" alt="image de remplacement 500 × 500" width="501">
      </picture>
      <picture data-view="primary">
        <img itemprop="image" data-view="primary" loading="lazy" decoding="async" src="https://placeholder.kortic.com/500x500/66edd8.avif" alt="image de remplacement 500 × 500" width="500">
      </picture>
            
      <span class="product-preview cta cta-icon cta-tertiary cta-right no-fit" inert>
      <svg aria-hidden="true" width="32" height="32">
<use href="#icon-popin"/>
</svg>        Aperçu <span class="xs-hide">rapide</span>
        </span>
      </button>
    
    <div class="flex justify-content-space-between no-fit product-details extended-click">
      <div class="xs-12 xs-pt-10" itemscope itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating">
        <span itemprop="name" class="clip" aria-hidden="true">Complément Alimentaire avec Collagène et Acide Hyaluronique Sbelta Plus (120 comprimés)</span>
      <figure data-rate-value="0.4" class="notation-s mask-bullets monochrome">
<span role="img" aria-labelledby="rating-e87acc1f696873bca8f712f491640080" style="width: 40%"></span>
<figcaption class="screen-readers" id="rating-e87acc1f696873bca8f712f491640080">noté 2 sur 5</figcaption>
</figure>
      </div>
      <p class="flex no-fit flex-top xs-justify-flex-start justify-content-flex-end font-family-impact price xs-mt-20 xs-mb-20"
    itemscope itemtype="https://schema.org/Offer">
        <link itemprop="availability" href="https://schema.org/InStock">
        <meta itemprop="price" content="12">
        <span class="price-unity">12</span>
        <span class="price-currency" itemprop="priceCurrency" content="EUR">€</span>
      </p>
      <p class="sku xs-12 s-12"><span class="screen-readers">Référence</span><span aria-hidden="true">Réf.</span> F2000141</p>
      <h3 class="xs-12 s-12">
        <a href="https://www.kortic.com/blocs-de-produits-accessibles-et-marquage-seo.html/sku=F2000141&product=Complement-Alimentaire-avec-Collagene-et-Acide-Hyaluronique-Sbelta-Plus-120-comprimes" rel="nofollow noopener" class="product-link">
          <span itemprop="name" >Complément Alimentaire avec Collagène et Acide Hyaluronique Sbelta Plus (120 comprimés)</span>
        </a>
      </h3>
      <div class="markdown xs-12 s-12">
        <div class="any-link-underline collapsible-block" data-collapse-lines="1" data-collapse-button="0">
          <div class="collapsible-content"><span class="screen-readers">Texte fictif : </span>Lorem cursus lectus libero sapien lorem mauris risus eu eros massa adipiscing maecenas sapien dolor cras nulla mauris.          </div>
        </div>
      </div>
    </div>
</li>

Licence Creative commons CC BY-NC-SA 4.0

Lien vers la licence : Creative commons CC BY-NC-SA 4.0

Les sources proposées sur sont mises à disposition selon les termes suivants :

Pas d’utilisation commerciale
Vous n'êtes pas autorisé à faire un usage commercial de cette Œuvre, tout ou partie du matériel la composant.
Bien entendu, la probabilité est faible pour que ce point soit respecté. En cas de sursaut d'honnêteté, vous pouvez payer un café, cette page soulagera votre conscience.
Attribution
Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Œuvre.
Partage dans les mêmes conditions
Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Œuvre originale, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence avec laquelle l'Œuvre originale a été diffusée.
Pas de restrictions complémentaires Vous n'êtes pas autorisé à appliquer des conditions légales ou des mesures techniques qui restreindraient légalement autrui à utiliser l'Œuvre dans les conditions décrites par la licence.

Note : Vous n'êtes pas dans l'obligation de respecter la licence pour les éléments ou matériel appartenant au domaine public ou dans le cas où l'utilisation que vous souhaitez faire est couverte par une exception.

Aucune garantie n'est donnée. Il se peut que la licence ne vous donne pas toutes les permissions nécessaires pour votre utilisation. Par exemple, certains droits comme les droits moraux, le droit des données personnelles et le droit à l'image sont susceptibles de limiter votre utilisation.

À défaut de tout ça, un petit message et une référence à Kortic restent les bienvenus.

Limitation de responsabilité

Le code est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. En aucun cas l’auteur ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, résultant de, en dehors ou en relation avec le logiciel ou l'utilisation ou d'autres transactions.

Vous aimez cette page ?
Dites-le !

Vous aimez cette page ?
Dites-le !