Non-Conformance Demo for WCAG 2.1, WCAG 2.2 Success Criterion 2.5.2 Pointer Cancellation (Level A)

2.5.2 Non-Conformance Shown with Non-Technical Explanation

Non-Conformance Demo 2.5.2 is about when actions are executed.

The label turned green before you released the mouse button.

W3Schools onmousedown Event, About Copyright

2.5.2 Non-Conformance Shown with Technical Explanation and Markup

<form class="yesandno" id="sc252">

<label>mouse down</label> <input type="button" id="green" name="yesno" value="turn label green" onmousedown="mouseDown()" tabindex="1">

</form>

<script>

function mouseDown() {

document.getElementById("sc252").style.color = "green";

}

</script>

The onmousedown event is the the wrong event to use for this action, because executing an action before the user releases the button makes the action harder to undo. A better event to use is onclick.