Re: Sans javascript

mouai…
sauf que cette police a beaucoup plus que juste 4 pauv icones
mais aussi que toutes les polices n'ont pas les icones genre email, puce, etc
mais aussi que je peux vouloir une police différente

en quoi n'est-ce pas accessible ? C'est purement visuel, ça n'a pas d'intérêt autre que du style
d'ailleurs c'est pour ça que c'est uniquement du css
Tu peux le désactiver tu ne perd pas d'informations.
Si on regarde la partie adresse ou numéro de téléphone elle est au contraire déjà très accessible. Voici l'html :

<div itemscope='itemscope' itemtype='http://schema.org/Person'>
 <p class='icon-envelope-alt'>
 <span itemprop='name'>
 Pirouette Cacahuette
 </span>
 </p>
 <div class='address' itemprop='address' itemscope='itemscope' itemtype='http://schema.org/PostalAddress'>
 <p>
 <span itemprop='streetAddress'>
 <i>
 Maison en carton
 </i>
 <br />
 12 rue Plop
 </span>
 <br />
 <span itemprop='postalCode'>
 010203
 </span>
 <span itemprop='addressLocality'>
 Paperville
 </span>
 </p>
 </div>
 <p>
 <span class='icon-comments-alt' itemprop='email'>
 <a href='mailto:plop@example.net'>
 plop@example.net
 </a>
 </span>
 </p>
 <p>
 <span class='icon-phone' itemprop='telephone'>
 01 02 03 04 05
 </span>
 </p>
</div>

C'est justement plutôt accessible ça, surtout que ça utilise les infos de http://schema.org
Avoir une icone devant c'est juste du cosmétique, c'est du style, c'est de l'amélioration mais c'est rien d'autre.
Et pour le côté interopérable je vois pas bien le soucis.

Par contre oui je vais voir pour pouvoir mieux le dégrader si la police n'est pas chargée, ça se serait vraiment mieux c'est vrai.

D'ailleurs on pourrait encore améliorer ceci en réduisant encore plus le couplage entre informations (html) et cosmétique (css)

Le haml pourrait être :

%div(itemscope itemtype="http://schema.org/Person")
 %p
 %span(itemprop="name")
 Pirouette Cacahuette
 %div.address(itemprop="address" itemscope itemtype="http://schema.org/PostalAddress")
 %p
 %span(itemprop="streetAddress")
 %i
 Maison en carton
 %br
 12 rue Plop
 %br
 %span(itemprop="postalCode")
 010203
 %span(itemprop="addressLocality")
 Paperville
 %p
 %span(itemprop="email")
 %a(href="mailto:plop@example.net")
 plop@example.net
 %p
 %span(itemprop="telephone")
 01 02 03 04 05

Et le sass deviendrait :

@mixin iconfont($char)
 &:before
 font-family: FontAwesome
 font-weight: normal
 font-style: normal
 display: inline-block
 text-decoration: inherit
 content: $char
[itemprop="name"]
 @include iconfont("\f0e0")
[itemprop="email"]
 @include iconfont("\f0e6")
[itemprop="email"]
 @include iconfont("\f095")

En faisant ceci, la partie icone, style, n'est apportée que par le css, sans aucun besoin html autre que les informations de schema.org.