Checkbox accessible avec SVG + ARIA

Comment faire des checkbox accessibles avec SVG et ARIA

HTML

<svg width="600px" height="400px">
    <title>checkbox svg avec ARIA</title>
    
    <g onclick="toggle('cb1')">
        <circle id="cb1" r="20" cy="100" cx="100"  
                 role="checkbox"
                 aria-checked="true" 
                 aria-labelledby="text1" />
        <text id="text1" y="105" x="140">svg circle checkbox 1</text>
    </g>
    
    <g onclick="toggle('cb2')">
        <circle id="cb2" r="20" cy="200" cx="100" 
                role="checkbox" 
                aria-checked="false" 
                aria-labelledby="text2" />
        <text id="'text2" y="205" x="140"> svg circle checkbox 2 </text>
    </g>
    
    <g onclick="toggle('cb3')">
        <circle id="cb3" r="20" cy="300" cx="100" 
                role="checkbox" 
                aria-checked="false" 
                aria-labelledby="text3" />
        <text id="text3" y="305" x="140"> svg circle checkbox 3 </text>
    </g>
</svg>

CSS

circle {
    fill   : white;
    stroke : black;
    stroke-width : 5px;
}

circle[aria-checked=true] {
    fill : blue;
}

text {
    font : 20px sans-serif;
}

JavaScript

function toggle(id) {
    var checkbox = document.getElementById(id)
        checked = checkbox.getAttribute('aria-checked') == "true";
    
    checkbox.setAttribute('aria-checked', checked ? "false" : "true");
}