LabEx
EntrerRejoindre

Masquage d'éléments hors de l'écran accessible

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer le concept de masquer des éléments hors de l'écran en CSS. Cette technique nous permet de rendre les éléments inaccessibles visuellement et positionnellement tout en les laissant accessibles aux technologies d'assistance. À la fin de ce laboratoire, vous aurez une compréhension solide de la manière d'utiliser cette technique pour créer des pages web plus accessibles et plus amicales pour la mise en page.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Hors de l'écran

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Cette technique cache complètement un élément dans le DOM tout en le rendant toujours accessible. Pour y arriver, vous pouvez suivre ces étapes :

  • Supprimez toutes les bordures et le rembourrage et cachez le débordement de l'élément.
  • Utilisez clip pour vous assurer qu'aucune partie de l'élément n'est affichée.
  • Définissez la height et la width de l'élément sur 1px et annulez-les en utilisant margin: -1px.
  • Utilisez position: absolute pour empêcher l'élément de prendre de l'espace dans le DOM.
  • Notez que cette technique est une meilleure alternative à display: none (non lisible par les lecteurs d'écran) et visibility: hidden (prend de l'espace physique dans le DOM) en termes d'accessibilité et d'amiabilité pour la mise en page.

Voici un exemple de la manière dont vous pouvez utiliser cette technique en HTML et CSS :

<a class="button" href="https://google.com">
  Découvrez-en plus <span class="offscreen">sur les pantalons</span>
</a>

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Hors de l'écran. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.