Aller au menu - Aller au contenu

[Débat] La meilleure façon de cacher un texte

en le gardant accessible aux navigateurs non-graphiques

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Ishimaru Chiaki # Posté le 21/06/2008 à 23:21:33
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada
Bonjour.

Suite aux raisons évoquées au sujet de la manière de cacher un texte, lors du refux de mes tutoriaux xhtml ("menu tout en images" et "design extensible"), je viens ouvrir un débat sur la meilleure façon de cacher un texte sans empêcher les navigateurs non-graphiques de le voir, lorsqu'on utilise des images qui contiennent du texte et qui sont définis en images de fond dans CSS.

Pour vous donner un exemple de ce que je veux dire, prenez mon site où l'image de la bannière contient le nom et est définie en image de fond.

Voici jusqu'à maintenant les méthodes que j'ai vues :

Display et visibility



Cette méthode consiste à cacher le texte avec les propriétés display: none; ou visibility: hidden

Or, des tests ont révélé que certains navigateurs non-graphiques interprètent également ces propriétés, ce qui fait que le texte sera caché même pour les navigateurs non-graphiques.
Il en est d'ailleurs question dans cet article d'Alsacréations à ce sujet

Text-indent



La méthode consiste à cacher le texte en mettant une indentation négative avec un nombre assez élevé. Exemple : text-indent: -5000px;
Mais pour que ça fonctionne même sous les vieilles versions d'IE, il faut mettre une valeur très grande.

Positionnement absolu



En mettant le texte dans une balise qui n'a pas d'image de fond, la méthode fait sortir le texte de le page en utilisant le positionnement absolu (selon le coin supérieur gauche), puis en le décalant vers le haut avec top: -500px;. ConnectixBoards utilise cette méthode, et mon site l'utilise également.
Cette méthode a l'avantage de fonctionner sur tous les navigateurs graphiques.

Retours chariot et image en avant du texte



Utilisée par phpBB3, cette méthode consiste à faire sortir le texte du bouton simplement en faisant des retours chariot au besoin, et en mettenat l'image en avant du texte. Un exemple

Texte riquiqui



Cette méthode consiste à changer la taille du texte pour la mettre à 0 pixels. Exemple : font-size: 0px;
Mais selon ce que j'ai lu, cette méthode fonctionne mal sous certains navigateurs graphiques comme IE et Opera.

Les clip



Cette dernière méthode consiste à utiliser la propriété clip, comme indiqué dans ce lien
Mais encore une fois, cette méthode fonctionne mal dans certains navigateurs.


Donc, le débat est ouvert !
Édité le 03/07/2008 à 07:02:54 par Ishimaru Chiaki
Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar
Image utilisateur
 
Hors ligne Yano # Posté le 22/06/2008 à 00:01:29
Avatar
Bonjour,

J'y ai déjà pensé.
Existe-t-elle ?

Si je devais le faire, il me semble que j'utiliserais une image dans le titre (titre, par exemple).
Le titre en relative.
L'image en absolute.

Par exemple (à affiner. Avec des dimensions…)

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>La meilleure façon de cacher un texte ?</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      background-color: #b0c4de;
      color : #344979;
      }
    h1 {
      position : relative;
      margin : 1em;
      font-size : 0.1em;
      color: #b0c4de;
      }
    h1 img {
      position : absolute;
      display : block;
      top : 0;
      left : 0;
      }
    </style>
</head>
<body>
    <h1>
      [Débat] La meilleure façon de cacher un texte
      <img src="titre.png" alt="image titre" />
    </h1>
</body>
</html>


Est-ce que ça marche partout ???



++
De quoi tester

http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
http://validator.w3.org/check?uri=http%3A%2F%2Fyanolonay.olympe-network.com%2Fsdz%2F79611%2F79611ct.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Édité le 22/06/2008 à 00:11:00 par Yano
Hors ligne KorangaR # Posté le 22/06/2008 à 00:06:42

C'est juste un non problème. Une image contenant du texte doit figurer dans l'HTML en n'oubliant pas l'attribut alt.
Édité le 22/06/2008 à 00:07:56 par KorangaR
Hors ligne Yano # Posté le 22/06/2008 à 00:25:47
Avatar
Citation : KorangaR
C'est juste un non problème.


Tu as bien lu le sujet ?
Hors ligne KorangaR # Posté le 22/06/2008 à 00:35:07

Citation : Yano
Citation : KorangaR
C'est juste un non problème.


Tu as bien lu le sujet ?




Oui. C'est absurde d'essayer de "cacher un texte" et ensuite parler d'accessibilité.
Hors ligne Yano # Posté le 22/06/2008 à 00:42:49
Avatar
Si tu trouves absurde de prendre en compte les handicaps, alors…

En effet, il n'y a plus de débat.
Hors ligne KorangaR # Posté le 22/06/2008 à 00:46:28

Citation : Yano
Si tu trouves absurde de prendre en compte les handicaps, alors…

En effet, il n'y a plus de débat.




L'attribut alt est fait pour ça. Un truc que vous ne comprenez pas : il est possible de désactiver les images et non les styles css. Celui qui fait ça se retrouve avec rien du tout avec toutes vos méthodes farfelues.
Édité le 22/06/2008 à 00:57:48 par KorangaR
Hors ligne Ishimaru Chiaki # Posté le 22/06/2008 à 21:19:06
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada
Citation : KorangaR
Citation : Yano
Si tu trouves absurde de prendre en compte les handicaps, alors…

En effet, il n'y a plus de débat.




L'attribut alt est fait pour ça. Un truc que vous ne comprenez pas : il est possible de désactiver les images et non les styles css. Celui qui fait ça se retrouve avec rien du tout avec toutes vos méthodes farfelues.


Sous Firefox : Affichage > Style de la page > Aucun style

L'inconvénient d'une image en dur, c'est que si tu veux mettre plusieurs styles, tu vas être obligé de garder la même bannière pour les différents styles, à moins d'avoir recours à un moteur de templates.

Et pour information, la méthode que j'utilise (le positionnement absolu) pour cacher le texte, je l'ai testé sous Lynx à la fois sous windows et linux (si t'es sous windows, il existe une version Windows du navigateur). Pis si tu veux que je teste davantage : sous XP, j'ai ZoomText qui m'a été fourni avec l'ordi, tandis que sous Ubuntu, j'ai Orca installé par défaut avec la distrib.
Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar
Image utilisateur
 
Hors ligne Patamok # Posté le 22/06/2008 à 21:24:50
Bass addict!
Avatar
Citation : Ishimaru Chiaki
L'inconvénient d'une image en dur, c'est que si tu veux mettre plusieurs styles, tu vas être obligé de garder la même bannière pour les différents styles, à moins d'avoir recours à un moteur de templates.

Pourquoi un moteur de templates ?
A lire : Histoire Noire | Petite fille | Gnôthi seauton | Misérable
 
Hors ligne Ishimaru Chiaki # Posté le 22/06/2008 à 21:53:26
GIMP freak
Avatar

Ville : Baie-comeau
Pays : Canada
Parce que quand je dis "image en dur", je parle d'une image insérée avec <img />, donc dans le HTML même.

Un moteur de template sépare le PHP du HTML et permet d'avoir plusieurs structures HTML pour un même site (prends les forums phpBB par exemple).
Ubuntu 9.04 et Windows XP, Gimp 2.6.6, XHTML/CSS, PHP/MySQL - Big-tuto Gimp en cours
Tableaux sous OOo Writer | Halte aux menus en Flash ! | Site | Portfolio | Gimp Attitude | Mon p'tit bar
Image utilisateur
 
Hors ligne Patamok # Posté le 22/06/2008 à 22:07:52
Bass addict!
Avatar
Citation : Ishimaru Chiaki
Parce que quand je dis "image en dur", je parle d'une image insérée avec <img />, donc dans le HTML même.

J'avais compris ...

Citation : Ishimaru Chiaki
Un moteur de template sépare le PHP du HTML et permet d'avoir plusieurs structures HTML pour un même site

Parce que PHP sait pas le faire en natif peut-être ?
Et je sais ce qu'est un moteur de tpl, merci ...

---------

Code : PHP
1
2
3
<?php $style = 'Bluzaz' ?>
<!-- [...] -->
<h1><img src="./styles/<?php echo $style ?>/img/ban.png" alt="Mon super site"></h1>

Un banal style switcher (cookies / espace membre), on récupère le nom du design choisi et c'est réglé.
La seule contrainte est qu'une image insérée en dur mais dépendant du design doit toujours, forcément, avoir le même nom.

Bref, Je vois pas ce qu'un moteur de tpl vient faire là-dedans.
Édité le 22/06/2008 à 22:15:59 par Patamok
A lire : Histoire Noire | Petite fille | Gnôthi seauton | Misérable
 
Hors ligne KorangaR # Posté le 22/06/2008 à 23:49:37

Citation : Ishimaru Chiaki
Citation : KorangaR
Citation : Yano
Si tu trouves absurde de prendre en compte les handicaps, alors…

En effet, il n'y a plus de débat.




L'attribut alt est fait pour ça. Un truc que vous ne comprenez pas : il est possible de désactiver les images et non les styles css. Celui qui fait ça se retrouve avec rien du tout avec toutes vos méthodes farfelues.


Sous Firefox : Affichage > Style de la page > Aucun style

L'inconvénient d'une image en dur, c'est que si tu veux mettre plusieurs styles, tu vas être obligé de garder la même bannière pour les différents styles, à moins d'avoir recours à un moteur de templates.

Et pour information, la méthode que j'utilise (le positionnement absolu) pour cacher le texte, je l'ai testé sous Lynx à la fois sous windows et linux (si t'es sous windows, il existe une version Windows du navigateur). Pis si tu veux que je teste davantage : sous XP, j'ai ZoomText qui m'a été fourni avec l'ordi, tandis que sous Ubuntu, j'ai Orca installé par défaut avec la distrib.


Je réexplique, il se peut que l'utilisateur désactive les images et ne désactive pas le css, cela ne va pas forcément ensemble.

Et ton argument, c'est un peu pour les marchands, par pour les gens s'intéressant à l'accessibilité. Le best ca reste de toute façon le fond de la bannière en CSS et l"écrit" de la ban en dur. Par exemple pour le SdZ, tu aurais la vache et le dégradé dans le CSS, et tu aurais le texte en HTML, stylé via les font personnalisés (pour ça faudra attendre un petit peu).
Édité le 23/06/2008 à 01:00:32 par KorangaR

Retour au forum "XHTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx