4.6 KiB
4.6 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d778a367417b2b2512aa5 | Improve Chart Accessibility with the figure Element | 0 | Melhore a acessibilidade do gráfico com a figura Element |
Description
figure
, juntamente com a figcaption
relacionada. Usados em conjunto, esses itens envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto com sua legenda. Isso proporciona um aumento de acessibilidade duplo por meio do conteúdo relacionado ao agrupamento semanticamente e fornece uma alternativa em texto que explica a figure
. Para visualizações de dados, como gráficos, a legenda pode ser usada para observar brevemente as tendências ou conclusões para usuários com deficiências visuais. Outro desafio abrange como mover uma versão da tabela dos dados do gráfico para fora da tela (usando CSS) para usuários de leitores de tela. Aqui está um exemplo - note que o figcaption
vai dentro da figure
tags e pode ser combinado com outros elementos: <figure>
<img src = "roundhouseDestruction.jpeg" alt = "Foto do Camper Cat executando um roundhouse kick">
<br>
<figcaption>
Mestre Camper Cat demonstra a forma correta de um chute circular.
</ figcaption>
</ figure>
Instructions
div
ele usou para uma tag figure
e a tag p
que circunda a legenda para uma tag figcaption
. Tests
tests:
- text: Seu código deve ter uma tag de <code>figure</code> .
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
- text: Seu código deve ter uma tag <code>figcaption</code> .
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
- text: Seu código não deve ter tags <code>div</code> .
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Seu código não deve ter tags <code>p</code> .
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
- text: A <code>figcaption</code> deve ser um filho da tag de <code>figure</code> .
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
- text: Certifique-se de que seu elemento <code>figure</code> tenha uma tag de fechamento.
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
Challenge Seed
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- Add your code below this line -->
<div>
<!-- Stacked bar chart will go here -->
<br>
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div>
<!-- Add your code above this line -->
</section>
<section id="stealth">
<h2>Stealth & Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
Solution
// solution required