Une liste de contrôle de normes de Web, comment faire un site Web approprié

Une liste de contrôle de normes de Web, comment faire un site Web approprié

 

Une liste de contrôle de normes de Web :

Les normes de Web de limite peuvent signifier différentes choses aux personnes différentes. Pour certains, c'est "les emplacements table-libres ", parce que d'autres il est "utilisant le code valide ". Cependant, les normes de Web sont beaucoup plus larges que celle. Un emplacement construit aux normes de Web devrait adhérer aux normes (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc.) et poursuivre les pratiques (code valide, code accessible, sémantiquement code correct, URL faciles à utiliser etc.).

En d'autres termes, un emplacement construit aux normes de Web devrait idéalement être maigre, propre, CSS-basé, accessible, et utilisable et Search Engine amicaux.

Au sujet de la liste de contrôle

Ce n'est pas une uber-liste de contrôle. Il y a probablement beaucoup d'articles qui pourraient être ajoutés. D'une manière primordiale, il ne devrait pas voir comme liste d'articles qui doivent être adressés sur chaque emplacement que vous développez. C'est simplement un guide qui peut être employé :

  • Pour montrer la largeur des normes de Web
  • Comme un outil maniable pour des réalisateurs pendant la phase de production des sites Web
  • Comme aide pour les lotisseurs qui sont intéressés à se déplacer vers des normes de Web

La liste de contrôle :

  • Qualité de code :
    1. L'emplacement emploie-t-il un Doctype correct ?
    2. L'emplacement emploie-t-il un jeu de caractères ?
    3. L'emplacement emploie-t-il (X) le HTML valide ?
    4. L'emplacement emploie-t-il le CSS valide ?
    5. L'emplacement emploie-t-il des entailles de CSS ?
    6. L'emplacement emploie-t-il les classes ou les ids inutiles ?
    7. Le code puits est-il structuré ?
    8. L'emplacement a-t-il des liens cassés ?
    9. Comment l'emplacement exécute-t-il en termes de vitesse/taille de page ?
    10. L'emplacement a-t-il des erreurs de Javascript ?
  • Degré de séparation entre le contenu et la présentation :
    1. L'emplacement emploie-t-il le CSS pour tous les aspects de présentation (polices, couleur, remplissage, frontières etc.) ?
    2. Est-ce que tous des images décoratives dans le CSS, ou ils apparaissent sont dans (X) le HTML ?
  • Accessibilité pour des utilisateurs :
    1. Est-ce que attributs de "alt " sont employés pour toutes les images descriptives ?
    2. L'emplacement emploie-t-il les unités relatives plutôt que les unités absolues pour la taille des textes ?
    3. Est-ce que aspects de la disposition se cassent si la taille de police est augmentée ?
    4. L'emplacement emploie-t-il les menus évidents de saut ?
    5. L'emplacement emploie-t-il les formes accessibles ?
    6. L'emplacement emploie-t-il les tables accessibles ?
    7. Y a-t-il éclat/contrastes suffisants de couleur ?
    8. La couleur est-elle seule a-t-elle employé pour l'information critique ?
    9. Y a-t-il réponse retardée pour les menus dropdown (pour des utilisateurs avec des habiletés motrices réduites) ?
    10. Tous les liens sont-ils descriptifs (pour les utilisateurs aveugles) ?
  • Accessibilité pour des dispositifs :
    1. L'emplacement fonctionne-t-il acceptablement à travers les navigateurs modernes et plus âgés ?
    2. Est-ce que contenu accessible avec le CSS commuté au loin ou n'est pas soutenu ?
    3. Est-ce que contenu accessible avec des images commutées au loin ou n'est pas soutenu ?
    4. L'emplacement fonctionne-t-il en explorateurs de textes tels que Lynx ?
    5. L'emplacement fonctionne-t-il bien une fois imprimé ?
    6. L'emplacement fonctionne-t-il bien dans des dispositifs tenus dans la main ?
    7. L'emplacement inclut-il des méta-données détaillées ?
    8. L'emplacement fonctionne-t-il bien dans une gamme des tailles de fenêtre de navigateur ?
  • Rentabilité de base :
    1. Y a-t-il une hiérarchie visuelle claire ?
    2. Des niveaux de titre il est-il facile distinguer ?
    3. L'emplacement a-t-il facile de comprendre la navigation ?
    4. L'emplacement emploie-t-il à navigation conformée ?
    5. Est-ce que liens sont soulignés ?
    6. L'emplacement emploie-t-il la langue conformée et appropriée ?
    7. Est-ce que vous avez une page de sitemap et entrez en contact avec la page ? Il est-les facile trouver ?
    8. Pour de grands emplacements, y a-t-il un outil de recherche ?
    9. Y a-t-il un lien à la page d'accueil à chaque page dans l'emplacement ?
    10. Les liens visités sont-ils bien définis avec une couleur unique ?
  • Gestion d'emplacement :
    1. L'emplacement a-t-il une page signicative et utile de 404 erreurs qui fonctionne de n'importe quelle profondeur dans l'emplacement ?
    2. L'emplacement emploie-t-il les URL amicaux ?
    3. Vos URL fonctionnent-ils sans "WWW " ?
    4. L'emplacement a-t-il un favicon ?

1. Qualité de code

1.1 L'emplacement emploie-t-il un Doctype correct ? :
Un doctype (abréviation "type déclaration de document ") informe le Validator quelle version (X) de HTML vous employez, et doit apparaître au dessus même de chaque page Web. Doctypes sont une composante clé des pages Web conformes : votre marge bénéficiaire bénéficiaire et CSS ne valideront pas sans eux.

1.2 L'emplacement emploie-t-il un jeu de caractères ? :
Si un agent d'utilisateur (par exemple un navigateur) ne peut pas détecter le codage de caractère utilisé dans un document de Web, l'utilisateur peut être présenté avec le texte illisible. Cette information est particulièrement importante pour ceux qui maintiennent et qui prolongent un emplacement multilingue, mais la déclaration du codage de caractère du document est importante pour n'importe qui qui produit XHTML/HTML ou CSS.

1.3 L'emplacement emploie-t-il (X) le HTML valide ? :
Le code valide rendra plus rapidement que le code avec des erreurs. Le code valide rendra le code mieux qu'inadmissible. Les navigateurs deviennent plus de normes conformes, et il devient de plus en plus nécessaire d'écrire valide et des normes HTML conforme.

1.4 L'emplacement emploie-t-il le CSS valide ? :
Vous devez s'assurer qu'il n'y a pas aucune erreur dans votre HTML ou votre CSS, puisque les erreurs dans l'un ou l'autre endroit peuvent avoir comme conséquence l'aspect bousillé de document.

1.5 L'emplacement emploie-t-il des entailles de CSS ? :
Fondamentalement, les entailles descendent au choix personnel, la quantité de la connaissance que vous avez des contournements, la conception spécifique vous essayez de réaliser.

1.6 L'emplacement emploie-t-il les classes ou les ids inutiles ? :
J'ai noté que les réalisateurs apprenant de nouvelles qualifications finissent souvent vers le haut avec le bon CSS mais le XHTML pauvre. Spécifiquement, le code de HTML tend à être plein des divs et des ids inutiles. Ceci a comme conséquence le HTML assez sans signification et les feuilles de modèle gonflées.

1.7 Le code puits est-il structuré ? :
Sémantiquement le marge bénéficiaire bénéficiaire correct emploie des éléments de HTML pour leur but donné. Le HTML structuré par bien a la signification sémantique pour un éventail d'agents d'utilisateur (navigateurs sans feuilles de modèle, explorateurs de textes, PDAs, moteurs etc. de recherche)

1.8 L'emplacement a-t-il des liens cassés ? :
Les liens cassés peuvent frustrer des utilisateurs et potentiellement conduire des clients loin. Les liens cassés peuvent également garder des moteurs de recherche d'indexer correctement votre emplacement.


1.9 Comment l'emplacement exécute-t-il en termes de vitesse/taille de page ? :
Ne me faites pas l'attente… C'est les utilisateurs de message nous donnent dans l'aperçu après aperçu. Même les utilisateurs à bande large peuvent souffrir les bleus de lent-chargement.

1.10 L'emplacement a-t-il des erreurs de Javascript ? :
L'Internet les explorent pour Windows te permet de mettre en marche un programme de mise au point qui sautera vers le haut une nouvelle fenêtre et faites-vous savoir là sont des erreurs de Javascript sur votre emplacement. C'est disponible sous des "options d'Internet " sur la tableau avancée Uncheck "l'élimination des imperfections de manuscrit de débronchement ".

2. Degré de séparation entre le contenu et la présentation

2.1 L'emplacement emploie-t-il le CSS pour tous les aspects de présentation (polices, couleur, remplissage, frontières etc.) ?
Employez les feuilles de modèle pour commander la disposition et la présentation.

2.2 Est-ce que tous des images décoratives dans le CSS, ou ils apparaissent sont dans (X) le HTML ?
Le but pour des réalisateurs de Web est d'enlever toute la présentation du code de HTML, la laissant propre et sémantiquement correct.

3. Accessibilité pour des utilisateurs

3.1 Est-ce que attributs de "alt " sont employés pour toutes les images descriptives ?
Fournissez un texte équivalent pour chaque élément de non-texte

3.2 L'emplacement emploie-t-il les unités relatives plutôt que les unités absolues pour la taille des textes ?
Employez le parent plutôt que les unités absolues en valeurs d'une propriété de valeurs d'attribut de langage de balisage et de feuille de modèle.

3.3 Est-ce que aspects de la disposition se cassent si la taille de police est augmentée ?
Essayez cet essai simple. Regardez votre site Web dans un navigateur qui soutient l'augmentation facile de la taille de police. Augmentez maintenant la taille de police de votre navigateur. Et encore. Et encore… Regardez votre emplacement. La disposition de page lie-t-elle toujours ? Il est dangereux que les réalisateurs supposent que chacun passe en revue utilisant des tailles de police de défaut.

3.4 L'emplacement emploie-t-il les menus évidents de saut ?

Une méthode sera à condition que les utilisateurs de laisux pour sauter la navigation réitérée lie.

Groupez les liens relatifs, identifiez le groupe (pour des agents d'utilisateur), et, jusqu'à ce que les agents d'utilisateur fassent ainsi, pour fournir une manière d'éviter le groupe.
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

… les visiteurs aveugles ne sont pas les seuls gênés par trop de liens dans un secteur de navigation. Rappelez-vous qu'une personne mobilité-altérée avec la technologie adaptative pauvre pourrait être tabulation coincée par ce fatras.

3.5 L'emplacement emploie-t-il les formes accessibles ?
Il n'est pas la plus facile des choses employer des formes pour des personnes handicapées. La navigation autour d'une page avec le contenu écrit est une chose, sauter à cloche-pied entre la forme met en place et l'entrée de l'information est une autre.

3.6 L'emplacement emploie-t-il les tables accessibles ?
Pour des tables de données, identifiez la rangée et les en-têtes de colonne… Pour les tables de données qui ont des niveaux deux ou plus logiques de rangée ou d'en-têtes de colonne, marge bénéficiaire bénéficiaire d'utilisation pour associer des cellules de mémoires à feulliets et des cellules d'en-tête.

3.7 Y a-t-il éclat/contrastes suffisants de couleur ?
Assurez-vous que les combinaisons de couleur de premier plan et de fond fournissent le contraste suffisant une fois vues par quelqu'un qui a des déficits de couleur.

3.8 La couleur est-elle seule a-t-elle employé pour l'information critique ?
Assurez-vous que toute l'information donnée avec la couleur est également disponible sans couleur, par exemple de contexte ou de marge bénéficiaire bénéficiaire.

Il y a fondamentalement trois types d'insuffisance de couleur ; Déficit de Deuteranope (une forme de déficit couleur rouge/verte), de Protanope (une autre forme de déficit couleur rouge/verte) et de Tritanope (un bleu/jaune très rare).

3.9 Y a-t-il réponse retardée pour les menus dropdown ?
Les utilisateurs avec des habiletés motrices réduites peuvent trouver les menus dropdown durs pour employer si la réponse est placée trop rapide.

3.10 Tous les liens sont-ils descriptifs ?
Le texte de lien devrait être assez signicatif pour sembler raisonnable une fois lu hors du contexte - seule ou en tant qu'élément d'un ordre des liens. Le texte de lien devrait également être laconique.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

4. Accessibilité pour des dispositifs.

4.1 L'emplacement fonctionne-t-il acceptablement à travers les navigateurs modernes et plus âgés ?

Avant de commencer à établir une disposition CSS-basée, vous devriez décider quels navigateurs à soutenir et à quel niveau vous avez l'intention de les soutenir.
http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Est-ce que contenu accessible avec le CSS commuté au loin ou n'est pas soutenu ?
Certains peuvent visiter votre emplacement avec le l'un ou l'autre un navigateur qui ne soutient pas le CSS ou un navigateur avec le CSS coupé. Dans le contenu est structuré bien, ceci ne sera pas une issue.

4.3 Est-ce que contenu accessible avec des images commutées au loin ou n'est pas soutenu ?
Certains passent en revue des sites Web avec - particulièrement les personnes au loin commutées par images sur les raccordements très lents. Le contenu devrait encore être accessible à ces personnes.

4.4 L'emplacement fonctionne-t-il en explorateurs de textes tels que Lynx ?
C'est comme une combinaison des images et du CSS coupés. Un navigateur basé par texte comptera sur le contenu bien structuré pour fournir la signification.

http://www.delorie.com/web/lynxview

4.5 L'emplacement fonctionne-t-il bien une fois imprimé ?
Vous pouvez prendre n'importe quel (X) document de HTML et simplement le dénommer pour la copie, sans devoir toucher le marge bénéficiaire bénéficiaire.

4.6 L'emplacement fonctionne-t-il bien dans des dispositifs tenus dans la main ?
C'est dur à traiter jusqu'à ce que les dispositifs tenus dans la main soutiennent uniformément leur type de supports correct. Cependant, quelques dispositions fonctionnent mieux dans des dispositifs tenus dans la main courants. L'importance de soutenir les dispositifs tenus dans la main dépendra des publics cibles.

4.7 L'emplacement inclut-il des méta-données détaillées ?
Les méta-données sont l'information compréhensible de machine pour le Web
http://www.w3.org/Metadata/

Les méta-données sont l'information structurée qui est créée spécifiquement pour décrire une autre ressource. En d'autres termes, les méta-données sont des "données au sujet des données ".

4.8 L'emplacement fonctionne-t-il bien dans une gamme des tailles de fenêtre de navigateur ?
C'est une prétention commune parmi des réalisateurs que les tailles d'écran moyennes augmentent. Quelques lotisseurs supposent que la taille d'écran moyenne est maintenant 1024px au loin. Mais que diriez-vous des utilisateurs avec de plus petits écrans et des utilisateurs avec les dispositifs tenus dans la main ? Sont-ils une partie de votre public cible et sont-ils étés désavantagés ?

5. Rentabilité de base

5.1 Y a-t-il une hiérarchie visuelle claire ?
Organisez et donnez la priorité au contenu d'une page en employant la taille, la proéminence et les rapports contents.
http://www.great-web-design-tips.com/web-site-design/165.html

5.2 Des niveaux de titre il est-il facile distinguer ?
Employez les éléments d'en-tête pour donner la structure de document et pour les employer selon des spécifications.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

5.3 La navigation de l'emplacement il est-il facile comprendre ?
Votre système de navigation devrait donner à votre visiteur un indice quant à quelle page de l'emplacement ils sont actuellement dessus et où ils peuvent aller après.
http://www.1stsitefree.com/design_nav.htm

5.4 La navigation de l'emplacement est-elle conformée ?
Si chaque page sur votre emplacement a un modèle cohérent de présentation, les visiteurs le trouveront plus facile de diriger entre les pages et de trouver des informations
http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 L'emplacement emploie-t-il la langue conformée et appropriée ?
L'utilisation du langage clair et simple favorise la communication efficace. L'essai de trouver aussi articulé peut être comme difficile à lire en tant que grammaire mal écrite, particulièrement si la langue utilisée n'est pas la langue primaire du visiteur.
http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Est-ce queemplacement a une page de sitemap et entre en contact avec la page ? Il est-les facile trouver ?
La plupart des cartes d'emplacement ne donnent pas les niveaux multiples de l'architecture de l'information de l'emplacement. Dans des essais de rentabilité, les utilisateurs souvent donnent sur des cartes d'emplacement ou ne peuvent pas les trouver. La complexité est également un problème : une carte devrait être une carte, pas un défi de navigation de ses propres.
http://www.useit.com/alertbox/20020106.html

5.7 Pour de grands emplacements, y a-t-il un outil de recherche ?
Tandis que les outils de recherche ne sont pas nécessaires sur de plus petits emplacements, et certains ne les emploieront pas jamais, les outils emplacement-spécifiques de recherche permettent à des utilisateurs un choix des options de navigation.

5.8 Y a-t-il un lien à la page d'accueil à chaque page dans l'emplacement ?
Certains utilisateurs aiment retourner à la page d'accueil d'un emplacement après la navigation à contenter dans un emplacement. La page d'accueil devient un camp de base pour ces utilisateurs, leur permettant de regrouper avant d'explorer le nouveau contenu.

5.9 Est-ce que liens sont soulignés ?
Pour maximiser l'affordance perçu du clickability, colorez et soulignez le texte de lien. Les utilisateurs ne devraient pas devoir deviner ou frotter la page pour découvrir où ils peuvent cliquer sur.
http://www.useit.com/alertbox/20040510.html

5.10 Les liens visités sont-ils bien définis ?
Le plus important, connaître quelles pages ils ont déjà visitées libère des utilisateurs de revisiter involontairement les mêmes pages maintes et maintes fois.
http://www.useit.com/alertbox/20040503.html

6. Gestion d'emplacement

6.1 L'emplacement a-t-il une page signicative et utile de 404 erreurs qui fonctionne de n'importe quelle profondeur dans l'emplacement ?
Vous avez demandé une page - en dactylographiant un URL directement dans la barre d'adresse ou en cliquant sur sur un lien et vous démodés se sont trouvés au milieu du Cyberspace nulle part. Un site Web facile à utiliser te donnera un coup de main tandis que beaucoup d'autres ne feront simplement rien, se fondant sur la capacité intégrée du navigateur d'expliquer ce qu'est le problème.
http://www.alistapart.com/articles/perfect404/

6.2 L'emplacement emploie-t-il les URL amicaux ?
La plupart des moteurs de recherche (à quelques exceptions - à savoir Google) n'indexeront aucune page qui ont un point d'interrogation ou tout autre caractère (comme une esperluète ou un signe d'égales) dans l'URL… quel bon est un emplacement si personne ne peuvent le trouver ?
http://www.sitepoint.com/article/search-engine-friendly-urls

Un des plus mauvais éléments du Web d'un point de vue d'interface utilisateurs est l'URL. Cependant, s'ils sont courts, logiques, et autocorrecteurs, les URL peuvent être acceptablement utilisables.

6.3 L'URL de l'emplacement fonctionne-t-il sans "WWW " ?
Tandis que ce n'est pas critique, et n'est pas dans certains cas même possible, il est toujours bon de donner aux gens le choix des deux options. Si les types d'utilisateur votre Domain Name sans WWW et n'obtient aucun emplacement, ceci pourrait désavantager l'utilisateur et vous.

6.4 L'emplacement a-t-il un favicon ?
Un Favicon est une image de multi-résolution incluse sur presque tous les emplacements professionnellement développés. Le Favicon permet au webmaster de favoriser plus loin leur emplacement, et de créer un aspect plus adapté aux besoins du client chez le navigateur d'un visiteur.
http://www.favicon.com/

Favicons ne sont certainement pas critique. Cependant, s'ils ne sont pas présents, ils peuvent causer 404 erreurs dans vos notations (statistiques d'emplacement). Les navigateurs comme l'IE les demanderont du serveur quand un emplacement bookmarked. Si un favicon n'est pas disponible, une erreur 404 peut être produite. Par conséquent, avoir un favicon a pu réduire des erreurs du détail 404 de favicon. Le même est vrai d'un dossier de "robots.txt ".