チャートの意味表現

StackOverflow https://stackoverflow.com/questions/316837

  •  11-07-2019
  •  | 
  •  

質問

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

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

このチャートは純粋なHTMLでどのように表されますか？それを画像として含めるだけでは嫌です。

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

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

役に立ちましたか？

解決

画像のどこが悪いのですか？

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

これらのデザイナー全員に何か問題がありますか？

表と背景色を使用してグラフを描画しようとすると、視覚障害者にわかりにくくなり、画像を処理できないブラウザではおそらく正しくレンダリングされません。

画像を使用し、<！> quot; alt <！> quot;本当の英語の説明付きのテキスト<！> quot; ACME製品を示すチャートは、競合他社と比較してたった49ドルです。レンタル会社4は51ドル.......

他のヒント

<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で幅を指定し、<！> quot; cost <！> quot;を非表示にします。 CSSで分類されたスパン。

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

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

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

テーブルモデル：

少なくともテーブルを使用してリアムスの提案を試してみようと思ったが、実際には非常にうまく機能し、背景のグラデーションを追加するだけで設定されています。

一番下までスクロールして動作を確認します（かなり早く期限切れになります） 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;
}

まあ、グラフはグラフィカルな要素です。テキスト専用ブラウザと検索エンジンの両方からデータにアクセスできるようにしたいと思います（？）：この場合、グラフに表示されるデータに<table>を使用すると実際には正しい。 <！> quot; table-less <！> quot;についてのすべての話は、設計。ただし、表形式のデータにテーブルを使用することは、テーブルの目的でした。

表が表示するデータを使用して、チャート画像の下（または上など）に表を配置します。チャートは違いを視覚化するのに適していますが、実際の値を見るのにはあまり適していません。そのため、表もグラフィックスの優れた補足です。

チャートがそれほど複雑でない場合（このサンプルのように）、チャートのわかりやすい英語の説明を含むalt-textを追加することもできます。

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

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

このテーマに関する有用な投稿をいくつか覚えているようです。最終的には、費用対効果の観点からシンプルな画像が最適ですが、この記事は、htmlとcssを使用して棒グラフを描画することについて知りたいことをすべて伝えます。

偶然にも、これを投稿した後、私は昨日 everyblock.com を見て、彼らが特に良い実装を持っていることに気付きました。 html / cssのグラフをご覧ください。

HTMLにテーブルを1つだけ含めることも検討できます<！> amp;次に、Javascriptを使用してテーブルを生成します： http://www.wait-till-i.com/2008/01/08/generated-charts-from-accessible-data-tables-using-the-google -charts-api /

しかし、あなたが提供した画像のようなチャートの場合-それは単なるマーケティング画像であり、値には実際の意味はありません-それなら、良い代替テキストの説明で十分です。

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

（編集：上記の @Sam Murray-Sutton が投稿したのと同じリンクです-ごめんなさい）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top