html - チャートのセマンティック表現

Question

次のようなチャートを含む古いサイトを再コーディングしています。

代替テキスト http://dl.getdropbox.com/u/240752/rental-chart.gif

このチャートは純粋な HTML でどのように表現されるでしょうか? 画像として載せるのがもったいないです。

画像に置き換えただけのテーブル、または絶対に配置されたテーブル行でオーバーレイされたテーブルを考えていますが、それは少し壊れやすいと思います。

どんな提案も歓迎します。

Answer 1

画像の何が悪いの？

Web でチャート情報を表示する場合、ほとんどの場合、生成された .jpg または .png です。

これらすべてのデザイナーは何か間違っていますか?

表と背景色を使用してチャートを描画しようとしても、目の不自由な人には理解できず、画像を処理できないブラウザーではおそらく正しく表示されません。

画像を使用し、実際の英語の説明を含む「代替」テキストを用意します。

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>

または似たようなもの。CSS で幅を指定し、css で「コスト」クラスのスパンを非表示にします。

定義リストを使用したくなりましたが、CSS で階層的な関連付けを取得するのは困難でした。

このマークアップの利点は、スタイル データなしでレンダリングされた場合に、元の意味のほとんどが保持されることです。

---

2週間の料金
会社 1 $78
 会社 2 $74
 会社 3 $60
 会社 4 $55
 アクメ製品 $49.95

---

テーブル モデル:

少なくとも表を使用して Liams の提案を試してみようと思いました。背景のグラデーションを追加するだけで、実際には非常にうまく機能し、準備が整いました。

一番下までスクロールして動作を確認してください (かなり早く期限切れになります) http://www.webdevout.net/test?03

元のコンテンツは次のとおりです

<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

グラフはグラフィカルな要素です。テキストのみのブラウザと検索エンジンの両方からデータにアクセスできるようにしたいと考えています (?): この場合<table>、グラフに表示されるデータに を使用することは実際には正しいです。多くの人がテーブルを怖がっていることを私は知っています。なぜなら、「テーブルのない」設計についての話が多いからです。ただし、表形式のデータにテーブルを使用することは、テーブルが意図したものです。

グラフ画像の下 (または上など) に表を配置し、表に表示されるデータを表示します。グラフは違いを視覚化するのには適していますが、実際の値を確認するにはあまり適していません。したがって、表もグラフィックスを補足するのに適しています。

グラフが (このサンプルのように) それほど複雑でない場合は、次のように、グラフのわかりやすい英語の説明を含む代替テキストを追加することもできます。

<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" />

テキスト リーダーは、これを意味のある方法で問題なく読むことができます。

Answer 4

このテーマに関するいくつかの有益な投稿を覚えているようです。最終的には、費用対効果の観点から単純な画像が最適であることに気付くかもしれませんが、この記事では、html と css を使用して棒グラフを描画する方法について知りたいことをすべて説明します。

偶然にも、これを投稿した後、昨日everyblock.comを見て、見る価値のあるhtml/cssのグラフの特に優れた実装があることに気付きました.

Answer 5

Apples to Oranges サイトの棒グラフの CSS に関するすばらしい記事を参照してください。

（編集：上記の@Sam Murray-Suttonが投稿したリンクと同じです-申し訳ありません）

Answer 6

HTML にテーブルを作成し、Javascript を使用してテーブルを生成することも検討できます。 tables-using-the-google-charts-api/

しかし、あなたが提供した画像のようなチャート (それは単なるマーケティング画像であり、値に実際の意味はありません) の場合は、適切な代替テキストの説明だけで問題ありません。