1) WCAG 1.3.1 — Info and Relationships (Labels / Structure) A
Problem: visual labels exist, but the programmatic relationship is missing (screen readers can’t reliably identify the field).
Screen readers may announce “edit text” with no field purpose.
<div>Email</div>
<input type="email" />Screen readers announce “Email, edit text”.
<label for="email">Email</label>
<input id="email" type="email" autocomplete="email" />2) WCAG 2.1.1 — Keyboard A
Problem: key workflow actions are mouse-only (common in approval grids / drag interactions).
This element is not keyboard focusable by default.
<div onclick="approve()">Approve Invoice</div><button type="button">Approve Invoice</button>3) WCAG 4.1.2 — Name, Role, Value A
Problem: custom components don’t expose a correct role/state, so screen readers can’t interpret or operate them reliably.
No role, no aria-expanded, no relationship between control and menu.
<div onclick="openMenu()">Select route</div>
<div class="menu">...</div><button aria-expanded="false" aria-controls="routeMenu">Select route</button>
<div id="routeMenu" role="menu">...</div>4) WCAG 1.4.3 — Contrast (Minimum) AA
Problem: text contrast is too low (common with badge text, secondary labels, disabled states).
5) WCAG 2.4.7 — Focus Visible AA
Problem: keyboard focus is not visible (common when CSS removes outlines).
/* BAD */
*:focus { outline: none; }6) WCAG 1.4.10 — Reflow AA
Problem: content requires horizontal scrolling at high zoom (common with fixed-width dashboards).
In a narrow viewport (or 400% zoom), this layout forces horizontal scrolling.
.wide-grid{
display:grid;
grid-template-columns: 220px 220px 220px; /* forces horizontal scroll */
}Tiles wrap instead of forcing horizontal scrolling.
.reflow-pass{
display:flex;
flex-wrap:wrap;
}
.tile{ flex: 1 1 160px; }7) WCAG 2.4.11 — Focus Not Obscured (Minimum) AA
Problem: keyboard focus should not be hidden by sticky headers/footers (common in enterprise dashboards).
/* Missing scroll margin / offset for focus targets */8) WCAG 2.5.8 — Target Size (Minimum) AA
Problem: tap/click targets are too small (motor accessibility issue; dense grids and icon-only buttons are common offenders).
9) WCAG 3.3.1 — Error Identification A
Problem: errors are shown visually only and not programmatically linked/announced (common in form-heavy workflows).
<div class="error">Invalid email</div> <input aria-describedby="errorId" aria-invalid="true">
<div id="errorId" role="alert">...</div>10) WCAG 2.2.1 — Timing Adjustable A
Problem: session timeouts occur without giving the user enough time or a way to extend.
No warning dialog. No option to extend.
When time is low, user gets an accessible warning dialog with “Extend time”.
Session Expiring
Your session will expire soon. Would you like to extend your time?