Representación semántica de un gráfico.

Question

Estoy recodificando un sitio antiguo que contiene un gráfico similar a este:

texto alternativo http://dl.getdropbox.com/u/240752 /rental-chart.gif

¿Cómo se representaría este gráfico con HTML puro? No me gusta incluirlo como una imagen.

Estoy pensando en una tabla, simplemente reemplazada por una imagen, o tal vez superpuesta con filas de tabla posicionadas absolutamente, pero creo que puede ser un poco frágil.

Cualquier sugerencia bienvenida.

Answer 1

¿Qué tiene de malo la imagen?

La mayoría de las veces cuando ve información de gráficos en la Web es un .jpg o .png generado.

¿Todos esos diseñadores se equivocaron?

Cualquier intento de dibujar el gráfico utilizando tablas y colores de fondo no será inteligible para una persona con discapacidad visual y, con toda probabilidad, no se representará correctamente en un navegador que no pueda manejar imágenes.

Use la imagen y tenga un " alt " texto con una descripción real en inglés " Un cuadro que muestra el producto ACME cuesta solo $ 49 en comparación con la competencia: Empresa de alquiler 4 a $ 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>

O algo similar. Debería especificar los anchos con CSS y ocultar el & Quot; cost & Quot; tramos clasificados con css.

Estuve tentado de usar una lista de definiciones, pero habría sido más difícil obtener las asociaciones jerárquicas en el CSS.

el beneficio de este marcado es cuando se procesa sin datos de estilo, conserva la mayor parte de su significado original:

---

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

---

Modelo de tabla:

Pensé que al menos probaría la sugerencia de Liams usando tablas, en realidad funciona bastante bien, solo para agregar los gradientes de fondo y estamos listos.

Desplácese hacia abajo para verlo en acción (caducará bastante rápido) http: // www. webdevout.net/test?03

El contenido original sigue a

<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

Bueno, un gráfico es un elemento gráfico, supongo que desea que los datos sean accesibles tanto para los navegadores de solo texto como para los motores de búsqueda (?): en este caso, usar un <table> para los datos presentados en un gráfico es en realidad correcto . Sé que mucha gente le tiene miedo a las mesas, porque todos hablan de & Quot; table-less & Quot; diseño. Pero el uso de tablas para datos tabulares es para lo que estaban destinadas las tablas.

Hubiera puesto una tabla debajo (o arriba, además de etc.) de la imagen del gráfico, con los datos que muestra la tabla. Un gráfico es bueno para visualizar diferencias, y no tan bueno para ver los valores reales; por lo tanto, una tabla también es un buen complemento para los gráficos.

Si el gráfico no es muy complejo (como esta muestra), también podría agregar un texto alternativo con una descripción sencilla en inglés del gráfico, algo como esto:

<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 lector de texto no debería tener problemas para leer esto de manera significativa.

Answer 4

Parece recordar algunas publicaciones útiles sobre este tema. Es posible que al final una imagen simple sea mejor desde el punto de vista costo-beneficio, pero este artículo le dirá todo lo que pueda desear saber sobre el uso de html y css para dibujar gráficos de barras.

Por coincidencia, después de publicar esto, miré everyblock.com ayer y noté que tienen una implementación particularmente buena de gráficos en html / css que valdría la pena mirar.

Answer 5

También podría considerar tener solo una tabla en su HTML & amp; luego usando Javascript para generar la tabla: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google -charts-api /

Pero para un gráfico como la imagen que proporcionó, donde es solo una imagen de marketing y los valores no tienen un significado real, entonces solo una buena descripción de texto alternativo debería estar bien.

Answer 6

Vea el gran artículo sobre CSS para gráficos de barras en el sitio de manzanas a naranjas.

(Editar: es el mismo enlace publicado por @Sam Murray-Sutton arriba - lo siento)