WCAG examples gallery (All)
Examples of 1.4.10 Reflow
Here's how a page will look at 400% zoom or 320px width
This page requires scrolling in both horizontal and vertical directions to access content in some sections. Further, some content and functionality is difficult to access.
Examples of 1.4.12 Text spacing
To allow variation in text spacing, avoid fixed widths for buttons, fixed heights for table rows, fixed heights for cards without scroll for overflow.
deployed_code Buttons with fixed widths
deployed_code Table rows with fixed heights
Invoice | Status | Note | Amount |
|---|---|---|---|
INV00001 | Paid | Paid via Credit Card | $250.00 |
INV00002 | Pending | Payment pending through PayPal | $150.00 |
INV00003 | Unpaid | Unpaid, expected via Bank Transfer | $350.00 |
INV00004 | Paid | Paid via Credit Card | $450.00 |
INV00005 | Paid | Paid via PayPal | $550.00 |
IN00V006 | Pending | Payment pending via Credit card | $200.00 |
INV00007 | Unpaid | Unpaid, expected via Credit Card | $300.00 |
deployed_code Cards with fixed heights
Card title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
Examples of 1.4.13 Content on hover or focus
deployed_code Non hoverable tooltips
Once the tooltip appears, move your mouse into the tooltip content and see if the tooltip disappears
deployed_code Non persistent tooltips
Once the tooltip appears, see if the tooltip holds as long as you hover(or focus the trigger)
deployed_code In-dismissible tooltips
Once the tooltip appears, press Esc and check if it can be dismissed
Examples of 2.4.7 Focus visible
This example is a game!
Do not remove focus indicators on elements. Modify, but do not remove fully.
Click start to begin the game!
Examples of 4.1.2 Name, Role, Value
Non standard UI components cannot be consumed by assistive technology, if they do not have proper name, role, state and value.
deployed_code An inaccessible hover interaction
How mouse users experience it
Hover me?
This text is shown only on hover—often inaccessible to keyboard users and screen reader users. This is a common pattern in web design, but it can create accessibility issues for users who rely on keyboard navigation or screen readers.
How keyboard users experience it
Focus me with keyboard? (spoiler, you cannot)
This text is shown only on hover—often inaccessible to keyboard users and screen reader users. This is a common pattern in web design, but it can create accessibility issues for users who rely on keyboard navigation or screen readers.