ik ben bezig met een a11y tool met cypress en axe. ik wil nu screenshots toevoegen aan het report die ik produceer. De screenshots moeten weergeven waar op de pagina de fout zit, het liefst met een markering eromheen en het gebied eromheen om duidelijker te begrijpen waar het misgaat. in het rapport hoeft alleen een link naar het screenshot te komen. ik gebruik cypress-axe

dit is de template waar de link in terecht moet komen:

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<style>
.violationCard {
width: 100%;
margin-bottom: 1rem;
}

.violationCardLine {
display: flex;
justify-content: space-between;
align-items: start;
}

.learnMore {
margin-bottom: 0.75rem;
white-space: nowrap;
color: #2557a7;
}

.card-link {
color: #2557a7;
}

.violationNode {
font-size: 0.75rem;
}

.wrapBreakWord {
word-break: break-word;
}

.summary {
font-size: 1rem;
}

.summarySection {
margin: 0.5rem 0;
}

.hljs {
white-space: pre-wrap;
width: 100%;
background: #f0f0f0;
}

p {
margin-top: 0.3rem;
}

li {
line-height: 1.618;
}
</style>
<!-- Bootstrap CSS: Preload and then load asynchronously -->
<link rel="preload" as="style" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
onload="this.onload=null;this.rel='stylesheet'"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<noscript>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</noscript>

<!-- Highlight.js CSS: Preload and then load asynchronously -->
<link rel="preload" as="style"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/stackoverflow-light.min.css"
onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/stackoverflow-light.min.css">
</noscript>

<!-- External JS: Load asynchronously or defer -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"
defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"
defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"
defer></script>

<!-- Highlight.js JavaScript: Load asynchronously or defer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js" defer></script>

<!-- Favicon -->
<link rel="icon"
href="https://www.deque.com/wp-content/uploads/2018/03/cropped-DQ_SecondaryLogo_HeroBlue_RGB-1-32x32.png"
sizes="32x32" />

<title>EVIDEN Accessibility Results</title>
</head>

<body>
<div style="padding: 2rem">
<h3>
EVIDEN Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}}
</h3>
<div class="summarySection">
{{#url}}
<div class="summary">
Page URL:
<a href="{{url}}" target="_blank" class="card-link">{{url}}</a>
<br />
</div>
{{/url}} {{#customSummary}}
<div class="summary">{{{customSummary}}}</div>
{{/customSummary}}
</div>
<h5>{{{violationsSummary}}}</h5>
{{#violationDetails.length}}
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 5%">#</th>
<th style="width: 45%">Description</th>
<th style="width: 15%">Axe rule ID</th>
<th style="width: 23%">WCAG</th>
<th style="width: 7%">Impact</th>
<th style="width: 5%">Count</th>
</tr>
</thead>
{{/violationDetails.length}}
<tbody>
{{#violations}}
<tr>
<th scope="row"><a href="#{{index}}" class="card-link">{{index}}</a></th>
<td>{{help}}</td>
<td>{{id}}</td>
<td>{{wcag}}</td>
<td>{{impact}}</td>
<td>{{nodes}}</td>
</tr>
{{/violations}}
</tbody>
</table>
{{#violationDetails.length}}
<h3>Failed</h3>
{{/violationDetails.length}} {{#violationDetails}}
<div class="card violationCard">
<div class="card-body">
<div class="violationCardLine">
<h5 class="card-title violationCardTitleItem">
<a id="{{index}}">{{index}}.</a> {{help}}
</h5>
<a href="{{helpUrl}}" target="_blank" class="card-link violationCardTitleItem learnMore">Learn
more</a>
</div>
<p class="card-text">
<strong>Violation id:</strong> {{id}}<br />
<strong>WCAG:</strong> {{wcag}}<br />
<strong>Impact:</strong> {{impact}}<br />
<strong>Elements affected:</strong> {{nodes.length}}
</p>
{{#nodes}}
<details>
<summary class="violationCardLine">
<strong>HTML Element:</strong>
<code class="language-html">{{{html}}}</code>
</summary>
{{#anyTarget}}
<p class="card-text">
<strong>Target:</strong> {{{target}}}
</p>
{{/anyTarget}} {{#anyMessage}}
<p class="card-text">
<strong>Message:</strong> {{{message}}}
</p>
{{/anyMessage}} {{#anyData}}
<p class="card-text">
<strong>Data:</strong> {{{data}}}
</p>
{{/anyData}}
</details>
{{/nodes}}
</div>
</div>
{{/violationDetails}}
</div>
<!-- Initialize Highlight.js after the page has loaded -->
<script>
window.addEventListener('load', function () {
hljs.highlightAll();
});
</script>
</body>

</html>