representação semântica de um gráfico

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

  •  11-07-2019
  •  | 
  •  

Pergunta

Estou recodificação um site antigo que contém um gráfico semelhante a este:

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

Como é que este quadro ser representado com HTML puro? Estou detestado apenas incluí-lo como uma imagem.

Estou pensando uma mesa, apenas substituído com uma imagem, ou talvez cobertas com linhas de tabela posicionados absolutamente, mas eu acho que pode ser um pouco frágil.

Todas as sugestões bem-vindas.

Foi útil?

Solução

O que é errado com a imagem?

Na maioria das vezes quando você vê informações gráfico na Web é um .jpg gerado ou .png.

Tenha todos os designers tem algo errado?

Qualquer tentativa para desenhar o gráfico usando tabelas e cores backgroud não será intelligable a uma pessoa deficientes visuais, e, com toda a probabilidade não vai processar corretamente em um navegador que não pode lidar com imagens.

Use a imagem e ter um texto "alt" com uma descrição real Inglês "Um gráfico que mostra os custos do produto ACME apenas US $ 49 em comparação com os concorrentes: Rental Company 4 a US $ 51 .......

Outras dicas

<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 algo similar. Você deve especificar as larguras com CSS, e esconder o "custo" spans classificadas com css.

Eu estava tentado a usar uma lista de definições, mas que teria sido mais difícil de obter as associações hierárquicas na CSS.

O benefício dessa marcação é quando processado sem quaisquer dados de estilo, é que mantém a maioria de seu significado original: 

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

Modelo de tabela:

Eu percebi que eu iria pelo menos tentar sugestão Liams usando tabelas, ele funciona muito bem, na verdade, apenas para adicionar os gradientes de fundo e estamos prontos.

Vá até o final de vê-lo em ação (expira bastante rápido) http: // www. webdevout.net/test?03

Conteúdo Original Segue 

<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;
}

Bem, um gráfico é um elemento gráfico, eu suponho que você quer que os dados sejam acessíveis a ambos os navegadores somente de texto e os motores de busca (?): Neste caso, usando um <table> para os dados apresentados em um gráfico é realmente < em> correta . Eu sei que muita gente tem medo de mesas, porque toda a conversa sobre "table-less" design. Mas o uso de tabelas de dados tabulares é o que as mesas se destina.

Eu teria que colocar uma tabela abaixo (ou acima, além etc.) a imagem do gráfico, com os dados a tabela apresenta. Um gráfico é boa para a visualização de diferenças, e não é tão boa para ver os valores reais; portanto, uma mesa bem é um bom complemento para os gráficos.

Se o gráfico não é muito complexo (como este exemplo), você também pode simplesmente adicionar um texto alt com uma descrição Inglês simples do gráfico, algo como isto: 

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

Um leitor de texto não deve ter problemas lendo isso de uma forma significativa.

Eu me lembro de alguns posts úteis sobre este assunto. Você pode achar que, no final, uma imagem simples é melhor do ponto de custo-benefício de vista, mas este artigo irá dizer-lhe tudo o que você poderia querer saber sobre o uso de HTML e CSS para desenhar gráficos de barras.

Por coincidência, depois de postar isso eu olhei para everyblock.com ontem e notei que eles têm uma particularmente boa implementação de gráficos em html / css que seria pena olhar.

Você também pode considerar ter apenas uma tabela em seu HTML e, em seguida, usando JavaScript para gerar a tabela: http://www.wait-till-i.com/2008/01/08/generating- gráficos-de-acessíveis-data-mesas-usando-os-google-charts-api /

Mas para uma tabela como a imagem que você forneceu - onde é apenas uma imagem de marketing e os valores não têm nenhum significado real -., Em seguida, apenas uma boa alt descrição do texto deve ser fino

Veja o ótimo artigo sobre CSS para Bar Gráficos nas maçãs para o site laranjas.

(Edit: é o mesmo link postado por @Sam Murray-Sutton acima - sorry)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top