background preloader

Accessibilité et standards web

Facebook Twitter

Interopérabilité. Un article de Wikipédia, l'encyclopédie libre. L'interopérabilité est la capacité que possède un produit ou un système, dont les interfaces sont intégralement connues, à fonctionner avec d'autres produits ou systèmes existants ou futurs et ce sans restriction d'accès ou de mise en œuvre. Il convient de distinguer « interopérabilité » et « compatibilité ». Pour être simple, on peut dire que la compatibilité est une notion verticale qui fait qu'un outil peut fonctionner dans un environnement donné en respectant toutes les caractéristiques et l'interopérabilité est une notion transversale qui permet à divers outils de pouvoir communiquer - quand on sait pourquoi, et comment, ils peuvent fonctionner ensemble.

Autrement dit, on ne peut parler d'interopérabilité d'un produit ou d'un système que si on connaît intégralement toutes ses interfaces. Un exemple de systèmes interopérables est le téléphone. Toutes les interfaces sont des normes gérées par l'UIT-T. Voir infra. Openweb.eu.org. Débutant. SubResource Integrity Le Web devient une plateforme de plus en plus complète, et sa globalisation ou certains aspects de sa distribution (notamment via des CDNs) posent de nouvelles questions de sécurité. Qu’à cela ne tienne, de nouvelles spécifications offrent de nouvelles réponses à ces questions. Celle qui va être présentée dans cet article se nomme SubResource Integrity. Humeur : chers services tiers, et si vous vous associez à nous ? Ou : de l’importance de ne « pas trop déconner ». Explications. La troisième guerre des navigateurs est terminée et c’est un bain de sang DRY approaches: don’t repeat yourself DRY – don’t repeat yourself – is one of the basic principles of programming.

Question is: how can we think DRY with a language which does not have variables or functions? Think outside of the box “Think outside of the box”: here is an enigmatic title! Establishing CSS conventions and documenting them Why not apply this concept to CSS conception ? Orthogonality with CSS Basic CSS principles. Respecter la sémantique XHTML. Pourquoi et comment utiliser les balises (X)HTML à bon escient. La sémantique des balises Le (X)HTML définit de nombreuses balises. Chacune de ces balises est destinée à indiquer la nature du contenu qu'elle encadre (c'est le cas pour les versions strictes du HTML et du XHTML, leurs autres versions ayant d'autres balises pour spécifier l'apparence du contenu).

C'est ce qu'on appelle la sémantique. Nous avons ainsi des balises pour indiquer un titre (h1, h2…) ; des balises pour indiquer des listes (ul, ol,…) ; des balises pour indiquer un paragraphe (p), une citation (blockquote), un tableau de données (table), un bloc regroupant plusieurs contenus (div), etc. Pourquoi est-ce si important ? Respecter la sémantique des balises, donc encadrer un contenu avec la balise adéquate, permet tout d'abord de structurer le document correctement, indépendamment de la forme qu'il va prendre. Prenons l'exemple des titres. Et cet exemple avec les titres est valable pour toutes les balises. Pourquoi Lynx ? DOM. Adaptive Images and Responsive Web Design Cédric Morin makes a ready-to-use solution solving Adaptive Images issue, that fits well with dynamic websites (one more solution, yeah): this solution is not trivial, but is designed to be automated. Adaptive Images et Responsive Web Design Cédric Morin étudie une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui).

Cette solution est complexe, mais est prévue pour être complètement automatisable (comprenez industrialisable). CaenJS, retour d’expérience Tout le collectif OpenWeb se félicite d’apprendre que de nouveaux événements francophones voient le jour. Les attributs async et defer pour script Les Performances web, pour aller plus loin Dans Introduction à la performance web, les bases des bonnes pratiques et des enjeux de la performance web ont été posées.

Introduction à la performance Web Validation avancée des formulaires Mais avant de commencer, que devons nous savoir : Semantic data extractor - QA @ W3C. FAQ [French Translation] Spécifications et normes Web. World Wide Web Consortium - Web Standards. Web Hypertext Application Technology Working Group. (X)HTML. Intégration web, les bonnes pratiques Une fois n’est pas coutume, nous reproduisons ici la préface du livre « Intégration Web, les bonnes pratiques » avec l’accord de l’auteure Corinne Schillinger. Cette préface a été écrite par deux de nos membres, à savoir Élie Sloim et Laurent Denis. Nous ne saurions que trop vous recommander de lire cet excellent ouvrage, ainsi que de savourer toute l’essence et l’évolution du métier de développeur front-end que cette préface relate.

HTML Media Capture Parmi les nombreuses nouvelles API d’HTML5, une en particulier est particulièrement simple à mettre en place et permet des choses plutôt sympathiques : HTML Media Capture. Mieux comprendre l’écosystème autour du développement de HTML Plusieurs annonces à propos d’HTML5 ont été relayées et ont semé le trouble ainsi qu’une certaine inquiétude dans l’écosystème du Web et même dans les médias classiques. De l’intégrateur au développeur front-end : un maillon essentiel de la qualité Web. Liberté ! Egalité ! Validité ! Comme une nation ou un bâtiment, une page divisée et mal structurée ne tient pas longtemps, tout du moins dans un navigateur conforme aux standards.

Chaque page a sa structure, et il se trouve que si l'on ne fait pas attention aux méthodes de construction, la structure sera affaiblie, et potentiellement dangereuse. Si, après avoir chargé une page dans Opera, Netscape 6/7 ou encore Internet Explorer, son affichage est catastrophique, c'est très certainement parce que sa structure n'est pas correcte. Imaginons que l'on construit une maison sur des fondations en sable ou avec des poutres en caoutchouc... La plupart des gens ne s'inquiètent pas de ce genre de choses. Alors comment peut-on s'assurer de construire une web-maison solide ?

Votre mission est simple : modifier votre page pour qu'elle passe dans le Validateur sans générer de message d'erreur. Les messages se rapportant aux éléments . Les messages se rapportant aux attributs . DOCTYPE et la validation Les problèmes courants. Se mettre aux standards du web. Introduction Nous allons voir ensemble comment rendre un site existant conforme aux standards, en prenant une page non conforme, et en la transformant pour obtenir une page respectant les standards et ainsi apprendre concrètement l'intérêt de ce développement. Vous aurez à la fin, j'espère, oublié toutes vos mauvaises vieilles habitudes de codage. Dans ce tutoriel, des techniques de développement avec des feuilles de styles CSS sont utilisées. Il se peut qu'il y ait d'autres techniques CSS, plus optimisées que celles décrites ici (en matière de positionnement notamment) pour faire la même chose, voire mieux.

Mais le but principal de ce tutoriel est de montrer les alternatives aux méthodes « anciennes » de construction de page (méthodes qui ne permettent pas d'avoir un site léger, accessible, etc). Analyse de la page actuelle J'ai pris comme exemple la page « présentation » du site d'un ami. Voici comment est construite la page actuelle : Choix pour la nouvelle page Principales modifications.

The W3C Markup Validation Service. XHTML 1.0 : Le langage de balisage hypertexte extensible. Cette spécification a été traduite par Karl Dubost, Normandie Web (karl+misc@la-grange.net) dans une démarche volontaire. Toute amélioration est la bienvenue. François Yergeau (yergeau@alis.com) pour la correction des détails. La version française de cette traduction est : Traducteur : Karl Dubost - <karl+misc@la-grange.net> François Yergeau <yergeau@alis.com> pour la correction des détails.

Résumé Cette spécification définit XHTML 1.0, comme une reformulation de HTML 4 en une application XML 1.0, et trois DTDs correspondant àcelles définies par HTML 4. Statut de ce document Cette section décrit le statut de ce document à la date de sa publication. Ce document a été validé par les membres du W3C ainsi que par d'autres organismes et a été approuvé par le Directeur comme une recommandation. Ce document a été produit comme une partie de l'Activité HTML du W3C. Faites part des erreurs de ce document à www-html-editor@w3.org. Sommaire 1.1 Qu'est-ce que HTML 4 ? CSS. Ce que vous avez toujours voulu savoir sur CSS Adaptive Images and Responsive Web Design Cédric Morin makes a ready-to-use solution solving Adaptive Images issue, that fits well with dynamic websites (one more solution, yeah): this solution is not trivial, but is designed to be automated.

Adaptive Images et Responsive Web Design Cédric Morin étudie une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui). Cette solution est complexe, mais est prévue pour être complètement automatisable (comprenez industrialisable). Intégration web, les bonnes pratiques Une fois n’est pas coutume, nous reproduisons ici la préface du livre « Intégration Web, les bonnes pratiques » avec l’accord de l’auteure Corinne Schillinger. Rétablissons l’outline Un point extrêmement simple à gérer en matière d’accessibilité mais tellement important pour certaines personnes est souvent oublié, ce point s’appelle… la visibilité du focus clavier. The W3C CSS Validation Service. RSS. Comment construire un flux Atom ?

Les flux de sites Web (RSS, Atom) sont utilisés afin de suivre l’actualité de nombreux sites Web. Ils sont pratiques pour les personnes individuelles afin de suivre un grand nombre de sites Web à la fois et permet aux propriétaires de sites de distribuer l’information dans un format contraint. Nous allons voir comment construire un flux Atom solide. Syndication my love Web technologies that are open, practical and useful are rare and valuable.

At Openweb, we’re fond of them and we campaign for their dissemination. Syndication mon amour Les technologies Web à la fois ouvertes, pratiques et utiles sont rares et précieuses. Indiquer la fréquence de mise à jour d’un fil de syndication au format RSS Les fils de syndication, et particulièrement ceux au format RSS, connaissent un succès chaque jour croissant. Construction d’un fil RSS 1.0 Pas à pas, comment construire un fil RSS au format RDF Site Summary 1.0. Introduction à la syndication de contenu avec RSS. W3C Feed Validation Service, for Atom and RSS. French Translations of W3C Documents. Accessibilité du Web. Un article de Wikipédia, l'encyclopédie libre. L'accessibilité du web est la problématique de l'accès aux services et contenus en ligne non seulement pour les handicapés et les seniors, mais aussi de manière plus générale pour tous les utilisateurs qui ne disposent pas du confort offert par un ordinateur de bureau situé dans une pièce tranquille[W3C 1].

En effet son application concerne également les utilisateurs « normaux » placés dans des situations moins confortables comme avec un téléphone mobile, une tablette[W3C 2]… ou placés en situation particulière de bruit, de dimension d’affichage, etc. Définie par des normes techniques établies par la Web Accessibility Initiative (WAI) du World Wide Web Consortium (W3C), elle nécessite un traitement tout au long du cycle de vie d'un site web, par l'ensemble de ses acteurs, via des méthodes d'applications, des référentiels métiers et une démarche de suivi. Champ de l'accessibilité[modifier | modifier le code] Groupe de travail sur l'interopérabilité. « Quiconque appose sur une page du web un logo du type : Cette page est optimisée pour le navigateur X est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte, ou un autre réseau. »- Tim Berners-Lee dans Technology Review, Juillet 1996 Définitions L’interopérabilité est la capacité que possède un produit ou un système, dont les interfaces sont intégralement connues, à fonctionner avec d'autres produits ou systèmes existants ou futurs et ce sans restriction d'accès ou de mise en œuvre - Définition issue des travaux du groupe de travail Interop de l'AFUL.

Degrés d'opérabilité Compatibilité La compatibilité est la possibilité pour deux systèmes de types différents de communiquer ensemble. Standard de fait Lorsqu'un acteur devient dominant dans un domaine, les autres acteurs font en sorte d'être compatibles avec lui. Interopérabilité Présentation. POMPAGE - Évaluer l'accessibilité d'un site web, première partie.

Par Roger Johansson Cet article est le premier d'une série de trois publiée sur Pompage. Il est devenu obligatoire, dans un nombre sans cesse croissant de pays, que les sites du service public respectent les standards et les normes d'accessibilité. En conséquence, il est donc nécessaire que les responsables du développement et de la mise à jour de ces sites soient capables d'en assurer et d'en évaluer l'accessibilité. Nombreux sont ceux, développeurs web et propriétaires de sites, qui découvrent l'accessibilité et la trouvent difficile à évaluer. Le but de cette série de trois articles est de leur apprendre à effectuer les contrôles de base. Cette série est composée des articles suivants : L'examen des différents points décrits dans cette série ne dispense pas de réaliser des tests avec des utilisateurs de lecteurs d'écran et autres technologies d'assistance. Quelques notions Une définition courante de l'accessibilité est l'accès au Web par tous, indépendamment de toute invalidité.

POMPAGE - Évaluer l'accessibilité d'un site web, deuxième partie. Par Roger Johansson Cet article est le deuxième d'une série de trois publiée sur Pompage. Ceci est le deuxième article d'une série de trois où il est expliqué comment évaluer l'accessibilité d'un site web. Je vous recommande si ce n'est déjà fait la lecture du premier volet, Évaluer l'accessibilité d'un site web, première partie : Les préliminaires avant de poursuivre votre lecture, afin que vous disposiez des connaissances et outils nécessaires au cours de cet article. Les points de contrôle présentés dans cet article détaillent plusieurs aspects de l'accessibilité pouvant être évalués automatiquement, ou relativement aisés à vérifier manuellement.

Une procédure d'évaluation d'accessibilité complète est plus approfondie et demande de contrôler plus de points, dont plusieurs seront décrits dans le troisième article de cette série. 1. Utilisez les validateurs du W3C pour vérifier que le HTML et les CSS sont valides. Vous pouvez évidemment utiliser les outils en ligne du W3C : Pourquoi ? 2. POMPAGE - Évaluer l'accessibilité des sites web 3ème partie, All. Par Roger Johansson Dans Évaluer l'accessibilité des sites web 1ère partie, Préliminaires, je fournis quelques notions et outils utiles lors d'une évaluation.

Dans le deuxième article de cette série, Évaluer l'accessibilité des sites web 2ème partie, Les points de contrôle de base, j'explique les aspects de l'accessibilité qui peuvent être testés avec des outils automatisés comme avec des contrôles manuels relativement simples. Ce dernier article présente les points difficiles à tester à l'aide d'outils automatisés et nécessitant plus de temps et/ou d'expérience pour une évaluation manuelle. Je pars du principe que vous avez déjà lu les deux articles précédents, si vous ne l'avez pas déjà fait veuillez le faire avant de commencer.

Cet article couvre les points suivants: 1. Pour s'assurer que les couleurs d'arrière-plan et de premier plan contrastent suffisamment en teinte et luminosité, l'excellent évaluateur de contraste de Jonathan Snook se révèle très pratique. Pourquoi ? 2. Pourquoi ? 10 raisons pour ignorer l'accessibilité - Pompage. Accessibilité numérique - forx.fr. Lettre sur les aveugles à l’usage de ceux qui voient - Wikisourc. Web Accessibility Initiative (WAI) - home page. WCAG 2.0 est sorti. Web Content Accessibility Guidelines (WCAG) 2.0.

Accessibilité. Directives pour l'accessibilité aux contenus Web (version 1.0) Wave by WebAIM. Level A Conformance to. Web Content Accessibility Guidelines 1.0. AFUL - Touches d'accès. Accesskey, l'essai non transformé de l'accessibilité - Openweb.e. Standards. Pompage - Tous les articles par thème.