Check elements with mouse event handlers

checka11y.css

@@ -18,7 +18,7 @@
           box-shadow: 0 0 0 0.25rem var(--border-error);
 }
 
-button button::after, button details::after, button label::after, button:not([aria-label]):not([aria-labelledby]):empty::after, [dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])::after, h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after, h1 [aria-hidden]::after, h2 [aria-hidden]::after, h3 [aria-hidden]::after, h4 [aria-hidden]::after, h5 [aria-hidden]::after, h6 [aria-hidden]::after, html:not([lang]) body::before, html[lang=""] body::before, a button::after, a details::after, a label::after, a[href]:not([aria-label]):not([aria-labelledby]):empty::after, ol > *:not(li)::after, ul > *:not(li)::after, dl > *:not(dt):not(dd)::after, nav:not([aria-label]):not([aria-labelledby]) ~ nav::after, nav ~ nav:not([aria-label]):not([aria-labelledby])::after, a[href][tabindex="-1"]::after, area[href][tabindex="-1"]::after, input:not([disabled])[tabindex="-1"]::after, select:not([disabled])[tabindex="-1"]::after, textarea:not([disabled])[tabindex="-1"]::after, button:not([disabled])[tabindex="-1"]::after, iframe[tabindex="-1"]::after, [contentEditable="true"][tabindex="-1"]::after, [accesskey]::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
+button button::after, button details::after, button label::after, button:not([aria-label]):not([aria-labelledby]):empty::after, [dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])::after, h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after, h1 [aria-hidden]::after, h2 [aria-hidden]::after, h3 [aria-hidden]::after, h4 [aria-hidden]::after, h5 [aria-hidden]::after, h6 [aria-hidden]::after, html:not([lang]) body::before, html[lang=""] body::before, a button::after, a details::after, a label::after, a[href]:not([aria-label]):not([aria-labelledby]):empty::after, ol > *:not(li)::after, ul > *:not(li)::after, dl > *:not(dt):not(dd)::after, nav:not([aria-label]):not([aria-labelledby]) ~ nav::after, nav ~ nav:not([aria-label]):not([aria-labelledby])::after, a[href][tabindex="-1"]::after, area[href][tabindex="-1"]::after, input:not([disabled])[tabindex="-1"]::after, select:not([disabled])[tabindex="-1"]::after, textarea:not([disabled])[tabindex="-1"]::after, button:not([disabled])[tabindex="-1"]::after, iframe[tabindex="-1"]::after, [contentEditable="true"][tabindex="-1"]::after, [accesskey]::after, [onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
   display: block;
   font-size: 1.2rem;
   font-weight: 700;
@@ -32,7 +32,7 @@ button button::after, button details::after, button label::after, button:not([ar
   background-color: var(--bg-error);
 }
 
-[accesskey]::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
+[accesskey]::after, [onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
   color: var(--text-warning);
   border: 0.4rem solid var(--border-warning);
   background-color: var(--bg-warning);
@@ -80,6 +80,10 @@ button:not([aria-label]):not([aria-labelledby]):empty::after {
   content: "ERROR: The dir attribute can only have the values, ltr, rtl and auto." !important;
 }
 
+[onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after {
+  content: "WARNING: Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative." !important;
+}
+
 h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after {
   content: "ERROR: Headings must not be empty." !important;
 }

features.md

@@ -46,4 +46,5 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
   - `<button>`: Read about [Success Criterion 2.4.4 Link Purpose (In Context)](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
 - Checks that the alt attributes have meaningful content
 - Checks and warns about the use of <u> element: [Read about this and alternative elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u#Other_elements_to_consider_using)
+- Checks and warns about using mouse event handlers on HTML elements that are potentially not reachable from the keyboard: [Read more about Success Criterion 1.3.1 and 2.1.1](https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F42)
 ---

src/checka11y.scss

@@ -7,6 +7,7 @@
 @import "./features/autoplay";
 @import "./features/buttons";
 @import "./features/dir";
+@import "./features/handlers";
 @import "./features/headings";
 @import "./features/html";
 @import "./features/iframe";

src/features/_handlers.scss

@@ -0,0 +1,37 @@
+/*
+  HTMLElements other than <a> and <button> that have mouse event handlers without the appropriate keyboard handlers are not accessible
+*/
+[onclick]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onclick][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onclick][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onclick][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[ondblclick][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onmousedown][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onmouseup][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseover]:not( a ):not( button )::after,
+[onmouseenter]:not( a ):not( button )::after,
+[onmouseleave]:not( a ):not( button )::after {
+  @extend %contentWarning;
+  @include contentMessage(warning, "Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative.");
+}

test/index.html

@@ -299,5 +299,14 @@ <h2>Avoid using <code>&lt;u&gt;</code> element as it could look like a link</h2>
         <em><b>I am a bold <code>&lt;em&gt;</code> element to denote stress emphasis</b></em>
       </div>
     </section>
+    <section>
+      <h2>Avoide using mouse event handlers without the appropriate keyboard alternative on HTML Elements</h2>
+      <div>
+        <div onclick="">A div with onclick</div>
+        <div onclick="" onkeydown="">A div with onclick and onkeydown</div>
+        <div onclick="" onkeydown="" role="button">A div with with onclick, onkeydown and role=button</div>
+        <div onclick="" onkeydown="" role="button" tabindex="-1">A div with onclick, onkeydown, role=button and tabindex=-1</div>
+      </div>
+    </section>
   </body>
 </html>