Сергей Кригер
График с информацией сколько килограммов яблок было продано.
Минимум яблок (2 кг) было продано 03 июля.
План по продаже 4 кг яблок был выполнен 3 июля и 5 июля.
const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
<svg role="img" alt="Минимум яблок (2 кг) было продано 03 июля.">
...
</svg>
const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
<svg role="img" aria-label="Данные продаж" aria-describedby="chart-desc">
<desc id="chart-desc">Минимум яблок (2 кг) было продано 03 июля.</desc>
...
</svg>
aria-label
или
alt
3 кг яблок, 3 кг бананов, 1 кг апельсинов было продано 01 июля с общей суммой продаж 19 руб. 4 кг яблок, 3 кг. бананов, 5 кг апельсинов было продано 02 июля с общей суммой продаж 38 руб. 2 кг яблок, 2 кг. бананов, 4 кг апельсинов было продано 03 июля с общей суммой продаж 26 руб. 3 кг яблок, 1 кг бананов, 5 кг. апельсинов было продано 04 июля с общей суммой продаж 31 руб. 5 кг яблок, 2 кг бананов, 1 кг апельсинов было продано 05 июля с общей суммой продаж 23 руб.
<svg class="chart">
<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
</svg>
<svg class="chart">
<g class="x axis" aria-hidden="true"></g>
<g class="y axis" aria-hidden="true"></g>
...
<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
</svg>
<a href="#target-element">пропустить график</a>
<svg class="chart">...</svg>
<div id="target-element">...</div>
Lorem ipsum dolor sit, перед consectetur adipisicing elit. Quod, facilis dolorem ipsa voluptatem numquam corrupti distinctio neque nulla!
Libero quam aliquam et! Voluptatum после ipsam, architecto error obcaecati ea atque dolor, provident explicabo quis eaque.
tabindex=2
<body>
<svg aria-hidden="true"></svg>
<table class="visually-hidden"></table>
</body>
!== 0px.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
<body>
<div class="tabs">
<div class="tab">
<svg></svg>
</div>
<div class="tab">
<table></table>
</div>
</div>
</body>
<table>
<caption>Bob's data</caption>
<tr>
<th scope="col">Дата</th>
</tr>
<tr>
<th scope="row">01 июля</th>
</tr>
</table>
Дата | Яблоки | Бананы | Апельсины |
---|---|---|---|
01 июля | 3 | 3 | 1 |
02 июля | 4 | 3 | 5 |
03 июля | 2 | 2 | 4 |
04 июля | 3 | 1 | 5 |
05 июля | 5 | 2 | 1 |
Дата | Яблоки | Бананы | Апельсины |
---|---|---|---|
01 июля | 3 | 1 | 2 |
02 июля | 1 | 5 | 4 |
03 июля | 3 | 4 | 4 |
04 июля | 2 | 5 | 1 |
05 июля | 5 | 2 | 3 |
Дата | Сумма |
---|---|
01 июля | 38 |
02 июля | 67 |
03 июля | 59 |
04 июля | 51 |
05 июля | 54 |
colspan
rowspan
17 сек.
248