user-personalization

Name: user-personalization
Author: mgifford

27stars2forks

How to install user-personalization?

mgifford/accessibility-skills/user-personalization

$npx -y skills add mgifford/accessibility-skills --skill user-personalization

Installs into the current project.

Summary

Load this skill whenever the project has personalization features, user preference controls, theme selectors, font size adjusters, motion toggles, contrast settings, or any user-configurable accessibility accommodations. Under no circumstances override or ignore user OS-level acc

Files · 1

View on GitHub

SKILL.md

1	# User Personalization Accessibility Skill
2
3	> Canonical source: `examples/USER_PERSONALIZATION_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules when implementing user preference controls or reviewing
7	existing personalization features.
8	Only load this skill if the project has personalization features.
9
10	---
11
12	## Core Mandate
13
14	Personalization is an enhancement to an accessible foundation — not a repair
15	layer and not a substitute for WCAG conformance. Start by respecting OS,
16	browser, and AT settings; add site-specific controls only when they provide a
17	meaningful choice users cannot reliably get from those existing tools. The
18	page must still satisfy browser zoom, text resizing, text-spacing overrides,
19	forced colors, and keyboard operation whether or not it offers a preference
20	editor.
21
22	Preference precedence model: (1) start with an accessible default; (2)
23	follow a recognized system/browser preference when the site setting is
24	"System"/"Default"; (3) let an explicit site choice override only the
25	corresponding presentation dimension; (4) let "Reset to defaults" remove site
26	overrides and resume following the system. Do not interpret a media-query
27	match as a diagnosis — people choose dark mode, reduced motion, or increased
28	contrast for many reasons.
29
30	---
31
32	## Severity Scale (this skill)
33
34	\| Level \| Meaning \|
35	\|---\|---\|
36	\| Critical \| Overlay used as compliance substitute; interferes with user's AT \|
37	\| Serious \| OS-level preferences (reduced-motion, colour scheme) not respected \|
38	\| Moderate \| Personalization widget not keyboard accessible; state not announced \|
39	\| Minor \| Preferences not persisted; `prefers-reduced-data` not considered \|
40
41	---
42
43	## Critical: Never Use Accessibility Overlays as a Compliance Substitute
44
45	Third-party "accessibility overlay" widgets that claim to auto-fix issues
46	must not be used as a compliance substitute. **Using an overlay as a
47	compliance claim is Critical** — they cannot fix underlying structural issues
48	(missing labels, incorrect ARIA, tab order), actively interfere with users'
49	own AT (screen readers, browser zoom, OS high contrast), provide false
50	compliance assurance, and are widely rejected by the disability community
51	(see <https://overlayfactsheet.com/>).
52
53	A preference editor is different from an overlay: it lets a user choose among
54	presentations the site has deliberately designed and tested. Personalization
55	must not: claim to make an otherwise inaccessible site conformant; rewrite
56	semantics generically at runtime; interfere with AT or user styles; conceal
57	unresolved defects; or replace remediation in source templates. Runtime
58	remediation for a locked legacy system can be a documented, tested, temporary
59	risk mitigation — not conformance, and not a reason to stop underlying
60	remediation work.
61
62	---
63
64	## Required Outcome: Separate WCAG Requirements From Enhancements
65
66	WCAG usually requires content to adapt to user settings — it does not
67	generally require a site to reproduce browser settings in a custom panel.
68
69	\| Requirement \| What authors must actually do \|
70	\|:---\|:---\|
71	\| 1.4.4 Resize Text (AA) \| Don't prevent user-agent resizing; content/controls stay usable at 200%. A site text-size control is one technique, not a universal requirement. \|
72	\| 1.4.12 Text Spacing (AA) \| Allow user overrides of line/paragraph/letter/word spacing without loss of content or function — the site does not have to provide spacing controls \|
73	\| 1.4.10 Reflow (AA) \| Preserve content/functionality at the required narrow width \|
74	\| Contrast / non-text contrast \| Every author-provided theme or preset must independently meet the applicable criteria \|
75	\| Reduced motion \| Respect `prefers-reduced-motion` where motion may create a barrier; a site control can add an additional override \|
76	\| Reading mode, font choice, density \| Useful enhancements when research demonstrates need — not automatic WCAG requirements \|
77
78	Do not claim that adding a preference panel makes inaccessible content conformant.
79
80	---
81
82	## Serious: Respect User Preference Media Features (Progressive Enhancement)
83
84	Unsupported queries are ignored, so the default presentation must remain
85	accessible without them.
86
87	### Color scheme
88
89	```css
90	:root {
91	color-scheme: light dark;
92	--page-background: #ffffff;
93	--text-color: #1f2937;
94	}
95	@media (prefers-color-scheme: dark) {
96	:root:not([data-them

People who liked this also viewed

6 picks

Type

user-personalization

27stars2forks

View on GitHub

How to install user-personalization?

mgifford/accessibility-skills/user-personalization

$npx -y skills add mgifford/accessibility-skills --skill user-personalization

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# User Personalization Accessibility Skill
2
3	> Canonical source: `examples/USER_PERSONALIZATION_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules when implementing user preference controls or reviewing
7	existing personalization features.
8	Only load this skill if the project has personalization features.
9
10	---
11
12	## Core Mandate
13
14	Personalization is an enhancement to an accessible foundation — not a repair
15	layer and not a substitute for WCAG conformance. Start by respecting OS,
16	browser, and AT settings; add site-specific controls only when they provide a
17	meaningful choice users cannot reliably get from those existing tools. The
18	page must still satisfy browser zoom, text resizing, text-spacing overrides,
19	forced colors, and keyboard operation whether or not it offers a preference
20	editor.
21
22	Preference precedence model: (1) start with an accessible default; (2)
23	follow a recognized system/browser preference when the site setting is
24	"System"/"Default"; (3) let an explicit site choice override only the
25	corresponding presentation dimension; (4) let "Reset to defaults" remove site
26	overrides and resume following the system. Do not interpret a media-query
27	match as a diagnosis — people choose dark mode, reduced motion, or increased
28	contrast for many reasons.
29
30	---
31
32	## Severity Scale (this skill)
33
34	\| Level \| Meaning \|
35	\|---\|---\|
36	\| Critical \| Overlay used as compliance substitute; interferes with user's AT \|
37	\| Serious \| OS-level preferences (reduced-motion, colour scheme) not respected \|
38	\| Moderate \| Personalization widget not keyboard accessible; state not announced \|
39	\| Minor \| Preferences not persisted; `prefers-reduced-data` not considered \|
40
41	---
42
43	## Critical: Never Use Accessibility Overlays as a Compliance Substitute
44
45	Third-party "accessibility overlay" widgets that claim to auto-fix issues
46	must not be used as a compliance substitute. **Using an overlay as a
47	compliance claim is Critical** — they cannot fix underlying structural issues
48	(missing labels, incorrect ARIA, tab order), actively interfere with users'
49	own AT (screen readers, browser zoom, OS high contrast), provide false
50	compliance assurance, and are widely rejected by the disability community
51	(see <https://overlayfactsheet.com/>).
52
53	A preference editor is different from an overlay: it lets a user choose among
54	presentations the site has deliberately designed and tested. Personalization
55	must not: claim to make an otherwise inaccessible site conformant; rewrite
56	semantics generically at runtime; interfere with AT or user styles; conceal
57	unresolved defects; or replace remediation in source templates. Runtime
58	remediation for a locked legacy system can be a documented, tested, temporary
59	risk mitigation — not conformance, and not a reason to stop underlying
60	remediation work.
61
62	---
63
64	## Required Outcome: Separate WCAG Requirements From Enhancements
65
66	WCAG usually requires content to adapt to user settings — it does not
67	generally require a site to reproduce browser settings in a custom panel.
68
69	\| Requirement \| What authors must actually do \|
70	\|:---\|:---\|
71	\| 1.4.4 Resize Text (AA) \| Don't prevent user-agent resizing; content/controls stay usable at 200%. A site text-size control is one technique, not a universal requirement. \|
72	\| 1.4.12 Text Spacing (AA) \| Allow user overrides of line/paragraph/letter/word spacing without loss of content or function — the site does not have to provide spacing controls \|
73	\| 1.4.10 Reflow (AA) \| Preserve content/functionality at the required narrow width \|
74	\| Contrast / non-text contrast \| Every author-provided theme or preset must independently meet the applicable criteria \|
75	\| Reduced motion \| Respect `prefers-reduced-motion` where motion may create a barrier; a site control can add an additional override \|
76	\| Reading mode, font choice, density \| Useful enhancements when research demonstrates need — not automatic WCAG requirements \|
77
78	Do not claim that adding a preference panel makes inaccessible content conformant.
79
80	---
81
82	## Serious: Respect User Preference Media Features (Progressive Enhancement)
83
84	Unsupported queries are ignored, so the default presentation must remain
85	accessible without them.
86
87	### Color scheme
88
89	```css
90	:root {
91	color-scheme: light dark;
92	--page-background: #ffffff;
93	--text-color: #1f2937;
94	}
95	@media (prefers-color-scheme: dark) {
96	:root:not([data-them

People who liked this also viewed

6 picks

Type