Web Accessibility (WCAG) Cheat Sheet
Covers ARIA roles and attributes, keyboard focus management, the WCAG POUR principles and conformance levels, and common accessibility checks.
2 PagesIntermediateMar 12, 2026
ARIA Roles & Attributes
Communicating state and purpose to assistive tech.
html
<!-- Use native elements first; ARIA is a last resort --><button aria-label="Close dialog" onclick="closeDialog()">×</button><div role="alert" aria-live="assertive"> Form submitted successfully.</div><input type="text" aria-describedby="email-hint" aria-invalid="true" aria-required="true"/><span id="email-hint">We'll never share your email.</span><button aria-expanded="false" aria-controls="menu">Menu</button><ul id="menu" hidden>...</ul>
Keyboard Navigation & Focus
Making custom controls operable without a mouse.
html
<!-- Ensure custom interactive elements are keyboard-operable --><div role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')activate()" onclick="activate()"> Custom Button</div>
Visible Focus & Skip Links
CSS that keeps keyboard focus visible and navigable.
css
/* Never remove focus outlines without a visible replacement */:focus-visible { outline: 2px solid #2684ff; outline-offset: 2px;}/* Skip link lets keyboard users bypass repeated navigation */.skip-link { position: absolute; left: -9999px;}.skip-link:focus { left: 0;}
WCAG POUR Principles & Levels
The four pillars WCAG success criteria are organized around.
- Perceivable- content must be presentable to users in ways they can perceive, e.g. alt text, captions, sufficient contrast
- Operable- UI components and navigation must be operable, e.g. full keyboard access, no seizure-inducing flashing
- Understandable- content and UI operation must be understandable, e.g. consistent navigation, clear labels and error messages
- Robust- content must work reliably with assistive technologies through valid markup and correct ARIA usage
- Level A/AA/AAA- WCAG's three conformance levels; AA is the common legal and industry baseline
- 4.5:1 contrast ratio- minimum contrast for normal text at WCAG AA (3:1 for large text)
Pro Tip
Automated tools like axe or Lighthouse only catch roughly a third of WCAG issues: always pair them with a manual keyboard-only pass and a quick screen reader smoke test using VoiceOver or NVDA before calling a page accessible.
Was this cheat sheet helpful?
Explore Topics
#WebAccessibilityWCAG#WebAccessibilityWCAGCheatSheet#WebDevelopment#Intermediate#ARIARolesAttributes#KeyboardNavigationFocus#Visible#Focus#CheatSheet#SkillVeris
Advertisement
Sri Hayavadhana Info-Tech
Professional Web Designing Services
- Responsive Websites
- E-commerce Solutions
- SEO Friendly Design
- Fast & Secure
- Support & Maintenance
