Sarc Posté 15 Janvier 2005 Posté 15 Janvier 2005 Bonjour, J'ai fini le site xHTML dont je parlais depuis quelques jours... J'ai essayé qu'il soit propre, et optimisé pour le référencement, j'ai fait tout en sorte pour qu'il soit agréable, tant au niveau du design que du reste, de la rapidité de chargement entre autres... Le contenu ne passionera peut-être pas la foule, mais bon, j'aimerais tout de même avoir votre avis sur l'ensemble du site, et ce qui peut être amélioré ! Normalement, tout est valide xHTML, si j'ai pas fait une erreur en changeant rapidement un programme... Voila l'adresse : Fonctionnement d'une télévision Merci de vos critiques !
Jan Posté 15 Janvier 2005 Posté 15 Janvier 2005 Salut, Un petit détail pour le référencement de ton site: tu écris l'URL de la page d'accueil -http://sarcasmeur.free.fr/tpe-television/ (au moins dans ce forum) alors que les liens internes de ton site pointent vers -http://sarcasmeur.free.fr/tpe-television/index.php Ca a beau être la même page, pour les moteurs de recherche ce sont 2 URLs distinctes. Et les backlinks vers cette page sont partagés entre les 2 URLs. Le moteurs ne garderont dans leur index qu'une des 2 URLs, mais celle-ci ne bénéficiera pas des BLs qui pointent vers l'URL qu'ils élimineront. Il faut donc veiller à être consistant: tu choisis l'URL que tu veux référencer une fois pour toutes, et tu n'utilises que celle-ci pour tes backlinks
Sarc Posté 15 Janvier 2005 Auteur Posté 15 Janvier 2005 Bonsoir Jan et merci de t'être retardé sur mon site J'ai corrigé, j'ai opté pour le lien sans le index.php Par contre, je n'ai pas trouvé comment faire un lien vers le dossier en cours... j'ai essayé <a href="/"> mais il me renvoie a la racine de mon FTP, et non au dossier en cours... Faut faire <a href="../"> ? En tout cas, merci de l'info
Sarc Posté 15 Janvier 2005 Auteur Posté 15 Janvier 2005 Ah bah... oui, effectivement, c'est ça Comme quoi, ce sont les choses les plus bètes qu'on ne sait pas Merci encore Jan !
Monique Posté 15 Janvier 2005 Posté 15 Janvier 2005 Bonjour, Effectivement le site est agréable. Il le serait plus encore si tu augmentais la valeur de line-height pour décoller les éléments de ton menu... la lecture en serait facilitée
Sarc Posté 15 Janvier 2005 Auteur Posté 15 Janvier 2005 Bonjour Monique, J'ai légèrement augmenté le line-height de ul et li, de 12 à 14... J'espère que ça va mieux maintenant ? Y-a-t'il des choses a améliorer pour l'accessibilité aux aveugles par exemple ?
jpv Posté 15 Janvier 2005 Posté 15 Janvier 2005 (modifié) Pour commencer (je n'ai pas tout regardé en détail): Rajouter l'indication de language sur la balise htm : <html lang="fr"> Cela aidera les screen readers à choisir le bon fichier de langue à utiliser. Remplacer les double retours de lignes par des fins de paragraphe, c'est quand même plus logique. Réfléchir à l'utilisation des emphases strong sur les liens du menu. La plupart des screen readers réagissent à ces balises en modifiant le ton de la synthèse vocale, il est donc nécéssaire que leur emploi corresponde à l'indication d'un terme ou d'un passage important ou particulier. Je ne suis pas persuadé que ce soit le cas des terme de ton menu. Si l'effet recherché est purement stylistique il vaudrait mieux employer la propriété CSS font-weight:bold. Il peut être également judicieux d'implémenter des liens de navigation interne, afin de faciliter la navigation dans la structure de la page. Ces liens sont de la forme "aller au contenu", "aller au menu" et pointent sur des ancres. Pour être efficace ces liens doivent être placés au début de la page, si les contraintes de design le justifie il est possible de les déplacer avec des propriétés CSS Ils peuvent en outre correspondrent à des raccourcis clavier déterminés par l'attribut accesskey par exemple : <a href="#contenu" title="Aller au contenu - Accesskey 2">Contenu</a> C'est très intéressant en ce sens que ça aide, non seulement les non-voyants mais aussi tous les utilisateurs de la navigation tabulaire. Le site utilise des illustrations techniques, si cela est pertinent il serait nécessaire d'utiliser un attribut longdesc afin de pouvoir en décrire le contenu. Tu utilises également une présentation animé (principe de la déviation des électrons). Il te faudrait proposer une description textuelle de cette animation comme alternative textuelle pour les non-voyants. Enfin il faudrait "équiper"chaque champ de formulaire l'un label sur le modèle : <label for="nom">Nom</label><input type="text" id="nom"... Le label est un élément important d'un formulaire car il lie l'intitulé à sa valeur, un peut comme scope pour les tables. Bien que le site ne comporte pas beaucoup de page, il serait également interessant de consacrer une page à une carte du site (liste des pages ), sur laquelle tu pourras également indiquer la liste des raccourcis que tu utilise. Et pour terminer prendre soin de vérifier de la cohérence de la navigation tabulaire et implémenter un ordre spécifique si nécessaire. L'ensemble des ces dispositions te permettront d'atteindre WAI/AA, voire AAA dans ton cas car les pages sont simples. JP PS: Petit détail de dernière minute : Sur la page annexes il est indispensable d'indiquer que les liens vont s'ouvrir dans une nouvelle fenêtre par title="Nouvelle fenêtre" afin d'indiquer aux non-voyants qu'ils vont devoir se coltiner la gestion de fenêtre. D'autre part : Cette pratique est fortement déconseillée. Tous les navigateurp propose cette fonctionnalité, c'est mieux de laisser le visiteur décider de ce qu'il veut faire de ton lien.. Modifié 15 Janvier 2005 par jpv
Sarc Posté 15 Janvier 2005 Auteur Posté 15 Janvier 2005 (modifié) Bonjour, Remplacer les double retours de lignes par des fins de paragraphe, c'est quand même plus logique. Bah en fait, j'avais mis un double retour parce que je pensais que ça appartenait quand même à un même paragraphe, malgré une toute petite distance... En fait, je pense que je voulais pas faire de paragraphes d'une ligne, donc rattacher à un autre Il peut être également judicieux d'implémenter des liens de navigation interne, afin de faciliter la navigation dans la structure de la page.Ces liens sont de la forme "aller au contenu", "aller au menu" et pointent sur des ancres. J'ai commencé sur la page sur la luminance mais ça me pose un petit problème : maintenant, le CSS pour les liens:hover ont été rajoutés sur tous les titres... C'est très laid ! Je dois rajouter deux class dans le CSS pour enlever ca, ou il y a un moyen de le faire autrement ? Le site utilise des illustrations techniques, si cela est pertinent il serait nécessaire d'utiliser un attribut longdesc afin de pouvoir en décrire le contenu. Tu viens de m'apprendre un nouvel attribut... Effectivement, ca peut paraitre interessant pour mon site Tu utilises également une présentation animé (principe de la déviation des électrons).Il te faudrait proposer une description textuelle de cette animation comme alternative textuelle pour les non-voyants. Donc faire une page html je suppose ? J'avais seulement mis un lien vers les images... Enfin il faudrait "équiper"chaque champ de formulaire l'un label sur le modèle :<label for="nom">Nom</label><input type="text" id="nom"... Bien que le site ne comporte pas beaucoup de page, il serait également interessant de consacrer une page à une carte du site (liste des pages ), sur laquelle tu pourras également indiquer la liste des raccourcis que tu utilise. Je le fais dès demain ! Et pour terminer prendre soin de vérifier de la cohérence de la navigation tabulaire et implémenter un ordre spécifique si nécessaire. Pardon ? J'ai pas compris ça... :/ L'ensemble des ces dispositions te permettront d'atteindre WAI/AA, voire AAA dans ton cas car les pages sont simples. J'en suis enchanté, mais même Google n'a pas réussi a me l'expliquer convenablement... Il m'a donné Web Accessibility Initiative, et le w3c donne un troisieme logo, a rajouter a xhtml et css lol... Mais ça se valide comment ? le AAA, c'est quoi également ? En tout cas, merci beaucoup pour toutes ces critiques, j'adore quand quelqu'un se prend la peine de lire mon code pour m'apprendre plein de choses... Vraiment, merci Sarc Modifié 15 Janvier 2005 par sarc
jpv Posté 16 Janvier 2005 Posté 16 Janvier 2005 Bah en fait, j'avais mis un double retour parce que je pensais que ça appartenait quand même à un même paragraphe, malgré une toute petite distance... En fait, je pense que je voulais pas faire de paragraphes d'une ligne, donc rattacher à un autre Tu es seul juge de la structure de ton texte, néanmoins si tu es obligé d'utliser deux br successifs, le paragraphe n'est pas loin... J'ai commencé sur la page sur la luminance mais ça me pose un petit problème : maintenant, le CSS pour les liens:hover ont été rajoutés sur tous les titres... C'est très laid ! Je dois rajouter deux class dans le CSS pour enlever ca, ou il y a un moyen de le faire autrement ? Il te faut faire une classe dédiée, soit pour ces liens, soit pour les liens du menu . Ces liens ne répondent pas au "problème" mais garde les ils sont bien pratiques... Les liens de navigation interne sont plutot dédiés à faciliter la navigation entre les grandes parties de la page. Par exemple ton lien "haut depage" est un lien de ce type. L'ideal est de placer, en haut de page des liens d'accès rapide pour toutes les grandes structures de la page. En ce qui te concerne c'est "contenu" et "menu" et d'affecter un attribut accesskey pour crééer un raccourcis clavier. De cette maniere, où qu'il soit, un utilisateur handicapé, particulièrement un handicapé moteur pourra, en utilisant la touche de raccourcis, accéder directement au contenu, par exemple aller directement au menu ce qui lui évitera de devoir passer un à un tous les lien de la page avec la tabulation jusqu'à parvenir à la liste de liens du menu. Tu viens de m'apprendre un nouvel attribut... Effectivement, ca peut paraitre interessant pour mon site L'attribut longdesc, référence un lien vers une page contenant une description textuelle de l'image. Donc c'est de la forme : <img src=""... longdesc="description.htm" /> Mais cet attribut n'étant pas universellement supporté il te faut également le doubler d'un "lien D" qui consiste à répéter le lien vers la page de description juste après l'image. Plus que de grande explication va visiter cette page et ragarder, dans le code et sur la page comme est traité la description alternative des images. Exemple Donc faire une page html je suppose ? J'avais seulement mis un lien vers les images... Absolument de toute manière c'est mieux Ce qu'il te faudra faire c'est implémenter un longdesc et un lien D sur le même modèle que précédemment. Pardon ? J'ai pas compris ça... :/ Cela concerne la tabulation, un utilisateur privé de souris devras pour atteindre un lien particulier utiliser la tabulation. Il faut donc vérifier que les liens de ta page se présente en "ordre logique", ce qui est souvent le cas si la structure de la page est également "logique" et c'est ce qui pose de redoutable problème avec la mise en page par tableau. Si l'ordre que tu obtiens est sstisfaisant tu n'à rien à faire, sinon il te faut déterminer l'ordre toi-même avec l'attribut tabindex surle modèle : <a href=""... tabindex="n" /> Note importante : Cela concerne aussi les champs de formulaire, et plus généralement tout objet sur lequel tu peux obtenir un focus. Le WAI est le département du W3C en charge de la promotion des recommandations et des techniques destinés à faciliter l'accès des contenus électroniques aux handicapés. Pour les contenus web la référence est le WCAG (Web Content Accessibility Guideline) qui date de 1999 Pour te renseigner plus avant sur ces techniques indispensables, tape "accessibilite web" dans google ou consulte le forum accessibilité ici... Ces techniques sont absolument indispensables car internet, représente un enjeux capital autant qu'un outil indispensable pour le confort de vie et l'intégration sociale pour tous ces publics... JP
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant