Семантическое представление диаграммы

Что не так с изображением?

В большинстве случаев, когда вы видите информацию о диаграммах в Интернете, это сгенерированный .jpg или .png.

Все эти дизайнеры что-то не так поняли?

Любая попытка нарисовать диаграмму с использованием таблиц и цветов фона будет непонятна человеку с ослабленным зрением и, по всей вероятности, не будет правильно отображаться в браузере, который не может обрабатывать изображения.

Используйте изображение и добавьте текст «alt» с реальным описанием на английском языке. «Таблица, показывающая продукт ACME, стоит всего 49 долларов США по сравнению с конкурентами: Rental Company 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 и скрыть классы «стоимости» с помощью 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> для данных, представленных на графике, на самом деле правильный. Я знаю, что многие люди боятся столов, потому что все говорят о «безтабличном» дизайне. Но использование таблиц для табличных данных - это то, для чего эти таблицы были предназначены.

Я бы поместил таблицу ниже (или выше, кроме того и т. д.) Изображения диаграммы с данными, отображаемыми в таблице. Диаграмма хороша для визуализации различий, но не очень хороша для просмотра фактических значений; поэтому таблица также является хорошим дополнением к графике.

Если диаграмма не очень сложная (как в этом примере), вы также можете просто добавить альтернативный текст с простым английским описанием диаграммы, примерно так:

<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, а затем использовать Javascript для создания таблицы: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/

Но для диаграммы, такой как изображение, которое вы предоставили - где это просто маркетинговое изображение, а значения не имеют реального значения - тогда достаточно хорошего описания с альтернативным текстом.

См. Отличную статью о CSS для гистограмм на сайте от яблок до апельсинов.

(Обновлено: это та же ссылка, опубликованная @ Сэм Мюррей-Саттон выше - извините)