web-dev-qa-db-fra.com

Masquer le texte UNIQUEMENT pour les lecteurs d'écran

Le WCAG dit que cela peut être fait avec la balise aria-hidden, mais j'ai lu que cela ne fonctionnait pas sur de nombreux lecteurs d'écran.

Impossible d'obtenir comment display:none peut aider à masquer du texte niquement pour les lecteurs d'écran (= visible par d'autres périphériques que SR). Cela ne dit pas non plus comment le lecteur d'écran agirait pour display:none s'il ne prend pas en charge CSS.

Existe-t-il une technique, une pratique recommandée ou tout ce que je peux utiliser pour masquer du texte niquement pour les lecteurs d'écran?

htmlcssaccessibilityhidden-text
1
jiostoph

Existe-t-il une technique, une pratique recommandée ou tout ce que je peux utiliser pour masquer du texte destiné uniquement aux lecteurs d'écran?

Je peux donner une réponse à la partie "peu importe" de votre question.

Créez une image et ajoutez-y du texte à l'aide de votre programme de manipulation d'images. Ensuite, pour l'approche la plus secrète, utilisez CSS pour définir votre image en tant qu'arrière-plan d'un élément DIV.

Voici le code pour vous aider à démarrer:

<html>
<head>
<style>
#secret{background-image:url('/path/to/imagewithwords.jpg');width:Wpx;height:Hpx;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>

Dans mon code, j'ai utilisé W et H pour indiquer la largeur et la hauteur de l'image. Vous devez remplacer ces lettres dans la déclaration de style par la largeur et la hauteur réelles de votre image en pixels pour tout voir. Par exemple, si votre image est stockée sous le nom de fichier secret.jpg et qu'elle se trouve dans le dossier racine du document et que la largeur de l'image est de 100 pixels et la hauteur de 200 pixels, utilisez le code suivant:

<html>
<head>
<style>
#secret{background-image:url('/secret.jpg');width:100px;height:200px;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>

Les navigateurs doivent respecter le fait que DIV est un élément de bloc et si votre navigateur ne le fait pas, alors, juste après le {, ajoutez un display:block;.

Le seul inconvénient de ma méthode est que le texte doit toujours avoir une taille fixe, quelle que soit la résolution de l'écran ou les paramètres du navigateur, car il fait partie de l'image.

1
Mike