Représentation sémantique d'un graphique

Question

Je suis en train de recoder un ancien site contenant un graphique semblable à celui-ci:

texte de remplacement http://dl.getdropbox.com/u/240752 /rental-chart.gif

Comment ce graphique serait-il représenté avec du HTML pur? J'ai horreur de l'inclure sous forme d'image.

Je pense à un tableau, juste remplacé par une image, ou peut-être superposé à des lignes de tableau positionnées de manière absolue, mais je pense que cela peut être un peu fragile.

Toutes les suggestions sont les bienvenues.

Answer 1

Qu'est-ce qui ne va pas avec l'image?

La plupart du temps, lorsque vous consultez des informations cartographiques sur le Web, il s'agit d'un fichier .jpg ou .png généré.

Tous ces concepteurs se sont-ils trompés?

Toute tentative de dessiner le graphique à l'aide de tableaux et de couleurs de fond ne sera pas intelligible pour une personne malvoyante et, selon toute probabilité, ne restituera pas correctement le rendu sur un navigateur qui ne peut pas gérer les images.

Utilisez l'image et disposez d'un & "; alt &"; texte avec une véritable description en anglais & "; Un tableau montrant le produit ACME ne coûte que 49 $ par rapport aux concurrents: Société de location 4 à 51 $ .......

Answer 2

<div class="chart">
 <h3>Price for two weeks</h3>
 <div class="companies">
  <div class="company_scale"></div>
  <div class="company1">
   <span class="name">Company 1</span><span class="cost"> $78</span>
  </div>
  <div class="company2">
   <span class="name">Company 2</span><span class="cost"> $74</span>
  </div>
  <div class="company3">
    <span class="name">Company 3</span><span class="cost"> $60</span>
  </div>
  <div class="company4">
    <span class="name">Company 4</span><span class="cost"> $55</span>
  </div>
  <div class="acme">
    <span class="name">Acme Product</span><span class="cost"> $49.95</span>
  </div>
 </div>
</div>

Ou quelque chose de similaire. Vous devez spécifier les largeurs avec CSS et masquer le & "Coût &"; plages classées avec css.

J'ai été tenté d'utiliser une liste de définitions, mais il aurait été plus difficile d'obtenir les associations hiérarchiques dans le CSS.

L'avantage de ce balisage réside dans son rendu sans aucune donnée de style. Si ce marqueur conserve l'essentiel de sa signification d'origine:

Price for two weeks
 Company 1 $78
 Company 2 $74
 Company 3 $60
 Company 4 $55
 Acme Product $49.95

Modèle de table:

Je me suis dit que j'essaierais au moins d'essayer la suggestion de Liams en utilisant des tableaux, cela fonctionne assez bien en fait, il suffit d'ajouter les dégradés de fond et le tour est joué.

Faites défiler l'écran vers le bas pour le voir en action (le délai expirera assez rapidement) http: // www. webdevout.net/test?03

Le contenu d'origine suit

<div class="chart">
 <h3>Price for two weeks</h3>
 <table class="companies">
  <thead>
  <tr class="titles">
    <td>Company</td><td>Price</td>
  </tr>
  </thead>
  <tbody>
    <tr class="company1">
      <td class="name">Company 1</td>
      <td class="cost">$78</td>
    </tr>
    <tr class="company2">
      <td class="name">Company 2</td>
      <td class="cost">$74</td>
    </tr>
    <tr class="company3">
      <td class="name">Company 3</td>
      <td class="cost">$60</td>
    </tr>
    <tr class="company4">
      <td class="name">Company 4</td>
      <td class="cost">$55</td>
    </tr>
   <tr class="acme">
      <td class="name">Acme Product</td>
      <td class="cost">$49.95</td>
    </tr>
  </tbody>
  </table>
</div>

div.chart 
{ 
  border: 1px solid #DDD;
}
div.chart table, 
div.chart tbody, 
div.chart thead,
div.chart tr 
{ 
  display: block; 
}
div.chart td 
{ 
  display: inline-block;
  overflow-x: hidden;
}
div.chart {
  padding: 10px;
}
div.chart td.cost, div.chart thead td { 
  display: none;
}

div.chart tbody tr td { 
  background-color: #999;
  padding: 4px;
  margin-top: 16px;
  text-align: right;
}

div.chart  tr.company1 td { 
  width:260px;
}
div.chart tr.company2 td { 
  width:246px;
}
div.chart tr.company3 td { 
  width:200px;
}
div.chart tr.company4 td { 
  width:183px;
}

div.chart tbody tr td.cost { 
  display: inline-block;
  background-color: inherit;
  color: #F00;
  font-size: 80%;
  width: 80px;
}
div.chart  tr.acme td { 
  background-color: #99F;
  width: 166px;
}
div.chart tbody  tr.acme td.cost {
  color: #000;
  background-color: #FF9;
}

Answer 3

Eh bien, un graphique est un élément graphique, je suppose que vous voulez que les données soient accessibles aux navigateurs ne contenant que du texte et aux moteurs de recherche (?): dans ce cas, utilisez un <table> pour les données présentées dans un graphique: effectivement correct . Je sais que beaucoup de gens ont peur des tables, parce que tout le monde parle de & "Table-less &"; conception. Mais l’utilisation des tableaux pour les données tabulaires est ce à quoi ils étaient destinés.

J'aurais mis un tableau au-dessous (ou au-dessus, à côté de etc.) de l'image du graphique, avec les données affichées. Un graphique est bon pour visualiser les différences et moins bon pour voir les valeurs réelles; Par conséquent, un tableau constitue également un bon complément aux graphiques.

Si le graphique n'est pas très complexe (comme dans cet exemple), vous pouvez simplement ajouter un texte alternatif avec une description en anglais simple du graphique, comme suit:

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

Un lecteur de texte ne devrait avoir aucun problème à lire ceci de manière significative.

Answer 4

Il semble que je me souvienne de quelques articles utiles sur ce sujet. Vous constaterez peut-être qu’en fin de compte, une image simple est préférable d’un point de vue coût-bénéfice, mais cet article vous dira tout ce que vous pourriez vouloir savoir sur l’utilisation de html et css pour dessiner des graphiques à barres.

Par coïncidence, après avoir publié ce texte, j’ai regardé hier everyblock.com et ai remarqué que l'application de ce dernier était particulièrement efficace. graphiques en html / css qui mériteraient d’être examinés.

Answer 5

Vous pouvez également envisager de n’ajouter qu’une table dans votre HTML & amp; puis en utilisant Javascript pour générer le tableau: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google -charts-api /

Mais pour un graphique comme celui que vous avez fourni - lorsqu'il s'agit simplement d'une image marketing et que les valeurs n'ont pas de véritable sens -, une bonne description de texte alt devrait suffire.

Answer 6

Consultez l'excellent article sur les CSS pour les graphiques à barres sur le site "Pommes à l'orange".

(Edit: c'est le même lien posté par @Sam Murray-Sutton ci-dessus - désolé)