responsive-accessibility

Name: responsive-accessibility
Author: Owl-Listener

82stars25forks

How to install responsive-accessibility?

owl-listener/inclusive-design-skills/responsive-accessibility

$npx -y skills add Owl-Listener/inclusive-design-skills --skill responsive-accessibility

Installs into the current project.

Summary

Design responsive layouts that maintain accessibility across screen sizes, zoom levels, and orientations. Use when designing responsive interfaces, testing zoom behaviour, or reviewing layouts across devices. Triggers on: responsive, zoom, reflow, breakpoint, mobile accessibility

Files · 1

View on GitHub

SKILL.md

1	# Responsive Accessibility
2
3	Responsive design isn't just about screen size — it's about ensuring
4	accessibility holds at every viewport, zoom level, and orientation.
5	A layout that works at 1440px but breaks at 200% zoom has failed
6	the users who need zoom most.
7
8	## Core Requirements
9
10	### Text Reflow at 200% Zoom
11	- All content must reflow into a single column at 200% zoom
12	with no horizontal scrolling
13	- This is WCAG 2.1 Level AA (Success Criterion 1.4.10)
14	- Test by setting browser zoom to 200% at 1280px viewport —
15	the result must be usable without horizontal scroll
16	- Exceptions: data tables, maps, and diagrams may scroll
17	horizontally if no information is lost
18
19	### Text Scaling to 200%
20	- All text must remain readable when scaled to 200%
21	- Text must not be clipped, truncated, or overlap other elements
22	- Use relative units (rem, em, %) not fixed pixels for text
23	- Line height and spacing should scale proportionally
24
25	### Orientation Freedom
26	- Content must work in both portrait and landscape orientation
27	- Never lock orientation unless essential to function
28	(a piano app may need landscape; a form never does)
29	- Some users mount devices in fixed orientations due to
30	physical setup — locking orientation can block access entirely
31
32	## Design Patterns
33
34	### Fluid Layout
35	- Use flexible grids that adapt rather than fixed breakpoints
36	that snap
37	- Set max-width on content containers for readability
38	(45–75 characters per line)
39	- Let whitespace compress before content reflows
40	- Avoid fixed-width elements that force horizontal scroll
41
42	### Content Priority
43	- Define what's essential at each breakpoint
44	- On small screens: show core content, provide access to rest
45	- Don't hide critical functionality behind "desktop only" features
46	- Navigation should adapt (hamburger menu is fine) but all
47	destinations must remain accessible
48
49	### Touch and Pointer Adaptation
50	- At small viewports: increase touch targets to 48px minimum
51	- At large viewports: pointer-friendly sizes are acceptable
52	(24px minimum)
53	- Detect pointer type with `@media (pointer: coarse)` for
54	touch-first sizing
55	- Spacing between targets should increase on touch devices
56
57	### Zoom-Safe Patterns
58	- Sticky headers must not consume excessive vertical space at zoom
59	(a header that takes 30% of the viewport at 200% zoom is a barrier)
60	- Fixed-position elements must be tested at 200% zoom
61	- Tooltips and popovers must remain visible and reachable at zoom
62	- Modal dialogs must be scrollable if content exceeds viewport at zoom
63
64	## Testing Protocol
65
66	1. Test at 100%, 150%, and 200% browser zoom on a 1280px viewport
67	2. Test at 320px viewport width (mobile equivalent)
68	3. Test in both portrait and landscape orientation
69	4. Test with system font size set to largest option
70	5. At each test point verify: no horizontal scroll, no clipped text,
71	no overlapping elements, all interactions functional
72
73	## Assessment Checklist
74
75	- [ ] Content reflows at 200% zoom without horizontal scrolling
76	- [ ] Text remains readable at 200% scaling
77	- [ ] Both orientations are supported
78	- [ ] Touch targets increase at small viewports
79	- [ ] Sticky/fixed elements don't dominate the viewport at zoom
80	- [ ] No functionality is lost at any supported viewport size
81	- [ ] All text uses relative units

People who liked this also viewed

6 picks

Type

responsive-accessibility

82stars25forks

View on GitHub

How to install responsive-accessibility?

owl-listener/inclusive-design-skills/responsive-accessibility

$npx -y skills add Owl-Listener/inclusive-design-skills --skill responsive-accessibility

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Responsive Accessibility
2
3	Responsive design isn't just about screen size — it's about ensuring
4	accessibility holds at every viewport, zoom level, and orientation.
5	A layout that works at 1440px but breaks at 200% zoom has failed
6	the users who need zoom most.
7
8	## Core Requirements
9
10	### Text Reflow at 200% Zoom
11	- All content must reflow into a single column at 200% zoom
12	with no horizontal scrolling
13	- This is WCAG 2.1 Level AA (Success Criterion 1.4.10)
14	- Test by setting browser zoom to 200% at 1280px viewport —
15	the result must be usable without horizontal scroll
16	- Exceptions: data tables, maps, and diagrams may scroll
17	horizontally if no information is lost
18
19	### Text Scaling to 200%
20	- All text must remain readable when scaled to 200%
21	- Text must not be clipped, truncated, or overlap other elements
22	- Use relative units (rem, em, %) not fixed pixels for text
23	- Line height and spacing should scale proportionally
24
25	### Orientation Freedom
26	- Content must work in both portrait and landscape orientation
27	- Never lock orientation unless essential to function
28	(a piano app may need landscape; a form never does)
29	- Some users mount devices in fixed orientations due to
30	physical setup — locking orientation can block access entirely
31
32	## Design Patterns
33
34	### Fluid Layout
35	- Use flexible grids that adapt rather than fixed breakpoints
36	that snap
37	- Set max-width on content containers for readability
38	(45–75 characters per line)
39	- Let whitespace compress before content reflows
40	- Avoid fixed-width elements that force horizontal scroll
41
42	### Content Priority
43	- Define what's essential at each breakpoint
44	- On small screens: show core content, provide access to rest
45	- Don't hide critical functionality behind "desktop only" features
46	- Navigation should adapt (hamburger menu is fine) but all
47	destinations must remain accessible
48
49	### Touch and Pointer Adaptation
50	- At small viewports: increase touch targets to 48px minimum
51	- At large viewports: pointer-friendly sizes are acceptable
52	(24px minimum)
53	- Detect pointer type with `@media (pointer: coarse)` for
54	touch-first sizing
55	- Spacing between targets should increase on touch devices
56
57	### Zoom-Safe Patterns
58	- Sticky headers must not consume excessive vertical space at zoom
59	(a header that takes 30% of the viewport at 200% zoom is a barrier)
60	- Fixed-position elements must be tested at 200% zoom
61	- Tooltips and popovers must remain visible and reachable at zoom
62	- Modal dialogs must be scrollable if content exceeds viewport at zoom
63
64	## Testing Protocol
65
66	1. Test at 100%, 150%, and 200% browser zoom on a 1280px viewport
67	2. Test at 320px viewport width (mobile equivalent)
68	3. Test in both portrait and landscape orientation
69	4. Test with system font size set to largest option
70	5. At each test point verify: no horizontal scroll, no clipped text,
71	no overlapping elements, all interactions functional
72
73	## Assessment Checklist
74
75	- [ ] Content reflows at 200% zoom without horizontal scrolling
76	- [ ] Text remains readable at 200% scaling
77	- [ ] Both orientations are supported
78	- [ ] Touch targets increase at small viewports
79	- [ ] Sticky/fixed elements don't dominate the viewport at zoom
80	- [ ] No functionality is lost at any supported viewport size
81	- [ ] All text uses relative units

People who liked this also viewed

6 picks

Type