<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Accessibilité numérique &#8211; Delphine MALASSINGNE</title>
	<atom:link href="https://articles.nissone.com/tag/accessibilite-des-pages-web/feed/" rel="self" type="application/rss+xml" />
	<link>https://articles.nissone.com</link>
	<description></description>
	<lastBuildDate>Sun, 17 Apr 2011 16:34:32 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>
	<item>
		<title>Guide éditorial pour rédacteur web</title>
		<link>https://articles.nissone.com/2008/11/guide-editorial-redacteur-web/</link>
					<comments>https://articles.nissone.com/2008/11/guide-editorial-redacteur-web/#comments</comments>
		
		<dc:creator><![CDATA[Delphine Malassingne]]></dc:creator>
		<pubDate>Mon, 10 Nov 2008 08:06:07 +0000</pubDate>
				<category><![CDATA[[Article]]]></category>
		<category><![CDATA[Éditorial web]]></category>
		<category><![CDATA[Accessibilité numérique]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[guide]]></category>
		<category><![CDATA[référencement naturel]]></category>
		<guid isPermaLink="false">http://articles.nissone.com/?p=366</guid>

					<description><![CDATA[Guide éditorial, à l'attention des rédacteurs web, prenant en compte les aspects ergonomiques, l'accessibilité, le référencement naturel... en expliquant, pour chaque point, contraintes et gains.]]></description>
										<content:encoded><![CDATA[<p>Le métier de rédacteur web est un métier à part. Celui qui l&rsquo;exerce doit avoir des compétences rédactionnelles, bien sûr, mais il doit aussi savoir s&rsquo;adapter à son média si particulier : Internet.</p>
<p>Le rédacteur web doit également être capable de répondre aux attentes des autres intervenants de la conception de site web. Des notions d&rsquo;<strong>accessibilité</strong>, de <strong>référencement</strong>, d&rsquo;<strong>ergonomie </strong>sont indispensables (comme c&rsquo;est d&rsquo;ailleurs le cas pour tous les métiers d&rsquo;interface).</p>
<p>Voici un guide rédactionnel pour le web.<br />
Son but est d&rsquo;aider le rédacteur web, élément par élément, à répondre aux spécificités du média. Pour cela, deux objectifs sont visés :</p>
<ol>
<li><strong>Connaitre les règles de la rédaction web</strong></li>
<li><strong>Comprendre les règles de la rédaction web</strong></li>
</ol>
<h2>Le style éditorial</h2>
<ul>
<li>Utiliser un style rédactionnel <strong>simple</strong></li>
<li>Faire des textes <strong>courts</strong></li>
</ul>
<p>L&rsquo;écran (ou les synthèses vocales) font d&rsquo;Internet un média où la lecture est plus difficile que sur papier.</p>
<p class="zonePlus">Ces deux règles profitent à : l&rsquo;accessibilité, l&rsquo;ergonomie</p>
<h2>L&rsquo;organisation de l&rsquo;information</h2>
<ul>
<li>Utiliser le principe de la pyramide inversée</li>
</ul>
<p>L&rsquo;internaute doit pouvoir trouver l&rsquo;information principale très rapidement. Il faut donc mettre les contenus les plus importants et les arguments les plus marquants en début de texte et descendre au fur-et-à-mesure vers les précisions.</p>
<p class="zonePlus">Ces deux règles profitent à : l&rsquo;ergonomie, le référencement naturel</p>
<h2>La rédaction des titres</h2>
<ul>
<li>Les titres doivent être <strong>compréhensibles hors-contexte</strong></li>
<li>Les titres doivent être <strong>hiérarchisés</strong> et <strong>ordonner la page</strong></li>
</ul>
<p>Les internautes, en arrivant sur une page web, cherchent à savoir rapidement le contenu global d&rsquo;une page.<br />
Les titres sont une excellente manière de parcourir une page et de se faire une idée de son contenu. Visuellement, ils sont généralement mis en valeur et permettent de sauter de titre en titre.</p>
<p>La liste des titres d&rsquo;une page est d&rsquo;ailleurs un des points d&rsquo;entrée de la synthèse vocale.</p>
<p>Les moteurs de recherche sont <strong>très attentifs à la titraille</strong>. Elle est pour eux un indice fort du contenu d&rsquo;une page et donc de sa pertinence par rapport à la recherche d&rsquo;un internaute.</p>
<p>De nombreux usages font que les titres d&rsquo;une page web peuvent se retrouver isoler de leur contenu : flux RSS, résultats de recherche, liens directs à l&rsquo;intérieur de la page&#8230;</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<h2>L&#8217;emphase sur les mots-clé</h2>
<ul>
<li>Prévoir de <strong>l&#8217;emphase</strong></li>
</ul>
<p>De la même manière que les titres sont un repère pour l&rsquo;internaute qui découvre une page, les mots importants doivent être mis en valeur pour servir d&rsquo;accroche à l&rsquo;œil qui parcourt la page.</p>
<p>Dans une moindre mesure que pour les titres, les moteurs de recherche y sont aussi sensibles.</p>
<p>L&#8217;emphase mise sur un mot sera relayée par de la couleur, de la graisse, de l&rsquo;italique&#8230;</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<h2>Les aides à la compréhension</h2>
<ul>
<li><strong>Expliquer</strong> les abréviations</li>
</ul>
<p>La règle de rédaction française dit qu&rsquo;une abréviation doit être expliqueé, lors de sa première occurrence, directement dans le texte. Pour les occurrences suivantes, sur le web, l&rsquo;explication peut apparaître en info-bulle au survol de l&rsquo;abréviation.</p>
<p>Cette règle est à adapter en fonction de la complexité de l&rsquo;abréviation et des usages.<br />
« SNCF », par exemple, n&rsquo;est pas forcément à expliquer ; l&rsquo;usage en est suffisamment répandu. L&rsquo;abréviation « PTFR », incompréhensible pour une majorité de personnes, n&rsquo;est pourtant pas à traduire dans le cadre d&rsquo;un intranet du groupe de travail qui à créé « PTFR ».<br />
Parfois, c&rsquo;est plutôt l&rsquo;explication qui est obscure. Expliquer que « RSS » signifie « Really Simple Syndication » ne renseigne pas beaucoup. Il faut peut-être alors avoir plutôt recourt à un glossaire (voir ci-dessous).</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<ul>
<li>Prévoir un <strong>glossaire</strong></li>
</ul>
<p>Faciliter la compréhension de vos textes en proposant un glossaire. Vous pouvez le prévoir en bas de page ou sur une page dédiée.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<h2>La langue</h2>
<ul>
<li>Indiquer et faire indiquer les changements de langue</li>
</ul>
<p>Afin de pouvoir être bien compris, les mots, expressions et phrase dans une autre langue que la langue principale doivent être précisés au développeur qui intègre la page.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<h2>La rédaction des liens</h2>
<ul>
<li>Rédiger des liens <strong>explicites hors-contexte</strong></li>
</ul>
<p>Tous comme les titres et les mots en emphase, les liens sont des repères visuels sur lesquels l&rsquo;internaute s&rsquo;appuient pour parcourir la page.<br />
Tous comme les titres, la liste des liens est un des points d&rsquo;entrée lorsque l&rsquo;on consulte une page à l&rsquo;aide d&rsquo;une synthèse vocale.</p>
<p>Le robot des moteurs de recherche utilise le libellé du lien comme un indice fort.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, le référencement naturel</p>
<ul>
<li>Garder le <strong>même intitulé</strong> pour des libellés de liens pointant au même endroit.</li>
</ul>
<p class="zonePlus">Cette règle profite à : l&rsquo;ergonomie, le référencement naturel</p>
<ul>
<li><strong>Différencier des liens similaires</strong> grâce à leur info-bulle</li>
</ul>
<p>Dans certains cas, on voit des liens dont le libellé est le même alors que la destination est différente. C&rsquo;est le cas typique des « Lire la suite ». Dans ce cas là, les titres peuvent être différenciés avec l&rsquo;utilisation de l&rsquo;info-bulle qui apparaît au survol du lien (exemple : Lire la suite de « Guide éditorial pour rédacteur web »).</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<ul>
<li>Prévoir les <strong>informations supplémentaires</strong></li>
</ul>
<p>Dans tous les cas où le libellé manque de précisions, l&rsquo;info-bulle permet de relayer ces informations sans apparaître directement dans le texte. Attention toutefois, tous les internautes n&rsquo;auront pas le réflexe de survoler le lien pour y chercher des renseignements.</p>
<p>L&rsquo;info-bulle doit toujours être plus longue que son libellé.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie</p>
<h2>Les aides rédactionnelles au téléchargement</h2>
<ul>
<li>Prévoir les <strong>informations techniques</strong> du téléchargement</li>
</ul>
<p>Si un téléchargement est prévu, par exemple un PDF, il faut indiquer le format du document à télécharger, son poids, sa langue.</p>
<p>Ces informations doivent être présentes dans l&rsquo;intitulé du lien et / ou dans son info-bulle. Pour des raisons de visibilité, elles peuvent également être reprises dans le texte, dans une zone à part&#8230;</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<h2>La rédaction des éléments de tableau</h2>
<ul>
<li>Rédiger un <strong>titre pour le tableau</strong></li>
</ul>
<p>Le titre du tableau doit permettre à l&rsquo;utilisateur de savoir immédiatement de quoi va parler le tableau.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie, le référencement naturel</p>
<ul>
<li>Rédiger un <strong>résumé du tableau</strong> qui explique son <strong>organisation</strong></li>
</ul>
<p>Le résumé du tableau n&rsquo;apparaît pas directement dans la page. C&rsquo;est une source supplémentaire insérée dans le code. Il doit indiquer, notamment pour les lecteurs d&rsquo;écran, le contenu du tableau, son organisation, ses entêtes.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité</p>
<ul>
<li>Signaler les <strong>entêtes</strong> et <strong>pied-de-tableau</strong></li>
</ul>
<p>Chacune des entêtes de tableau doit être signalée car elles sont codées différemment. S&rsquo;il y a un pied de tableau, il doit également être signalé au développeur.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie</p>
<ul>
<li>Donner un <strong>résumé pour chaque en-tête</strong></li>
</ul>
<p>Enfin, pour chaque entête, il est bon d&rsquo;indiquer une version « raccourcie » du texte. Car les lecteurs d&rsquo;écran reprennent, avant chaque cellule, le libelé de l&rsquo;entête à laquelle elle se réfère. Ce texte répété régulièrement peut être remplacer par un résumé qui n&rsquo;apparaîtra pas dans la page.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité</p>
<h2>Les compléments textuels des images</h2>
<ul>
<li>Prévoir l&rsquo;alternative textuelles des images</li>
</ul>
<p>Normalement, le rédacteur web n&rsquo;a a s&rsquo;occuper que des images de contenu. Les illustrations ou images décoratives prévues par le designer ne sont pas concernées. Pour les images de contenu, l&rsquo;alternative est soit une courte phrase, soit un texte descriptif. Si l&rsquo;image est un lien, l&rsquo;alternative indique également la fonction du lien.</p>
<p>Exemples :<br />
Pour le logo d&rsquo;un site qui permet de revenir à l&rsquo;accueil : « Nissone Veille &#8211; Retour à l&rsquo;accueil ».<br />
Pour un graphique : un texte expliquant la totalité du graphique.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, le référencement naturel</p>
<h2>Le style rédactionnel des boutons</h2>
<ul>
<li>Utiliser des verbes</li>
</ul>
<p>Qu&rsquo;il s&rsquo;agisse de bouton de formulaire ou de liens présentés sous forme de bouton pour inciter l&rsquo;internaute à agir (les « call-to-action »), utiliser des verbes contribue à indiquer à l&rsquo;internaute qu&rsquo;il doit, lui, interagir et rappelle que quelque chose va se passer en réaction à son clic.</p>
<p>Cela peut être des verbes à l&rsquo;infinitif ou à la première personne du singulier, selon le style rédactionnel retenu.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;ergonomie</p>
<h2>L&rsquo;organisation textuelle des formulaires</h2>
<ul>
<li>Réunir les items par groupes logiques</li>
</ul>
<p>Pour faciliter la compréhension d&rsquo;un formulaire, les items, s&rsquo;ils sont nombreux, peuvent être répartis par groupes logique (exemple : adresse de facturation / adresse de livraison).</p>
<p>Il faut alors donner un titre à chaque groupe logique. Ce titre doit aider à comprendre dans quel contexte les champs du groupe doivent être remplis.</p>
<p class="zonePlus">Cette règle profite à : l&rsquo;accessibilité, l&rsquo;ergonomie</p>
<h2>Les règles typographiques</h2>
<ul>
<li>Prévoir et signaler les <strong>règles typographiques</strong></li>
</ul>
<p>Le web n&rsquo;échappe pas aux règles typographiques (espaces de double ponctuation, quadratins&#8230;). Signalez-les et imposez-les au développeur web qui intègre vos textes.</p>
<div class="zonePlus">
<p>Ce guide a été écrit à l&rsquo;aide de mes connaissances d&rsquo;intégration mais aussi en ergonomie, en référencement naturel et en accessibilité. Les sources suivantes sont celles dont je me suis aidée ou dont je vous recommande la lecture :</p>
<ul>
<li><a href="http://www.ecrirepourleweb.com/category/contraintes-editoriales">Ecrire pour le web &#8211; Contraintes éditoriales</a></li>
<li><a title="Blog du Concepteur Rédacteur" href="http://www.concepteur-redacteur-blog.com/">Blog du CR</a></li>
<li><a href="http://www.redaction.be/">Redaction.be</a></li>
<li>Formation accessibilité &#8211; Aurélien Lévy, <a href="http://www.temesis.com/">Temesis</a></li>
<li>Conférence sur l&rsquo;architecture de l&rsquo;information &#8211; Luc Legay (voir : <a href="http://articles.nissone.com/2008/02/consignes-redactionnelles/">Consignes rédactionnelles</a>)</li>
</ul>
</div>
<div class="zonePlus">
<p>Voir aussi le <a href="http://articles.nissone.com/2008/11/memo-redacteur-integrateur/">Mémo Rédacteur web / intégrateur HTML</a> qui fait suite à ce billet et qui reprend dans un tableau ces différents points pour le rédacteur comme pour l&rsquo;intégrateur.</div>
]]></content:encoded>
					
					<wfw:commentRss>https://articles.nissone.com/2008/11/guide-editorial-redacteur-web/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Ma petite pêche du 08/11/2008</title>
		<link>https://articles.nissone.com/2008/11/ma-petite-peche-08-11-08/</link>
					<comments>https://articles.nissone.com/2008/11/ma-petite-peche-08-11-08/#respond</comments>
		
		<dc:creator><![CDATA[Delphine Malassingne]]></dc:creator>
		<pubDate>Sat, 08 Nov 2008 20:00:56 +0000</pubDate>
				<category><![CDATA[[Brève]]]></category>
		<category><![CDATA[Accessibilité numérique]]></category>
		<category><![CDATA[colonne]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[gabarit]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://articles.nissone.com/?p=406</guid>

					<description><![CDATA[Voici, via Blogmarks, le ou les derniers favoris que j&#8217;ai recueillis. Web Design WordPress function list Liste des marqueurs WordPress Tags du favori : wordpress CSS Balanced Columns V3 (en) Des colonnes de même hauteur via JavaScript. Attention à styler aussi la version sans JavaScript Tags du favori : css javascript colonne gabarit La recette pour un&#8230;&#160;<a href="https://articles.nissone.com/2008/11/ma-petite-peche-08-11-08/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Ma petite pêche du 08/11/2008</span></a>]]></description>
										<content:encoded><![CDATA[<div>Voici, via Blogmarks, le ou les derniers favoris que j&rsquo;ai recueillis.</div>
<ul class="fluxBlogmarks">
<li>
<p class="vignette"><a href="http://www.dbswebsite.com/design/wordpress-reference/"><img decoding="async" src="http://blogmarks.net/screenshots/2008/11/08/9c9c7f47f4f86790700f512ab6a99948.jpg" alt="" /></a></p>
<p class="infos">
<h3><a href="http://www.dbswebsite.com/design/wordpress-reference/">Web Design WordPress function list</a></h3>
<p class="description">
<p>Liste des marqueurs WordPress</p>
<p class="tags">Tags du favori : <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/wordpress">wordpress</a></p>
</li>
<li>
<p class="vignette"><a href="http://www.paulbellows.com/getsmart/balance_columns/"><img decoding="async" src="http://blogmarks.net/screenshots/2008/11/08/32428ceef576b06ef752f0bd8c6f9c2d.jpg" alt="" /></a></p>
<p class="infos">
<h3><a href="http://www.paulbellows.com/getsmart/balance_columns/">CSS Balanced Columns V3 (en)</a></h3>
<p class="description">
<p>Des colonnes de même hauteur via JavaScript. Attention à styler aussi la version sans JavaScript</p>
<p class="tags">Tags du favori : <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/css">css</a> <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/javascript">javascript</a> <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/colonne">colonne</a> <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/gabarit">gabarit</a></p>
</li>
<li>
<p class="vignette"><a href="http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1"><img decoding="async" src="http://blogmarks.net/screenshots/2008/11/08/7e2f02e327260a368833da5b01027db6.jpg" alt="" /></a></p>
<p class="infos">
<h3><a href="http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1">La recette pour un menu déroulant accessible &#8211; partie 1 &#8211; </a></h3>
<p class="description">
<p>Le menu déroulant sur plusieurs niveaux, avec ou sans JavaScript, accessible et &#8230;valide !</p>
<p>(depuis Accessibilité numérique, CSS et standards du web &#8211; Fairytells)</p>
<p class="tags">Tags du favori : <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/css">css</a> <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/menu">menu</a> <a class="tag" rel="tag" href="http://blogmarks.net/user/Nissone/tag/accessibilit%25C3%25A9">accessibilité</a></p>
</li>
</ul>
<p class="mentions">Synchronisation automatique et quotidienne via <a title="Blogmarks, outil de gestion de favoris en ligne" href="http://blogmarks.net/">Blogmarks</a>, outil de gestion de favoris en ligne.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://articles.nissone.com/2008/11/ma-petite-peche-08-11-08/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Gabarit de tableau HTML</title>
		<link>https://articles.nissone.com/2008/11/gabarit-tableau-html/</link>
					<comments>https://articles.nissone.com/2008/11/gabarit-tableau-html/#respond</comments>
		
		<dc:creator><![CDATA[Delphine Malassingne]]></dc:creator>
		<pubDate>Sat, 08 Nov 2008 14:04:48 +0000</pubDate>
				<category><![CDATA[[Pense-bête]]]></category>
		<category><![CDATA[Intégration de pages web]]></category>
		<category><![CDATA[Accessibilité numérique]]></category>
		<category><![CDATA[caption]]></category>
		<category><![CDATA[headers]]></category>
		<category><![CDATA[HTML / XHTML]]></category>
		<category><![CDATA[id]]></category>
		<category><![CDATA[summary]]></category>
		<category><![CDATA[tableau]]></category>
		<category><![CDATA[th]]></category>
		<category><![CDATA[thead]]></category>
		<guid isPermaLink="false">http://articles.nissone.com/?p=401</guid>

					<description><![CDATA[Voici un gabarit tout prêt pour un tableau à double entrée, HTML / XHTML, valide et accessible. 
En le mettant sur ici, je sais que je l'aurais toujours à disposition pour moi. S'il peut servir à d'autres, tant mieux !]]></description>
										<content:encoded><![CDATA[<p>&lt;table summary= » »&gt;<br />
&lt;caption&gt;&lt;/caption&gt;<br />
&lt;thead&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;th id= » » abbr= » »&gt;&lt;/th&gt;<br />
&lt;/tr&gt;<br />
&lt;/thead&gt;<br />
&lt;tbody&gt;<br />
&lt;tr&gt;<br />
&lt;th id= » » abbr= » »&gt;&lt;/th&gt;<br />
&lt;td headers= » »&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/tbody&gt;<br />
&lt;/table&gt;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://articles.nissone.com/2008/11/gabarit-tableau-html/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
