Accessibililté et popups

12 décembre 2005 à 1:58:31

Bonjour !

Je viens de m'inscrire après avoir lu les tutos (superbes, au passage), et voici ma première question (ouh je suis émue lol).

Je me forme pour refaire complètement mon site en respectant les standards W3C et les règles d'accessibilités, et j'ai un peu de mal avec ces dernières...

En ce qui concerne les popups, je sais qu'ils sont fortement déconseillés, voir détestés :lol:

. Je me demandais si on peut les utiliser quand même dans la mesure où les pages affichées ainsi ne sont pas des pages de navigation, mais plutôt des compléments d'information. Exemple : mon site traite de généalogie. On a une liste de personnes (page principale), et si on clique sur un nom, on obtient un popup redimensionné avec le détail de la fiche de cette personne. Le but est justement de ne pas avoir à faire back à chaque fois, et d'avoir à la fois la liste de personne et une/des fiches détaillée(s) ouvertes en même temps. Soit on veut garder cette fiche sous la main, donc on laisse la popup ouverte, soit on veut pas et on la ferme. Je fonctionne exactement de la même manière pour afficher des photos d'actes d'état-civil...

Ce genre de fontionnement est-il acceptable ? Si non, comment faire autrement ?

J'ai personne de concerné par ces problèmes dans mon entourage, donc je ne peux qu'aller "au feeling" !

Merci !

Mistike

PS au modérateur : j'ai posté ici à défaut de mieux... S'il y a un forum plus adapté, vous pouvez déplacer mon post !!!

Gamer_man

12 décembre 2005 à 3:06:20

Si tu rends le contenu visible si l'ont désactive le JavaScript, il n'y a pas de problème.

Pour cela, procède de cette façon :

<?xml version="1.0" encoding="ISO-8859-1"?>

<!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" >
<head>
<title>Popup</title>

<script type="text/javascript">
// <![CDATA[
function init_evenements()
{
// Ajout des évènements aux éléments
var liens_popups = document.getElementsByTagName('a');

for (var i=0 ; i<liens_popups.length ; i++)
{
if (liens_popups[i].className === 'popups')
liens_popups[i].onclick = popup;
}
}

function popup()
{
// This représente le déclencheur de la fonction, en l'ocurrence un lien
window.alert('Ouverture de la fenêtre suivante en cours :\n\n' + this.href);
window.open(this.href);
return false;
}

window.onload = init_evenements;
// ]]>
</script>

<style type="text/css">
html body h1 {color: #2222FF; text-decoration: underline;}
html body ul li {margin: 0px 0px 10px 0px; clear: both; color: #2244FF; list-style-type: decimal;}
html body ul li a {display: block; width: 150px; padding: 2px 5px 2px 5px; color: #FFAA33; text-decoration: none; border: 1px solid #FFAA33; -moz-border-radius: 6px;}
html body ul li a:hover {color: #CC7700; text-decoration: none; background-color: #F9F9F9; border: 1px solid #CC7700;}
</style>

</head>

<body>
<h1>Liens en popup</h1>
<ul>
<li><a class="popups" href="http://www.siteduzero.com">Site du Zéro</a></li>
<li><a class="popups" href="http://www.google.fr">Google</a></li>
<li><a class="popups" href="http://nwco.free.fr">Site du clan NwCo</a></li>
</ul>
</body>
</html>

Bisous

jp949

12 décembre 2005 à 6:44:47

Bonjour.
une methode valide xhtml1.0 strict et accessible

Gamer_man

12 décembre 2005 à 8:42:58

C'est la même que moi, à ce que je sache, sauf que la façon dont je procède est mieux

Citation

window.open(this.href);

Bisous

Raphael

12 décembre 2005 à 11:43:41

Citation : Gamer_man

C'est la même que moi, à ce que je sache, sauf que la façon dont je procède est mieux

Il n'y a pas de mieux en ce qui concerne les popups.
Le problème n'est pas d'être Valide ou non. Il faudrait un jour où l'autre intégrer le fait que la Validation ne doit pas être un but, mais un moyen...
Un moyen d'atteindre une philosophie, celle de rendre ses documents universels et accessibles à tous.

Or une popup, valide ou non, reste un gros obstacle à l'accessibilité.

Je vous invite à lire cette explication claire : http://forum.alsacreations.com/faq/#item21

En résumé :
Soit on adhère à cette philosophie, soit on n'y adhère pas. Toute la question est là… et les réponses en découlent très logiquement :
- Si on y adhère, on refuse d'employer target (ou toute autre bidouille javascript équivalente)
- Si on n'y adhère pas, le W3C a la réponse : "If you want to use the target attribute, use XHTML 1.0 transitional." (solution 2)

Gamer_man

12 décembre 2005 à 12:52:20

Citation : Raphael

Il n'y a pas de mieux en ce qui concerne les popups.

Je ne parlais pas de la popup, je n'en suis pas friand non plus.
Je parlais de la façon de faire, c'est à dire séparer le JavaScript du HTML, comme on a l'habitude de faire pour le CSS.

Bisous

jp949

12 décembre 2005 à 13:24:53

tu as mis le script dans la page html entre <head> et </head> hormis le fait d'avoir encadré [[CDATA]]..
a ce compte la fais le dans un fichier externe ca allege la page tu as 15 lignes de code js

Gamer_man

12 décembre 2005 à 13:48:56

Citation : jp949

tu as mis le script dans la page html entre <head> et </head> hormis le fait d'avoir encadré [[CDATA]]..
a ce compte la fais le dans un fichier externe ca allege la page tu as 15 lignes de code js

Non, ce n'est pas ca la question (bien sur il faudrait mettre le contenu javascript dans un fichier externe, là l'avantage que la page n'est chargée qu'une fois).

Ce qui est plus intéressant, c'est la manère d'ajouter les évènements (pas forcement la meilleure, mais mieux que celle directement en propriété HTML des éléments, car ainsi le JS et le HTML sont vraiment séparés, (et au final, autre avantage, tes pages plus légères (quelques octets, :p))).

Bisous

mistike

12 décembre 2005 à 15:29:32

Merci jp et gamer_man.

Je comprends bien le code de JP. Par contre j'ai (beaucoup) plus de mal avec celui de gamer_man...

Tu pourrais me l'expliquer ???

Merci !

Mistike

(je rappelle que mes popups sont juste ça, des popups avec un complément d'info. Je n'ouvre jamais de liens avec "target=_blank").

Gamer_man

12 décembre 2005 à 17:55:50

Si tu veux

function init_evenements() // Fonction qui associe des actions à des événements (clic, survol, etc.)
{
// Ajout des évènements aux éléments
var liens_popups = document.getElementsByTagName('a'); // getElementByTagName renvoi un tableau contenant tous les elements "a" (liens)

for (var i=0 ; i<liens_popups.length ; i++) // Boucle qui défile chaque élément lien
{
if (liens_popups[i].className === 'popups') // Si la classe de l'élément en cours est "popups"
liens_popups[i].onclick = popup; // Alors on associe l'action "popup" (la fonction popup()) à l'événement "onclick
}
}

function popup() // Fonction popup, déclenchée par un clic sur un lien de classe "popups"
{
// This représente le déclencheur de la fonction, en l'ocurrence un lien
window.alert('Ouverture de la fenêtre suivante en cours :\n\n' + this.href); // Petit fenêtre décrivant la page qui va s'ouvrir
window.open(this.href); // Ouverture de la fenêtre en utilisant la valeur de la propriété href du déclencheur (du lien)
return false; // Annuler l'action par défaut du lien (qui est d'ouvrir le lien dans la même frame)
}

window.onload = init_evenements; // Au chargement de la fenêtre, lancer la fonction init_evenements()

Voila

Bisous

mistike

12 décembre 2005 à 18:04:27

OK !!! J'ai compris ! Enfin je crois

Je ne comprenais pas pourquoi la class popups n'était pas définie dans le css et à quoi elle servait, du coup.

Avec cette méthode, si le javascript est désactivé, le lien se chargera dans la fenêtre principale... c'est parfait !

Merci à tous les deux (et aussi à alsacreations qui explique un peu le même genre de méthode).

Je vais essayer trois solutions :
- ça
- les "faux-popups"
- l'ouverture du lien dans un block séparé en dessous de la liste, sur la même page (genre frame sans frame :lol:

)

Thort

12 décembre 2005 à 18:50:24

salut moi j'ai découvert une super solution

ici

merci à Superkwak.