background preloader

Bien utiliser le texte alternatif

Bien utiliser le texte alternatif
Par WebAIM Donner aux images un texte alternatif est la première chose à faire pour l'accessibilité. C'est également l'une des plus difficiles à bien faire. Contenu de l'article Les bases du texte alternatif Le texte alternatif offre une alternative textuelle au contenu non textuel d'une page web. Le texte alternatif a plusieurs rôles : Il est annoncé par les logiciels de revue d'écran, à la place de l'image, rendant le contenu ou la fonction de l'image accessibles aux utilisateurs ayant des troubles visuels ou cognitifs. La nécessité du texte alternatif vient du fait que les ordinateurs et logiciels de revue d'écran ne peuvent pas analyser les images et déterminer ce qu'elles représentent. Le texte alternatif peut être présent de deux manières : Dans l'attribut alt de la balise img. L'attribut alt (parfois appelé balise alt, bien que ce soit techniquement incorrect) n'est donc pas le seul mécanisme permettant de fournir le contenu et la fonction de l'image. Important Note Exemple 1 Exemple 2

OpenClassrooms - Faire un site web accessible Nous avons vu précédemment pourquoi il est nécessaire de rendre son site accessible, voyons donc maintenant comment le faire. Pour cela, je vous propose de vous poser quelques questions (certaines questions proviennent de pompage.net (fr).) Le langage est-il facile à comprendre ? Rendre son site accessible, c'est commencer par le normer pour qu'il puisse être interprété de manière similaire par tous les logiciels qui exécuteront vos pages (comme par exemple les nouveaux appareils connectés au web qui ne sont pas des PC). En effet, si vos scripts ne respectent pas ces normes, les navigateurs auront du mal à réorganiser votre site de la même façon que vous pensiez l'avoir fait. Pour cela, outre la nécessité de respecter la normalisation du langage utilisé, il est recommandé par le W3C de séparer la structure de la présentation (le HTML4 et (X)HTML strictes du CSS). Votre site est valide ? La page a-t-elle un sens sans la feuille de style ? Les liens de la page sont-ils logiques ? Conclusion

Mettre un titre en image et rester accessible août 2004 Weblog - Blog & Blues コミスケは、 電子書籍の全ページを自動でキャプチャして PDF化してくれる最近、評判のソフト です。 このコミスケを無料で使いたい、という話を聞くことがあります。 たしかにコミスケを購入するまえに、無料版を使ってみたい、という気持ちも わかります。 最近は「コミスケ 無料」などのワードもよく検索されているようです。 というよりも、正確には 無料ソフトで電子書籍の自動キャプチャ・コピーができるソフトはありません! 少なくとも自分の知る限り、電子書籍の全ページを自動キャプチャコピーできて PDF化できるソフトで、 かつDMM、booklive、hontoといったコピーガードのかかったサイトの電子書籍にも 対応しているソフトというのは、他にないでしょう。 またレンタルの電子書籍をコミスケでコピー保存するようにすれば、 正直な話、10冊もコピーすれば十分に元が取れてしまいます! 電子書籍をよく利用する方なら、無料でなくても 十分、買う価値のあるソフト です(笑) ただし、 ・特定のサイトでしか利用する予定がない、 ・そのサイトが対応しているかどうか不安、 という場合は、事前にサポートなどに問い合わせて確かめるか、 コミスケwikiのようなまとめサイトを参考にしてみるといいと思います。 電子書籍コピーソフト「コミスケ」の詳細はこちらで! Most popular smartphone screen resolutions 2015 The first 4K (2160 x 3840) smartphone, the ZTE Star 3, is reportedly on the way, and thus perhaps 4K will become the new standard for mobile device screen resolution. However, lower resolutions are currently the most popular in the smartphone world. Check out the most recent statistics on top smartphone screen resolutions in 2015 based on browser hits. The number of dots on the screen Screen resolution provided by the device manufacturer defines the number of pixels (the tiniest addressable points) available on the screen, and it is usually quoted as width × height. Physical vs. virtual pixels It is also worth mentioning that for many graphic designers CSS pixels are a more important factor than physical pixels listed by device manufacturers. A CSS pixel (px) equals 1/96th of 1in. The DeviceAtlas team dug a little deeper to provide you with the most recent statistics on the most popular physical screen resolutions, and CSS pixel resolutions across some selected local markets.

Plume Interactive : écriture web et ergonomie éditoriale par Eve Demange Pompage.net : le web design puisé à la source Bonnes pratiques Javascript: Le code non intrusif La récente découverte de l'excellent framework Javascript Mootools et l'exploration qui en à suivi à été pour moi une bonne aubaine pour me rappeller de la technique du Javascript non intrusif et de mieux la mettre en pratique. Cette technique, similaire dans l'esprit au couple XHTML/CSS, consiste à séparer le code javascript de la page HTML. JS non intrusif, pourquoi? On raconte depuis des lustres qu'environ 10% des internautes n'ont pas Javascript activé sur leur browser. Bien qu'à l'ère "Web 2.0", cela puisse sembler un brin surréaliste, de récentes études prouvent que c'est toujours le cas. Comme je l'ai dit plus haut, le principe du Javascript non intrusif est de séparer totalement le code JS du co,ntenu de la page, à savoir le code (x)html. Déja, pour le développeur, celà rendra le code plus maintenable, ensuite, pour l'utilisateur, si celui-ci n'a pas Javascript activé, il pourra toujours naviguer dans le site. Mise en pratique On aurait tendance à penser d'abord à ça: haut de page

Réduire la taille des ressources HTML, CSS et JavaScript  |  PageSpeed Insights  |  Google Developers Ces règles se déclenchent lorsque les analyses PageSpeed Insights indiquent que la taille de l'une de vos ressources pourrait faire l'objet d'une réduction. Présentation La réduction de la taille des ressources consiste à supprimer les octets inutiles, ceux utilisés par exemple par les espaces supplémentaires, les sauts de ligne et les mises en retrait. Compresser les ressources HTML, CSS et JavaScript peut accélérer le temps de téléchargement, d'analyse et d'exécution. En outre, il est possible de réduire davantage la taille des fichiers CSS et JavaScript en renommant les variables, tant que la ressource HTML est mise à jour de manière adéquate afin de s'assurer que les sélecteurs continuent de fonctionner. Recommandations Nous vous conseillons de réduire la taille de vos ressources HTML, CSS et JavaScript. Vous pouvez utiliser l'extension PageSpeed Insights pour Chrome afin de générer une version optimisée de votre code HTML et réduire la taille de vos ressources.

Technologie, Handicap, Accessibilité | Les nouvelles technologies pour palier le handicap Javascript non-intrusif, chapitre 1 : le grand nettoyage ! Par Christian Heilmann Cet article est le premier d'une série qui en compte 5. Le Javascript est un formidable outil pour améliorer l'utilisabilité des sites web. C'est une couche supplémentaire au dessus du balisage « qu'est-ce qu'est ce texte » et du CSS « comment doit-il être affiché » qui ajoute une nouvelle dimension, le « comment cet élément doit-il se comporter». Dans les pages suivantes nous allons voir comment utiliser Javascript tout en continuant de maintenir l'accessibilité. La technique utilisée pour séparer complètement le Javascript des deux autres couches de développement web est désormais communément appelée le « Javascript non-intrusif », dans la mesure où « Javascript accessible » ne convenait pas tout à fait puisque vous pouvez avoir un Javascript parfaitement séparé et rester complètement inaccessible. Mais bon, cessons les bavardages et mettons nous au travail. Ainsi... ... est devenu : ... puis finalement : Sortons le Javascript de la page 1. 2. 3. 4. 5. 6. Liens

How to Section Your HTML Easily manage projects with monday.com 👋 It has been brought to our attention in the comments (and on Twitter) that some of the techniques used in this article result in a poor user experience for screen reader users. We'll be making updates to make sure the article reflects the best possible information. The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. Here is a brief explanation of each sectioning element and how they are used: <nav> - Equivalent to role="navigation". #Contents This is a very long article that I suspect you will want to come back to and reference multiple times. #When to use <nav> The <nav> element only ever needs to be used once per navigation block. <nav aria-label="Primary"><ul><li><a href="#">Primary link</a></li><li><a href="#">Primary link</a></li><li><a href="#">Primary link</a><! The <nav> element is intended for only major navigation blocks. The key phrase is ‘major’ navigation. A <nav> is unnecessary around a search form <! <! <! <! <!

Related: