@a11yfred/neighbor 1.1.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +81 -90
- package/CONTRIBUTING.md +40 -40
- package/README.md +4 -472
- package/RULES-CONTENT.md +240 -81
- package/RULES-CSS.md +41 -19
- package/RULES-MARKUP.md +168 -94
- package/RULES.md +47 -28
- package/lib/content-rules.js +216 -0
- package/lib/framework-rules.js +282 -0
- package/lib/helpers-webcomponents.js +134 -0
- package/lib/rules.js +374 -3
- package/neighbor-content.mjs +1 -1
- package/neighbor-eslint-angular.mjs +29 -8
- package/neighbor-eslint-lit.mjs +85 -0
- package/neighbor-eslint-remix3.mjs +49 -0
- package/neighbor-eslint-vue.mjs +26 -6
- package/neighbor-eslint-webcomponents.mjs +41 -0
- package/neighbor-eslint.mjs +13 -6
- package/neighbor-stylelint.mjs +141 -3
- package/package.json +10 -11
package/RULES-CONTENT.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @a11yfred/neighbor
|
|
1
|
+
# @a11yfred/neighbor: Content Rules
|
|
2
2
|
|
|
3
3
|
Rules for accessible and inclusive web and app copy.
|
|
4
4
|
|
|
@@ -8,83 +8,111 @@ Rules for accessible and inclusive web and app copy.
|
|
|
8
8
|
|
|
9
9
|
## On language
|
|
10
10
|
|
|
11
|
-
Language is
|
|
11
|
+
Language is sensitive and always changing. What is okay depends on who is talking, who is listening, and the culture. A word that is fine today might be offensive tomorrow.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
A linter cannot solve this. Humans must check it.
|
|
14
14
|
|
|
15
|
-
Accessibility
|
|
15
|
+
Accessibility expert [Nicolas Steenhout](https://incl.ca/disability-language-is-a-nuanced-thing/) says we should not make strict language rules. Disabled people should decide what words to use, following the rule *[Nothing About Us Without Us](https://en.wikipedia.org/wiki/Nothing_About_Us_Without_Us)*. When people outside a community make up polite words (like "handicapable"), it often makes things worse.
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
As blind web standards engineer [Léonie Watson](https://tink.uk) says: *"There is no right or wrong answer because it is a matter of personal choice, and the choice depends on context."*
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Because of this, these rules only warn you about words that experts agree are bad. We do not make rules for words that people still argue about. If a rule gives a warning in a safe place (like quoting someone or an internal tool), you can ignore it.
|
|
20
20
|
|
|
21
|
-
All content rules
|
|
21
|
+
All content rules are set to `warn`, not `error`. A warning tells you to think. An error tells you the linter is 100% sure, and language is never 100% sure.
|
|
22
22
|
|
|
23
|
-
If
|
|
23
|
+
If these rules do not fit your project, you can turn them off, use the `allow` option, or submit a PR to change them.
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
27
|
## Rule methodology
|
|
28
28
|
|
|
29
|
-
A rule is
|
|
29
|
+
A rule is added only if:
|
|
30
30
|
|
|
31
|
-
1.
|
|
32
|
-
2. The
|
|
33
|
-
3.
|
|
31
|
+
1. WCAG says it is bad, **or** at least 3 expert guides say it is bad.
|
|
32
|
+
2. The linter can easily find it with a simple string match. No AI or guessing.
|
|
33
|
+
3. Experts agree it is bad. If experts disagree, we do not add the rule.
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
Grammarly and the Hemingway Editor informed the sentence-structure patterns: both flag passive voice, sentences over ~25 words, and words with simpler alternatives. Those patterns are consistent with the plain language guides surveyed. They are noted in the "Rules not included" section because, while valid as prose guidance, their false-positive rate in code string literals is too high to ship by default.
|
|
35
|
+
We do not include rules that are subjective or hard to check, like sentence length or passive voice. Tools like Grammarly or Hemingway are better for that.
|
|
38
36
|
|
|
39
37
|
---
|
|
40
38
|
|
|
41
39
|
## Sources
|
|
42
40
|
|
|
43
|
-
These rules
|
|
41
|
+
These rules come from these sources. Where sources conflict, W3C WAI wins.
|
|
44
42
|
|
|
45
43
|
### Global standards
|
|
46
44
|
|
|
47
45
|
| Source | URL |
|
|
48
46
|
| --- | --- |
|
|
49
|
-
| W3C WAI Writing Tips | [w3.org/WAI/tips/writing](https://www.w3.org/WAI/tips/writing/)
|
|
50
|
-
| wcag.com/authors | [wcag.com/authors](https://wcag.com/authors/) |
|
|
47
|
+
| W3C WAI Writing Tips | [w3.org/WAI/tips/writing](https://www.w3.org/WAI/tips/writing/) - primary authority |
|
|
51
48
|
| WCAG 2.2 | [w3.org/TR/WCAG22](https://www.w3.org/TR/WCAG22/) |
|
|
49
|
+
| wcag.com/authors | [wcag.com/authors](https://wcag.com/authors/) |
|
|
52
50
|
|
|
53
51
|
### English-speaking governments
|
|
54
52
|
|
|
55
53
|
| Country | Source |
|
|
56
54
|
| --- | --- |
|
|
55
|
+
| Australia | [Australian Government Style Manual - Accessible and Inclusive Content](https://www.stylemanual.gov.au/accessible-and-inclusive-content) |
|
|
56
|
+
| Canada | [Government of Canada - Guidelines for Creating Accessible Documents](https://accessible.canada.ca/guidelines-creating-accessible-documents) |
|
|
57
|
+
| United Kingdom | [GOV.UK - Publishing Accessible Documents](https://www.gov.uk/guidance/publishing-accessible-documents) |
|
|
58
|
+
| United Kingdom | [DWP Accessibility Manual](https://accessibility-manual.dwp.gov.uk/best-practice/writing-content) |
|
|
59
|
+
| United Kingdom | [GOV.UK Communications - accessible communications resources](https://www.communications.gov.uk/guidance/accessible-communications/accessible-communications-learning-and-resources/) |
|
|
57
60
|
| United States | [plainlanguage.gov](https://www.plainlanguage.gov) / [digital.gov/guides/plain-language](https://digital.gov/guides/plain-language) |
|
|
58
61
|
| United States | [SBA Content Style Guide](https://advocacy.sba.gov/office-of-advocacy-content-style-guide/writing-accessible-content/) |
|
|
59
|
-
| United Kingdom | [GOV.UK - Publishing Accessible Documents](https://www.gov.uk/guidance/publishing-accessible-documents) |
|
|
60
|
-
| United Kingdom | [DWP Accessibility Manual](https://accessibility-manual.dwp.gov.uk/best-practice/writing-content) |
|
|
61
|
-
| United Kingdom | [GOV.UK Communications - accessible communications resources](https://www.communications.gov.uk/guidance/accessible-communications/accessible-communications-learning-and-resources/) |
|
|
62
|
-
| Australia | [Australian Government Style Manual - Accessible and Inclusive Content](https://www.stylemanual.gov.au/accessible-and-inclusive-content) |
|
|
63
|
-
| Canada | [Government of Canada - Guidelines for Creating Accessible Documents](https://accessible.canada.ca/guidelines-creating-accessible-documents) |
|
|
64
62
|
|
|
65
63
|
### Disability language authorities
|
|
66
64
|
|
|
67
65
|
| Source | URL | Notes |
|
|
68
66
|
| --- | --- | --- |
|
|
69
|
-
| NCDJ Disability Language Style Guide | [cronkite.asu.edu/ncdj](https://cronkite.asu.edu/ncdj/disability-language-style-guide) | Journalism standard; updated regularly |
|
|
70
|
-
| AP Stylebook - Disability | [amdisrights.org/ap-stylebook-primer-on-disability](https://amdisrights.org/ap-stylebook-primer-on-disability) | Wire journalism standard |
|
|
71
67
|
| ADA National Network | [adata.org/factsheet/ADANN-writing](https://adata.org/factsheet/ADANN-writing) | U.S. legal/advocacy context |
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
| Nicolas Steenhout | [incl.ca - Disability Language Is a Nuanced Thing](https://incl.ca/disability-language-is-a-nuanced-thing/) | Practitioner perspective; *Nothing About Us Without Us* principle; identity-first vs person-first as community choice, not external rule; cites Léonie Watson |
|
|
68
|
+
| AP Stylebook - Disability | [amdisrights.org/ap-stylebook-primer-on-disability](https://amdisrights.org/ap-stylebook-primer-on-disability) | Wire journalism standard |
|
|
69
|
+
| APA Style - Disability | [apastyle.apa.org - bias-free language](https://apastyle.apa.org/style-grammar-guidelines/bias-free-language/disability) | Academic publishing standard |
|
|
75
70
|
| Léonie Watson | [tink.uk](https://tink.uk) | Blind web standards engineer; cited by Steenhout: *"There is no right or wrong answer because it is a matter of personal choice, and the choice depends on context."* |
|
|
71
|
+
| NCDJ Disability Language Style Guide | [cronkite.asu.edu/ncdj](https://cronkite.asu.edu/ncdj/disability-language-style-guide) | Journalism standard; updated regularly |
|
|
72
|
+
| Nicolas Steenhout | [incl.ca - Disability Language Is a Nuanced Thing](https://incl.ca/disability-language-is-a-nuanced-thing/) | Practitioner perspective; *Nothing About Us Without Us* principle; identity-first vs person-first as community choice, not external rule; cites Léonie Watson |
|
|
73
|
+
| SIGACCESS Accessible Writing Guide | [sigaccess.org](https://www.sigaccess.org/welcome-to-sigaccess/resources/accessible-writing-guide/) | Computing research community |
|
|
76
74
|
|
|
77
75
|
### Technical and UX writing
|
|
78
76
|
|
|
79
77
|
| Source | URL |
|
|
80
78
|
| --- | --- |
|
|
79
|
+
| A11y Collective | [a11y-collective.com - Accessible Writing](https://www.a11y-collective.com/blog/accessible-writing/) |
|
|
81
80
|
| Google Developer Style Guide | [developers.google.com/style/accessibility](https://developers.google.com/style/accessibility) |
|
|
82
|
-
| UX Content Co. | [uxcontent.com - Accessible UX Writing](https://uxcontent.com/accessible-ux-writing-a-guide-for-inclusive-content-design/) |
|
|
83
|
-
| A11y Collective | [a11y-collective.com - Accessible Writing](https://www.a11y-collective.com/blog/accessible-writing/) |
|
|
84
|
-
| SJSU Writing Center | [sjsu.edu - Accessible Writing Strategies](https://www.sjsu.edu/writingcenter/docs/handouts/Accessible%20Writing%20Strategies.pdf) |
|
|
85
|
-
| Section 508 | [section508.gov - Alternative Text](https://www.section508.gov/create/alternative-text/) |
|
|
86
81
|
| Grammarly | Clarity and passive voice patterns |
|
|
87
82
|
| Hemingway Editor | Sentence length and readability grade |
|
|
83
|
+
| Section 508 | [section508.gov - Alternative Text](https://www.section508.gov/create/alternative-text/) |
|
|
84
|
+
| SJSU Writing Center | [sjsu.edu - Accessible Writing Strategies](https://www.sjsu.edu/writingcenter/docs/handouts/Accessible%20Writing%20Strategies.pdf) |
|
|
85
|
+
| UX Content Co. | [uxcontent.com - Accessible UX Writing](https://uxcontent.com/accessible-ux-writing-a-guide-for-inclusive-content-design/) |
|
|
86
|
+
|
|
87
|
+
### Source abbreviations
|
|
88
|
+
|
|
89
|
+
When rule tables cite sources, they use these abbreviations:
|
|
90
|
+
|
|
91
|
+
| Abbreviation | Source |
|
|
92
|
+
| --- | --- |
|
|
93
|
+
| A11y Collective | A11y Collective Accessible Writing |
|
|
94
|
+
| ADA NN | ADA National Network |
|
|
95
|
+
| AP | AP Stylebook (wire journalism standard) |
|
|
96
|
+
| APA | APA Style - Bias-free Language |
|
|
97
|
+
| Australian Gov | Australian Government Style Manual |
|
|
98
|
+
| Canadian Gov | Government of Canada Accessible Documents Guidelines |
|
|
99
|
+
| digital.gov | U.S. Digital.gov Plain Language Guide |
|
|
100
|
+
| DWP | DWP Accessibility Manual (UK) |
|
|
101
|
+
| Google | Google Developer Style Guide - Accessibility |
|
|
102
|
+
| GOV.UK | GOV.UK Publishing Accessible Documents (UK) |
|
|
103
|
+
| NAHJ | National Association of Hispanic Journalists |
|
|
104
|
+
| NCDJ | National Center for Disability Journalism |
|
|
105
|
+
| plainlanguage.gov | U.S. Plain Language Action and Information Network |
|
|
106
|
+
| SBA | SBA Content Style Guide (U.S.) |
|
|
107
|
+
| Scope UK | Scope UK (disability rights organization) |
|
|
108
|
+
| Section 508 | Section 508.gov Alternative Text Guide |
|
|
109
|
+
| SIGACCESS | SIGACCESS Accessible Writing Guide |
|
|
110
|
+
| SJSU | SJSU Writing Center Accessible Writing Strategies |
|
|
111
|
+
| TJA | Trans Journalists Association |
|
|
112
|
+
| UK Gov | UK Government style and communications |
|
|
113
|
+
| UX Content Co. | UX Content Co. Accessible UX Writing |
|
|
114
|
+
| W3C WAI | W3C WAI Writing Tips |
|
|
115
|
+
| WCAG 2.2 | WCAG 2.2 specification |
|
|
88
116
|
|
|
89
117
|
---
|
|
90
118
|
|
|
@@ -92,7 +120,7 @@ These rules were synthesized from the following sources. Where sources conflict,
|
|
|
92
120
|
|
|
93
121
|
All rules ship from `@a11yfred/neighbor/content`. All ship as `warn` by default.
|
|
94
122
|
|
|
95
|
-
**Why all warnings?** Content is subjective
|
|
123
|
+
**Why all warnings?** Content is subjective. A rule that warns on a metaphor inside a book, or on an idiom in an internal tool, is noise. Every rule has valid exceptions. `warn` lets your team decide if it matters. Upgrade rules to `error` if you want to be strict.
|
|
96
124
|
|
|
97
125
|
---
|
|
98
126
|
|
|
@@ -100,32 +128,33 @@ All rules ship from `@a11yfred/neighbor/content`. All ship as `warn` by default.
|
|
|
100
128
|
|
|
101
129
|
#### `no-ableist-language`
|
|
102
130
|
|
|
103
|
-
|
|
131
|
+
Finds offensive words and words that frame disability as suffering.
|
|
104
132
|
|
|
105
133
|
**WCAG basis:** SC 3.1.1 (Language of Page). While WCAG does not enumerate specific words, content that demeans or excludes users undermines the perceivable and understandable principles the spec is built on.
|
|
106
134
|
|
|
107
|
-
**Consensus:** Every disability language guide surveyed
|
|
135
|
+
**Consensus:** Every disability language guide surveyed - NCDJ, AP Stylebook, ADA National Network, APA Style, SIGACCESS - independently prohibits these terms. No credible source defends them.
|
|
108
136
|
|
|
109
137
|
What it catches:
|
|
110
138
|
|
|
111
139
|
| Avoid | Instead use | Sources |
|
|
112
140
|
| --- | --- | --- |
|
|
141
|
+
| afflicted with / victim of | has / lives with | NCDJ, AP, ADA NN, APA |
|
|
142
|
+
| committed suicide | died by suicide | ADA NN, APA, AP Stylebook 2022 |
|
|
143
|
+
| crazy / psycho | wild / reckless (in non-clinical use) | NCDJ, A11y Collective |
|
|
113
144
|
| cripple / crippled | person with a mobility disability | NCDJ, AP, ADA NN, APA |
|
|
114
|
-
|
|
|
145
|
+
| differently abled | person with a disability | NCDJ, AP, ADA NN, APA |
|
|
115
146
|
| dumb | mute / nonverbal | NCDJ, ADA NN |
|
|
147
|
+
| handi-capable / physically challenged | person with a disability | NCDJ, AP, ADA NN |
|
|
148
|
+
| handicapped | person with a disability / accessible (for spaces) | NCDJ, AP, ADA NN |
|
|
149
|
+
| hearing-impaired | deaf / hard of hearing | NCDJ, AP, ADA NN, APA |
|
|
116
150
|
| lame | weak / unconvincing | NCDJ, A11y Collective |
|
|
151
|
+
| normal people / normal hearing | people without disabilities / typical hearing | AP, ADA NN, APA, SIGACCESS |
|
|
152
|
+
| retarded / retard | person with an intellectual disability | NCDJ, AP, ADA NN, APA |
|
|
153
|
+
| spastic / spaz | clumsy / energetic (highly offensive ableist slur in UK) | Scope UK |
|
|
117
154
|
| special needs | disability / person with a disability | NCDJ, AP, ADA NN, APA |
|
|
118
|
-
| differently abled | person with a disability | NCDJ, AP, ADA NN, APA |
|
|
119
|
-
| handi-capable / physically challenged | person with a disability | NCDJ, AP, ADA NN |
|
|
120
|
-
| wheelchair-bound / confined to a wheelchair | wheelchair user | NCDJ, AP, ADA NN, APA, SIGACCESS |
|
|
121
155
|
| suffers from | has / lives with | NCDJ, AP, ADA NN, APA |
|
|
122
|
-
| afflicted with / victim of | has / lives with | NCDJ, AP, ADA NN, APA |
|
|
123
|
-
| committed suicide | died by suicide | ADA NN, APA, AP Stylebook 2022 |
|
|
124
|
-
| crazy / psycho | wild / reckless (in non-clinical use) | NCDJ, A11y Collective |
|
|
125
|
-
| hearing-impaired | deaf / hard of hearing | NCDJ, AP, ADA NN, APA |
|
|
126
156
|
| the disabled / the blind / the deaf | people with disabilities / blind people / deaf people | NCDJ, AP, ADA NN, APA, SIGACCESS |
|
|
127
|
-
|
|
|
128
|
-
| handicapped | person with a disability / accessible (for spaces) | NCDJ, AP, ADA NN |
|
|
157
|
+
| wheelchair-bound / confined to a wheelchair | wheelchair user | NCDJ, AP, ADA NN, APA, SIGACCESS |
|
|
129
158
|
|
|
130
159
|
**Identity-first vs person-first language:** "Autistic person" and "person with autism" are both used in disability communities. APA (2022) accepts both and recommends following individual preference. [Nicolas Steenhout](https://incl.ca/disability-language-is-a-nuanced-thing/) notes the current momentum in disability advocacy is toward identity-first language as reclamation, while person-first remains standard in many clinical and government contexts. [Léonie Watson](https://tink.uk), cited by Steenhout: *"There is no right or wrong answer because it is a matter of personal choice, and the choice depends on context."* This rule does not flag either form.
|
|
131
160
|
|
|
@@ -141,7 +170,7 @@ Configuration:
|
|
|
141
170
|
|
|
142
171
|
#### `no-disability-metaphor`
|
|
143
172
|
|
|
144
|
-
|
|
173
|
+
Finds disability words used as metaphors.
|
|
145
174
|
|
|
146
175
|
**WCAG basis:** No direct SC. Grounded in NCDJ, A11y Collective, and APA guidance that these uses normalise disability as a negative even when not intended that way.
|
|
147
176
|
|
|
@@ -150,12 +179,12 @@ What it catches:
|
|
|
150
179
|
| Avoid | Instead use | Sources |
|
|
151
180
|
| --- | --- | --- |
|
|
152
181
|
| blind spot | gap / oversight / unaware of | NCDJ, A11y Collective |
|
|
153
|
-
|
|
|
154
|
-
| tone deaf | out of touch / insensitive | NCDJ, A11y Collective |
|
|
182
|
+
| crippling debt / crippling fear | devastating / crushing | NCDJ, A11y Collective |
|
|
155
183
|
| falling on deaf ears | being ignored / going unheard | NCDJ, A11y Collective |
|
|
156
184
|
| paralyzed by / paralyzed with | overwhelmed by / unable to act because of | NCDJ, A11y Collective |
|
|
157
|
-
| crippling debt / crippling fear | devastating / crushing | NCDJ, A11y Collective |
|
|
158
185
|
| schizophrenic approach | contradictory / inconsistent | NCDJ, APA |
|
|
186
|
+
| tone deaf | out of touch / insensitive | NCDJ, A11y Collective |
|
|
187
|
+
| turning a blind eye | ignoring / overlooking | NCDJ, A11y Collective |
|
|
159
188
|
|
|
160
189
|
---
|
|
161
190
|
|
|
@@ -163,9 +192,9 @@ What it catches:
|
|
|
163
192
|
|
|
164
193
|
#### `no-english-idiom`
|
|
165
194
|
|
|
166
|
-
|
|
195
|
+
Finds English idioms and sports metaphors that are hard for ESL readers to understand.
|
|
167
196
|
|
|
168
|
-
**WCAG basis:** SC 3.1.5 (Reading Level). Idioms systematically fail this criterion for non-native English speakers because their meaning cannot be inferred from constituent words. No other accessibility linting tool flags idioms
|
|
197
|
+
**WCAG basis:** SC 3.1.5 (Reading Level). Idioms systematically fail this criterion for non-native English speakers because their meaning cannot be inferred from constituent words. No other accessibility linting tool flags idioms - this is the most novel rule in this set.
|
|
169
198
|
|
|
170
199
|
**Sources:** Canadian Government accessible documents guide, SJSU accessible writing strategies, UX Content Co., A11y Collective.
|
|
171
200
|
|
|
@@ -173,38 +202,38 @@ What it catches:
|
|
|
173
202
|
|
|
174
203
|
| Avoid | Instead use |
|
|
175
204
|
| --- | --- |
|
|
176
|
-
|
|
|
177
|
-
|
|
|
205
|
+
| back to square one | starting over |
|
|
206
|
+
| ballpark | rough estimate |
|
|
207
|
+
| bite the bullet | proceed despite difficulty |
|
|
178
208
|
| blue-sky thinking | open-ended brainstorming |
|
|
179
|
-
|
|
|
180
|
-
|
|
|
209
|
+
| boil the ocean | attempt everything at once |
|
|
210
|
+
| catch-22 | impossible situation |
|
|
181
211
|
| circle back | follow up / return to |
|
|
182
|
-
| take it offline | discuss separately |
|
|
183
212
|
| deep dive | thorough review |
|
|
184
|
-
|
|
|
185
|
-
| back to square one | starting over |
|
|
186
|
-
| in the pipeline | planned / in progress |
|
|
187
|
-
| on the same page | in agreement |
|
|
188
|
-
| catch-22 | impossible situation |
|
|
189
|
-
| hit the ground running | start immediately |
|
|
190
|
-
| on the fence | undecided |
|
|
191
|
-
| bite the bullet | proceed despite difficulty |
|
|
192
|
-
| under the weather | unwell / sick |
|
|
193
|
-
| ballpark | rough estimate |
|
|
194
|
-
| slam dunk | certain success |
|
|
213
|
+
| drink the Kool-Aid | follow without question |
|
|
195
214
|
| drop the ball | make a mistake |
|
|
196
215
|
| game-changer | major shift |
|
|
216
|
+
| hit the ground running | start immediately |
|
|
217
|
+
| in the pipeline | planned / in progress |
|
|
197
218
|
| level the playing field | create equal conditions |
|
|
219
|
+
| level-set | align / agree on expectations |
|
|
220
|
+
| low-hanging fruit | easiest tasks / quick wins |
|
|
198
221
|
| move the goalposts | change the requirements |
|
|
222
|
+
| move the needle | make progress / have an impact |
|
|
223
|
+
| on the fence | undecided |
|
|
224
|
+
| on the same page | in agreement |
|
|
225
|
+
| slam dunk | certain success |
|
|
226
|
+
| take it offline | discuss separately |
|
|
199
227
|
| touch base | check in / follow up |
|
|
228
|
+
| under the weather | unwell / sick |
|
|
200
229
|
|
|
201
230
|
---
|
|
202
231
|
|
|
203
232
|
#### `no-directional-language`
|
|
204
233
|
|
|
205
|
-
|
|
234
|
+
Finds instructions that tell users where things are on the screen (like "above" or "on the right").
|
|
206
235
|
|
|
207
|
-
**WCAG basis:** SC 1.3.3 (Sensory Characteristics)
|
|
236
|
+
**WCAG basis:** SC 1.3.3 (Sensory Characteristics) - instructions shall not rely solely on location or sensory characteristics. Position references break for screen reader users, keyboard users, and anyone who zooms or reflows the page.
|
|
208
237
|
|
|
209
238
|
**Sources:** SBA Content Style Guide, Google Developer Style Guide, WCAG SC 1.3.3.
|
|
210
239
|
|
|
@@ -214,9 +243,9 @@ Flags content that gives instructions using screen position ("above", "in the ri
|
|
|
214
243
|
|
|
215
244
|
#### `no-unexplained-abbreviation`
|
|
216
245
|
|
|
217
|
-
|
|
246
|
+
Finds short words or acronyms used before you explain them.
|
|
218
247
|
|
|
219
|
-
**WCAG basis:** SC 3.1.4 (Abbreviations)
|
|
248
|
+
**WCAG basis:** SC 3.1.4 (Abbreviations) - a mechanism shall be available for identifying the expanded form of abbreviations.
|
|
220
249
|
|
|
221
250
|
**Sources:** Google Developer Style Guide, GOV.UK, wcag.com/authors, SBA, US Plain Language, Canadian Government.
|
|
222
251
|
|
|
@@ -232,7 +261,7 @@ Flags abbreviations and acronyms used without a prior expansion in the same file
|
|
|
232
261
|
|
|
233
262
|
#### `no-all-caps-prose`
|
|
234
263
|
|
|
235
|
-
|
|
264
|
+
Finds words in ALL CAPS.
|
|
236
265
|
|
|
237
266
|
**Why it matters:** Some screen readers using high verbosity settings read ALL CAPS letter-by-letter ("H-E-L-P" instead of "help"). Also reduces readability for users with dyslexia. IMPORTANT, WARNING, NOTE, and common acronyms are excluded by default.
|
|
238
267
|
|
|
@@ -250,21 +279,151 @@ Configuration:
|
|
|
250
279
|
|
|
251
280
|
#### `no-ampersand-in-prose`
|
|
252
281
|
|
|
253
|
-
|
|
282
|
+
Finds `&` used instead of "and".
|
|
254
283
|
|
|
255
|
-
**Why it matters:** Screen readers may announce `&` as "ampersand" or skip it entirely
|
|
284
|
+
**Why it matters:** Screen readers may announce `&` as "ampersand" or skip it entirely - behavior is inconsistent across AT vendors and verbosity settings.
|
|
256
285
|
|
|
257
286
|
**Sources:** Google Developer Style Guide, US Plain Language guide.
|
|
258
287
|
|
|
259
288
|
---
|
|
260
289
|
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
### Inclusive Jargon & Decolonized Language
|
|
293
|
+
|
|
294
|
+
#### `no-exclusive-language`
|
|
295
|
+
|
|
296
|
+
Finds violent, culturally insensitive, or racist tech jargon.
|
|
297
|
+
|
|
298
|
+
**WCAG basis:** No direct SC. Grounded in Google, Microsoft, and public health style guides that emphasize the tech industry moving away from appropriated language.
|
|
299
|
+
|
|
300
|
+
What it catches:
|
|
301
|
+
|
|
302
|
+
| Avoid | Instead use | Sources |
|
|
303
|
+
| --- | --- | --- |
|
|
304
|
+
| blacklist / whitelist | denylist / allowlist | Google, MS, Prevention.org |
|
|
305
|
+
| caucasian | white / specific descent | UPenn |
|
|
306
|
+
| colored people, coloured | people of color (avoid 'coloured' which is highly offensive in the UK) | APA, AP Style |
|
|
307
|
+
| dummy | placeholder, sample, or mock | Google |
|
|
308
|
+
| Eskimo | Alaska Native / Inuit | AP Style, Microsoft |
|
|
309
|
+
| guys | folks, everyone, or team | Google, MS |
|
|
310
|
+
| master / slave | primary / replica or main / worker | Google, MS, Prevention.org |
|
|
311
|
+
| Negro, Afro-American | Black / African American / specific descent | AP Style, APA |
|
|
312
|
+
| Oriental | Asian / specific descent | AP Style, Microsoft |
|
|
313
|
+
| Paki | specific descent (highly offensive slur in UK, avoid entirely) | UK Gov |
|
|
314
|
+
| sanity check | quick check or confidence check | Google |
|
|
315
|
+
| spirit animal, powwow, ninja, guru, tribe | remove, or use literal terms | MS, Prevention.org |
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
#### `no-colonial-and-violent-language`
|
|
320
|
+
|
|
321
|
+
Finds words based on colonialism or violence when talking about people.
|
|
322
|
+
|
|
323
|
+
**WCAG basis:** No direct SC.
|
|
324
|
+
|
|
325
|
+
What it catches:
|
|
326
|
+
|
|
327
|
+
| Avoid | Instead use | Sources |
|
|
328
|
+
| --- | --- | --- |
|
|
329
|
+
| stakeholder | partner, collaborator, contributor, community member | SkilledWork |
|
|
330
|
+
| tackle / combat (communities/people) | address, collaborate with, eliminate (the issue) | Prevention.org |
|
|
331
|
+
| target population / target audience | group of focus, intended audience, specific population | SkilledWork, Prevention.org |
|
|
332
|
+
|
|
333
|
+
*(Note: "stakeholder" originates from the colonial practice of planting a stake to claim land; "target" conjures a mark to shoot at).*
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
### Deficit vs Strengths-Based Language
|
|
338
|
+
|
|
339
|
+
#### `no-deficit-language`
|
|
340
|
+
|
|
341
|
+
Finds words that reduce people to their bad situations.
|
|
342
|
+
|
|
343
|
+
**WCAG basis:** No direct SC. Grounded in modern public health and non-profit communications.
|
|
344
|
+
|
|
345
|
+
What it catches:
|
|
346
|
+
|
|
347
|
+
| Avoid | Instead use | Sources |
|
|
348
|
+
| --- | --- | --- |
|
|
349
|
+
| addict, drug abuse | person with a substance use disorder | Prevention.org |
|
|
350
|
+
| at-risk youth, vulnerable groups | opportunity youth, groups experiencing vulnerability | SkilledWork, Prevention.org, ACECQA |
|
|
351
|
+
| illegal immigrant | undocumented immigrant | UPenn |
|
|
352
|
+
| inmate, felon, offender, convict | person with legal system involvement | SkilledWork |
|
|
353
|
+
| minority | historically marginalized group / people of color | APA, Prevention.org |
|
|
354
|
+
| non-English speaking | multilingual learner | ACECQA |
|
|
355
|
+
| the elderly, seniors | older adults | UPenn, SkilledWork |
|
|
356
|
+
| the homeless | people experiencing homelessness | Prevention.org, SkilledWork |
|
|
357
|
+
|
|
358
|
+
---
|
|
359
|
+
|
|
360
|
+
#### `no-gendered-language`
|
|
361
|
+
|
|
362
|
+
Finds gendered pronouns when the gender is unknown.
|
|
363
|
+
|
|
364
|
+
What it catches:
|
|
365
|
+
|
|
366
|
+
| Avoid | Instead use | Sources |
|
|
367
|
+
| --- | --- | --- |
|
|
368
|
+
| born a man/woman, biologically male/female | assigned male/female at birth | UPenn, NAHJ |
|
|
369
|
+
| fireman, policeman, chairman | firefighter, police officer, chairperson | GOV.UK, Canada |
|
|
370
|
+
| he/she, he or she, his or her | they, their, you, the user | MS, Google |
|
|
371
|
+
| husband / wife, boyfriend / girlfriend | partner, spouse (when gender is unknown) | APA, Google, NAHJ |
|
|
372
|
+
| male-bodied, female-bodied | assigned male/female at birth | TJA |
|
|
373
|
+
| mum and dad | families, parents, carers | ACECQA |
|
|
374
|
+
| opposite sex, opposite gender | different gender, another sex | APA, TJA |
|
|
375
|
+
|
|
376
|
+
---
|
|
377
|
+
|
|
378
|
+
### LGBTQ+ Language
|
|
379
|
+
|
|
380
|
+
#### `no-anti-lgbtq-language`
|
|
381
|
+
|
|
382
|
+
Finds old or offensive words about sexual orientation and gender.
|
|
383
|
+
|
|
384
|
+
**WCAG basis:** No direct SC. Grounded in APA, AP Style, and Trans Journalists Association guidelines.
|
|
385
|
+
|
|
386
|
+
What it catches:
|
|
387
|
+
|
|
388
|
+
| Avoid | Instead use | Sources |
|
|
389
|
+
| --- | --- | --- |
|
|
390
|
+
| faggot, fag | (highly offensive slur, avoid entirely. Note: 'fag' is slang for cigarette in UK but a slur in US) | AP Style |
|
|
391
|
+
| homosexual | gay, lesbian, bisexual | APA, AP Style, NAHJ |
|
|
392
|
+
| queer | (use only if referring to self-identification, otherwise avoid as it can be considered a slur) | AP Style, UK Gov |
|
|
393
|
+
| sexual preference | sexual orientation | APA, AP Style, NAHJ |
|
|
394
|
+
| trans male, trans female | trans man, trans woman | TJA |
|
|
395
|
+
| trans-identified | transgender | TJA |
|
|
396
|
+
| transgendered, a transgender | transgender, a transgender person | TJA, APA, AP Style |
|
|
397
|
+
| transgenderism, trans ideology, gender ideology | transgender people, trans rights | TJA |
|
|
398
|
+
| transvestite, cross-dresser | transgender (or use specific terms as preferred) | NAHJ, TJA |
|
|
399
|
+
|
|
400
|
+
---
|
|
401
|
+
|
|
402
|
+
### Device-Agnostic Actions
|
|
403
|
+
|
|
404
|
+
#### `no-device-specific-action`
|
|
405
|
+
|
|
406
|
+
Finds instructions that only make sense for one device (like 'click' or 'swipe').
|
|
407
|
+
|
|
408
|
+
**WCAG basis:** Grounded in inclusive writing principles to not exclude touchscreen, keyboard, and alternative input users.
|
|
409
|
+
|
|
410
|
+
What it catches:
|
|
411
|
+
|
|
412
|
+
| Avoid | Instead use | Sources |
|
|
413
|
+
| --- | --- | --- |
|
|
414
|
+
| click on, click the | choose, select | Apple, Google |
|
|
415
|
+
| swipe the | choose, select, navigate | Apple |
|
|
416
|
+
| tap on, tap the | choose, select | Apple, Google |
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
261
420
|
### UX copy and error messages
|
|
262
421
|
|
|
263
422
|
#### `no-vague-cta`
|
|
264
423
|
|
|
265
|
-
|
|
424
|
+
Finds confusing link and button text.
|
|
266
425
|
|
|
267
|
-
**WCAG basis:** SC 2.4.4 (Link Purpose, In Context)
|
|
426
|
+
**WCAG basis:** SC 2.4.4 (Link Purpose, In Context) - link purpose shall be determinable from the link text alone. Patterns like "click here" or "read more" are the most-cited failure in the annual WebAIM Million report.
|
|
268
427
|
|
|
269
428
|
**Sources:** W3C WAI, wcag.com/authors, Google Developer Style Guide, SBA, UX Content Co., A11y Collective, GOV.UK, WebAIM Million.
|
|
270
429
|
|
|
@@ -274,9 +433,9 @@ Flags vague call-to-action and link text.
|
|
|
274
433
|
|
|
275
434
|
#### `no-vague-error-message`
|
|
276
435
|
|
|
277
|
-
|
|
436
|
+
Finds error messages that do not explain what is wrong.
|
|
278
437
|
|
|
279
|
-
**WCAG basis:** SC 3.3.1 (Error Identification)
|
|
438
|
+
**WCAG basis:** SC 3.3.1 (Error Identification) - if an input error is detected, the item in error shall be described. SC 3.3.3 (Error Suggestion) - suggestions for correction shall be provided. "An error occurred" satisfies neither.
|
|
280
439
|
|
|
281
440
|
**Sources:** UX Content Co., Google Developer Style Guide.
|
|
282
441
|
|
|
@@ -288,9 +447,9 @@ Flags error messages that do not explain what went wrong.
|
|
|
288
447
|
|
|
289
448
|
| Pattern | Reason not included |
|
|
290
449
|
| --- | --- |
|
|
291
|
-
| Passive voice | Hemingway and Grammarly both flag this, and the plain language guides recommend active voice. However, passive voice has many legitimate uses in technical and legal writing. The false-positive rate is high enough that it would generate more noise than signal for most codebases. Recommended alternative: use Grammarly or Hemingway for prose review outside the linter. |
|
|
292
|
-
| Sentence length | A 25-word threshold is the most commonly cited guideline (Google Dev Style, GOV.UK). However, compound technical sentences often need to exceed this. A sentence-length rule would require calibration per content type and is better suited to a prose editor than a code linter. |
|
|
293
|
-
| Reading grade level | Cannot be computed accurately from string literals in a JS AST without analysing full document context. Better measured by Hemingway on full page text. |
|
|
294
450
|
| Adverbs and qualifiers ("very", "really", "quite") | Flagged by Grammarly and Hemingway as weak writing. Not an accessibility-specific issue and false-positive rate in code string literals is extremely high. |
|
|
295
451
|
| Cultural references | Too broad to enumerate reliably. No finite term list is possible. |
|
|
452
|
+
| Passive voice | Hemingway and Grammarly both flag this, and the plain language guides recommend active voice. However, passive voice has many legitimate uses in technical and legal writing. The false-positive rate is high enough that it would generate more noise than signal for most codebases. Recommended alternative: use Grammarly or Hemingway for prose review outside the linter. |
|
|
296
453
|
| Placeholder used as label | Overlaps with `jsx-a11y/label-has-associated-control`. Check that rule first before enabling here. |
|
|
454
|
+
| Reading grade level | Cannot be computed accurately from string literals in a JS AST without analysing full document context. Better measured by Hemingway on full page text. |
|
|
455
|
+
| Sentence length | A 25-word threshold is the most commonly cited guideline (Google Dev Style, GOV.UK). However, compound technical sentences often need to exceed this. A sentence-length rule would require calibration per content type and is better suited to a prose editor than a code linter. |
|
package/RULES-CSS.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# @a11yfred/neighbor
|
|
1
|
+
# @a11yfred/neighbor: CSS Rules
|
|
2
2
|
|
|
3
|
-
Stylelint rules
|
|
3
|
+
Stylelint rules that check your CSS for accessibility problems.
|
|
4
4
|
|
|
5
5
|
→ [Markup rules](RULES-MARKUP.md) · [Content rules](RULES-CONTENT.md) · [Back to RULES.md](RULES.md)
|
|
6
6
|
|
|
@@ -8,28 +8,50 @@ Stylelint rules for CSS accessibility.
|
|
|
8
8
|
|
|
9
9
|
| Source | Reference |
|
|
10
10
|
| --- | --- |
|
|
11
|
+
| double-great/stylelint-a11y | [github.com/double-great/stylelint-a11y](https://github.com/double-great/stylelint-a11y) |
|
|
12
|
+
| Eric Eggert | [yatil.net](https://yatil.net) - forced colors and focus patterns |
|
|
13
|
+
| MDN Web Docs | [forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) |
|
|
14
|
+
| WCAG 2.1 SC 1.4.11 | [Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast) |
|
|
11
15
|
| WCAG 2.1 SC 1.4.3 | [Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) |
|
|
12
16
|
| WCAG 2.1 SC 1.4.4 | [Resize Text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text) |
|
|
13
|
-
| WCAG 2.1 SC 1.4.11 | [Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast) |
|
|
14
17
|
| WCAG 2.1 SC 2.3.3 | [Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) |
|
|
15
18
|
| WCAG 2.1 SC 2.4.7 | [Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) |
|
|
16
|
-
| Eric Eggert | [yatil.net](https://yatil.net) - forced colors and focus patterns |
|
|
17
|
-
| MDN Web Docs | [forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) |
|
|
18
|
-
| double-great/stylelint-a11y | [github.com/double-great/stylelint-a11y](https://github.com/double-great/stylelint-a11y) |
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
22
22
|
## Rules
|
|
23
23
|
|
|
24
|
-
All CSS rules
|
|
24
|
+
All CSS rules start with `neighbor/`. You can use them from `@a11yfred/neighbor` or `@a11yfred/neighbor/stylelint`.
|
|
25
|
+
|
|
26
|
+
### Errors (you must fix these)
|
|
27
|
+
|
|
28
|
+
These rules flag issues that objectively break WCAG requirements and block users from accessing your content. By default, Stylelint rules are configured as errors unless you explicitly set their severity to "warning".
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
| Rule | What it finds | WCAG SC |
|
|
31
|
+
| --- | --- | --- |
|
|
32
|
+
| `neighbor/no-forced-colors-none` | Using `forced-color-adjust: none` inside `@media (forced-colors)`. This blocks Windows High Contrast Mode, which hurts users with low vision. | [SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) / [SC 1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast) |
|
|
33
|
+
| `neighbor/no-outline-none` | Using `outline: none` or `outline: 0` without a `:focus` selector. This hides the focus ring for keyboard users. | [SC 2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) |
|
|
34
|
+
| `neighbor/no-text-justify` | Using `text-align: justify`. This creates uneven spaces between words that are very difficult for users with dyslexia to read. | [SC 1.4.8](https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation) |
|
|
35
|
+
|
|
36
|
+
### Warnings (configure these in your stylelint config)
|
|
27
37
|
|
|
28
|
-
| Rule | What it
|
|
38
|
+
| Rule | What it finds | WCAG SC |
|
|
29
39
|
| --- | --- | --- |
|
|
30
|
-
| `neighbor/
|
|
31
|
-
| `neighbor/no-
|
|
32
|
-
| `neighbor/
|
|
40
|
+
| `neighbor/no-absolute-viewport-text` | Using pure viewport units (like `font-size: 5vw`). This stops the text from getting bigger when users zoom in with their browser. | [SC 1.4.4](https://www.w3.org/WAI/WCAG21/Understanding/resize-text) |
|
|
41
|
+
| `neighbor/no-user-select-all-none` | Using `user-select: none` on text. This stops users from highlighting text, which breaks translation and screen reading tools. | [SC 1.4.4](https://www.w3.org/WAI/WCAG21/Understanding/resize-text) |
|
|
42
|
+
| `neighbor/user-preferences` | Using `opacity`, `animation`, `transition`, or see-through colors without a `@media` fallback for users who need less motion, less transparency, or forced colors. | [SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) / [SC 2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## `stylelint-a11y` Integration
|
|
47
|
+
|
|
48
|
+
If you already have [`stylelint-a11y`](https://github.com/double-great/stylelint-a11y) installed in your project, `neighbor` will automatically detect it and **turn off** the following rules to prevent duplicate warnings:
|
|
49
|
+
|
|
50
|
+
- `neighbor/no-outline-none` (handled by `a11y/no-outline-none`)
|
|
51
|
+
- `neighbor/no-text-justify` (handled by `a11y/no-text-align-justify`)
|
|
52
|
+
- Motion checks in `neighbor/user-preferences` (handled by `a11y/media-prefers-reduced-motion`)
|
|
53
|
+
|
|
54
|
+
You will still get `neighbor`'s unique checks for forced colors, text selection, and viewport sizing!
|
|
33
55
|
|
|
34
56
|
---
|
|
35
57
|
|
|
@@ -37,17 +59,17 @@ All CSS rules use the `neighbor/` namespace and ship from `@a11yfred/neighbor` (
|
|
|
37
59
|
|
|
38
60
|
### `neighbor/no-outline-none`
|
|
39
61
|
|
|
40
|
-
|
|
62
|
+
This rule allows `outline: none` inside `:focus`, `:focus-visible`, and `:focus-within`. This is because you are usually changing the style, not removing it completely. A common pattern for elements focused by JavaScript is:
|
|
41
63
|
|
|
42
64
|
```css
|
|
43
65
|
:focus:not(:focus-visible) { outline: none }
|
|
44
66
|
```
|
|
45
67
|
|
|
46
|
-
This
|
|
68
|
+
This hides the focus ring when JavaScript focuses an element, but keeps it when a user uses the keyboard. This rule will not complain about this pattern.
|
|
47
69
|
|
|
48
70
|
### `neighbor/no-forced-colors-none`
|
|
49
71
|
|
|
50
|
-
`forced-color-adjust: none`
|
|
72
|
+
Using `forced-color-adjust: none` is sometimes okay (like for color pickers) if it is *outside* a `@media (forced-colors)` block. This rule will only complain if you use it inside the media query, because that means you are trying to turn off High Contrast Mode.
|
|
51
73
|
|
|
52
74
|
---
|
|
53
75
|
|
|
@@ -55,7 +77,7 @@ This suppresses the visible ring for JS `.focus()` calls while preserving it for
|
|
|
55
77
|
|
|
56
78
|
| Rule | Reason rejected |
|
|
57
79
|
| --- | --- |
|
|
58
|
-
| `
|
|
59
|
-
| `no-fixed-font-size-px` | Browser zoom
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
80
|
+
| `font-size-is-readable` / `no-spread-text` | Readable font size changes based on design. We cannot make a rule that works everywhere. |
|
|
81
|
+
| `no-fixed-font-size-px` | Browser zoom works with `px`. WCAG does not clearly forbid `px`. Complaining about `px` gives too many false errors. |
|
|
82
|
+
| `no-forced-colors-none` (global, not scoped to media query) | There are valid reasons to use this globally. We only check inside the `@media (forced-colors)` block. |
|
|
83
|
+
| `prefer-focus-visible` | Using `:focus` is enough for WCAG. Complaining about it gives too many false errors. |
|