Accompanying Files
Observation Details
The checkmark and cross icons in data table "Kids Watches im Vergleich" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible. The code structure for the icons is as follows:
<span class="...">
<span class="..." aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="64.001"
height="64"
viewBox="0 0 64 64"
role="img"
class="..."
focusable="false"
>
<path fill="#262626" d="..."></path>
</svg>
</span>
</span>Observations:
Icon parent uses
aria-hidden="true"Icon has no accessible name as it misses the
<title>elementIcon uses
focusable="false", which is not needed as SVGs are non-focusable elements
Remediation Notes
Ensure, the icons use purpose equivalent text alternatives. Text alternative wording is dependent on the table header column wording as well. Possible text alternatives could be "Ja" for checkmark icon and "Nein" for cross icon. Ensure, wording matches the wording of table header column.