Je m’étais inscrit il y a déjà quelques temps très longtemps pour suivre les contributions pour la nouvelle version du référent accessibilité pour les sites web édité par Opquast sous la houlette de Elie Sloïm de l’équipe Temesis. Si je connais Opquast depuis son lancement, je me rend compte que je l’ai peu consulté : j’ai l’impression de faire de l’accessibilité comme Jourdain faisait de la prose, mais la plupart du temps, lorsque je prends connaissance d’une bonne pratique, je me rends compte que les miennes sont perfectibles. Vous aussi ? Faites comme moi et commencez donc par télécharger une copie des 217 bonnes pratiques pour la conception de sites web de qualité.

Vidéo de présentation Opquast

Opquast : les bonnes pratiques 2010. Envoyé par Opquast.

217 bonnes pratiques pour mieux «Web développer»

Ces bonnes pratiques sont classées selon une vingtaine de thématiques sur trois niveaux de sensibilité. Elles sont accompagnées d’une courte description menant à une fiche individuelle : numéro, description, date de création, niveau d’automatisation, objectif, solution technique, moyen(s) de contrôle, plus les tags associés.

18 thématiques pour cadrer vos bonnes pratiques

• Alternatives,
• Code,
• Contact,
• Contenus,
• E-commerce,
• Espaces publics,
• Fichiers et multimédia,
• Formulaires,
• Hyperliens,
• Identification,
• Internationalisation,
• Navigation,
• Newsletter,
• Présentation,
• Serveur et performances,
• Syndication,
• Sécurité et confidentialité,
• Tableaux.

Exemples de bonnes pratiques pour l’intégrateur web

Selon votre coeur de métier, il est possible de se concentrer sur les bonnes pratiques liées au design, à l‘intégration HTML/CSS, au référencement, aux contenus ou à l’e-commerce (liste non exhaustive).

• La bonne pratique numéro 206 indique que Le site propose une ou plusieurs feuilles de style dédiées aux terminaux mobiles
• La bonne pratique numéro 194 indique que Les liens d’accès aux versions traduites pointent directement vers la traduction de la page courante.
• La bonne pratique numéro 120 indique que Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.
• La bonne pratique numéro 118 indique que La soumission d’un formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée

Opquast Reporting

L’inscription à Opquast Reporting permet de suivre gratuitement jusqu’à 3 projets de sites web en proposant une liste des bonnes pratiques à cocher au fur et à mesure de l’avancement de la mise en conformité de votre site.

Il est possible d’ajouter des collaborateurs, de rédiger et partager des notes privée ou des documents, ou encore de voir le pourcentage de bonnes pratiques déjà mises en place grâce à une barre de progression.

Une version Pro à partir de 2,5€ par mois vous permettra de suivre jusqu’à 10 projets avec 5 collaborateurs en bénéficiant d’une synthèse détaillée. Voir les autres offres Opquast.

En bref

Opquast est un outil original pour mettre en oeuvre — là tout de suite — les bonnes pratiques qui permettront à tous les visiteurs de profiter de votre site dans les meilleures conditions, à votre rythme et en fonction de vos priorités.

Lire le blog consacré à Opquast pour en savoir plus.

PS : le flux RSS disponible à l’adresse http://checklists.opquast.com/dailybp/feed permet d’afficher une bonne pratique par jour !

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Logo pour les Libres Ballons du Bastberg
• Utiliser les rôles ARIA à la place des identifiants CSS
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Une solution CSS accessible pour remplacer du texte HTML par une image

Les formulaires sont indispensables pour recueillir les informations issues des utilisateurs. Leur mise en place nécessite quelques précautions que nous rappelle bbxdesign avec les 10 bonnes pratiques pour réaliser un formulaire d’après la conférence de Luke Wrobleski.

1. Aller droit au but (Path to completion),
2. Alignement des labels (Label alignment),
3. Aide et astuces (Help & tips),
4. Validation (Inline validation),
5. Actions primaires et secondaires (Primary & Secondary actions),
6. Actions en cours (Actions in progress),
7. Erreurs (Errors),
8. Input inutiles (Unnecessary inputs),
9. Organisation du formulaire (Form organization),
10. Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
• Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Articles sur le même sujet

• Aligner le contenu d'un champ input avec le label associé
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Classes CSS générées par WordPress pour les images