Rendre mon site completement accessible

[guiant]

Bonjour, je suis nouveau sur ce forum, je me suis inscrit car je trouvais tres intéressant la rubrique accessibilité.

Donc voilà, je vous explique mon problème, j'ai un site de breakdance, et j'aimerais le rendre accessible, vu qu'il est déjà valide Xhtml, je ne crois pas que celà soit bien compliqué.

Mais je ne sais pas du tout comment faire, pour le moment il est valide avec acces pour tous, et avec wave, mais j'ai essayé avec bobby, et je ne comprends pas du tout les erreurs qu'il me donne, est-ce que quelqu'un pourrait me dire ce que je dois modifier pour que ce site soit completement accesssible (sans parler du forum)?

Merci d'avance et a++

[finidori]

Tout n'est pas facile à comprendre avec Bobby, cela a été dit ici.

Mais je comprends au moins ceci:

Check that the foreground and background colors contrast sufficiently with each other. (1 instance)

Line 104

D'ailleurs, je n'ai pas besoin de Bobby pour voir qu'avec le ton sur ton, la différence n'est pas assez marquée. J'ai une vue parfaite, mais je distingue avec difficulté le texte du fond. Si on doit lire tout ton site, je crois qu'avec la fatigue, ce sera de + en + difficile.

[LaurentDenis]

Une première étape : corriger les erreurs CSS, et en particulier la syntaxe des pseudo-sélecteurs :

a: link{ color: #6CA1D1; }
a: visited{ color: #155894; }
a: hover{ color: #91CDFF; }
a: active{ color: #DFEEFF; }

Les espace sont interdits après les deux-points. Il faut écrire:

a:link{ color: #6CA1D1; }
a:visited{ color: #155894; }
a:hover{ color: #91CDFF; }
a:active{ color: #DFEEFF; }

Il y a apparemment la même erreur pour un :first-letter et des :hover, ainsi que des erreurs sur un code de couleur, etc.

Pour le rapport bobby (page d'accueil uniquement), il n'y a qu'une erreur repérable par le validateur : tu as des liens adjacents dans ta page (ligne 36 de ton code), c'est à dire non séparés par un caractère imprimable et non contenus dans des items de liste.

Il t'indique surtout en outre une série de vérifications à faire "à la main", qu'il ne peut faire lui-même :

- vérifier le contraste des couleurs

- syntaxe des labels de formulaire (éviter la syntaxe implicite qui n'est pas supportée par Jaws)

- envisager d'utiliser FIELDSET et LEGEND dans les formulaires

- vérfier la pertinence des titles et des intitulés des liens (ils doivent être explicites hors contexte)

- il semble que tu aies une image animée : clignote-t-elle ?

- faire une carte du site et une page "politique d'accessibilité" si ce n'est pas déjà fait

- utiliser les liens relatifs <link rel="start"... pour l'accueil, <link rel="help"... pour la page d'aide à l'accessibilité, <link rel="up"... pour les sommaires de sections éventuels, etc

- s'assurer que l'ordre de tabulation est cohérent, ou spécifier un ordre cohérent avec tabindex

- prévoir des liens d'évitement de la navigation pour passer les menus

- utiliser des accesskeys pour les liens essentiels (accueil, accessibilité, recherche, contact...)

[LaurentDenis]

Oups, j'oubliais : le javascript est-il obstructif ? l'accès à la page est-il compromis sans support javascript ?

Par ailleurs, il provoque une erreur indéterminée dans ma console Javascript ?

[Monique]

Bonjour guiant,

Et bienvenue sur le Hub

Mon petit grain de sel...

Certaines aides techniques permettent à l'utilisateur de lister la structure de la page : titre, sous-titres...

Cette structure est définie dans le code par les balises h1, h2...

Tu utilises h1 pour les titres de tous les menus, il serait préférable de réserver cette balise au titre de la page (avec les règles de style de ton choix bien sûr)

<h1> BreakZone, nouvelle communauté BreakDance...</h1>

A mon avis l'élément fieldset est détourné de son usage.

Il est destiné à regrouper thématiquement les commandes et les labels apparentés d'un formulaire.

[LaurentDenis]

A mon avis l'élément fieldset est détourné de son usage.

Il est destiné à regrouper thématiquement les commandes et les labels apparentés d'un formulaire.

Formellement oui, fieldset est réservé aux formulaires.

Mais cette utilisation détournée est indéniablement séduisante

Bon, soyons raisonnable : le même effet visuel peut être obtenu avec une div conteneur, un titre, le paragrapahe de contenu et un doigt de position relative sur le titre. Attention cependant à bien régler hauteurs de lignes, tailles de caractères, padding et marges du titre et du paragraphe...

[guiant]

Salut, dabort merci à tous pour vos réponses très rapide, j'ai déjà fait quelque modif:

Avec le ton sur ton, la différence n'est pas assez marquée : Je ne comprends pas trop ce que cela veux dire, est-ce que je peux avoir url ou quoi qui pourrait m'aider à comprendre de quoi tu parles?

Corriger les erreurs CSS : Voilà, j'ai corrigé les erreurs que je comprennais, le reste c'est soit c'est impossible (balise moz-) soit je ne sais pas comment les valider (autres erreurs, pouvez vous m'aider svp?)

Pour le rapport bobby : Donc j'avais bien compris, mais le seul problème c'est que je ne trouve aucun lien comme celui la sur ma page

Vérifier la pertinence des titles et des intitulés des lien : Les alt sur les images sont obligatoire, mais est-ce que les tittles le sont aussi?

Prévoir des liens d'évitement de la navigation pour passer les menus : C-à-d? Ca se fait grâce à quel balise ou comment?

2eme message de LaurentDenis : Tout est OK

Monique : Pour ce qui est des balise H* se vais régler ca tres rapidement, pour le fieldset: suis-je vraiment obligé de changer ?

EDIT -> c'est fait

Voilà, encore merci et a++

Modifié 7 Août 2004 par guiant

[Monique]

L'attribut title d'un lien n'est pas obligatoire pour que le code soit valide.

En terme d'accessibilité, il le devient si le texte sur lequel le lien est fait n'est pas suffisamment significatif hors contexte.

Ce qui est le cas pour plusieurs liens de tes menus : Les nouveaux, Ajouter, Résultat...

Les liens d'évitement, ce sont des liens qui doivent être en haut de la page (Aller au menu, Aller au contenu) et pointer directement vers la partie concernée

<a href="#menu">Aller au menu</a>

<div id="menu">le menu</div>

Pour le fieldset... c'est vrai que l'effet obtenu est beau. A ma connaissance rien n'interdit vraiment de l'utiliser ainsi, même s'il est recommandé de ne pas détourner les balises de leur véritable rôle

Quelles sont les erreurs CSS que tu ne sais pas corriger ?

[guiant]

Salut,

Les erreur css que je n'arrive pas à régler sont celle là:

# Line: 0 Context : Arial , Helvetica , sans-serif

Parse Error - : 2px; font-family: Verdana

# Line: 0 Context : Arial , Helvetica , sans-serif

Parse Error - sans-serif;

# Line: 0

Parse Error - : 1em; color: #4F4F4F; } input.rechercher

Visible à cette adresse

Et pout ce qui est des tittle je les rajoute tout de suite

PS: pour ceux qui serait curieux et verifierais les autres pages du site, je n'ai encore fait aucun modification

[LaurentDenis]

Avec le ton sur ton, la différence n'est pas assez marquée : Je ne comprends pas trop ce que cela veux dire, est-ce que je peux avoir url ou quoi qui pourrait m'aider à comprendre de quoi tu parles?

Tes menus et ton bandeau avec un texte de liens bleu sur fond bleu n'offrent pas un constraste suffisant.

Corriger les erreurs CSS : Voilà, j'ai corrigé les erreurs que je comprennais, le reste c'est soit c'est impossible (balise moz-) soit je ne sais pas comment les valider (autres erreurs, pouvez vous m'aider svp?)

pour #gauche ul, #droite ul, le validateur t'indique qu'il manque une famille générique de police : font-family: Verdana, sans-serif;. Recopie simplement à chaque fois la déclaration de police du body (font-family: Verdana, Arial, Helvetica, sans-serif;).

Toutes les autres erreurs sont provoquées par les propriétés CSS mozilla

-moz-border-radius: 3px;
-moz-border-top-colors: #A0BBDD #A0BBDD;
-moz-border-right-colors: #EBF2F8 #A0BBDD;
-moz-border-bottom-colors: #EBF2F8 #A0BBDD;
-moz-border-left-colors: #A0BBDD #A0BBDD;

certes très jolies, forcément bien puisque mozilliennes, mais... propriétaires et invalides.

Pour le rapport bobby : Donc j'avais bien compris, mais le seul problème c'est que je ne trouve aucun lien comme celui la sur ma page 

Si, ceux du début de page :

<a accesskey="p" href="plan_du_site.php" class="header"><span class="gras">Plan du site et raccourci</span></a><br />
<a href="#contenu" class="header"><span class="gras">Aller au contenu</span></a>

Tu peux te contenter de rajouter une virgule entre les deux liens (</a>,<br />), ou améliorer en utilisant une liste. En supprimant au passage le span inutile, écris par exemple :

<ul class="header">
<li><a accesskey="3" href="plan_du_site.php">Plan du site et raccourci</a></li>
<li><a href="#contenu">Aller au contenu</a></li>
</ul>

Il faut modifier en conséquence ta CSS pour :

- supprimer a.header {...} et span.gras{ ...}

- ajouter le code suivant :

.header a {
font-weight: bold;
font-size: 0.9em;
color: #fff; 
}
.header li {
list-style-type: none;
}

(à compléter pour finir de style les <li>)

L'accesskey "p" doit également être modifié, au profit de l'accesskey numérique habituel pour ce lien (voir http://openweb.eu.org/articles/accesskey_e...non_transforme/ ). C'est également le cas des autres accesskey "lettres" que tu utilises.

[guiant]

Bonjour, merci à tous pour votre aide, j'ai comme l'impression que ma page est valide AAA et 508 , est-ce que vous pouver me dire si mon impression est la bonne svp , il me reste plus qu'à mettre le texte de mes menu en blanc.

a++

[Monique]

Bonjour,

Je n'ai pas approfondi, mais si j'en crois ce Cynthia Says Report

Toi qui semble vivement intéressé par l'accessibilité de ton site, connais-tu Opquast et ses "Bonnes pratiques qualité pour les services en ligne" ?

Il en est question dans cette discussion.

[guiant]

Salut, je connais mais je n'ai pas tres bien compris le but de ce site .

Par contre si j'ai bien compris je peux mettre valide 508 et AAA en dessous de mon site ?

[LaurentDenis]

Formellement, oui

Reste à tester ce qui ne peut être repéré par la machine et que seul l'utilisateur peut expérimenter...

Cela dit, une erreur qui a curieusement échappé aux validiteurs : les boutons de soumission des formulaire n'ont plus de libellé sans CSS, autrement dit dans un navigateur texte, un lecteur d'écran, etc:

<input class="envoyer_bleu" name="submit" type="submit" value=" " />
<input class="rechercher" type="submit" name="submit" value="" />
avec 

input.envoyer_bleu{
background-image: url(../image/envoyer.gif);
}
input.rechercher{
background-image: url(../image/rechercher.gif);
}

Et un lien dont l'intitulé est dénué de sens hors contexte :

<a href="http://www.fnac.com/Shelf/article.asp?...">Cliquez</a>

[guiant]

Salut,merci pour ces infos,

Mais,

Comment faire pour que si jamais il n'y a pas de css afficher un texte, je supose qu'il faut faire ca en php? Il n'y a pas d'autre moyen? Ou alors retirer l'image, mais bon j'ai pas trop envi

[Monique]

L'élément input peut être affecté d'un attribut alt.

[LaurentDenis]

Si ma mémoire est bonne, à cause des problèmes de supports partiels et variés selon les navigateurs et les lecteurs d'écran anciens, il est prudent de répéter l'information dans les attributs alt et title. Quelqu'un peut confirmer ?

[guiant]

Voilà, merci énormément pour votre aide, si vous avez d'autre proposition pour mon site, je suis toujours là, a++

N'hésitez pas à regarder les autres pages et à signe le livre d'or

[yobiwan]

Je verrais bien des commentaires explicites au liens en passant moi

par exemple si je regarde rapidement la page :

j'ai un title de lien au dessus d'un cliquez ici qui est :"Voir la fiche détaillée" --> voir la fiche détaillée de quoi ? c pas super explicite hors contexte tout ca

idem pour 508 css xhtml ... pour les gens qui connaissent c bien mais pour les autres. quelque chose du genre "page valide XHTML" me paratitrait plus explicite.

J'avoue etre très perturbé par la structure du site dans le code par rapport au visuel.*

Visuellement j'ai trois colonnes donc trois blocs d'infos et dans le code je n'en ai que deux, les deux menus ne faisant plus qu'un.

Le choix visuel est de différentier trois zones donc dans le code cela doit se voir, sinon il faudrait faire deux zones une pour le menu et une pour les contenus.

Etant daltonnien moi meme je confirme que les contrastes dans la page sont beaucoup trop faibles.

Les textes de input de validation sont pour moi ilisibles (couleurs et typos)

Pour les fieldset leur fontion est de regrouper des blocs d'infos ddonc parfaitement valide dans la page.

Les textes explicatifs dans les champs de saisis sont aujourd'hui déconseillé meme si nécéssaire pour les WCAG 1.0 --> pas le cas dans les 2.0 et le retour utilisateur est assez négatif la dessus

Voila mes qq remarques sasn poussez plus que ca.

[guiant]

Salut, merci pour cette réponse, je ferais les changements des que possible, a++

[Dagnan]

Désolé, mais je poste juste un message pour dire que j'aime bien les couleurs, même si ça manque un peu de contraste (parce que à force ça fait mal aux yeux).

Bonne continuation.

[guiant]

Salut, ben voilà, j'ai juste changé voir la fiche détaillée "de l'objet en vente" pour ce qui est de Css, xhtml, 508 et AAA, j'ai juste ajouté le "et" pour que le navigateur lise ceci:

Cette page est valide aux normes [CSS], [XHTML], [AAA] et [508]

Pour les couleurs, il existe énormément de problème pour la vision, si je dois faire attention à tous les problème je ne m'en sors plus, il se peut que toi tu ne vois pas les textes mais que si je change d'autre ne le voit pas...

Je vais quand même essayer de changer un peu les couleurs dans quelque temps, mais je vais pas faire d'énorme changement

A+ et bonne journée

[guiant]

Salut, je voulais editer mon message, mais apparamment on peu pas , donc je voulais dire que ceci:

Pour les couleurs, il existe énormément de problème pour la vision, si je dois faire attention à tous les problème je ne m'en sors plus, il se peut que toi tu ne vois pas les textes mais que si je change d'autre ne le voit pas...

Je sais pas si je dit une énorme bétise ou pas

Et aussi je voulais dire merci à Dagnan et à tout les autres

[guiant]

Salut, j'aurais aimé savoir pourquoi mes acceskey ne fonctionne pas ?

[Monique]

Bonjour,

Tes véritables acceskeys fonctionnent...

- Alt + Maj + 1 => Page d'accueil

- Alt + Maj + 2 => Plan du site

- Alt + Maj + 3 => Recherche

(avec les chiffres du clavier principal, et non du pavé numérique)

Je ne comprends pas pourquoi tu indiques ceci

    * Alt+a : Page d'accueil

    * Alt+p : Plan du site

    * Alt+r : Moteur de recherche rapide