-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
vision.json
244 lines (244 loc) · 14.9 KB
/
vision.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
{
"vision":
{
"title": "Low vision",
"subtitle": "& Color Accessibility",
"letter": "L",
"SEO":
{
"title": "Low Vision & Color Accessibility –",
"url": "vision.html",
"desc": "Low vision and color accessibility covers every user that has a lower eyesight than average and/or sees color differently. He may adjust the settings of his computer monitor, might use a screen magnifier or custom stylesheet, but is not using a screen reader. Learn how to improve user experience for this usergroup...",
"kw": "color, zoom, Deuteranopia, Monochromasy, Protanopia, Tritanopia",
"img": "assets/img/vision.png"
},
"intro":
{
"p": "Low vision and color accessibility covers every user that has a lower eyesight than average (glasses do not help or are not worn) and/or sees color differently. He may adjust the settings of his computer monitor, might use a screen magnifier or custom stylesheet, but is not using a screen reader. <a href=\"http://www.euroblind.org/resources/information/\">According to the EBU</a> more than 4% of the European population is blind or partially sighted and <a href=\"http://webvision.med.utah.edu/book/part-viii-gabac-receptors/color-perception/\">according to Webvision</a> ~8.5% of the US population is affected by color-blindness. Compared to a city that would be more than three times the population of New York City. This section focuses on the partially sighted that do not use a <a href=\"visual.html\">screen reader</a> and the colorblind. There are different types color blindness:",
"table":
{
"caption": "types of color blindness",
"heads":
[
"type",
"what is it",
"percentage"
],
"rows":
[
[
"Deuteranopia",
"Red and Green appear similar, but same intensity.",
"~1.5%"
],
[
"Deuteranomaly",
"Greens are muted.",
"~5.4%"
],
[
"Monochromasy",
"All colors are affected, user see dimmed colors or only shades of gray and has a very poor vision.",
"<1%"
],
[
"Protanomaly",
"Reds are less intense and might appear black.",
"~1%"
],
[
"Protanopia",
"Red and Green appears similar. Some colors appear more intense than normal.",
"~1%"
],
[
"Tritanopia & Tritanomaly",
"Blue and Yellow appear similar.",
"<1%"
]
]
}
},
"sections":
[
{
"title": "Basics",
"paragraphs":
[
{
"li": "Make sure that your images are of adequate resolution."
},
{
"li": "Users will increase the general page size. Increasing the zoom factor is like decreasing the screen size, thus a responsive design is necessary."
},
{
"li": "Always have in mind that some users cannot differentiate colors."
}
]
},
{
"title": "Graphical elements",
"paragraphs":
[
{
"p": "Important graphical elements with high failure potential are images with text, maps, diagrams and graphs. Those should always <a href=\"#Testing---resources\">be tested</a> against the various types."
},
{
"li": "For graphs and maps a legend/key tested against the various types should be provided. <a href=\"http://colorbrewer2.org/\">Colorbrewer</a> is a tool that provides you with a color-blind friendly color palette."
},
{
"li": "Not solely rely on colors, whenever possible also give other visual clues as the style, thickness, luminance/shades, contrast."
},
{
"li": "Users should be able to zoom into the page to see details in visual elements. Your images should scale as well. So, make sure that your images are of adequate resolution. Find a good balance between loading time and resolution. Compress your images, i.e. with <a href=\"https://tinypng.com/\">tiny png</a>. It might also be helpful to <a href=\"https://en.wikipedia.org/wiki/Lazy_loading\">lazyload</a> your graphical resources and/or to use different image resolutions based on the viewport size."
},
{
"li": "If you have a layer of text on-top of your images, make sure that the contrast does not solely rely on colors. Some contrasts might be perfect for us, but are a nightmare for color blind users:",
"imgs":
[
{
"src": "assets/img/examples/vision/images1_0.png",
"alt": "Red on Green contrast.",
"caption": "Users with <code>Deuteranopia</code> have difficulties with red on green and vice versa."
},
{
"src": "assets/img/examples/vision/images1_1.png",
"alt": "Red on Green contrast.",
"caption": "Users with <code>Protanopia</code> have difficulties with red on green and vice versa."
},
{
"src": "assets/img/examples/vision/images1_2.png",
"alt": "Blue on Yellow contrast.",
"caption": "Users with <code>Tritanopia</code> have difficulties with a blue and yellow combination."
},
{
"src": "assets/img/examples/vision/images1_3.png",
"alt": "Green on Blue with the same brightness.",
"caption": "For users with <code>Monochromacy</code> colors with similiar brightness will blend."
}
]
},
{
"li": "Have a contrast of 4.5:1 on your colors. Jonathan Snook made a <a href=\"https://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=000000\">handy tool</a> to check your color contrasts."
}
]
},
{
"title": "Typography",
"paragraphs":
[
{
"p": "If you want users to actually read your content, good typography will be crucial. Beside this section, have a look at the <a href=\"cognitive.html#Text---Typography\">Typography for Cognitive Accessibility</a>."
},
{
"li": "A common false belief is that full black on full white is the best contrast. Although the contrast is higher by using pure color combinations, this can be <a href=\"http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/\">very tiring</a> for the eye. Therefore, to reduce eye strain, use off-black against off-white. I.e. the text on this page is written in <code>#191919</code> black on <code>#F6F6F6</code> white.",
"imgs":
[
{
"src": "assets/img/examples/vision/typo1_0.png",
"alt": "",
"caption": "Full contrast vs off-colors. High contrast, as black & white, can create a sense of vibration on the screen due to your monitors luminance and thus stress the eyes."
}
]
},
{
"li": "Some users use their own stylesheet to overwrite yours. It is important to allow that. That is one of the reasons why you should avoid using the <code>!important</code> key in your CSS, which is difficult to overwrite."
},
{
"li": "The user should be able to resize the text to 200% of the original size. This should work anywhere without the text being cut off, overlapping or pixelating. You can test this by increasing your browsers zoom. On Firefox under <code>view > zoom</code>."
},
{
"li": "While 12 pixels is a good reading size on printed documents, the font-size on screens should be higher since users usually sit further away from screens and because of irritations due to the screen luminance. As a rule of thumb: between 16-18 for desktop and 12-14 on mobile."
},
{
"li": "Usually links are blue with a 4.5:1 contrast because almost all users will be able to differentiate blue. However, users with Tritanopia and those seeing only in Monochrome will still have troubles. That is why inline/in-text links should have an underline to help distinguish them from the rest of the text. Also, that is why no other underlining should be used on the page. However, this rule is not necessary on other elements, i.e. menu items do not have to be underlined or colored if it is obvious that the element is a menu."
},
{
"li": "Make sure to have hover & focus states that differ the initial state of your interactive elements. Optimally not subtle and not only by color. Otherwise, the user might not get that he can operate the element. Example:",
"pre": ".interactive-element {\n color: blue;\n text-decoration: underline;\n}\n\n.interactive-element:hover,\n.interactive-element:focus {\n color: deepskyblue;\n text-decoration-style: double;\n}",
"preLang": "css"
},
{
"li": "Due to resizing issues it is a good practice to have any text as real text, not within an image. The best option right now is to style your text with CSS."
}
]
},
{
"title": "Menu / Navigation",
"paragraphs":
[
{
"p": "A menu serves multiple purposes. To navigate a website, of course, but also to give the user a sense of orientation. It is one of the websites key elements. Have a look at the navigation for <a href=\"visual.html#Navigation---Menus\">Visual</a>, <a href=\"physical-audio.html#Navigation---Menu\">Physical & Audio</a> and <a href=\"cognitive.html#Navigation\">Cognitive Accessibility</a>"
},
{
"li": "Indicate the page the user is currently on. Have another indicator than just color. This website adds a background gradient on the current page and the current section in the table of content is highlighted by weight and size."
},
{
"li": "Avoid absolute sizing of elements. Use relative sizing so that the website adjusts as the screen size changes."
}
]
},
{
"title": "Forms",
"paragraphs":
[
{
"p": "The user should always know where he is and what he can do to achieve his goal. Similar to the <a href=\"#Menu---Navigation\">navigation</a>, forms, too, play a very important role on websites. That is why there are guidelines for <a href=\"visual.html#Forms\">Visual</a>, <a href=\"visual.html#Forms\">Physical & Audio</a> and for <a href=\"visual.html#Forms\">Cognitive</a> Accessibility."
},
{
"li": "Position highlights (as the focus outline) may be styled but should never be removed. They should stay prominent and obvious. It is important for the user to know where he is, blinking cursor lines are easily overlooked."
},
{
"li": "Fields with errors should not only be highlighted with color. For example: You may add a cross or an exclamation mark to indicate an error and a check-mark for success."
},
{
"li": "Add a summary of all errors on top of the page briefly explaining why there was an error and how to fix it. This way the errors cannot be overseen. Global error messages should have a <code>heading</code> and a <code>list</code> of errors. Ideally, errors are linked to the corresponding field."
},
{
"li": "It has somewhat become a standard to add asterisks to required fields. You should still explain somewhere what they mean. You may instead just add the keyword “required” to the respective fields."
},
{
"li": "If you use background colors to indicate errors, then make sure that everyone can see them. While black on red might be a bad idea, white on red has a very good contrast.",
"imgs":
[
{
"src": "assets/img/examples/vision/forms1_0.png",
"alt": "Black on red.",
"caption": "Users with <code>Monochromasy</code> will have difficulties to see this color contrast."
},
{
"src": "assets/img/examples/vision/forms1_1.png",
"alt": "White on red.",
"caption": "Users should not have any difficulty with this contrast."
}
]
}
]
},
{
"title": "Testing & resources",
"paragraphs":
[
{
"p": "Found an error or have an addition? Please <a href=\"https://github.com/ThibaultJanBeyer/learn-accesibility/blob/master/CONTRIBUTE.md\">contribute</a> to this project."
},
{
"li": "You do not need to buy expensive <a href=\"http://www.lowvisionsimulators.com/find-the-right-low-vision-simulator/full-set\">low vision simulation goggles</a>. Low vision actually really comes down to responsive designs and stylesheets that can be overwritten. Zoom your page by 200% and check for common issues."
},
{
"li": "There is a lot of free tools to test your websites on color blindness. You should definitely grab one and use it. The most popular ones are <a href=\"http://colororacle.org/\">Color Oracle</a> (lacks of tests for Monochromasy) and <a href=\"https://michelf.ca/projects/sim-daltonism/\">Sim Daltonism</a> (Mac only). There is also a popular <a href=\"http://colorfilter.wickline.org/\">webpage checker</a>."
},
{
"li": "References/Resources used to write this page: <a href=\"https://www.w3.org/WAI/WCAG20/quickref\">W3.org</a>, <a href=\"http://webaim.org/\">Webaim</a>. <a href=\"http://ux.stackexchange.com/questions/tagged/accessibility\">UX Stackexchange</a>, <a href=\"http://www.color-blindness.com/\">Color-Blindness</a>, <a href=\"http://www.somersault1824.com/blog/\">somersault1824</a>, <a href=\"http://www.colormatters.com/color-and-vision/color-and-vision-matters\">colormatters</a> <a href=\"http://www.uxmatters.com/\">uxmatters</a>, <a href=\"http://uxmovement.com/\">uxmovements</a>, <a href=\"http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm\">Tigercolor</a>, <a href=\"http://www.pivotcomm.com/insights/a-guide-to-web-typography\">Pivots’ Blog</a>, the <a href=\"http://blog.thibaultjanbeyer.com/portfolio/quick-guide-to-web-typography/\">quick guide to web typography</a> and <a href=\"https://www.reddit.com/r/ColorBlind/\">Reddit</a>."
},
{
"p": "Open up the web for everyone!"
},
{
"p": "<a href=\"visual.html\">Visual</a> • Low Vision & Color • <a href=\"physical-audio.html\">Physical & Audio</a> • <a href=\"cognitive.html\">Cognitive</a> <br><a href=\"selling.html\">Selling Accessibility</a>"
}
]
}
]
}
}