mgentilini
Posts: 2
Joined: Wed Dec 05, 2018 5:10 pm

Accessibility - Chart tooltip fails W3C validation

When mouse hovering chart points, a tooltip is generated, which has the following DOM (this example has 1 X axis and 2 Y axes):

Code: Select all

<div class="highcharts-label highcharts-tooltip highcharts-color-undefined" style="position: absolute; left: 135px; top: -9999px; opacity: 0; pointer-events: none; visibility: visible;">
    <span data-z-index="1" style="font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif; font-size: 12px; position: absolute; white-space: nowrap; color: rgb(51, 51, 51); cursor: default; margin-left: 0px; margin-top: 0px; left: 15px; top: 15px;">
        <table>
            <tbody>
                <tr><td style="line-height: 19px;text-align: right;"><span>value Y axis 1</span></td></tr>
                <tr><td style="line-height: 19px;text-align: right;"><span>value Y axis 2</span></td></tr>
                <tr><td style="text-align: right;font-size: 10px;"><br> value X axis</td><td></td></tr>
            </tbody>
        </table>
    </span>
</div>
This breaks W3C validation because of the <table> inside a <span>, which is not allowed in HTML 5.
We have an accessibility requirement in our application and this error is preventing us to meet WCAG 2.0 SC 4.1.1 (level A): https://www.w3.org/TR/UNDERSTANDING-WCA ... arses.html

Is there a way to avoid this error, or is it possible to fix it?
We are including the highcharts library together with accessibility extensions like this:

Code: Select all

	
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/modules/export-data.js"></script>
<script src="//code.highcharts.com/modules/accessibility.js"></script>
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Accessibility - Chart tooltip fails W3C validation

Hello mgentilini,

As I understand from your post - this table inside tooltip is created by you, not by Highcharts options? Because as I checked, Highcharts doesn't generate tables like this inside tooltip. Could you send sample demo of this chart to work on it?

Best regards!
Sebastian Wędzel,
Highcharts Developer
mgentilini
Posts: 2
Joined: Wed Dec 05, 2018 5:10 pm

Re: Accessibility - Chart tooltip fails W3C validation

Sorry everyone, I didn't notice that the <table> was our custom template for the tooltip, so the problem can be easily solved by specifying a different template not breaking W3C validation. So you can ignore this request.

Regards and sorry for the "false alarm" :)

Return to “Highcharts Usage”