<?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>Blackotine &#187; syntaxe</title>
	<atom:link href="http://www.blackotine.fr/tag/syntaxe/feed" rel="self" type="application/rss+xml" />
	<link>http://www.blackotine.fr</link>
	<description>Blog d&#039;un intégrateur et développeur Web</description>
	<lastBuildDate>Tue, 24 May 2011 22:50:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Label et input, syntaxe et accessibilité</title>
		<link>http://www.blackotine.fr/divers/label-et-input-syntaxe-et-accessibilite</link>
		<comments>http://www.blackotine.fr/divers/label-et-input-syntaxe-et-accessibilite#comments</comments>
		<pubDate>Thu, 18 Jun 2009 19:39:57 +0000</pubDate>
		<dc:creator>nico</dc:creator>
				<category><![CDATA[Divers]]></category>
		<category><![CDATA[accessibilite]]></category>
		<category><![CDATA[ergonomie]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[label]]></category>
		<category><![CDATA[syntaxe]]></category>

		<guid isPermaLink="false">http://www.blackotine.fr/?p=165</guid>
		<description><![CDATA[L&#8217;élément label permet de rattacher une information à un contrôle par le biais d&#8217;une étiquette. En clair, cliquer sur le texte à l&#8217;intérieur d&#8217;un élément label permet de place le curseur sur l&#8217;élément correspondant du formulaire. Il est à la fois question d&#8217;ergonomie et d&#8217;accessibilité. Il est donc primordial d&#8217;ajouter un élément label pour chaque [...]]]></description>
			<content:encoded><![CDATA[<p>L&#8217;élément <em>label</em> permet de rattacher une information à un contrôle par le biais d&#8217;une étiquette.<br />
En clair, cliquer sur le texte à l&#8217;intérieur d&#8217;un élément <em>label</em> permet de place le curseur sur l&#8217;élément correspondant du formulaire. Il est à la fois question d&#8217;ergonomie et d&#8217;accessibilité.<br />
Il est donc primordial d&#8217;ajouter un élément <em>label</em> pour chaque champs d&#8217;un formulaire.</p>
<h2>Syntaxe</h2>
<p>Deux méthodes existent, pour lier un <em>label</em> au champ correspondant, la relation peut être explicite ou implicite.</p>
<h3>Relation explicite :</h3>
<p>L&#8217;étiquette est définie par l&#8217;attribut <em>for</em> dans <em>label</em> et identifiée grâce à l&#8217;attribut <em>id</em> du champ de formulaire ciblé.</p>
<pre class="brush: html">&lt;label for=&quot;nom&quot;&gt;Nom &lt;/label&gt;
&lt;input id=&quot;nom&quot; name=&quot;firstname&quot; type=&quot;text&quot; /&gt;</pre>
<h3>Relation implicite :</h3>
<p>Il s&#8217;agit d&#8217;imbriquer le champ dans la balise label, il n&#8217;est donc plus nécessaire de renseigner les attributs <em>for</em> de label et <em>id</em> du champ.</p>
<pre class="brush: html">
&lt;label&gt;
Nom
&lt;input name=&quot;firstname&quot; type=&quot;text&quot; /&gt;
&lt;/label&gt;</pre>
<p>Ces deux méthodes sont détaillés dans la <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1">documentation du W3C</a></p>
<h2>Accessibilité</h2>
<p>Cependant la solution des labels implicites, bien qu&#8217;étant parfaitement valide, n&#8217;est plus admise car elle n&#8217;est <strong>pas reconnue</strong> par tous les dispositifs d&#8217;accessibilité, elle est d&#8217;ailleurs <strong>proscrite par les <a href="http://www.w3.org/TR/2004/WD-WCAG20-HTML-TECHS-20041119/#label-implicit">normes d&#8217;accessibilité WCAG2.0</a> </strong></p>
<p>Voilà, il n&#8217;y a donc en fait qu&#8217;<strong>une seule solution</strong>, <strong>la relation explicite</strong>, et l&#8217;autre, bien que fonctionnant, ne doit <strong>jamais être utilisée</strong>.</p>
<a href='http://twitter.com/share?url=http%3A%2F%2Fwww.blackotine.fr%2F%3Fp%3D165&count=horizontal&related=&text=Label%20et%20input%2C%20syntaxe%20et%20accessibilit%C3%A9' class='twitter-share-button' data-text='Label et input, syntaxe et accessibilité' data-url='http://www.blackotine.fr/?p=165' data-counturl='http://www.blackotine.fr/divers/label-et-input-syntaxe-et-accessibilite' data-count='horizontal' data-via='scarpopo'></a>]]></content:encoded>
			<wfw:commentRss>http://www.blackotine.fr/divers/label-et-input-syntaxe-et-accessibilite/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

