├── ISSUE_TEMPLATE.md
├── README.md
├── docs
├── .nojekyll
├── README.md
├── _coverpage.md
├── _images
│ ├── 80px-Joomla_logo.png
│ ├── hearing.png
│ ├── intelectual.png
│ ├── mental.png
│ ├── motor.png
│ └── visual.png
├── _media
│ ├── favicon.ico
│ ├── icon.svg
│ └── vue.css
├── _navbar.md
├── collaboration
│ ├── cooperation.md
│ ├── study-and-reference.md
│ ├── team-members.md
│ ├── terminology.md
│ ├── top-down-versus-bottom-up-development.md
│ └── use-of-github.md
├── custom-elements
│ ├── INSTRUCTION.md
│ ├── LICENSE.md
│ ├── README.md
│ └── _sidebar.md
├── glossary
│ ├── README.md
│ └── _sidebar.md
├── guidelines
│ ├── README.md
│ ├── contrast.md
│ ├── keyboard.md
│ ├── landmarks.md
│ └── lang_define.md
├── index.html
├── sw.js
├── template.md
├── testing
│ ├── Evaluation the Joomla accessibility.md
│ ├── README.md
│ ├── _sidebar.md
│ ├── quickstart.md
│ ├── testing-joomla-ui-components.md
│ ├── testing-single-page.md
│ └── testing.md
└── tutorials
│ ├── README.md
│ ├── _sidebar.md
│ ├── accessible-template.md
│ ├── extension-a11y-test.md
│ ├── resources.md
│ ├── sc-testing.md
│ ├── sl-atag-2-0.md
│ ├── sl-uaag-2-0.md
│ ├── sl-wai-aria-1-1.md
│ ├── sl-wai.md
│ ├── sl-wcag-2-0.md
│ ├── testing-automatic.md
│ ├── testing-validation.md
│ ├── tools-color.md
│ ├── understanding-disability.md
│ └── what-is-web-accessibility.md
└── meetings
└── start.md
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## [XX x.x.x] Descriptive Title
2 | The XX is the area and x.x.x is the criteria code for example 2.4.1
3 |
4 | ### Description of the issue
5 | Explain in detail what the problem is that needs to be resolved or feature that needs to be implemented.
6 |
7 | ### What happens
8 | Explain in detail what happens now. Add screenshots for clarity.
9 |
10 | ### What do you expect
11 | Explain in detail what must happen. Add screenshots for clarity.
12 |
13 | ### Steps to reproduce
14 | Explain step by step how to reproduce the issue or how the feature must work.
15 |
16 | ### How to fix (in case you know what needs to be changed)
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## What is this?
2 | This is the Joomla Accessibility Team documentation repository.
3 | This is a repository for everyone who wants to collaborate in implementing accessibility into Joomla.
4 |
5 |
6 | ## What is Joomla!?
7 | [Joomla!](https://www.joomla.org/about-joomla.html) is a Content Management System (CMS) which enables you to build websites and powerful online applications.
8 |
9 | ## What is Accessibility?
10 | Web accessibility means designing and developing your website so that people with disabilities can perceive, understand, navigate, and interact with, and contribute to the Web.
11 |
12 | Read more: [What is Web accessibility](https://github.com/joomla/accessibility/blob/master/docs/tutorials/what-is-web-accessibility.md)
13 |
14 | ## Our mission
15 | Our mission is to make all the Joomla properties, the CMS, framework and portal accessible for everyone, for all people, no matter what their ability, disability, age, device, Internet connection and user-agent.
16 |
17 | ## This repository
18 | This repository contains:
19 | * [Joomla Accessibility Tutorials](https://github.com/joomla/accessibility/tree/master/docs/tutorials)
20 | * [Joomla Accessibility of Joomla UI Components](https://github.com/joomla/accessibility/tree/master/docs/custom-elements)
21 | * [Accessibility Testing Procedures Documentation](https://github.com/joomla/accessibility/tree/master/docs/testing)
22 |
23 | ## How you can help?
24 | The Joomla Community would love if you could keep volunteering at the Joomla Accessibility Team (JAT).
25 | If that is the case, we can schedule a call to know a little bit more about you and your work, and about your objectives at the JAT.
26 |
27 | If you would like to volunteer or contribute to our team in any way, we would love to have you on board! Please join us or contact us on [Volunteers Portal](https://volunteers.joomla.org/teams/accessibility-team).
28 |
29 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Joomla Accessibility Docs
2 | ## What is this?
3 | This is the Joomla Accessibility Team documentation repository.
4 | This is a repository for everyone who wants to collaborate in implementing accessibility into Joomla.
5 | Here you can find [a presentation of all documents ](https://joomla.github.io/accessibility/#/).
6 |
--------------------------------------------------------------------------------
/docs/_coverpage.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
4 | # Joomla Accessibility Documentation
5 |
6 | > Accessibility Tutorials
7 |
8 | > Joomla UI component specification
9 |
10 | > Testing procedures
11 |
12 |
13 | [GitHub](https://github.com/joomla/accessibility/)
14 | [Get Started](tutorials/)
15 |
16 |
17 | 
18 |
--------------------------------------------------------------------------------
/docs/_images/80px-Joomla_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/80px-Joomla_logo.png
--------------------------------------------------------------------------------
/docs/_images/hearing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/hearing.png
--------------------------------------------------------------------------------
/docs/_images/intelectual.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/intelectual.png
--------------------------------------------------------------------------------
/docs/_images/mental.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/mental.png
--------------------------------------------------------------------------------
/docs/_images/motor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/motor.png
--------------------------------------------------------------------------------
/docs/_images/visual.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_images/visual.png
--------------------------------------------------------------------------------
/docs/_media/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joomla/accessibility/70bf4a79cc2f9f412528fb50721a316fdada70d1/docs/_media/favicon.ico
--------------------------------------------------------------------------------
/docs/_media/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
--------------------------------------------------------------------------------
/docs/_media/vue.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
2 | * {
3 | box-sizing: border-box;
4 | -webkit-overflow-scrolling: touch;
5 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
6 | -webkit-text-size-adjust: none;
7 | -webkit-touch-callout: none;
8 | -webkit-font-smoothing: antialiased
9 | }
10 |
11 | body:not(.ready) {
12 | overflow: hidden
13 | }
14 |
15 | body:not(.ready) [data-cloak] {
16 | display: none
17 | }
18 |
19 | div#app {
20 | text-align: center;
21 | font-size: 30px;
22 | font-weight: lighter;
23 | margin: 40vh auto
24 | }
25 |
26 | div#app:empty:before {
27 | content: "Loading..."
28 | }
29 |
30 | .emoji {
31 | height: 1.2em;
32 | vertical-align: middle
33 | }
34 |
35 | .progress {
36 | background-color: #1b63a2;
37 | background-color: var(--theme-color, #1b63a2);
38 | height: 2px;
39 | left: 0;
40 | position: fixed;
41 | right: 0;
42 | top: 0;
43 | -webkit-transition: width .2s, opacity .4s;
44 | transition: width .2s, opacity .4s;
45 | width: 0;
46 | z-index: 5
47 | }
48 |
49 | .search .search-keyword, .search a:hover {
50 | color: #1b63a2;
51 | color: var(--theme-color, #1b63a2)
52 | }
53 |
54 | .search .search-keyword {
55 | font-style: normal
56 | }
57 |
58 | body, html {
59 | height: 100%
60 | }
61 |
62 | body {
63 | -moz-osx-font-smoothing: grayscale;
64 | -webkit-font-smoothing: antialiased;
65 | font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
66 | font-size: 15px;
67 | letter-spacing: 0;
68 | margin: 0;
69 | overflow-x: hidden;
70 | color: #34495e
71 | }
72 |
73 | img {
74 | max-width: 100%
75 | }
76 |
77 | kbd {
78 | display: inline-block;
79 | padding: 3px 5px;
80 | margin-bottom: 3px;
81 | font-size: 12px !important;
82 | line-height: 12px;
83 | vertical-align: middle;
84 | border: 1px solid #ccc;
85 | border-radius: 3px
86 | }
87 |
88 | nav.app-nav {
89 | position: absolute;
90 | right: 0;
91 | left: 0;
92 | z-index: 2;
93 | margin: 25px 60px 0 0;
94 | text-align: right
95 | }
96 |
97 | nav.app-nav p {
98 | margin: 0
99 | }
100 |
101 | nav.app-nav > a {
102 | margin: 0 1em;
103 | padding: 5px 0
104 | }
105 |
106 | nav.app-nav li, nav.app-nav ul {
107 | list-style: none;
108 | display: inline-block;
109 | margin: 0
110 | }
111 |
112 | nav.app-nav a {
113 | font-size: 16px;
114 | text-decoration: none;
115 | color: #1b63a2;
116 | -webkit-transition: color .3s;
117 | transition: color .3s
118 | }
119 |
120 | nav.app-nav a.active, nav.app-nav a:hover {
121 | color: #4086c4;
122 | color: var(--theme-color, #4086c4)
123 | }
124 |
125 | nav.app-nav a.active {
126 | border-bottom: 2px solid #4086c4;
127 | border-bottom: 2px solid var(--theme-color, #4086c4)
128 | }
129 |
130 | nav.app-nav li {
131 | position: relative;
132 | display: inline-block;
133 | margin: 0 1em;
134 | padding: 5px 0
135 | }
136 |
137 | nav.app-nav li ul {
138 | display: none;
139 | box-sizing: border-box;
140 | max-height: calc(100vh - 61px);
141 | overflow-y: scroll;
142 | position: absolute;
143 | top: 100%;
144 | right: -15px;
145 | background-color: #fff;
146 | padding: 10px 0;
147 | border: 1px solid #ddd;
148 | border-bottom-color: #ccc;
149 | text-align: left;
150 | border-radius: 4px;
151 | white-space: nowrap
152 | }
153 |
154 | nav.app-nav li ul li {
155 | display: block;
156 | font-size: 14px;
157 | margin: 0;
158 | margin: 8px 14px;
159 | white-space: nowrap;
160 | line-height: 1em
161 | }
162 |
163 | nav.app-nav li ul a {
164 | display: block;
165 | font-size: inherit;
166 | margin: 0;
167 | padding: 0
168 | }
169 |
170 | nav.app-nav li ul a.active {
171 | border-bottom: 0
172 | }
173 |
174 | nav.app-nav li:hover ul {
175 | display: block
176 | }
177 |
178 | nav.app-nav.no-badge {
179 | margin-right: 25px
180 | }
181 |
182 | .github-corner {
183 | position: fixed;
184 | top: 0;
185 | right: 0;
186 | z-index: 1;
187 | text-decoration: none;
188 | border-bottom: 0
189 | }
190 |
191 | .github-corner svg {
192 | color: #fff;
193 | height: 80px;
194 | width: 80px;
195 | fill: #1b63a2;
196 | fill: var(--theme-color, #1b63a2)
197 | }
198 |
199 | .github-corner:hover .octo-arm {
200 | -webkit-animation: a .56s ease-in-out;
201 | animation: a .56s ease-in-out
202 | }
203 |
204 | main {
205 | display: block;
206 | width: 100vw;
207 | height: 100%;
208 | position: relative
209 | }
210 |
211 | .anchor {
212 | text-decoration: none;
213 | -webkit-transition: all .3s;
214 | transition: all .3s;
215 | display: inline-block
216 | }
217 |
218 | .anchor span {
219 | color: #1b63a2
220 | }
221 |
222 | .anchor:hover {
223 | text-decoration: underline
224 | }
225 |
226 | .sidebar {
227 | overflow-y: auto;
228 | padding: 40px 0;
229 | top: 0;
230 | bottom: 0;
231 | left: 0;
232 | position: absolute;
233 | -webkit-transition: -webkit-transform .25s ease-out;
234 | transition: -webkit-transform .25s ease-out;
235 | transition: transform .25s ease-out;
236 | transition: transform .25s ease-out, -webkit-transform .25s ease-out;
237 | width: 300px;
238 | z-index: 3;
239 | border-right: 1px solid rgba(0, 0, 0, .07)
240 | }
241 |
242 | .sidebar > h1 {
243 | text-align: center;
244 | margin: 0 auto 1em;
245 | font-size: 1.5em;
246 | font-weight: 300
247 | }
248 |
249 | .sidebar > h1 a {
250 | color: inherit;
251 | text-decoration: none
252 | }
253 |
254 | .sidebar ul {
255 | margin: 0;
256 | padding: 0
257 | }
258 |
259 | .sidebar li > p {
260 | font-weight: 700;
261 | margin: 0
262 | }
263 |
264 | .sidebar ul, .sidebar ul li {
265 | list-style: none
266 | }
267 |
268 | .sidebar ul li a {
269 | display: block;
270 | border-bottom: none
271 | }
272 |
273 | .sidebar ul li ul {
274 | padding-left: 20px
275 | }
276 |
277 | .sidebar::-webkit-scrollbar {
278 | width: 4px
279 | }
280 |
281 | .sidebar::-webkit-scrollbar-thumb {
282 | background: transparent;
283 | border-radius: 4px
284 | }
285 |
286 | .sidebar:hover::-webkit-scrollbar-thumb {
287 | background: hsla(0, 0%, 53%, .4)
288 | }
289 |
290 | .sidebar:hover::-webkit-scrollbar-track {
291 | background: hsla(0, 0%, 53%, .1)
292 | }
293 |
294 | .sidebar-toggle {
295 | background-color: transparent;
296 | border: 0;
297 | bottom: 0;
298 | left: 0;
299 | position: absolute;
300 | text-align: center;
301 | -webkit-transition: opacity .3s;
302 | transition: opacity .3s;
303 | width: 30px;
304 | z-index: 4;
305 | outline: none;
306 | width: 284px;
307 | padding: 10px;
308 | background-color: hsla(0, 0%, 100%, .8)
309 | }
310 |
311 | .sidebar-toggle .sidebar-toggle-button:hover {
312 | opacity: .4
313 | }
314 |
315 | .sidebar-toggle span {
316 | background-color: #1b63a2;
317 | background-color: var(--theme-color, #1b63a2);
318 | display: block;
319 | width: 16px;
320 | height: 2px;
321 | margin-bottom: 4px
322 | }
323 |
324 | body.sticky .sidebar, body.sticky .sidebar-toggle {
325 | position: fixed
326 | }
327 |
328 | .content {
329 | top: 0;
330 | right: 0;
331 | bottom: 0;
332 | left: 300px;
333 | position: absolute;
334 | padding-top: 20px;
335 | -webkit-transition: left .25s ease;
336 | transition: left .25s ease
337 | }
338 |
339 | .markdown-section {
340 | position: relative;
341 | margin: 0 auto;
342 | max-width: 900px;
343 | padding: 20px 15px 40px
344 | }
345 |
346 | .markdown-section > * {
347 | box-sizing: border-box;
348 | font-size: inherit
349 | }
350 |
351 | .markdown-section > :first-child {
352 | margin-top: 0 !important
353 | }
354 |
355 | .markdown-section hr {
356 | border: none;
357 | margin: 2em 0;
358 | border-bottom: 1px solid #eee
359 | }
360 |
361 | .markdown-section table {
362 | display: block;
363 | width: 100%;
364 | overflow: auto;
365 | border-spacing: 0;
366 | border-collapse: collapse;
367 | margin-bottom: 1em
368 | }
369 |
370 | .markdown-section th {
371 | font-weight: 700
372 | }
373 |
374 | .markdown-section td, .markdown-section th {
375 | padding: 6px 13px;
376 | border: 1px solid #ddd
377 | }
378 |
379 | .markdown-section tr {
380 | border-top: 1px solid #ccc
381 | }
382 |
383 | .markdown-section p.tip, .markdown-section tr:nth-child(2n) {
384 | background-color: #f8f8f8
385 | }
386 |
387 | .markdown-section p.tip {
388 | padding: 12px 24px 12px 30px;
389 | margin: 2em 0;
390 | border-left: 4px solid #f66;
391 | position: relative;
392 | border-bottom-right-radius: 2px;
393 | border-top-right-radius: 2px
394 | }
395 |
396 | .markdown-section p.tip code {
397 | background-color: #efefef
398 | }
399 |
400 | .markdown-section p.tip em {
401 | color: #34495e
402 | }
403 |
404 | .markdown-section p.tip:before {
405 | position: absolute;
406 | top: 14px;
407 | left: -12px;
408 | background-color: #f66;
409 | color: #fff;
410 | content: "!";
411 | width: 20px;
412 | height: 20px;
413 | border-radius: 100%;
414 | text-align: center;
415 | line-height: 20px;
416 | font-weight: 700;
417 | font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
418 | font-size: 14px
419 | }
420 |
421 | .markdown-section p.warn {
422 | padding: 1em;
423 | background: rgba(66, 185, 131, .1);
424 | border-radius: 2px
425 | }
426 |
427 | body.close .sidebar {
428 | -webkit-transform: translateX(-300px);
429 | transform: translateX(-300px)
430 | }
431 |
432 | body.close .sidebar-toggle {
433 | width: auto
434 | }
435 |
436 | body.close .content {
437 | left: 0
438 | }
439 |
440 | @media (max-width:600px) {
441 | .github-corner, .sidebar, .sidebar-toggle {
442 | position: fixed
443 | }
444 |
445 | nav {
446 | margin-top: 16px
447 | }
448 |
449 | nav li ul {
450 | top: 30px
451 | }
452 |
453 | main {
454 | height: auto;
455 | overflow-x: hidden
456 | }
457 |
458 | .sidebar {
459 | left: -300px;
460 | -webkit-transition: -webkit-transform .25s ease-out;
461 | transition: -webkit-transform .25s ease-out;
462 | transition: transform .25s ease-out;
463 | transition: transform .25s ease-out, -webkit-transform .25s ease-out
464 | }
465 |
466 | .content {
467 | left: 0;
468 | max-width: 100vw;
469 | position: static;
470 | -webkit-transition: -webkit-transform .25s ease;
471 | transition: -webkit-transform .25s ease;
472 | transition: transform .25s ease;
473 | transition: transform .25s ease, -webkit-transform .25s ease
474 | }
475 |
476 | .github-corner, nav {
477 | -webkit-transition: -webkit-transform .25s ease-out;
478 | transition: -webkit-transform .25s ease-out;
479 | transition: transform .25s ease-out;
480 | transition: transform .25s ease-out, -webkit-transform .25s ease-out
481 | }
482 |
483 | .sidebar-toggle {
484 | width: auto;
485 | background-color: transparent
486 | }
487 |
488 | body.close .sidebar {
489 | -webkit-transform: translateX(300px);
490 | transform: translateX(300px)
491 | }
492 |
493 | body.close .sidebar-toggle {
494 | width: 284px;
495 | background-color: hsla(0, 0%, 100%, .8);
496 | -webkit-transition: background-color 1s;
497 | transition: background-color 1s
498 | }
499 |
500 | body.close .content {
501 | -webkit-transform: translateX(300px);
502 | transform: translateX(300px)
503 | }
504 |
505 | body.close .github-corner, body.close nav {
506 | display: none
507 | }
508 |
509 | .github-corner .octo-arm {
510 | -webkit-animation: a .56s ease-in-out;
511 | animation: a .56s ease-in-out
512 | }
513 |
514 | .github-corner:hover .octo-arm {
515 | -webkit-animation: none;
516 | animation: none
517 | }
518 | }
519 |
520 | @-webkit-keyframes a {
521 | 0%, to {
522 | -webkit-transform: rotate(0);
523 | transform: rotate(0)
524 | }
525 |
526 | 20%, 60% {
527 | -webkit-transform: rotate(-25deg);
528 | transform: rotate(-25deg)
529 | }
530 |
531 | 40%, 80% {
532 | -webkit-transform: rotate(10deg);
533 | transform: rotate(10deg)
534 | }
535 | }
536 |
537 | @keyframes a {
538 | 0%, to {
539 | -webkit-transform: rotate(0);
540 | transform: rotate(0)
541 | }
542 |
543 | 20%, 60% {
544 | -webkit-transform: rotate(-25deg);
545 | transform: rotate(-25deg)
546 | }
547 |
548 | 40%, 80% {
549 | -webkit-transform: rotate(10deg);
550 | transform: rotate(10deg)
551 | }
552 | }
553 |
554 | section.cover {
555 | -webkit-box-align: center;
556 | -ms-flex-align: center;
557 | align-items: center;
558 | background-position: 50%;
559 | background-repeat: no-repeat;
560 | background-size: cover;
561 | height: 100vh;
562 | display: none
563 | }
564 |
565 | section.cover .cover-main {
566 | -webkit-box-flex: 1;
567 | -ms-flex: 1;
568 | flex: 1;
569 | text-align: center;
570 | margin: -20px 16px 0;
571 | z-index: 1
572 | }
573 |
574 | section.cover a {
575 | color: inherit
576 | }
577 |
578 | section.cover a, section.cover a:hover {
579 | text-decoration: none
580 | }
581 |
582 | section.cover p {
583 | margin: 1em 0;
584 | line-height: 24px;
585 | line-height: 1.5rem
586 | }
587 |
588 | section.cover h1 {
589 | text-align: center;
590 | font-size: 40px;
591 | font-size: 2.5rem;
592 | position: relative;
593 | margin: 10px 0 40px;
594 | margin: .625rem 0 2.5rem;
595 | font-weight: 300;
596 | color: inherit
597 | }
598 |
599 | section.cover h1 a {
600 | display: block
601 | }
602 |
603 | section.cover h1 small {
604 | position: absolute;
605 | bottom: -7px;
606 | bottom: -.4375rem;
607 | font-size: 16px;
608 | font-size: 1rem
609 | }
610 |
611 | section.cover blockquote {
612 | text-align: center;
613 | font-size: 24px;
614 | font-size: 1.5rem
615 | }
616 |
617 | section.cover ul {
618 | max-width: 500px;
619 | list-style-type: none;
620 | margin: 1em auto;
621 | padding: 0;
622 | line-height: 1.8
623 | }
624 |
625 | section.cover .cover-main > p:last-child a {
626 | color:#75bee9;
627 | border-radius: 2em;
628 | border-color: #75bee9;
629 | border: 1px solid var(--theme-color, #75bee9);
630 | box-sizing: border-box;
631 | font-size: 1.05em;
632 | letter-spacing: .1em;
633 | padding: .75em 2em;
634 | text-decoration: none;
635 | -webkit-transition: all .15s ease;
636 | transition: all .15s ease;
637 | margin-right: 1em;
638 | display: inline-block
639 | }
640 |
641 | section.cover .cover-main > p:last-child a:last-child {
642 | margin-right: 0;
643 | color:#75bee9;
644 | }
645 |
646 | section.cover .cover-main > p:last-child a:last-child:hover {
647 | opacity: .8;
648 | background-color: #75bee9;
649 | color: #fff
650 | }
651 |
652 | section.cover .cover-main > p:last-child a:hover {
653 | opacity: .8;
654 | background-color: #75bee9;
655 | color: #fff
656 | }
657 |
658 | section.cover blockquote > p > a {
659 | border-bottom: 2px solid #1b63a2;
660 | border-bottom: 2px solid var(--theme-color, #1b63a2);
661 | -webkit-transition: color .3s;
662 | transition: color .3s
663 | }
664 |
665 | section.cover blockquote > p > a:hover {
666 | background-color: #fff;
667 | color: #1b63a2
668 | }
669 |
670 | section.cover.show {
671 | display: -webkit-box;
672 | display: -ms-flexbox;
673 | display: flex;
674 | background-color: #1e013e;
675 | }
676 |
677 | section.cover.has-mask .mask {
678 | position: absolute;
679 | width: 100%;
680 | height: 100%;
681 | background-color: #fff;
682 | opacity: .8
683 | }
684 |
685 | .sidebar, body {
686 | background-color: #fff
687 | }
688 |
689 | .sidebar {
690 | color: #364149
691 | }
692 |
693 | .sidebar li {
694 | margin: 6px 0 6px 15px
695 | }
696 |
697 | .sidebar ul li a {
698 | color: #505d6b;
699 | text-overflow: ellipsis;
700 | overflow: hidden;
701 | white-space: nowrap;
702 | text-decoration: none;
703 | font-size: 14px;
704 | font-weight: 400
705 | }
706 |
707 | .sidebar ul li a:hover {
708 | text-decoration: underline
709 | }
710 |
711 | .sidebar ul li ul {
712 | padding: 0
713 | }
714 |
715 | .sidebar ul li.active > a {
716 | color: #1b63a2;
717 | color: var(--theme-color, #1b63a2);
718 | font-weight: 600;
719 | border-right: 2px solid
720 | }
721 |
722 | .app-sub-sidebar .section-link:before {
723 | content: "-";
724 | padding-right: 4px
725 | }
726 |
727 | .markdown-section h1, .markdown-section h2, .markdown-section h3,
728 | .markdown-section h4, .markdown-section strong {
729 | font-weight: 600;
730 | color: #2c3e50
731 | }
732 |
733 | .markdown-section a {
734 | color: #1b63a2;
735 | color: var(--theme-color, #1b63a2);
736 | font-weight: 600
737 | }
738 |
739 | .markdown-section h1 {
740 | margin: 0 0 1em;
741 | font-size: 2em
742 | }
743 |
744 | .markdown-section h2 {
745 | font-size: 1.75em;
746 | margin: 45px 0 .8em
747 | }
748 |
749 | .markdown-section h3 {
750 | margin: 40px 0 .6em;
751 | font-size: 1.5em
752 | }
753 |
754 | .markdown-section h4 {
755 | font-size: 1.25em
756 | }
757 |
758 | .markdown-section h5 {
759 | font-size: 1em
760 | }
761 |
762 | .markdown-section h6 {
763 | font-size: 1em;
764 | color: #777
765 | }
766 |
767 | .markdown-section figure, .markdown-section ol, .markdown-section p,
768 | .markdown-section ul {
769 | margin: 1.2em 0
770 | }
771 |
772 | .markdown-section ol, .markdown-section p, .markdown-section ul {
773 | line-height: 1.6em;
774 | word-spacing: .05em
775 | }
776 |
777 | .markdown-section ol, .markdown-section ul {
778 | padding-left: 1.5em
779 | }
780 |
781 | .markdown-section blockquote {
782 | color: #858585;
783 | border-left: 4px solid #1b63a2;
784 | border-left: 4px solid var(--theme-color, #1b63a2);
785 | margin: 2em 0;
786 | padding-left: 20px
787 | }
788 |
789 | .markdown-section blockquote p {
790 | font-weight: 600;
791 | margin-left: 0
792 | }
793 |
794 | .markdown-section iframe {
795 | margin: 1em 0
796 | }
797 |
798 | .markdown-section em {
799 | color: #7f8c8d
800 | }
801 |
802 | .markdown-section code {
803 | border-radius: 2px;
804 | color: #e96900;
805 | margin: 0 2px;
806 | padding: 3px 5px;
807 | white-space: nowrap;
808 | font-size: .8em
809 | }
810 |
811 | .markdown-section code, .markdown-section pre {
812 | font-family: Roboto Mono, Monaco, courier, monospace;
813 | background-color: #f8f8f8
814 | }
815 |
816 | .markdown-section pre {
817 | -moz-osx-font-smoothing: initial;
818 | -webkit-font-smoothing: initial;
819 | line-height: 1.5em;
820 | margin: 1.2em 0;
821 | padding: 0 1.4em;
822 | position: relative;
823 | overflow: auto;
824 | word-wrap: normal
825 | }
826 |
827 | .token.cdata, .token.comment, .token.doctype, .token.prolog {
828 | color: #8e908c
829 | }
830 |
831 | .token.namespace {
832 | opacity: .7
833 | }
834 |
835 | .token.boolean, .token.number {
836 | color: #c76b29
837 | }
838 |
839 | .token.punctuation {
840 | color: #525252
841 | }
842 |
843 | .token.property {
844 | color: #c08b30
845 | }
846 |
847 | .token.tag {
848 | color: #2973b7
849 | }
850 |
851 | .token.string {
852 | color: #1b63a2;
853 | color: var(--theme-color, #1b63a2)
854 | }
855 |
856 | .token.selector {
857 | color: #6679cc
858 | }
859 |
860 | .token.attr-name {
861 | color: #2973b7
862 | }
863 |
864 | .language-css .token.string, .style .token.string, .token.entity,
865 | .token.url {
866 | color: #22a2c9
867 | }
868 |
869 | .token.attr-value, .token.control, .token.directive, .token.unit {
870 | color: #1b63a2;
871 | color: var(--theme-color, #1b63a2)
872 | }
873 |
874 | .token.keyword {
875 | color: #e96900
876 | }
877 |
878 | .token.atrule, .token.regex, .token.statement {
879 | color: #22a2c9
880 | }
881 |
882 | .token.placeholder, .token.variable {
883 | color: #3d8fd1
884 | }
885 |
886 | .token.deleted {
887 | text-decoration: line-through
888 | }
889 |
890 | .token.inserted {
891 | border-bottom: 1px dotted #202746;
892 | text-decoration: none
893 | }
894 |
895 | .token.italic {
896 | font-style: italic
897 | }
898 |
899 | .token.bold, .token.important {
900 | font-weight: 700
901 | }
902 |
903 | .token.important {
904 | color: #c94922
905 | }
906 |
907 | .token.entity {
908 | cursor: help
909 | }
910 |
911 | .markdown-section pre > code {
912 | -moz-osx-font-smoothing: initial;
913 | -webkit-font-smoothing: initial;
914 | background-color: #f8f8f8;
915 | border-radius: 2px;
916 | color: #525252;
917 | display: block;
918 | font-family: Roboto Mono, Monaco, courier, monospace;
919 | font-size: .8em;
920 | line-height: inherit;
921 | margin: 0 2px;
922 | overflow: inherit;
923 | padding: 2.2em 5px;
924 | white-space: inherit;
925 | max-width: inherit
926 | }
927 |
928 | .markdown-section code:after, .markdown-section code:before {
929 | letter-spacing: .05em
930 | }
931 |
932 | code .token {
933 | min-height: 1.5em;
934 | -webkit-font-smoothing: initial;
935 | -moz-osx-font-smoothing: initial
936 | }
937 |
938 | pre:after {
939 | color: #ccc;
940 | content: attr(data-lang);
941 | font-size: .6em;
942 | font-weight: 600;
943 | height: 15px;
944 | line-height: 15px;
945 | padding: 5px 10px 0;
946 | position: absolute;
947 | right: 0;
948 | text-align: right;
949 | top: 0
950 | }
951 |
952 | section.cover.show {
953 | background-color: #1e013e;
954 | color:#fff;
955 | }
956 | .cover-main img {
957 | padding-top: 20px;
958 | max-height:300px;
959 | }
960 |
961 | section.cover .cover-main h1 > .anchor span {
962 | color: #75bee9
963 | }
964 | body[data-page="README.md"] nav.app-nav a {
965 | color: #75bee9;
966 | }
967 |
968 | body[data-page="README.md"] nav.app-nav a.active {
969 | color: #75bee9;
970 | color: var(--theme-color, #75bee9)
971 | }
972 | body[data-page="README.md"] nav.app-nav a:hover {
973 | color: #a2d6f5;
974 | color: var(--theme-color, #a2d6f5)
975 | }
976 |
977 | body[data-page="README.md"] nav.app-nav a.active {
978 | border-bottom: 2px solid #1b63a2;
979 | border-bottom: 2px solid var(--theme-color, #1b63a2)
980 | }
981 |
982 | p img[align="right"] {margin-left:1em}
983 |
--------------------------------------------------------------------------------
/docs/_navbar.md:
--------------------------------------------------------------------------------
1 | [Tutorials](/tutorials/)
2 | [UI Components](/custom-elements/)
3 | [Testing](/testing/)
4 | [Glossary](/glossary/)
5 |
--------------------------------------------------------------------------------
/docs/collaboration/cooperation.md:
--------------------------------------------------------------------------------
1 | This documentation is for the use of volunteers, working in the Joomla Accessibility Team and constitutes a set of guidelines, with a view to minimizing confusion, ambiguity, duplication and arguments, during the process of developing a variety of accessibility features into the Joomla! 4.0 version of the CMS. It is supplied as a set of RFC documents.
2 |
3 | ***The RFC documentation methodology:***
4 |
5 | As a standard method of documenting new features, standards and rules, for a project, as a first step in its development, organisations such as the World Wide Web Consortium, use a system known as RFC. That stands for 'Request For Comments'.
6 |
7 | The idea is that the initial instigator begins a version of an RFC document and it is distributed to all that may have concerns with the issue. They, then, have the opportunity to comment on the contents of the document and contribute to the next version of it. The comments may be in the form of questions, statements of fact, opinions etc.
8 |
9 | Based upon the original version and the incoming comments, a new version is then prepared and also distributed, in the same way. This process is repeated until all comments that are considered important, are dealt with and an agreement is requested to finalize the document.
10 | I am writing this document, as an RFC and the header reflects that and, also, contains the version number, the name of the instigator and date.
11 |
12 | N.B. Not all of our documentation follows the RFC methodology.
13 |
--------------------------------------------------------------------------------
/docs/collaboration/study-and-reference.md:
--------------------------------------------------------------------------------
1 | # Further Study and Reference
2 |
3 | The following links may be useful for learning more about A11y (abbreviation for Accessibility) and ARIA (abbreviation for Accessible Rich Web Applications) and for reference use:
4 |
5 | * [Intro to Advanced ARIA](https://www.deque.com/blog/tag/aria/)
6 | * [ARIA - MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
7 | * [Accessibility: the GDS blog](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)
8 | * [Accessibility according to actual people with disabilities](https://axesslab.com/accessibility-according-to-pwd/?utm_source=frontendfocus&utm_medium=email)
9 | * [Easy Accessibility Testing with aXe](https://www.deque.com/products/axe/)
10 | * [Automated testing with aXe -A11ycasts #15](https://www.youtube.com/watch?v=jC_7NnRdYb0&t=636s)
11 | * [Deque - Search result: ARIA](https://www.deque.com/?s=ARIA)
12 |
--------------------------------------------------------------------------------
/docs/collaboration/team-members.md:
--------------------------------------------------------------------------------
1 | # The Team (in no particular order)
2 |
3 | * Arman Mnatsian - Team Leader
4 | * Justyna Michallek - Assistant Team Leader
5 | * Eoin Oliver (alias: Square Balloon)
6 | * Christiane Maier-Stadtherr
7 | * Ray Selby
8 | * Stefan Wajda (aliases: zwiastun, zwiastunsw)
9 | * Yair Lahav
10 | * Adrian Jaworski. (aliases: Adi - adi_silesia-pl)
11 | * Bartosz Stępień
12 |
--------------------------------------------------------------------------------
/docs/collaboration/terminology.md:
--------------------------------------------------------------------------------
1 | ***Top-down development:***
2 |
3 | It is widely acknowledged that the most efficient way, of developing professional and enterprise-level software projects, is by the top-down method. This involves first writing documentation of the project overview, followed by documentation of details of the various sub-projects.
4 |
5 | The details can, then, be allocated to team members, who able to code. They can, write further, more finely-tuned documentation and, also, to begin to write the actual code for their sub-project.
6 |
7 | Finally, the code can, collaboratively, be tested, tweaked and debugged, until it is ready for public release, in the normal versioned manner.
8 |
9 | No branch of this project need grow at the same rate as any other and all team members are encouraged to contribute cross sub-projects, in any way in which they are able to give useful feedback, at all times. There is no prize for speed but their may be praise for accurate and efficient work, because it will progress our work and make it of high quality.
10 |
11 | In this way, consensuses can be reached, through direct feedback, compromise agreements and goodwill, as an ongoing process. Fewer mistakes may be made; less duplication of work, less code dumped, arguments escalate less often and the entire process become far smoother.
12 |
--------------------------------------------------------------------------------
/docs/collaboration/top-down-versus-bottom-up-development.md:
--------------------------------------------------------------------------------
1 | ***Top-down development:***
2 |
3 | It is widely acknowledged that the most efficient way, of developing professional and enterprise-level software projects, is by the top-down method. This involves first writing documentation of the project overview, followed by documentation of details of the various sub-projects.
4 |
5 | The details can, then, be allocated to team members, who able to code. They can, write further, more finely-tuned documentation and, also, to begin to write the actual code for their sub-project.
6 |
7 | Finally, the code can, collaboratively, be tested, tweaked and debugged, until it is ready for public release, in the normal versioned manner.
8 |
9 | No branch of this project need grow at the same rate as any other and all team members are encouraged to contribute cross sub-projects, in any way in which they are able to give useful feedback, at all times. There is no prize for speed but their may be praise for accurate and efficient work, because it will progress our work and make it of high quality.
10 |
11 | In this way, consensuses can be reached, through direct feedback, compromise agreements and goodwill, as an ongoing process. Fewer mistakes may be made; less duplication of work, less code dumped, arguments escalate less often and the entire process become far smoother.
12 |
--------------------------------------------------------------------------------
/docs/collaboration/use-of-github.md:
--------------------------------------------------------------------------------
1 | # Use of Github
2 |
3 | Ongoing work is located at Github. A general understanding of how to work within GitHub is required.
4 |
5 | The following tutorials may be useful:-
6 | * [An Intro to Git and GitHub for Beginners (Tutorial)](http://product.hubspot.com/blog/git-and-github-tutorial-for-beginners)
7 | * [Github Guides. Helo World](https://guides.github.com/activities/hello-world/)
8 | * [GitHub For Beginners: Don’t Get Scared, Get Started](https://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1/)
9 | * [GitHub: the beginner's guide](https://www.pluralsight.com/blog/software-development/github-tutorial)
10 |
11 |
12 | The ongoing work for Joomla 4.0 is located at:
13 | * https://github.com/joomla/joomla-cms
14 |
--------------------------------------------------------------------------------
/docs/custom-elements/INSTRUCTION.md:
--------------------------------------------------------------------------------
1 | # How to write a Joomla UI component specification?
2 | **Instructions for the author of the specification**
3 |
4 | 1. Read the existing UI component specifications, including:
5 | - [WAI-ARIA practices](https://www.w3.org/TR/wai-aria-practices-1.1)
6 | - [U.S. Web Design Standards](https://standards.usa.gov/components/)
7 | - [EBay MIND Patterns](https://ebay.gitbooks.io/mindpatterns/content/)
8 | - [jQuery API documentation -> Widgets](http://api.jqueryui.com/category/widgets/)
9 | - [USPTO UI Design Library](http://uspto.github.io/designpatterns/1.x/docs/index.html)
10 | - [The A11Y Project](http://a11yproject.com/patterns.html)
11 | - [AccDC Technical Style Guide](http://whatsock.com/tsg/)
12 | - [Code Library (Beta) by Deque](https://dequeuniversity.com/library/)
13 | - [Accessible solution by Adina](http://haltersweb.github.io/Accessibility/)
14 |
15 | **Note**:
16 | You can complete this list, if you find, here, a specification that is not mentioned, here.
17 | Not all of these specifications describe all of our components
18 |
19 | 2. Use the Google search to find the articles for the UI component for which you want to prepare the specification. Check out these articles. Pay attention to the opinions of good practice authors.
20 | 3. Open the specification template or draft document into this folder.
21 | 4. Compile the specification content. Pay attention when copying, to avoid unnecessary content, references, comments. Try to customize the document style, to the style used in the specifications that you have already developed.
22 | 5. Remember to indicate in references all sources (links) that you have used in the preparation of the material.
23 |
--------------------------------------------------------------------------------
/docs/custom-elements/LICENSE.md:
--------------------------------------------------------------------------------
1 | # Joomla! Electronic Documentation License v 1.0
2 | ## Definitions
3 | To "Propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except displaying or modifying a private copy.
4 |
5 | The "Work" is any copyrightable material licensed under the terms of this license or any material based on such material. The "Author" means all the people or entities who have the legal right to grant permission to Propagate the Work or parts of the Work. Each licensee is addressed as "you".
6 |
7 | "Electronic Media" means any device, medium or technology used to store, record, display, transmit or modify electronic information, including websites, compact discs, digital video discs, hard disks, magnetic media, and computer networks. "Electronic Media" does not include, for example, books printed on paper.
8 |
9 | "Grantback License" means a non-exclusive, perpetual, worldwide, royalty-free license to Propagate the Work in any medium and by any means.
10 |
11 | "Copyleft License" means a license to Propagate the Work under the terms of this license or any future version of the Joomla Electronic Documentation License published by Open Source Matters, Incorporated.
12 |
13 | The "Source Form" of a work means the preferred form of the Work for making modifications to it. For text works, this could be plain ASCII text format.
14 |
15 | ## Conditional Permissions
16 | If you grant a Grantback License to the Author and a Copyleft License to anybody who comes into possession of the Work, you may Propagate the Work via Electronic Media for any purpose, including commercial purposes.
17 |
18 | You must make available at no charge, to anybody to whom you distribute the Work, a version of the Work in Source Form. Such availability must be via either (1) the same means and method with which you distribute the Work or (2) simple download over the internet. You may not condition providing the Source Form of the Work on anything other than acceptance of this license.
19 |
20 | You must provide a copy of this license, notice that it applies to the Work, and information needed to acquire the Source Form to anybody to whom you distribute the Work.
21 |
22 | You must preserve the Author's copyright notices in the Work and display them as prominently as you display your own.
23 |
24 | Reservations of Rights
25 | Nothing in this license grants you or anybody else any right to Propagate the Work in any medium or through any means other than Electronic Media.
26 |
27 | Nothing in this license grants you or anybody else any right to do anything that requires permission under trademark law. Specifically, nothing in this license grants you permission to represent that the Work is "official" or in any way endorsed or sanctioned by the Authors.
28 |
--------------------------------------------------------------------------------
/docs/custom-elements/README.md:
--------------------------------------------------------------------------------
1 | # Accessibility of Joomla UI Components
2 | ## What is it?
3 | This is the repository of documents, defining the requirements, for the accessibiliity of the Joomla user interface components (Joomla UI Components).
4 |
5 | Here you can find a [collection of all documents the UI components](https://joomla.github.io/accessibility/#/) used in Joomla.
6 |
7 | ## Our goal
8 | Our goal is to create a complete documentation of the accessibiliity of Joomla user interface components.
9 |
10 | In the future, this documentation will be synchronized with the [Joomla UI Components](https://joomla-projects.github.io/custom-elements/#/) project documentation.
11 |
12 | ## How can you help?
13 | You can also contribute to the documentation.
14 |
15 | ### Develop a specification that is not yet available.
16 | If you do not already have a component specification, you can develop it or develop a draft, for it.
17 | * [Use the instructions for the author](custom-elements/INSTRUCTION.md) of the specification.
18 | * [Use the specification template](custom-elements/template-description.md).
19 | ### Submit your suggestions
20 | If you have comments, suggestions for changes, corrections, report them [using the Issues](https://github.com/joomla/accessibility/issues).
21 |
22 | ### Create Pull request
23 | You can also open [Pull request](https://github.com/joomla/accessibility/pulls). To do this, you must first create your local repository.
24 | ## License
25 | Documentation is published under the terms of the [Joomla! Electronic Documentation License v 1.0](LICENSE.md).
26 |
--------------------------------------------------------------------------------
/docs/custom-elements/_sidebar.md:
--------------------------------------------------------------------------------
1 | - [Introduction](custom-elements/README)
2 | - **Form controls**
3 | - **Messages**
4 | - **Structure**
5 | - **Navigation**
6 | - **Widgets**
7 |
--------------------------------------------------------------------------------
/docs/glossary/README.md:
--------------------------------------------------------------------------------
1 | # Joomla Accessibility Tutorials
2 | ## What is this?
3 | This is a working version of the tutorials on the Joomla accessibility. Upon completion of the editorial work on the individual parts of the manual, they will be published on the [Joomla! Accessibility Portal](https://docs.joomla.org/Portal:Accessibility).
4 |
5 | ## Why do we create these tutorials?
6 | The Joomla Accessibility Team is responsible for educating and popularizing accessibility knowledge, best practices for Joomla, creating extensions and templates, and building accessible sites based on Joomla CMS, that meet accessibility requirements.
7 |
8 | Initiating and organizing the work on these tutorials is one way to accomplish the mission of the team.
9 |
10 | ## Get involved
11 | You can also help. The Joomla Accessible Team needs your time and talent.
12 | Authors, editors, correctionists, documentalists - anyone can help.
13 | Joomla means "all together". Together we will achieve our goal more quickly.
14 |
15 | Create the required chapter or article. Suggest changes. Correct errors. Develop a better version of an existing part. Add illustrations, examples. Report a fault. Suggest new topics.
16 |
17 | Join us [Join us on Volunteers Portal](https://volunteers.joomla.org/teams/accessibility-team) and create these guides with us.
18 |
--------------------------------------------------------------------------------
/docs/glossary/_sidebar.md:
--------------------------------------------------------------------------------
1 | - [Quick start](glossary/)
2 | - [Term of Accessibility](glossary/glossary-accessibility)
3 | - [Term of Disability](glossary/glossary-disability)
4 |
--------------------------------------------------------------------------------
/docs/guidelines/README.md:
--------------------------------------------------------------------------------
1 | # Joomla Accessibility Guidelines
2 | ## What is this?
3 | We want to create a set of simple accessibility guidelines, for designers of Joomla-based websites and for developers of extensions and templates.
4 |
5 | ## Get involved
6 | You can also help. The Joomla Accessible Team needs your time and talent.
7 | Authors, editors, correctionists, documentalists - anyone can help.
8 | Joomla means "all together". Together we will achieve our goal more quickly.
9 |
10 | Create new guidelines. Suggest changes. Correct errors. Develop a better version of an existing function. Add illustrations, examples. Report a fault. Suggest new topics.
11 |
12 | Join us [Join us on Volunteers Portal](https://volunteers.joomla.org/teams/accessibility-team) and create these guides with us.
13 |
--------------------------------------------------------------------------------
/docs/guidelines/contrast.md:
--------------------------------------------------------------------------------
1 | # Ensure good contrast, between background and foreground
2 | ## Why?
3 | * Reading on the screen is more difficult, for people with poor vision.
4 | * People with color blindness may not differentiate, between certain color sets
5 | * Reading on screen, in sunlight or at dusk, can be difficult for everyone.
6 |
7 | ## How?
8 | * Establish an accessible color schema
9 | - Create various color combinations
10 | - Add enough contrast - minimum 4.5:1 for normal text and 3:1 for large text
11 | - Evaluate color contrast, using good tools - examine body text contrast, button contrast and link luminosity.
12 | * Don't just rely on color, to highlight elements - add border, icons, texture, patterns etc.
13 | * Pay attention of template users to the selection of accessible color sets
14 | * Document color system in the style guide
15 |
16 | ## WCAG Reference
17 | * [1.4.3 Contrast (Minimum) (Level A)](https://www.w3.org/TR/WCAG21/#contrast-minimum)
18 | * [1.4.11 Non-text Contrast (Level AA)](https://www.w3.org/TR/WCAG21/#non-text-contrast)
19 | * [Color contrast definition - WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef)
20 |
21 | ## Resources
22 | ### Color contrast checker tools
23 | * [Color Contrast Checker made by WebAIM](https://webaim.org/resources/contrastchecker/)
24 | * [Contrast Checker made by Acart](https://contrastchecker.com/)
25 | * [Eight Shapes Contrast Grid made by Eight Shapes](http://contrast-grid.eightshapes.com/)
26 | * [Color Cube made by Oomph](https://oomphinc.github.io/colorcube/)
27 | * [Accessible Color Palette Evaluator made by NC State University](https://accessibility.oit.ncsu.edu/tools/color-contrast/)
28 | * [Accessible color palette builder](https://toolness.github.io/accessible-color-matrix/)
29 |
30 | ### Accessible color sets generator
31 | * [Color Safe - accessible web color combinations made by Donielle Berg & Adrian Rapp](http://colorsafe.co/)
32 | * [Accessible color palette generator](https://confrere.com/a11y/test/)
33 | * [Tanaguru contrast finder](http://contrast-finder.tanaguru.com/)
34 |
35 | ### Further reading
36 | * [5 Tools for Establishing an Accessible Web Color Palette by Becky Cierpich](https://www.mediacurrent.com/blog/5-tools-establishing-accessible-web-color-palette/)
37 | * [Automatically creating an accessible color palette from any color? Sure!](https://medium.com/confrere/automatically-creating-an-accessible-color-palette-from-any-color-sure-e735c3f2f45e)
38 | * [Tips to Create an Accessible and Contrasted Color Palette](https://stephaniewalter.design/blog/tips-create-accessible-color-palette/)
39 | * [How to Choose Beautiful & Accessible Brand Colors for Your Website](https://oddbird.net/2017/1/16/color/)
40 | * [A guide to color accessibility in product design](https://www.invisionapp.com/inside-design/color-accessibility-product-design/)
41 | * [Color Contrast for Better Readability](https://www.viget.com/articles/color-contrast/)
42 |
--------------------------------------------------------------------------------
/docs/guidelines/keyboard.md:
--------------------------------------------------------------------------------
1 | # All functionality must be accessible from the keyboard
2 |
3 | ## Why?
4 | Some users navigate the Internet without a mouse, just using the keyboard or keyboard interfaces.
5 |
6 | Such people include people with physical disabilities, blind people who do not see the mouse pointer, people with chronic conditions such as multiple sclerosis, Parkinson’s disease or repetitive stress injuries. These are also people with temporary limitations, e.g. a broken arm or a damaged mouse.
7 |
8 | When functionality are accessible from the keyboard, they are also accessible for assistive technologies such as screen readers, as well as alternative interfaces such as voice commands, gestures, and more.
9 |
10 | ## How?
11 | * **Provide event handling independent of the device**
12 | - When possible, use device independent event handlers.
13 | - When you are using device dependent event handlers, use both mouse dependent and keyboard dependent event handlers (`onMouseOver`, `onMouseOut` and `onFocus`, `onBlur`).
14 | - When using the `onClick` event, for custom elements (not links, buttons, etc.), ensure that Enter and Space keystrokes are detected.
15 | - Do not use the `onDblClick` event - there is no device independent handling or keyboard equivalent of this event.
16 | - Make sure that `onChange` and `onSelect` events do not cause unexpected results and accessibility problems.
17 | * **Use recommended keyboard support patterns, in custom user interface elements**
18 | - If you program custom user interface elements - e.g. accordion, carousel, dropdown menu, tabs - implement keyboard support, as recommended in the [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices)
19 | - If you are building a website, make sure that controls can be operated, using the keyboard and avoid using components, modules, plugins, widgets, or JavaScript techniques which cannot be operated via the keyboard.
20 | * **Keep the focus visible**
21 | - Provide visibility of the focus.
22 | - If you are attaching the events to a different type of element, like a `
` or ``, you need to enable the element to receive keyboard focus.
23 | * **Ensure logical focus order of interactive elements**
24 | - Ensure that tabbing order through active elements is logical and matches visual layout.
25 | - If you program complex user interface components, use appropriate focus management techniques ([using a roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex) or [using aria-activedescendant](https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant)).
26 | - Avoid changing focus, unexpectedly.
27 |
28 | ## Navigating a website with the keyboard
29 | * Use **Tab** or **Shift + tab** keys to navigate forward or backward, between all of the links and forms controls, on the page.
30 | * Use **Arrow** keys to navigate within complex components of the page, such as dropdown lists, accordions, slideshow, etc.
31 | * Use **Enter** key to execute the links.
32 | * Use **Enter** or **Space** keys to activate buttons.
33 | * Use **Esc** key to close the modal window.
34 |
35 |
36 | ## WCAG reference
37 | * [2.1 - Keyboard accessible](http://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation)
38 | - [2.1.1 Keyboard (Level A)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#keyboard)
39 | - [2.1.2 No Keyboard Trap (Level A)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#no-keyboard-trap)
40 | - [2.1.3 Keyboard (No Exception) (Level AAA)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#keyboard-no-exception)
41 | * [2.4.1 Bypass Blocks (Level A)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#bypass-blocks)
42 | * [2.4.3 Focus Order (Level A)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#focus-order)
43 | * [2.4.7 Focus Visible (Level AA)](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#focus-visible)
44 |
45 | ## ATAG reference
46 | * [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1)
47 | * [Guideline A.3.1: Provide keyboard access to authoring features](https://www.w3.org/TR/ATAG20/#gl_a31)
48 | * [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b)
49 |
50 | ## Further reading
51 |
52 | * [Keyboard Compatibility by W3C WAI](https://www.w3.org/WAI/perspective-videos/keyboard/)
53 | * [Difficulty Typing and Using Your Keyboard? by W3C WAI](https://www.w3.org/WAI/users/browsing#keyboard)
54 | * [Support keyboard interaction by Harvard University](https://accessibility.huit.harvard.edu/support-keyboard-interaction)
55 | * [Designing for Keyboard Accessibility by University of Washington](https://www.washington.edu/accessibility/checklist/keyboard/)
56 | * [Using Keyboard-only Navigation, for Web Accessibility by Joseph C. Dolson](https://www.practicalecommerce.com/Using-Keyboard-only-Navigation-for-Web-Accessibility)
57 | * [Keyboard-Only Navigation for Improved Accessibility by Nielsen Norman Group](https://www.nngroup.com/articles/keyboard-accessibility/)
58 | * [Keyboard access by 18F Accessibility Guide](https://accessibility.18f.gov/keyboard/)
59 | * [Enter by Computer Hope](https://www.computerhope.com/jargon/e/enterkey.htm)
60 | * [Create a logical tabbing order through links, form controls and objects by A11y Tips](http://dboudreau.tumblr.com/post/80948821036/create-a-logical-tabbing-order-through-links-form)
61 | * [Why Keyboard Usability Is More Important Than You Think by David Sloan & Sarah Horton](https://blog.usertesting.com/blog/why-keyboard-usability-is-more-important-than-you-think/)
62 | * [Designing Better Keyboard Experiences. By David Sloan & Sarah Horton](https://blog.usertesting.com/blog/designing-better-keyboard-experiences/)
63 | * [Keyboard Navigation in Mac Browsers](http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/)
64 | * [Keyboard accessibility (again). By Rogera Johansson](https://www.456bereastreet.com/archive/201104/keyboard_accessibility_again/)
65 | * [3 Simple Tips to Improve Keyboard Accessibility](https://www.a11ywithlindsey.com/blog/3-simple-tips-improve-keyboard-accessibility/)
66 |
67 | ### JavaScript & keyboard accessibility
68 | * [Accessible Javascript. Overview of Accessible Javascript. By WebAIM](https://webaim.org/techniques/javascript/)
69 | * [Accessible Javascript. JavaScript Event Handlers. By WebAIM](https://webaim.org/techniques/javascript/eventhandlers)
70 | * [Accessible Javascript. Other Issues. By WebAIM](https://webaim.org/techniques/javascript/other)
71 | * [Accessible Javascript. JavaScript Alternatives. By WebAIM](https://webaim.org/techniques/javascript/alternatives)
72 | * [The Enter Key should Submit Forms, Stop Suppressing it](https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/)
73 | * [Implicit Submission of Form When Pressing Enter Key](http://stonefishy.github.io/blog/2015/06/30/implicit-submission-of-form-when-pressing-enter-key/)
74 |
--------------------------------------------------------------------------------
/docs/guidelines/landmarks.md:
--------------------------------------------------------------------------------
1 | # Place all content within landmarks regions
2 | The **landmark role** delineates the segments of the page that contains content of significance, so that they are easy to find and navigate.
3 |
4 | ## Why?
5 | * communicate visual structural information to users of assistive technologies
6 | * provide an easy way for users of assistive technologies to skip content blocks that are repeated on multiple pages
7 | * facilitate sighted keyboard-only users navigation to different sections of a page, using a browser add-on
8 | * programmatically identify sections of the page
9 | * convey the basic semantic meaning of the various areas of the page
10 | * clearly identifies the relationships and meaning of elements on the page
11 |
12 | ## How?
13 | * Use the new HTML5 semantic tags and role atribute to identify the most important segments of the layout and structure of the page:
14 | - `header` tag and `banner` role for the segment, at the top of each page that identifies website - logo, site name, search tool
15 | - `nav` tag and `navigation` role for a collection of links, for navigation
16 | - `main` tag and `main` role for the main content of a page
17 | - `aside` tag and `complementary` role for content that supports the main but remains autonomous
18 | - `footer` tag and `contentinfo` role for a metadata applies to the site, such as copyrights, links to privacy statements, or disclaimers.
19 | - `search` role for the search tool of a website
20 | - `region` role for a significant element of the page that cannot be described by the role, listed above.
21 | * Use the `aria-label` or `aria-labelledby` attribute to identify multiple landmarks of the same type, on the page
22 | * Use the `aria-label` or `aria-labelledby` attribute to treat the section with roles="region", as a landmark.
23 | * Element with `role="region"` (usually `section`) must have label. Use the `aria-label` or `aria-labelledby` attribute to label it.
24 | * Ensure that no content is orphaned, outside of landmarks.
25 |
26 | ## Pattern
27 | ### Example page structure
28 |
29 | ```html
30 |
31 |
32 | // header content here
33 |
34 | // Search here
35 |
36 |
37 |
40 |
41 | // Main content here
42 |
43 |
46 |
47 | // Significant content here
48 |
49 |
52 |
53 | ```
54 |
55 | **Note**: New HTML5 tags have an implicit role, e.g tag `nav` has `navigation` role, tag `footer` has `contentinfo` role. Using the `role` attribute is,therefore, redundant but, because Joomla supports Internet Explorer 11, which does not support new HTML5 tags, we also use the role attribute.
56 |
57 | ### Labelling regions using `aria-labelledby`
58 | ```html
59 |
66 | ```
67 |
68 | ### Labelling regions using `aria-label`
69 | ```html
70 |
76 | ```
77 |
78 | ## WCAG Reference
79 | * [1.3.1 Info and Relationships. (Level A)](https://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-programmatic).
80 | * [2.4.1 Bypass Blocks. (Level A)](https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip)
81 | * [2.4.6 Headings and Labels. (Level AA)](https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-descriptive)
82 | * [2.4.10 Section Headings (Level AAA)](http://www.w3.org/TR/WCAG20/#navigation-mechanisms-headings)
83 |
84 | ## Further reading
85 | * [Web Accessibility Tutorials: Page regions](https://www.w3.org/WAI/tutorials/page-structure/regions/)
86 | * [Web Accessibility Tutorials: Labeling Regions](https://www.w3.org/WAI/tutorials/page-structure/labels/)
87 | * [ARIA Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html)
88 | * [Using navigation landmarks by Léonie Watson](https://accessibility.blog.gov.uk/2016/05/27/using-navigation-landmarks/)
89 | * [Accessible Landmarks by Scott O'Hara](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
90 | * [HTML5 Sectioning and Landmark Elements by Keith J. Grant](https://keithjgrant.com/posts/2018/03/html5-sectioning-and-landmark-elements/)
91 | * [Creating Accessible HTML: A Crash Course in ARIA Landmark Regions](https://medium.com/c2-group/creating-accessible-html-a-crash-course-in-aria-landmark-regions-40513850298b)
92 | * [Screen Reader Support for new HTML5 Section Elements](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/)
93 |
94 |
--------------------------------------------------------------------------------
/docs/guidelines/lang_define.md:
--------------------------------------------------------------------------------
1 | # Define the page language and its parts
2 | ## Why?
3 | * Text-to-speech software can read content correctly.
4 | * Spell-checking software can correctly identify errors.
5 | * Browsers correctly format language-dependent text styles (e.g. they use the appropriate font).
6 | ## How?
7 | * Use the `lang` attribute in the `html` tag, to define the page language.
8 | * Use the `lang` attribute in the `span`, `blockquote` and other tags, to define the language of text fragments other than the page language.
9 | ## Pattern
10 | **How to define the language of the page?**
11 | ```php
12 |
13 |
14 | ```
15 | **How to define the language of a text fragment?**
16 | ```html
17 |
18 | In: English - Welcome, Dutch Welkom
,
19 | French Bienvenue, German Willkommen,
20 | Italian - Benvenuti, Spanish Bienvenidos,
21 | Polish - Witamy.
22 |
23 |
24 | La vérité vaut bien qu'on passe quelques années sans la trouver. Renard
25 |
26 | ```
27 | ## WCAG Reference
28 | * [WCAG 3.1.1 Language of page. (Level A)](https://www.w3.org/TR/WCAG21/#language-of-page)
29 | * [WCAG 3.1.2 Language of Parts. (Level AA)](https://www.w3.org/TR/WCAG21/#language-of-parts)
30 | ## Further reading
31 | * [Why use the language attribute?](https://www.w3.org/International/questions/qa-lang-why)
32 | * [3.1.1 Language of Page](http://www.maxability.co.in/2014/11/3-1-1-language-page/)
33 | * [3.1.2 Language of Parts](http://www.maxability.co.in/2015/02/3-1-2-language-parts/)
34 | * [Accessible Language Pickers: a11y meets i18n/l10n](http://terrillthompson.com/blog/759)
35 |
36 |
37 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Joomla Accessibility Team Docs
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/docs/sw.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * docsify sw.js
3 | * ===========================================================
4 | * Copyright 2016 @huxpro
5 | * Licensed under Apache 2.0
6 | * Register service worker.
7 | * ========================================================== */
8 |
9 | const RUNTIME = 'docsify'
10 | const HOSTNAME_WHITELIST = [
11 | self.location.hostname,
12 | 'fonts.gstatic.com',
13 | 'fonts.googleapis.com',
14 | 'unpkg.com'
15 | ]
16 |
17 | // The Util Function to hack URLs of intercepted requests
18 | const getFixedUrl = (req) => {
19 | var now = Date.now()
20 | var url = new URL(req.url)
21 |
22 | // 1. fixed http URL
23 | // Just keep syncing with location.protocol
24 | // fetch(httpURL) belongs to active mixed content.
25 | // And fetch(httpRequest) is not supported yet.
26 | url.protocol = self.location.protocol
27 |
28 | // 2. add query for caching-busting.
29 | // Github Pages served with Cache-Control: max-age=600
30 | // max-age on mutable content is error-prone, with SW life of bugs can even extend.
31 | // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
32 | // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
33 | if (url.hostname === self.location.hostname) {
34 | url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
35 | }
36 | return url.href
37 | }
38 |
39 | /**
40 | * @Lifecycle Activate
41 | * New one activated when old isnt being used.
42 | *
43 | * waitUntil(): activating ====> activated
44 | */
45 | self.addEventListener('activate', event => {
46 | event.waitUntil(self.clients.claim())
47 | })
48 |
49 | /**
50 | * @Functional Fetch
51 | * All network requests are being intercepted here.
52 | *
53 | * void respondWith(Promise r)
54 | */
55 | self.addEventListener('fetch', event => {
56 | // Skip some of cross-origin requests, like those for Google Analytics.
57 | if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
58 | // Stale-while-revalidate
59 | // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
60 | // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
61 | const cached = caches.match(event.request)
62 | const fixedUrl = getFixedUrl(event.request)
63 | const fetched = fetch(fixedUrl, { cache: 'no-store' })
64 | const fetchedCopy = fetched.then(resp => resp.clone())
65 |
66 | // Call respondWith() with whatever we get first.
67 | // If the fetch fails (e.g disconnected), wait for the cache.
68 | // If there’s nothing in cache, wait for the fetch.
69 | // If neither yields a response, return offline pages.
70 | event.respondWith(
71 | Promise.race([fetched.catch(_ => cached), cached])
72 | .then(resp => resp || fetched)
73 | .catch(_ => { /* eat any errors */ })
74 | )
75 |
76 | // Update the cache with the version we fetched (only for ok status)
77 | event.waitUntil(
78 | Promise.all([fetchedCopy, caches.open(RUNTIME)])
79 | .then(([response, cache]) => response.ok && cache.put(event.request, response))
80 | .catch(_ => { /* eat any errors */ })
81 | )
82 | }
83 | })
84 |
--------------------------------------------------------------------------------
/docs/template.md:
--------------------------------------------------------------------------------
1 | ### Name (title)
2 |
3 | #### What is this
4 | […]
5 |
6 | #### Design Patterns
7 |
8 | #### Accessibility (Keyboard Interaction)
9 | […]
10 |
11 | #### ARIA markup
12 | […]
13 |
14 | #### Why is it important?
15 | […]
16 |
17 | #### Usability
18 | ##### When to use
19 | […]
20 |
21 | ##### When to consider something else
22 | […]
23 |
24 | ##### Use in Joomla
25 | […]
26 |
27 | #### Code patterns for Joomla and Joomla extension
28 | ##### Current
29 | […]
30 | ##### Improved
31 | […]
32 | ##### Guidance
33 | […]
34 | #### WCAG reference
35 |
36 |
--------------------------------------------------------------------------------
/docs/testing/Evaluation the Joomla accessibility.md:
--------------------------------------------------------------------------------
1 | ## What is accessibility evaluation
2 | An accessibility evaluation shall verify that all relevant parts of a website are accessible to everyone whatever their hardware, software, language, location, or ability. This means that all relevant elements of the website should be perceivable, operable, understandable and robust.
3 |
4 | The evaluation shall verify compliance with the success criteria defined, in the WCAG and ATAG. But the purpose is not to declare compliance with the guidelines. The goal is real, functional accessibility of the website for different users.
5 |
6 | You do not need to be a specialist to evaluate the web accessibility. Anyone who wants to can carry out simple accessibility tests. Do not be afraid that you will make mistakes. Don't be afraid that your evaluation will be imperfect. Don't be afraid that it will be incomplete.
7 |
8 | If your evaluation helps to fix even a few accessibility issues, it will be a great success. Simple accessibility testing detects up to 80% of accessibility issues. That is a very big amount. If all the pages had been accessible only 80%, the Internet would already have been great.
9 |
10 | Do not wait until you have enough knowledge and skills. Apply a gradual approach. Start with simple tests to get more and more complete assessment, as you gain experience.
11 |
12 | ## Where to start?
13 | If you're just starting your accessibility evaluation adventure, use the great W3C WAI guide: [Easy Checks - A First Review of Web Accessibility](https://www.w3.org/WAI/test-evaluate/preliminary/).
14 |
15 | It is a very good idea to practice with:
16 | * [Assessment: Accessibility troubleshooting](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting)
17 | * [The Before and After Demonstration (BAD)](https://www.w3.org/WAI/demos/bad/).
18 |
19 | Explore and evaluate any website, such as your own. You will gain first good experiences and basic knowledge about accessibility. You will get to know some helpful tools.
20 |
21 | ## Site accessibility evaluation vs. Joomla! CMS evaluation
22 | Joomla CMS is an authoring tool. The accessibility requirements for authoring tools are defined by [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/TR/ATAG/).
23 |
24 | Evaluating the accessibility of authoring tools is more complex than evaluating the web accessibility. However, this does not mean that the evaluation of Joomla! CMS accessibility is much different from the evaluation of websites accessibility. On the contrary, it is similar because ATAG in Part A defines the guidelines for the accessibility of user interfaces for authoring tools. In short, the user interfaces should meet the success criteria of WCAG 2.1.
25 |
26 | However, part B of ATAG, on the other hand, provides guidance on how authoring tools should support the production of accessible content. However, this will be the subject of another guide.
27 |
28 | To summarize, gaining some experience in assessing web accessibility is a necessary step in acquiring the competence to evaluate the accessibility of authoring tools and the evaluation, of the accessibility of the authoring tools interface, requires the same actions as the evaluation, of the web accessibility.
29 |
30 | ## Evaluation the Joomla accessibility as an authoring tool
31 | Over time, as you gain experience, each evaluator develops his own evaluation methodology. You will also discover the best tools and procedures for you.
32 |
33 | ### Step 1. Overview of the page
34 | Always start with a review of the page you are going to evaluate. Explore a number of key issues in this review:
35 | * **Purpose.** Can you tell what the page is for?
36 | * **Structure.** What is the interface layout? What key areas can you distinguish on the page? Which of these areas are repeated on other pages of this type? Which elements are unique?
37 | * **Presentation.** Are all the elements on the page perceivable? Visible? Is there hidden content and can you see it?
38 | * **Navigation.** How can you navigate the page? Can you get to everything on the page?
39 | * **Interaction.** What can you do on this page? What task or tasks can you perform?
40 |
41 | ### Step 2. Specify the scope of the evaluation
42 | Based on the review of the page structure, decide whether you want to evaluate all or only selected elements of the page. If you decide to evaluate only selected elements of a page, decide which elements will be evaluated. We usually evaluate the accessibility of the key areas of the website and the directly related elements.
43 |
44 | Elements that appear as standard on all or many pages, such as header, footer, admin menu, are evaluated separately. Of course, all other accessibility issues that are detected can be reported in the report but you should focus on the specific features of the tested page or the evaluation, of a selected element of the user interface.
45 |
46 | ### Step 3. Perform automatic tests
47 | Do not waste your valuable time searching for errors that can be detected by automatic tests. Automatic testing ensures that around 25% of best accessibility practices can be thoroughly tested. In addition, automated tests may indicate a further 35% of the problems that need to be confirmed by a human being. That is why it is best to start with automatic tests.
48 |
49 | There are many very good tools for automatic testing and new ones are coming into being. These tools help to organize an evaluation and may provide insight into issues that are not easily recognizable. No tool does everything. That's why it's a good idea to get become familiar with a various tools available and using a few selected ones. Here are some suggestions to consider:
50 |
51 | * [WAVE](http://wave.webaim.org/extension/): a browser extensions offered by WebAIM that allows you to evaluate the accessibility of web pages directly in Chrome and Firefox. It can also check pages, to which access is password protected, such as Joomla Backend pages.
52 | * [aXe](https://axe-core.org/): small, portable, lightweight JavaScript library offered by Deque University that executes automated accessibility testing inside your browser (Chrome, Firefox) or testing framework. Because it works in your browser, you can also use it to check for password-protected pages.
53 | * [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk): an automated tool for Chrome to improve the performance, quality and correctness, including the accessibility, of web applications.
54 | * [tota11y - an accessibility visualization toolkit](http://khan.github.io/tota11y/): a Javascript that you can add to your site or use as a bookmarklet in any desktop browser. Indicates accessibility errors and suggests ways to fix them.
55 | * [HTML_CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/): bookmarklet that run on all popular browsers. It can also be called at the source of the page. HTML_CodeSniffer checks a HTML document or source code, and detects violations of a defined presentation or accessibility standard. All these tools not only detect and indicate accessibility issues, but also explain what these issues are and suggest how to solve them.
56 |
57 | All these tools not only detect and indicate accessibility issues, but also explain what these issues are and suggest how to solve them.
58 |
59 | Note that some of these tools allow you to select a target level of compliance with WCAG or Section 508 standards.
60 |
61 | For more information, see the following articles:
62 | * [The problem with automated accessibility testing tools](https://www.webcredible.com/blog/problem-automated-accessibility-testing-tools/)
63 | * [What we found when we tested tools on the world’s least-accessible webpage](https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/)
64 | * [Automated Web Accessibility Testing Tools Are Not Judges](http://www.karlgroves.com/2017/03/24/automated-web-accessibility-testing-tools-are-not-judges/)
65 |
66 | ### Step 4. Perform automatic manual tests
67 | The purpose of the manual tests is to evaluate the properties of a page, which cannot be checked automatically. Almost all of the tools, above, indicate which features require manual testing. To test the accessibility of these elements, you can:
68 | * perform a code inspection
69 | * manipulate the browser and hardware (mouse, keyboard).
70 |
71 | For manual testing, our tests kit can be helpful: [A single page accessibility test](https://github.com/joomla/accessibility/blob/master/docs/testing/testing-single-page.md)
72 |
73 | ### Step 5. Explore the feasibility of all tasks under special conditions
74 | When we examine the accessibility of administrative interfaces, it is fundamental that we are able to effectively perform all the tasks that the page serves. However, our task is not to carry out basic usability tests, but to examine whether all tasks are feasible, for those with accessibility difficulties. For example, can all tasks be performed by people who use only the keyboard and cannot use the mouse.
75 |
76 | Typical ways to assess the feasibility of tasks under special conditions are by testing:
77 | * testing with keyboard only
78 | * checking with assistive technology.
79 |
80 | #### Keyboard testing
81 | Keyboard testing is an essential part of any accessibility evaluation. A page can only be successfully evaluated if two conditions are met:
82 | * each action on the page can only be performed using the keyboard
83 | * all interactions with the keyboard are predictable.
84 |
85 | Testing a page with keyboard requires no special tools or skills. Necessarily, unplug the mouse and cover the touchpad. Then navigate the page using the keyboard and perform administration tasks.
86 | * Do you always see where you are?
87 | * Do you have access to all functions?
88 | * Can you run all the controls?
89 | * Isn't there a keyboard trap somewhere?
90 |
91 | Here is a list of common keys used in keyboard operation:
92 | * **Tab**: move to the next interactive elements (ink, form element or button)
93 | * **Shift+Tab**: move to the previous interactive elements
94 | * **Arrow keys**: move between radio buttons, menu links, tab panels, list options, sliders, tree menus, etc.
95 | * **Enter**: activate the current link or button, expand the menu, select a menu option
96 | * **Space**: check or uncheck a checkbox form element, activate the current button, expand the option list
97 | * **Escape**: close the current modal dialog or dropdown menu and return focus to the element that spawned it.
98 |
99 | **Note**: To toggle Mac keyboard accessibility press Control + F7. To activate the Tab key in Safari, go to Preferences > Advanced > Accessibility and check the Press Tab.
100 |
101 | For more information, see the following articles:
102 | * [Keyboard Accessibility](https://webaim.org/techniques/keyboard/)
103 | * [Quick Reference](https://webaim.org/resources/evalquickref/)
104 | * [Using Keyboard-only Navigation, for Web Accessibility](https://www.practicalecommerce.com/Using-Keyboard-only-Navigation-for-Web-Accessibility)
105 | * [Designing for Keyboard Accessibility](https://www.washington.edu/accessibility/checklist/keyboard/)
106 | * [18F Accessibility Guide. Keyboard access](https://accessibility.18f.gov/keyboard/)
107 |
108 | #### Screen reader testing
109 | Checking a website with a screen reader is an invaluable way to make sure that a website is functionally accessible.
110 | * **Windows users** can use the free [NVDA screen reader](https://www.nvaccess.org/).
111 | * **Mac users** can use the native [Voiceover screen reader](https://help.apple.com/voiceover/info/guide/10.12/?lang=en) utility.
112 | * **Linux users** can use the [screen reader Orca](https://help.gnome.org/users/orca/stable/).
113 |
114 | All are free and have a low learning curve.
115 |
116 | Instead of a screen reader, you can use [ChromoVox for Chrome](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn). It is a highly effective tool for developers when testing Web content.
117 |
118 | For more information, see the following articles:
119 | * [Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
120 | * [Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
121 | * [Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
122 | * [Basic screen reader commands for accessibility testing](https://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/)
123 |
124 | ### Step 6. Reporting the results of accessibility evaluation
125 | The accessibility evaluation should end with a factual report so that designers, programmers and webmasters can solve the problems detected.
126 |
127 | It is a good idea to save the report in one document and use a simple template:
128 | * **Report title**
129 | * **Review process**:
130 | * **Scope of review**. Name of site/page/UI component
131 | * **Date of review**. Range of dates on which review conducted
132 | * **Reviewers**. Name of reviewer or review team
133 | * **Evaluation environment**. Briefly inform about the operating system, browser and versions thereof
134 | * **Method and tools**. Describe method and tools used, their versions
135 | * **Result and recommended action**
136 | * **Summary of results**. Specify if it meets/does not meet/is close to meeting WCAG 2.1 AA / ATAG 2.0
137 | * **Strengths**. Indicate features in which this site/page/UI component is strong
138 | * **Failures and recommendations**
139 | * **Problem**. Name each problem identified
140 | * **Explanation**. Explain why this is a problem, how it can make accessibility more difficult for users. Describe the difficulty of accessing the object and its contents or functionality.
141 | * **References to standards**: If possible, indicate references to WCAG and/or ATAG references.
142 | * **Suggested remedies**. Propose practical techniques to achieve compliance or improve accessibility. You can indicate the appropriate solutions from the document [Techniques for WCAG](https://www.w3.org/TR/WCAG20-TECHS/) (It is best to look for tips [How to Meet WCAG 2](https://www.w3.org/WAI/WCAG21/quickref/)
143 |
144 | ### Step 7. Reporting the problems in the Joomla! Issue Tracker
145 | Reporting issues is essential to the development of Joomla. By reporting issues, anyone can contribute to the development of Joomla. Everyone can report detected bugs and faults, suggestions for code improvements and ideas for new features.
146 |
147 | If you want to be sure that the problems you detected will be considered and solved by the Project Team, report them in the system [Joomla! Issue Tracker](https://issues.joomla.org/).
148 | To report problems, you must have a Github account. The Joomla! Issue Tracker uses GitHub accounts for authentication.
149 |
150 | Each problem must be reported separately.
151 |
152 | When you reporting problems in the Joomla! Issue Tracker, simply use the descriptions you provided in the previous step to report them.
153 |
154 |
--------------------------------------------------------------------------------
/docs/testing/README.md:
--------------------------------------------------------------------------------
1 | # Accessibility Testing Procedures Documentation
2 | ## What it is?
3 | This is a repository of documents that include Joomla testing procedures, Joomla user interface elements, Joomla extensions, and Joomla templates.
4 |
5 | ## Who is this repository for?
6 | This repository is designed for members and volunteers of the Joomla Accessibility Team and for those who wish to contribute to improving accessibility of Joomla.
7 |
8 | Documents in this repository are also designed for Joomla extension and template designers.
9 |
10 | We also hope that documents in this repository will be helpful to anyone who is responsible for the accessibility of Joomla-based web services and for auditors who are researching the accessibility of Joomla and Joomla-based sites.
11 |
12 | ## Can you help?
13 | Anyone can help. If you are an advisor, auditor or accessibility tester and you want to help, we warmly welcome you.
14 | Join us to help improve the of Joomla accessibility. You can also help us occasionally - post your comments on testing procedures, submit your own procedures, etc.
15 |
16 | ## License
17 | Documentation is published under the terms of the [Joomla! Electronic Documentation License v 1.0](../custom-elements/LICENSE.md).
18 |
--------------------------------------------------------------------------------
/docs/testing/_sidebar.md:
--------------------------------------------------------------------------------
1 | - **Getting started**
2 | - [Quick start](testing/)
3 | - **Example**
4 | - [Testing single page](testing/testing-single-page)
5 | - [Testing procedures](testing/testing)
6 |
--------------------------------------------------------------------------------
/docs/testing/quickstart.md:
--------------------------------------------------------------------------------
1 | # Quick start
2 |
--------------------------------------------------------------------------------
/docs/testing/testing-joomla-ui-components.md:
--------------------------------------------------------------------------------
1 | # Accessibility evaluation Joomla UI components
2 |
3 | ## RFC version 1.0 - This is a first draft and a request for comments.
4 |
5 | This is a request for comments on this subject, in order to come to an agreement upon various guidelines to follow, when helping with the project.
6 |
7 | Instigated by Stefan Wajda and begun 6 August 2017
8 |
9 | ### Introduction
10 | The purpose of this document is to collect and develop a set of procedures for testing and evaluating Joomla UI components for their accessibility. It is supplied as an RFC.
11 |
12 | Please, contribute to RFCs, speak up, if you think you may have anything to contribute, comment, improve, suggest your own ideas. Together we will do more, faster and better.
13 |
14 | ### Description policy
15 | **Each procedure should include**:
16 | * a brief definition of the Joomla UI component
17 | * list of accessibility requirements, if needed, grouped by topic
18 | * a test description with a set of helpful questions in the assessment
19 | * report design
20 | * useful tools
21 |
22 |
23 |
--------------------------------------------------------------------------------
/docs/testing/testing-single-page.md:
--------------------------------------------------------------------------------
1 | # A single page accessibility test
2 | The following is an example of a single page accessibility test sequence that can be used as a starting point for evaluation.
3 |
4 | ## Test 1. HTML Code validation
5 |
6 | **Use the Nu Html Checker Validator (experimental).**
7 |
8 | Does the validator report errors and warnings? [(4.1.1 Parsing - Level A)][1]
9 |
10 | If the validator reports errors, write them down in the report.
11 |
12 | If you recognize important comments, please report them in the report.
13 |
14 | [Read the article on html validation.][2]
15 |
16 | ## Test 2. Automatic
17 |
18 | **Execute one of the automated tests**.
19 |
20 | You can use browser add-ons, such as WAVE, AXE, OpenWAX, Accessibility Developer Toolbar or the selected web service.
21 |
22 | [Read the article about automated tests.][3]
23 |
24 | ## Test 3. Navigation
25 |
26 | ### A. Website navigation
27 |
28 | **Disconnect the mouse. If you use notebook cover the touch panel laptop. Move between links, buttons, and form controls using the TAB key.**
29 |
30 | * Can all links, buttons, and form controls be handled from the keyboard? [(2.1.1 Keyboard - Level A)][4]
31 | * Can you see the content of all page elements, including dynamic elements such as tabs, accordions, drop-down panels, menus, sliders?
32 | * Is the navigation order understandable - logical and intuitive (makes sense)? [(1.3.2 Meaningful Sequence - Level A)][5]
33 | * Is there any focus on item selected? Are there any areas where focus disappears? [(2.4.7 Focus Visible - Level AA)][6]
34 | * Does any content besides links, buttons and form controls, get focus?
35 | * Can the focus always be moved, from the place where it is, using the TAB key? [(2.1.2 No Keyboard Trap - Level A)][7]
36 |
37 | ### B. Menu and other navigation elements
38 |
39 | * Do the main menu items point to index pages?
40 | * Can you access all menu items?
41 | * Are the number of links in the menu and on the whole page too big and troublesome?
42 | * Can you skip navigation and get straight to the main content? [(2.4.1 Bypass Blocks - Level A)][8]
43 | * Are there any other ways to reach the subpages of your site (search engine, sitemap, etc.) [(2.4.5 Multiple Ways - Level AA)][9]
44 | * Are the elements of the navigation in the same order, on subpages? [(3.2.3 Consistent Navigation - Level AA)][10]
45 | * Are elements of the same functionality (such as page section titles, modules) designed consistently? [(3.2.4 Consistent Identification - Level AA)][11]
46 | * Is the location of the current page/sequence in the site structure indicated [(2.4.8 Location - Level AAA)][12]
47 |
48 | ### C. Page title
49 | * Does the page have a unique title? [(2.4.2 Page Titled - Level A)][13]?
50 | * Is the page title concise and descriptive?
51 | * Does the page title signal its main content?
52 | * Does the title include the name of the site?
53 | * Are there only necessary and meaningful punctuation marks in the title?
54 |
55 | ## Test 4. Page structure
56 | ### A. Main areas
57 | **Review the source code paying special attention to content areas**.
58 | * Are the main areas of the page marked with appropriate tags or attributes roles (tag header or banner role, tag nav or navigation role, tag main or role main, tag footer or contentinfo role, aside tag or complementary role, search role)?
59 | * Is all the website content marked with landmarks?
60 | * Is the site structure simple and understandable?
61 |
62 | ### B. Headings
63 | **Examine the headlines. Use WAVE or OpenWAX.**
64 | * Does the page have h1-h6 headers?
65 | * Are headers used only for content headings?
66 | * Does h1 heading start the main content of the page?
67 | * Are page sections tagged with headings? [(2.4.10 Section Headings - Level AAA)][14]
68 | * Do headlines properly describe the content they follow?
69 | * Are there headline levels skipped with no reason?
70 | * Are constant section headings consistent?
71 | [(2.4.6 Headings and Labels - Level AA)][15]
72 |
73 | ### C. Paragraphs, lists and other text blocks
74 | **Explore the main content organisation on the site**.
75 | * Has the text been subdivided into sections with subheadings?
76 | * Have suitable forms (paragraphs, lists, block quotes, tables) been used for content presentation? [(1.3.1 Info and Relationships - Level A)][16]
77 | * Are content blocks (paragraphs, lists...) marked with the appropriate tags?
78 | * Are there short paragraphs (2-5 lines)?
79 | * Are the ordered and unordered lists used according to their purpose?
80 |
81 | ### D. Dynamic widgets (tabs, accordions, slides, panels, etc.)
82 | * Do all interface elements have a specific name and role?
83 | * Is the value of their attributes available for Assistive Technology? [(4.1.2 Name, Role, Value - Level A)][17]
84 |
85 | ## Test 5. Appearance - color - movement - time - sound
86 | ### A. Site layout
87 | * Does the layout adapt to the viewing area? (responsive)
88 | * Does the change of viewing area width causes the situation that order of the content elements becomes incomprehensible, illogical?
89 |
90 | ### B. Fonts size and enlargement
91 | * Is the font size sufficiently large?
92 | * Can you enlarge the font at least twice without special software?
93 | * Is the content still readable?
94 | * Do parts of text overlap?
95 | * Does the content disappear outside the screen area?
96 |
97 | ### C. Color and contrast
98 | * Is important information conveyed differently, than in a way that is not based solely on the senses, eg only by color? [(1.3.3 Sensory Characteristics - Level A][18], [1.4.1 Use of Color - Level A)][19]
99 | * Is the contrast between text and background at least 4.5: 1 and for large fonts at least 3: 1? [1.4.3 Contrast (Minimum)- Level AA][44]
100 |
101 | ### D. Time, movement, disturbance
102 | * Can you stop, pause or hide moving, flicking, or auto-refreshing elements? [(2.2.2 Pause, Stop, Hide - Level A)][20]
103 | * Are there any elements flashing with frequency more than 3 times per second or does the flash exceed the threshold values? (Three flashes or values below the threshold)
104 | * Can you turn off, pause, or extend the time limit to read content or use site features? [(2.2.1 Timing Adjustable -Level A)][21]
105 | * Can you skip or disable distracting elements (alarms, messages, information)? [(2.2.4 Interruptions - Level AAA)][22]
106 |
107 | ## Test 6. Links
108 | **Scan the text of the links**.
109 | * Does the place they go to follow their or their immediate surroundings context? [(2.4.4 Link Purpose (In Context) - Level A)][23]
110 | * Are the names of links clear and understandable without context? [(2.4.9 Link Purpose (Link Only) – Level AAA)][24]
111 | * Does each expression make sense (indicate the purpose of the link, match the title of the target page)?
112 | * Do links on the site lead to unique places (are there repeated links to the same places)?
113 | * Does every link work?
114 | * Are the links highlighted (eg underlined, marked with an icon)?
115 | * Are there "click here", "read more", "link to..." links?
116 | * Do graphic links have alternate text?
117 | * Are there uppercase URL addresses or emotion icons used in links?
118 | * Is there a warning before opening new windows?
119 | * Do download links provide helpful information?
120 | * Are the pagination links (paging) understandable?
121 |
122 | ## Test 7. Graphics and Multimedia
123 |
124 | ### A. Graphics (text alternative) ([1.1.1 Non-text Content – Level A][25])
125 | * Do all graphics have the alt attribute (with or without value)?
126 | * Does every meaningful graphic have an alternate text describing its content with up to 140 characters?
127 | * Do alternative texts convey the same meaning as images?
128 | * Do decorative graphics have an empty alt attribute? (`alt=""`)
129 | * Do informative graphics (graphs, infographics) have a proper description in the text near the image?
130 |
131 | ### B. Multimedia (time-varying media)
132 | * Are all audio recordings provided with an alternative text?
133 | * Are all recordings containing only moving pictures annotated with an alternative text or recording? [(1.2.1 Audio-only and Video-only (Prerecorded) – Level A)][26]
134 | * Are all audiovideo recordings (movies) annotated by subtitles for deaf people? [(1.2.2 Captions (Prerecorded) – Level A)][27]
135 | * Are all audiovideo recordings (movies) annotated by an audio description or alternative for media? [(1.2.3 Audio Description or Media Alternative (Prerecorded) – Level A)][28]
136 | * Can you turn off automatic playback lasting longer than 3 seconds? [(1.4.2 Audio Control – Level A)][29]
137 | * Are all audiovideo recordings (movies) recorded with audio description? [(1.2.5 Audio Description (Prerecorded) – Level AA)][30]
138 | * Do live audiovisual broadcasts contain subtitles for the deaf? (1.2.4 Captions (Live) – Level AA)][31]
139 |
140 | ## Test 8. Forms
141 | ### A. Formal actions
142 | **Fill out and submit the form by testing all controls and filling in all fields.**
143 | * Do the forms work? Can any form element be selected and filled in?
144 | * Does the selected form element receive focus?
145 | * Does the cursor appear in the selected form element?
146 | * Do all input fields have understandable labels or instructions? [(3.3.2 Labels or Instructions – Level A)][32]
147 | * Can you send a correctly completed form?
148 | * Does indicating form control with focus cause an unexpected change of its context? [(3.2.1 On Focus– Level A)][33]
149 | * Does, while filling the form, unexpected change of the context appear? [(3.2.2 On Input – Level A)][34]
150 |
151 | ### B. Reaction to errors
152 | **Investigate form responses to errors - fill incorrect data in different fields.**
153 | * Can you send a form with an error?
154 | * Is the incorrectly filled field marked (do the error areas have an indicator)?
155 | * Is there any sensible suggestion next to the field, marked as incorrectly filled? [(3.3.1 Error Identification – Level A)][35]
156 | * Does it detect any errors in the user input data that prompts them? [(3.3.3 Error Suggestion – Level AA)][36]
157 | * Does the service provide adequate protection against errors involving legal, financial or other implications for entering and modifying data? [(3.3.4 Error Prevention (Legal, Financial, Data) – Level AA)][37]
158 |
159 | ## Test 9. Tables
160 | **Scan the tables**.
161 | * Are tables used to present data?
162 | * Are tables simple or complex?
163 | * Can you read tables descriptions or summaries? Do tables have a title in the `caption` tag and a summary in the `summary` tag?
164 | * Are cells with headings marked with a `th` tag?
165 | * Is the scope of each header specified with `scope="col"` or `scope="row"`?
166 | * Are header cells' IDs, in complex tables, identified with `headers` attributes for each cell? [In the complex tables for each cell, have `headers` attributes been marked with header cell identifiers?] [(1.3.1 Info and Relationships – Level A)][38]
167 |
168 | ## Test 10. Understanding
169 | * Is the language in which the content of the page is written properly declared? [(3.1.1 Language of Page – Level A)][39]
170 | * Are text excerpts written in the other than basic language of the page correctly declared? [(3.1.2 Language of Parts – Level AA)][40]
171 | * Does the content of the page require reading ability at a level higher than junior high school? [(3.1.5 Reading Level – Level AAA)][41]
172 | * Do hallmarks help you to understand the content?
173 | * Are the hallmarks, used, thrifty and justified?
174 | * Are unusual words, expressions, abbreviations explained? [(3.1.3 Unusual Words – Level AAA][42], [3.1.4 Abbreviations – Level AAA)][43]
175 |
176 | [1]: https://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-parses
177 | [2]: https://github.com/joomla/accessibility/blob/master/docs/tutorials/testing-validation.md
178 | [3]: https://github.com/joomla/accessibility/blob/master/docs/tutorials/testing-automatic.md
179 | [4]: https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-keyboard-operable
180 | [5]: https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-sequence
181 | [6]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible
182 | [7]: https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-trapping
183 | [8]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-skip
184 | [9]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-mult-loc
185 | [10]: https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-locations
186 | [11]: https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-functionality
187 | [12]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-location
188 | [13]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-title
189 | [14]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-headings
190 | [15]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-descriptive
191 | [16]: https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic
192 | [17]: https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat-rsv
193 | [18]: https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-understanding
194 | [19]: https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-without-color
195 | [20]: https://www.w3.org/WAI/WCAG20/quickref/#time-limits-pause
196 | [21]: https://www.w3.org/WAI/WCAG20/quickref/#time-limits-required-behaviors
197 | [22]: https://www.w3.org/WAI/WCAG20/quickref/#time-limits-postponed
198 | [23]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-refs
199 | [24]: https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-link
200 | [25]: https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all
201 | [26]: https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-av-only-alt
202 | [27]: https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-captions
203 | [28]: https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-audio-desc
204 | [29]: https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-dis-audio
205 | [30]: https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-audio-desc-only
206 | [31]: https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-real-time-captions
207 | [32]: https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-cues
208 | [33]: https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-receive-focus
209 | [34]: https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-unpredictable-change
210 | [35]: https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-identified
211 | [36]: https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-suggestions
212 | [37]: https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-reversible
213 | [38]: https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic
214 | [39]: https://www.w3.org/WAI/WCAG20/quickref/#meaning-doc-lang-id
215 | [40]: https://www.w3.org/WAI/WCAG20/quickref/#meaning-other-lang-id
216 | [41]: https://www.w3.org/WAI/WCAG20/quickref/#meaning-supplements
217 | [42]: https://www.w3.org/WAI/WCAG20/quickref/#meaning-idioms
218 | [43]: https://www.w3.org/WAI/WCAG20/quickref/#meaning-located
219 | [44]: https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-contrast
220 |
--------------------------------------------------------------------------------
/docs/testing/testing.md:
--------------------------------------------------------------------------------
1 | # Accessibility evaluation Joomla UI components
2 |
3 | ## RFC version 1.0 - This is a first draft and a request for comments.
4 |
5 | This is a request for comments on this subject, in order to come to an agreement upon various guidelines to follow, when helping with the project.
6 |
7 | Instigated by Stefan Wajda and begun 6 August 2017
8 |
9 | ### Introduction
10 | The purpose of this document is to collect and develop a set of procedures for testing and evaluating Joomla UI components for their accessibility. It is supplied as an RFC.
11 |
12 | Please, contribute to RFCs, speak up, if you think you may have anything to contribute, comment, improve, suggest your own ideas. Together we will do more, faster and better.
13 |
14 | ### Description policy
15 | **Each procedure should include**:
16 | * a brief definition of the Joomla UI component
17 | * list of accessibility requirements, if needed, grouped by topic
18 | * a test description with a set of helpful questions in the assessment
19 | * report design
20 | * useful tools
21 |
22 |
23 | # Alert
24 |
25 | An alert is an element that displays a brief, important message, in a way that attracts the user's attention without interrupting the user's task.
26 |
27 | Note: See Alert dialog.
28 |
29 | ## Accessibility requirements
30 |
31 | ### General
32 |
33 | - An alert (WAI-ARIA live region) does not require any keyboard interaction.
34 | - Alerts can be closable and may have other action buttons or links.
35 | - If the alert contains an element, to dismiss and hide the notice, it should be a button. In this case **Enter** key - closes the message.
36 | - Do not include notifications that are not related to the user's current goal.
37 | - Alerts, with low importance (info or success), can close automatically after 5 seconds (if desired)
38 | - Alerts with high importance (warning or danger) should not close automatically, unless the situation has been resolved in some other way.
39 |
40 | ### Announced
41 |
42 | - If high-priority, a notice must be announced.
43 | - If high-priority, a notice must be listed as a region/landmark.
44 | - Screen reader does not need to announce low-priority server-side notices.
45 | - Screen reader must announce client-side content changes to the notice.
46 | - Screen reader should announce the element notice, when a related interactive element gains focus.
47 | - Information about the type of alarm must be announced by screen readers, e.g. by using texts or an additional text, hidden with the.sr-only class. Information, about the type of alert, cannot be denoted only by the color
48 |
49 | ### Type of alerts
50 |
51 | - Info alerts serve to provide a hint or useful information.
52 | - Success alerts should be used, when a user action is performed successfully.
53 | - Warning alerts should be used for unusual or unwanted events.
54 | - Danger alerts should be announced when the system has failed to perform an action, or when the user has made an error.
55 |
56 | ## Testing procedure
57 |
58 | - Place the message.php file in the templates directory: template/[your\_template]/html/layouts /joomla/system/. Note the file version (for Joomla 3.7 or for Joomla 4.0.
59 | - Start a Joomla site with sample data in your browser.
60 | - Do some actions that may cause an alarm:
61 | - Log in with the wrong and correct login information
62 | - Send contact form
63 | - Save the article
64 | - Examine alert presentation in your browser and on your mobile device, such as your smartphone:
65 | - Is the type of alert (Info, Success, Warning, Danger) announced?
66 | - Is the visual presentation of the alert type understandable (color, icon)?
67 | - Is the color choice legible for people with color vision disorders?
68 | - Is there a dismiss element and is it visible?
69 | - Does the message disappear when you press the dismiss button?
70 | - Examine HTML code validation
71 | - Has the alert container been identified as an alert using the role attribute?
72 | - Is the dismiss element a button?
73 | - Does the off switch have an understandable label? (The x character is not a sufficient label, in which case the concise label should be expressed in the aria-label attribute)
74 | - Examine the availability of the screen reader
75 | - Is the alert announced by the screen reader?
76 | - Can you navigate to an alert using landmarks?
77 | - Is the name (title) of the landmark with the alert announced?
78 | - Is the content of the message read correctly?
79 | - Is the shutoff button announced as a button if it exists?
80 |
81 | ## Report design
82 |
83 | To do...
84 |
85 | ## Useful tools
86 |
87 | * [aXe for Chrome and Firefox][1] - Screen reader, e.g. JAWS, NVDA, VoiceOver, Orca
88 | * [Fangs – screen reader emulator for Firefox][2]
89 | * [Color contrast analyzer ][3]
90 | * [NoCoffee or ChromeLens][4]
91 |
92 | [1]: https://www.deque.com/products/axe/
93 | [2]: https://addons.mozilla.org/pl/firefox/addon/fangs-screen-reader-emulator/
94 | [3]: https://www.paciellogroup.com/resources/contrastanalyser/
95 | [4]: https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
--------------------------------------------------------------------------------
/docs/tutorials/README.md:
--------------------------------------------------------------------------------
1 | # Joomla Accessibility Tutorials
2 | ## What is this?
3 | This is a working version of the tutorials on the Joomla accessibility. Upon completion of the editorial work on the individual parts of the manual, they will be published on the [Joomla! Accessibility Portal](https://docs.joomla.org/Portal:Accessibility).
4 |
5 | ## Why do we create these tutorials?
6 | The Joomla Accessibility Team is responsible for educating and popularizing accessibility knowledge, best practices for Joomla, creating extensions and templates, and building accessible sites based on Joomla CMS, that meet accessibility requirements.
7 |
8 | Initiating and organizing the work on these tutorials is one way to accomplish the mission of the team.
9 |
10 | ## Get involved
11 | You can also help. The Joomla Accessible Team needs your time and talent.
12 | Authors, editors, correctionists, documentalists - anyone can help.
13 | Joomla means "all together". Together we will achieve our goal more quickly.
14 |
15 | Create the required chapter or article. Suggest changes. Correct errors. Develop a better version of an existing part. Add illustrations, examples. Report a fault. Suggest new topics.
16 |
17 | Join us [Join us on Volunteers Portal](https://volunteers.joomla.org/teams/accessibility-team) and create these guides with us.
18 |
--------------------------------------------------------------------------------
/docs/tutorials/_sidebar.md:
--------------------------------------------------------------------------------
1 | - **Getting started**
2 | - [Quick start](tutorials/)
3 | - **Intro to Accessibility**
4 | - [What is Web accessibility](tutorials/what-is-web-accessibility)
5 | - **Understanding Accessibility**
6 | - [Understanding disability](tutorials/understanding-disability)
7 | - **Standards & Law**
8 | - [W3C WAI](tutorials/sl-wai)
9 | - [WCAG 2.0](tutorials/sl-wcag-2-0)
10 | - [ATAG 2.0](tutorials/sl-atag-2-0)
11 | - [UAAG 2.0](tutorials/sl-uaag-2-0)
12 | - [WAI-ARIA 1.1](tutorials/sl-wai-aria-1-1)
13 |
14 | - **Accessibility Design**
15 | - **Accessibility Content**
16 | - **Accessibility Template**
17 | - **Accessibility Management**
18 | - **Evaluation & Testing**
19 | - [Validation](tutorials/testing-validation)
20 | - [Color tools – generators, simulators, checkers](tutorials/tools-color)
21 | - [Screenreader testing](tutorials/sc-testing)
22 | - [NVDA testing](tutorials/sc-nvda-testing)
23 | - **Tools & Resources**
24 | - **Dictionary**
25 |
--------------------------------------------------------------------------------
/docs/tutorials/accessible-template.md:
--------------------------------------------------------------------------------
1 | # How to make accessibility template
2 | We want to create a simple tutorial in which we will present the key accessibility requirements for Joomla templates and explain how to implement them.
3 | **You can also help**. Write down your proposals, comment on others' proposals, write down an approach other than the one that has already been proposed.
4 | ## Table of contents (proposal)
5 | * Introduction
6 | * Responsive design
7 | * Logical and semantic structure
8 | * All content within landmarks
9 | * Labeling regions
10 | * Effective navigation (skipTo)
11 | * Accessible color schema
12 | * Perceptible typography
13 | * Accessible widgets
14 | * Evaluate tools
15 |
16 | ## Introduction
17 | The template is a key extension of the Joomla core. It supports the presentation of page content. It decides about all aspects of the appearance of pages on the site - about the organization of each page, layout and placement of content, color palette, typography and other properties. Each of these aspects of the template has a significant impact on the accessibility of websites.
18 |
19 | The purpose of this entry is to present the requirements and guidelines for building frontend and backend templates for Joomla. I won't tell you how to build templates at all. This is a topic for another tutorial.
20 |
21 | We will focus only on those aspects of the template that may determine the accessibility of the websites content.
22 |
23 | ## Responsive design
24 | Responsive design is the basis of design for all, for inclusive design.
25 |
26 | ## Logical and semantic structure
27 | ...
28 | ## All content in the designated regions
29 | ...
30 | ## Labeling regions
31 | ...
32 | ## Effective navigation (skip links)
33 | ..
34 | ## Provide accessible color schema
35 | When can colors cause accessibility problems? More often than you think.
36 |
37 | When you are in a dark room, bright colours on the screen will be unpleasant for you, they will quickly make your eyesight tired and make browsing and reading more difficult.
38 |
39 | When using your smartphone or tablet in the sun, reflections of light from bright backgrounds can make you unable to browse the web at all.
40 |
41 | And these are just extreme situations.
42 |
43 | Nearly 50% of the world's population wears corrective glasses for various reasons. Half of the population!
44 | 940 million people
45 |
46 | If you want them to love your designs, make sure that they are not only beautiful, unique, but above all easy to browse and read, well contrasted.
47 |
48 | What does "well contrasted" mean?
49 |
50 | ## Perceptible typography
51 | ...
52 | ## Accessible widgets
53 | ...
54 | ## Evaluate tools
55 | ...
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/docs/tutorials/extension-a11y-test.md:
--------------------------------------------------------------------------------
1 | # How to test the accessibility of an extension
2 | We want to create a simple tutorial that will convince site designers to check the accessibility of Joomla extensions used in websites and explain to them how to check accessibility.
3 |
4 | **You also can help.** Write down your proposals, comment on others' proposals, write down a different approach than the one already proposed.
5 | This should be a few key tests (e.g. five)
6 | ## Table of contents (proposal)
7 | * Introduction
8 | * Why to test accessibility?
9 | * What is the best environment to test in?
10 | * Test in various devices (smartfon, tablet, desktop)
11 | * Test for keyboard support
12 | * Test in High Contrast Mode (Windows, Android)
13 | * Test for Operation with Images Off
14 | * Test for Font Size Changes
15 | * Automatic tests
16 | * Other tests
17 | * Resources
18 | ## Introduction
19 | Website designers sometimes ask me how to evaluate an extension and template for accessibility without being an expert.
20 | If the sites were made by accessibility experts, they would propably not ask such question.
21 |
22 | It's not unusual that you're not an accessibility expert. But it's great that you think about accessibility when designing your website.
23 | It's great that before you decide to use an extension or template, you want to evaluate its accessibility.
24 |
25 | If you know that accessibility is important, if you know that accessibility must be thought about at all stages of the website creation process, then you will certainly build an accessible website.
26 | Maybe it will not be perfect, maybe there will be some faults in it, but surely there will be no such errors on it that people with disabilities will avoid your website from afar.
27 |
28 | The most common source of inaccessibility of websites is ignorance of their creators - programmers, webmasters, authors.
29 |
30 | Therefore, if you ask yourself questions about accessibility, you are on the right track to ensure accessibility.
31 | Where there's a will there's a way.
32 | ## Why to test accessibility?
33 | ...
34 | ## What is the best environment to test in?
35 | ...
36 | ## Test in various devices
37 | ...
38 | ## Test for keyboard support
39 | ...
40 | ## Test in High Contrast Mode
41 | ...
42 | ## Test for Operation with Images Off
43 | ...
44 | ## Test for Font Size Changes
45 | ...
46 | ## Automatic tests
47 | ...
48 | ## Other tests
49 | ...
50 | ## Resources
51 | ...
52 |
--------------------------------------------------------------------------------
/docs/tutorials/resources.md:
--------------------------------------------------------------------------------
1 | ## Standards
2 | * [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG/)
3 | * [User Agent Accessibility Guidelines (UAAG) 2.0](https://www.w3.org/TR/UAAG20/)
4 | * [Authoring Tool Accessibility Guidelines (ATAG) 2.0](http://www.w3.org/TR/ATAG20/)
5 | * [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria-1.1/)
6 | * [Implementing ATAG 2.0](https://www.w3.org/TR/2015/NOTE-IMPLEMENTING-ATAG20-20150924/)
7 | * [DHTML Style Guide Working Group](http://access.aol.com/dhtml-style-guide-working-group)
8 | * [UI Components. U.S. Web Design Standards.](https://standards.usa.gov/components/)
9 |
10 | ## Other
11 | * [Build software better, together](https://github.com/joomla/joomla-cms/issues/new)
12 | * [joomla/joomla-cms](https://github.com/joomla/joomla-cms/tree/4.0-dev)
13 | * [joomla-projects/accessibility](https://github.com/joomla-projects/accessibility/blob/master/ISSUE_TEMPLATE.md)
14 | * [Joomla! Accessibility Statement](https://www.joomla.org/accessibility-statement.html)
15 |
16 | ## General
17 | * [Just Ask: Integrating Accessibility Throughout Design](http://uiaccess.com/JustAsk/index.html)
18 | * [Global Accessibility Awareness Day Events](http://globalaccessibilityawarenessday.org/events.html)
19 | * [Head Mouse Demonstration](https://www.youtube.com/watch?v=MliApqHE9k4))
20 | * [Accessibilité, web et Joomla!](http://cinnk.com/magazine/aout-2015/742-accessibilite-web-et-joomla)
21 | * [13 tips for making responsive web design multi-lingual](http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design)
22 | * [CHARTS ON GRIDS – RESPONSIVE DASHBOARD TEMPLATES WITH BOOTSTRAP](https://keen.io/blog/101269629091/charts-on-grids-responsive-dashboard-templates-with?s=tw427)
23 | * [John Slatin AccessU, Knowbility](http://www.knowbility.org/v/john-slatin-accessu/)
24 | * [4446.0 - Disability, Australia, 2009](http://www.abs.gov.au/ausstats/abs@.nsf/Lookup/4446.0main+features42009)
25 | * [The Redesign: Questions To Ask Before You Start](http://www.usabilitycounts.com/2013/08/07/the-redesign-questions-to-ask-before-you-start/)
26 | * [What is WAI-ARIA, what does it do for me, and what not?](https://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/)
27 | * [How Our CSS Framework Helps Enforce Accessibility](http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/)
28 |
29 | ## WCAG
30 | * [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG/)
31 | * [How to Meet WCAG 2.0](http://www.w3.org/WAI/WCAG20/quickref/)
32 | * [Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html)
33 | * [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/)
34 | * [The WCAG 2.0 Documents](http://www.w3.org/WAI/intro/wcag20)
35 | * [WCAG 2 FAQ](http://www.w3.org/WAI/WCAG20/wcag2faq.html)
36 | * [Understanding Success Criterion 2.4.1 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
37 |
38 |
39 | ## ARIA
40 | * [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/)
41 | * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/)
42 | * [Using ARIA in HTML](https://www.w3.org/TR/using-aria/)
43 | * [The ARIA Role Matrices](http://whatsock.com/training/matrices/)
44 | * [Periodic Table of ARIA 1.1 Roles](http://dylanb.github.io/periodic-aria11-roles.html)
45 | * [Periodic Table of ARIA 1.1 Attributes](http://dylanb.github.io/periodic-aria11-attributes.html)
46 | * [The Accessibility Tree: A Training Guide for Advanced Web Development](http://whatsock.com/training/)
47 |
48 | ## Tutorials
49 | * [Tutorials Overview: WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/)
50 |
51 |
52 | ## Patterns
53 | * [Dropdown Menus Test Page](http://staff.washington.edu/tft/tests/menus/)
54 | * [OpenAjax Accessibility: OpenAjax Examples](http://oaa-accessibility.org/)
55 | * [Accessible jQuery-ui Components Demo](http://hanshillen.github.io/jqtest/?tabid=dialog#goto_dialog)
56 | * [proteusthemes/WAI-ARIA-Walker_Nav_Menu](https://github.com/proteusthemes/WAI-ARIA-Walker_Nav_Menu/blob/master/wai-aria.js)
57 | * [H64: Using the title attribute of the frame and iframe elements](http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H64)
58 | * [Creating Accessible Frames and Iframes](http://webaim.org/techniques/frames/)
59 | * [U.S. Web Design Standards. UI Components](https://standards.usa.gov/components/)
60 | * [Frend. A collection of accessible, modern front-end components](https://frend.co/)
61 |
62 |
63 | ## Tools
64 | * [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/)
65 | * [Web Developer](http://chrispederick.com/work/web-developer/)
66 | * [HTML_CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/)
67 | * [HTML Validator](https://validator.w3.org/nu/)
68 | * [HTML Validator](https://validator.w3.org/)
69 | * [HTML Validator](https://github.com/validator/validator)
70 | * [Diagnostic.css – Super quick web accessibility testing](http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/)
71 | * [debugCSS : (X)HTML debugging tool built with CSS](http://imbrianj.github.io/debugCSS/)
72 | * [Revenge.css](https://github.com/Heydon/REVENGE.CSS)
73 | * [WAVE Browser Extensions](http://wave.webaim.org/extension/)
74 | * [Easy Accessibility Testing with aXe](https://www.deque.com/products/axe/)
75 | * [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)
76 | * [tota11y - an accessibility visualization toolkit](http://khan.github.io/tota11y/)
77 | * [The Visual ARIA Bookmarklet](http://whatsock.com/training/matrices/visual-aria.htm)
78 | * [Colour Contrast Analyser (CCA)](https://www.paciellogroup.com/resources/contrastanalyser/)
79 | * [Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!](http://leaverou.github.io/contrast-ratio/)
80 | * [ChromeLens - Chrome DevTools](https://github.com/chromelens/chromelens)
81 | * [NoCoffee – Vision Simulator for Chrome](https://accessgarage.wordpress.com/2013/02/09/458/)
82 | * [tanaguru contrast finder](http://contrast-finder.tanaguru.com/)
83 | * [about tanagru. Tips to Create an Accessible and Contrasted Color Palette](https://blog.stephaniewalter.fr/en/tips-create-accessible-color-palette/)
84 | * [IDI Web Accessibility Checker : Web Accessibility Checker](http://achecker.ca/)
85 | * [CMS Plugin](https://siteimprove.com/product/cms-plugin/)
86 | * [Sonar. A linting tool for the web](https://sonarwhal.com/)
87 | * [NVDA - Free screen reader for Windows ](https://www.nvaccess.org/)
88 | * [ORCA - Free screen reader for Linux](https://help.gnome.org/users/orca/stable/)
89 | * [The World's Most Popular Windows Screen Reader](http://www.freedomscientific.com/Products/Blindness/JAWS)
90 | * [VoiceOver for Mac: VoiceOver overview](https://support.apple.com/kb/PH22549?locale=en_US)
91 | * [ChromeVox Screen Reader for Chrome OS](http://www.chromevox.com/)
92 | * [Meet the Fangs Screen Reader Emulator Developer](https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/contribute/roadblock/?src=collection&version=1.0.8.1-signed.1-signed&collection_id=16126421-d45e-83c5-a057-1c8693ea0642)
93 | * [Accessibility Viewer](https://www.paciellogroup.com/resources/aviewer/)
94 | * [DOM Inspector](https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/)
95 | * [The Chromium projects. Accessibility Technical Documentation ](http://www.chromium.org/developers/design-documents/accessibility#TOC-Testing)
96 | * [The Browser Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/)
97 | * [Accessible color palette builder](https://toolness.github.io/accessible-color-matrix/)
98 | * [Accessify - A collection of accessibility tools](http://www.accessify.com/)
99 | * [Akbar - User Experience Simulation Bookmarklet](http://howlowck.github.io/Akbar/)
100 | * [Color Filter - Colorblind Web Page Filter](https://www.toptal.com/designers/colorfilter)
101 | * [Colorable - Color palette combination contrast tester](http://jxnblk.com/colorable/demos/text/)
102 | * [DMOZ - List of online accessibility tools](http://dmoztools.net/Computers/Internet/Web_Design_and_Development/Authoring/Online_Tools/Checking_and_Debugging/Accessibility/)
103 | * [JavaScript Event KeyCodes - By keycode.info](http://keycode.info/)
104 | * [Accessibility Testing API - By Tenon.io](https://tenon.io/)
105 | * [Quail JS Testing Plugin - A jQuery plugin for checking content against accessibility guidelines](https://github.com/quailjs/quail)
106 | * [ally.js - Helps JavaScript applications become more accessible](https://allyjs.io/)
107 | * [Sublime WAI-ARIA - WAI-ARIA Roles, States and Properties auto-completion for Sublime Text](https://packagecontrol.io/packages/WAI-ARIA)
108 | * [Basic screen reader commands for accessibility testing - By The Paciello Group](http://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/)
109 | * [VoiceOver - By Apple, iPhone App (iOS)](http://www.apple.com/accessibility/iphone/vision.html)
110 |
111 | ## Law
112 | * [Web accessibility will now be the law of the land in Europe](http://www.euractiv.com/section/digital/opinion/web-accessibility-will-now-be-the-law-of-the-land-in-europe)
113 | * [Web Accessibility - European commission](http://ec.europa.eu/ipg/standards/accessibility/index_en.htm)
114 |
115 | ## Examples
116 | * [Accessibility](https://www.drupal.org/about/features/accessibility)
117 | * [Accessibility - WordPress Codex](https://codex.wordpress.org/Accessibility)
118 | * [How to Implement Web Accessibility Guidelines in WordPress](https://torquemag.io/2016/01/web-accessibility-guidelines-wordpress/)
119 | * [Visual Composer: Page Builder for WordPress](http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431)
120 |
121 |
122 | ## Books
123 | * [A Web for Everyone - Designing Accessible User Experiences - by Sarah Horton & Whitney Quesenbery](https://rosenfeldmedia.com/books/a-web-for-everyone/)
124 | * [Adaptive Web Design - by Aaron Gustafson](http://www.amazon.com/Adaptive-Web-Design-Experiences-Progressive/dp/098358950X)
125 | * [Apps For All: Coding Accessible Web Applications - by Heydon Pickering](https://shop.smashingmagazine.com/products/apps-for-all)
126 | * [Designing with Progressive Enhancement - by The Filament Group](http://www.amazon.com/Designing-Progressive-Enhancement-Building-Everyone/dp/0321658884/)
127 | * [Designing with Web Standards - by Jeffrey Zeldman](http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321616952)
128 | * [Inclusive Design Patterns - by Heydon Pickering](https://shop.smashingmagazine.com/products/inclusive-design-patterns)
129 | * [Pro HTML5 Accessibility - by Joshue O Connor](http://www.amazon.com/Pro-HTML5-Accessibility-Professional-Apress/dp/1430241942)
130 | * [Web Accessibility: Web Standards and Regulatory Compliance - by Jim Thatcher](http://www.amazon.com/Web-Accessibility-Standards-Regulatory-Compliance/dp/1590596382)
131 | * [Joomla! Accessibility - by Joshue O Connor](https://www.packtpub.com/web-development/joomla-accessibility)
132 |
133 | ## Further reading
134 | * [30 days to a more accessible web site - By Dive Into Accessibility (2002)](http://diveintoaccessibility.info/table_of_contents.html)
135 | * [A11ycasts - YouTube Playlist (2017)](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
136 | * [Aaron Cannon, Blind Web Developer - (2007) (Video)](http://vimeo.com/1157346)
137 | * [Accessibility Checklist Article - By Cameron Moll (2008)](http://cameronmoll.com/archives/2008/06/web_accessibility_checklist/)
138 | * [Accessibility Checklist (PDF) - By Aaron Cannon (2008)](http://cameronmoll.com/downloads/Web_Accessibility_Checklist.pdf)
139 | * [Apple’s Commitment to Accessibility](http://www.apple.com/accessibility)
140 | * [Best practices to make your mobile site accessible - By mobiforge.com (2012)](https://mobiforge.com/design-development/why-mobile-web-accessibility-matters-best-practices-make-your-mobile-site-accessi)
141 | * [Google Accessibility - Resources to help everyone access and enjoy the web.](https://www.google.com/accessibility/)
142 | * [NNG Topic - Accessibility - By Nielsen Norman Group](https://www.nngroup.com/topic/accessibility/)
143 | * [Practical ARIA Examples - By heydonworks.com (2014)](http://heydonworks.com/practical_aria_examples/)
144 | * [Testing with Screen Readers - By WebAIM](http://webaim.org/articles/screenreader_testing/)
145 | * [The Accessibility Cheatsheet - By bitsofco.de (2015)](http://bitsofco.de/2015/the-accessibility-cheatsheet/)
146 | * [We are Color Blind - by Tom van Beveren](http://wearecolorblind.com/)
147 | * [Web Accessibility for Designers (Infographic) - By WebAIM](http://webaim.org/resources/designers/)
148 | * [Web Fundamentals: Accessibility - By Google (2016)](https://developers.google.com/web/fundamentals/accessibility/)
149 | * [WebAIM: Skip Navigation - By WebAIM](http://www.webaim.org/techniques/skipnav/)
150 | * [WebAIM’s Hierarchy for Motivating Accessibility Change - By WebAIM](http://webaim.org/blog/motivating-accessibility-change/)
151 | * [jQuery simple and accessible hide-show system (collapsible regions), using ARIA - By Nicolas Hoffmann (2016)](http://a11y.nicolas-hoffmann.net/)
152 |
153 |
--------------------------------------------------------------------------------
/docs/tutorials/sc-testing.md:
--------------------------------------------------------------------------------
1 | # Screenreader testing
2 | Checking a website with a screen reader is an invaluable way to make sure that a website is functionally accessible.
3 | * **Windows users** can use the free [NVDA screen reader](https://www.nvaccess.org/).
4 | * **Mac users** can use the native [Voiceover screen reader](https://help.apple.com/voiceover/info/guide/10.12/?lang=en) utility.
5 | * **Linux users** can use the [screen reader Orca](https://help.gnome.org/users/orca/stable/).
6 |
7 | All are free and have a low learning curve.
8 |
9 | Instead of a screen reader, you can use [ChromoVox for Chrome](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn). It is a highly effective tool for developers when testing Web content.
10 |
--------------------------------------------------------------------------------
/docs/tutorials/sl-atag-2-0.md:
--------------------------------------------------------------------------------
1 | # Authoring Tool Accessibility Guidelines 2.0
2 |
3 | The **Authoring Tool Accessibility Guidelines (ATAG) 2.0** is a technical standard designed by the W3C to support developers in the creation of authoring tools. Authoring tools are software and services that "authors" (web developers, designers, writers, etc.) use to produce web content. ATAG is primarily for developers of authoring tools, including among others software for generating websites, for example, content management systems.
4 |
5 |
6 | The current ATAG 2.0 release is in its final draft. It is the current standard and is split into two parts:
7 |
8 | ## What is in ATAG 2.0
9 | * **Part A**: Make the authoring tool user interface accessible; and
10 | * **Part B**: Support the production of accessible content.
11 |
12 | The **Part A** guidelines focuses on ensuring that people with disabilities are able to effectively use an authoring tool and are as follows:
13 |
14 | * **Principle A.1**: Authoring tool user interfaces must follow applicable accessibility guidelines
15 | * **Principle A.2**: Editing views must be perceivable
16 | * **Principle A.3**: Editing views must be operable
17 | * **Principle A.4**: Editing views must be understandable
18 |
19 | The **Part B** focuses on ensuring that content or applications created by an authoring tool meet accessibility standards and incorporate accessibility features. They are as follows:
20 |
21 | * **Principle B.1**: Production of accessible content must be enabled
22 | * **Principle B.2**: Authors must be supported in the production of accessible content
23 | * **Principle B.3**: Accessibility solutions must be promoted and integrated
24 | * **Principle B.4**: Authoring tools must promote and integrate their accessibility features
25 |
26 |
27 | ## Who ATAG is for
28 | ATAG is primarily for developers of authoring tools, including the following types of authoring tools:
29 |
30 | * Web page authoring tools, for example, what-you-see-is-what-you-get (WYSIWYG) HTML editors
31 | * Software for generating websites, for example, content management systems (CMS), courseware tools, content aggregators
32 | * Software that converts to web content technologies, for example, word processors and other office document applications with "Save as HTML"
33 | * Multimedia authoring tools
34 | * Websites that let users add content, such as blogs, wikis, photo sharing sites, online forums, and social networking sites
35 | * Other types of tools listed in the glossary definition of authoring tools.
36 |
37 | ATAG and supporting resources are also intended to meet the needs of many different audiences, including policy makers, managers, and others. For example:
38 |
39 | * People who want to choose authoring tools that are accessible and that produce accessible content can use ATAG to evaluate authoring tools.
40 | * People who want to encourage their existing authoring tool developer to improve accessibility in future versions can refer the authoring tool vendor to ATAG.
41 |
42 |
43 | ## Learn more
44 | For more information please refer to:
45 |
46 | * [Authoring Tool Accessibility Guidelines 2.0 (ATAG 2.0)](https://www.w3.org/TR/ATAG20/). W3C Recommendation 24 September 2015
47 | * [Implementing ATAG 2.0](https://www.w3.org/TR/2015/NOTE-IMPLEMENTING-ATAG20-20150924/). A guide to understanding and implementing Authoring Tool Accessibility Guidelines 2.0
48 | * [The overview of ATAG](http://www.w3.org/WAI/intro/atag.php) from the W3C.
49 | * [ATAG at a Glance](http://www.w3.org/WAI/intro/atag-glance) from the W3C.
50 |
--------------------------------------------------------------------------------
/docs/tutorials/sl-uaag-2-0.md:
--------------------------------------------------------------------------------
1 | # User Agent Accessibility Guidelines (UAAG) 2.0
2 |
3 | The **User Agent Accessibility Guidelines (UAAG) 2.0** is part of a series of accessibility guidelines published by the [W3C Web Accessibility Initiative](tutorials/sl-wai) (WAI).
4 |
5 | [User Agent Accessibility Guidelines](https://www.w3.org/TR/UAAG20/) documents explain how to make user agents accessible to people with disabilities. User agents include browsers, browser extensions, media players, readers and other applications that render web content.
6 |
7 | UAAG 2.0 was developed to help make future generations of Web browsers more accessible, to provide alternative information based on the users technology and platform, and to align with WCAG 2.0 and ATAG 2.0. UAAG 2.0 is complete. It provides specific guidance for browsers and other user agents and reference information for accessibility professionals.
8 |
9 | ## Who UAAG is for
10 | UAAG is primarily for developers of Web browsers, browser extensions, media players, readers and other applications that render web content.
11 |
12 | ## Learn more
13 |
14 | * [User Agent Accessibility Guidelines (UAAG) 2.0](https://www.w3.org/TR/UAAG20/)
15 | * [User Agent Accessibility Guidelines (UAAG) Overview](https://www.w3.org/WAI/intro/uaag)
16 | * [UAAG 2.0 Reference: Explanations, Examples, and Resources for User Agent Accessibility Guidelines 2.0](http://www.w3.org/TR/UAAG20-Reference/)
17 |
18 |
--------------------------------------------------------------------------------
/docs/tutorials/sl-wai-aria-1-1.md:
--------------------------------------------------------------------------------
1 | # Accessible Rich Internet Applications (WAI-ARIA) 1.1
2 | > WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
3 |
4 | > Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology.
5 |
6 | > With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
7 |
8 | source: [WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
9 |
10 | ## Learn more
11 |
12 | * [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria-1.1/). W3C Candidate Recommendation, 27 October 2016
13 | * [WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
14 | * [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/), recommends approaches to help web application developers make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. It describes considerations that might not be evident to most authors from the WAI-ARIA specification which is oriented primarily at user agent implementers.
15 |
16 |
--------------------------------------------------------------------------------
/docs/tutorials/sl-wai.md:
--------------------------------------------------------------------------------
1 | # Web Accessibility Initiative (WAI)
2 |
3 | The Web Accessibility Initiative (WAI) is an initiative of the World Wide Web Consortium launched in 1997 with endorsement by The White House and W3C members to help make the internet more accessible to people with disabilities. The WAI applies to all types of disabled populations, including the growing elderly population. Equal opportunity and equal access rights are the crux of the WAI.
4 |
5 | The WAI seeks to make the internet more accessible to people with auditory, cognitive, neurological, physical, speech and visual impairments. This is largely accomplished through what the organization calls "inclusive design."
6 |
7 | WAI pursues accessibility of the web through five primary activities:
8 |
9 | * **Technology** - ensuring those core technologies of the Web support accessibility
10 | * **Guidelines** - developing guidelines for Web content, user agents, and authoring tools
11 | * **Tools** - facilitating development of evaluation and repair tools for accessibility
12 | * **Education** - conducting education and outreach
13 | * **Research and development** - coordinating with researchers and developers
14 |
15 | The second of these activities (developing guidelines) has yielded the following sets of W3C Recommendations (official guidelines) to date:
16 |
17 | * [Web Content Accessibility Guidelines 2.0 (WCAG 2.0)][1] - refers to content on web pages.
18 | * [Authoring Tool Accessibility Guidelines 2.0 (ATAG 2.0)][2] - refers to software for creating web pages.
19 | * [User Agent Accessibility Guidelines 2.0 (UAAG 2.0)][3] - refers to web browsers
20 | * [Accessible Rich Internet Applications 1.1 (WAI-ARIA 1.1)][4]
21 |
22 | ## Learn more
23 |
24 | For more information about WAI, consult the [WAI home page][5].
25 |
26 | [1]:tutorials/sl-wcag-2-0.md
27 | [2]:tutorials/sl-atag-2-0.md
28 | [3]:tutorials/sl-uaag-2-0.md
29 | [4]:tutorials/sl-wai-aria-1-1.md
30 | [5]:https://www.w3.org/WAI/
31 |
32 |
--------------------------------------------------------------------------------
/docs/tutorials/sl-wcag-2-0.md:
--------------------------------------------------------------------------------
1 | # Web Content Accessibility Guidelines 2.0
2 | [Web Content Accessibility Guidelines (WCAG) 2.0][1] is a technical standard designed by the W3C to show how to make web content that is accessible to people with disabilities. It has **12 guidelines** that are organized under **4 principles**. Each guideline has testable **success criteria**, each of which has an associated level: **A**, **AA** or **AAA**.
3 |
4 |
5 | ## Design principles
6 | WCAG 2.0 is based around four design principles that state that, in order for a website to be accessible, it must have content that is:
7 |
8 | * [**Principle 1: Perceivable**](https://www.w3.org/WAI/WCAG20/quickref/#principle1). Information and user interface components must be presentable to users in ways they can perceive.
9 | * [**Principle 2: Operable**](https://www.w3.org/WAI/WCAG20/quickref/#principle2). User interface components and navigation must be operable.
10 | * [**Principle 3: Understandable**](https://www.w3.org/WAI/WCAG20/quickref/#principle3). Information and the operation of user interface must be understandable.
11 | * [**Principle 4: Robust**](https://www.w3.org/WAI/WCAG20/quickref/#principle4). Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
12 |
13 |
14 | ## Guidelines
15 |
16 | Each design principle has a number of guidelines associated with it. There are 12 guidelines in total.
17 |
18 |
19 | ### Perceivable:
20 |
21 | [**1.1 Text alternatives**](https://www.w3.org/WAI/WCAG20/quickref/#text-equiv): Provide text alternatives for non-text content.
22 |
23 | [**1.2 Time-based Media**](https://www.w3.org/WAI/WCAG20/quickref/#media-equiv): Provide captions and other alternatives for multimedia.
24 |
25 | [**1.3 Adaptable**](https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation):Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
26 |
27 | [**1.4 Distinguishable**](https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast): Make it easier for users to see and hear content.
28 |
29 |
30 | ### Operable:
31 |
32 | [**2.1 Keyboard Accessible**](https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation): Make all functionality available from a keyboard.
33 |
34 | [**2.2 Enough Time**](https://www.w3.org/WAI/WCAG20/quickref/#time-limits): Give users enough time to read and use content.
35 |
36 | [**2.3 Seizures**](https://www.w3.org/WAI/WCAG20/quickref/#seizure): Do not use content that causes seizures.
37 |
38 | [**2.4 Navigable**](https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms): Help users navigate and find content.
39 |
40 | ### Understandable:
41 |
42 | [**3.1 Readable**](https://www.w3.org/WAI/WCAG20/quickref/#meaning): Make text readable and understandable.
43 |
44 | [**3.2 Predictable**](https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior): Make content appear and operate in predictable ways.
45 |
46 | [**3.3 Input assistance**](https://www.w3.org/WAI/WCAG20/quickref/#minimize-error): Help users avoid and correct mistakes.
47 |
48 | ### Robust:
49 |
50 | [**4.1 Compatible**](https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat): Maximize compatibility with current and future user tools.
51 |
52 |
53 | ## Success criteria
54 | Each of the guidelines has a number of associated success criteria.
55 |
56 | For example, Guideline 2.4, which focuses on Navigable, has ten success criteria. Success Criteria 2.4.2 states, “Page Titled: Web pages have titles that describe topic or purpose. (Level A)”.
57 |
58 | ## Conformance Level
59 | One of the following levels of conformance is met in full.
60 |
61 | **Level A**: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
62 |
63 | **Level AA**: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
64 |
65 | **Level AAA**: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.
66 |
67 | ## Supported documents
68 | The WCAG 2.0 supporting technical materials include:
69 | * [How to Meet WCAG 2.0][2]
70 | * [Understanding WCAG 2.0][3]
71 | * [Techniques for WCAG 2.0][4]
72 | * [The WCAG 2.0 Documents][5]
73 |
74 | ## More info
75 | For more information please refer to:
76 | * [Content Accessibility Guidelines (WCAG) Overview][6]
77 |
78 | [1]:https://www.w3.org/TR/WCAG20/
79 | [2]:https://www.w3.org/WAI/WCAG20/quickref/
80 | [3]:https://www.w3.org/TR/UNDERSTANDING-WCAG20/
81 | [4]:https://www.w3.org/TR/WCAG20-TECHS/
82 | [5]:http://www.w3.org/WAI/intro/wcag20
83 | [6]:https://www.w3.org/WAI/intro/wcag
84 |
--------------------------------------------------------------------------------
/docs/tutorials/testing-automatic.md:
--------------------------------------------------------------------------------
1 | # Automatic accessibility testing
2 | Wouldn't it be great to connect the website to a slot machine that would examine all aspects of its accessibility and prepare a report on detected violations of WCAG 2.0 rules? After all, success criteria are concrete, measurable indicators.
3 |
4 | Unfortunately! That is not possible. In the wide range of automatic tools, there is no one that can perform a full accessibility audit.
5 | This is not because existing tools are imperfect, but because many aspects of accessibility require human evaluation. For example, the machine checks, whether the images have alternative text. But it won't decide whether the alternative text describes the content of the image well. This can only be done by a person.
6 |
7 | Automated testing ensures that approximately 25% of the accessibility best practices can be thoroughly tested. Another 35% or so can be checked by machine testing but the results require human verification.
8 |
9 | This means that over 70% of good accessibility practices can not be tested automatically.
10 |
11 | Despite the fact that a large number of accessibility best practices cannot be tested for automatically, they can find and indicate many accessibility errors.
12 | Therefore, you should always carry out automatic tests first. Karl Groves was right to write a few years ago:
13 |
14 | 1. You should never pay a human to find errors that can be found through automated testing.
15 | 2. Manual testing will close the gaps on what automated testing couldn’t find.
16 | 3. You should never uncover errors in use case or usability testing that couldn’t be found by automated and manual testing.
17 |
18 | Automatic accessibility tests are tests performed by means of desktop or web-based application, web services, browser plug-in or IDE plug-in.
19 |
20 | The [list of automatic tools that leads the W3C WAI](https://www.w3.org/WAI/ER/tools/) currently counts more than 100 items. Among them are comprehensive tools and tools that test individual aspects of accessibility. Look at this list to find the right tools for your needs.
21 |
22 | Below you will find some of the most popular and most effective - in our opinion - tools. Try them. Perhaps the cornerstone of your accessibility tester workshop.
23 | * **Web services**
24 | - [CynthiaSays](http://www.cynthiasays.com/)
25 | - [Tenon](https://tenon.io/)
26 | - [FAE](https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/)
27 | - [WAVE](http://wave.webaim.org/)
28 | - [AChecker](https://achecker.ca)
29 | * **Browser plug-in**
30 | - [AXE Dev Tools for Chrome](http://bitly.com/aXe-Chrome), [AXE for Firefox](http://bit.ly/aXe-Firefox) by Deque University
31 | - WAVE Evaluation Tool [for Chrome](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/)
32 | - [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb) for Chrome
33 | - OpenWAX (Open Web Accessibility eXtension) [for Chrome](https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe) and [for Firefox](https://addons.mozilla.org/pl/firefox/addon/openwax/)
34 | - [Juicy Studio Accessibility Toolbar](https://addons.mozilla.org/pl/firefox/addon/juicy-studio-accessibility-too/) for Firefox
35 | - [OpenAjax Accessibility Extension](https://addons.mozilla.org/en-US/firefox/addon/openajax-accessibility-exte/) for Firefox by Jon Gunderson
36 | - [WCAG Contrast Checker](https://addons.mozilla.org/pl/firefox/addon/wcag-contrast-checker/) for Firefox by Rumoroso
37 | - [tota11y](http://khan.github.io/tota11y/)
38 | * **IDE plug-in**
39 | - [AXE-core](https://www.axe-core.org/) by Deque University
40 | * **Desktop application**
41 | - [Accessibility Viewer by Pacciello Group](https://developer.paciellogroup.com/resources/aviewer/)
42 | - [AChecker](http://www.atutor.ca/achecker/download.php)
43 | - [Colour Contrast Analyser by Pacciello Group](https://developer.paciellogroup.com/resources/contrastanalyser/)
44 |
45 | ## Resources
46 | * [Efficiency in Accessibility Testing or, Why Usability Testing Should be Last by Karl Groves](http://www.karlgroves.com/2012/04/27/efficiency-in-accessibility-testing-or-why-usability-testing-should-be-last/)
47 |
--------------------------------------------------------------------------------
/docs/tutorials/testing-validation.md:
--------------------------------------------------------------------------------
1 | # Validation
2 |
3 | Validation is a fundamental prerequisite for online accessibility. WCAG 2.0 recognizes this condition as one of the four basic principles:
4 |
5 | > **Principle 4: Robust** - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
6 |
7 | Although web browsers and assistive technologies are quite tolerant of various syntax faults, it may happen that syntactic errors can make it difficult for screen readers and other assistive devices to work. WCAG 2.0 therefore considers compliance with the W3C standards to be an essential criterion for success (Level A):
8 |
9 | > **4.1.1 Parsing**: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
10 |
11 | You can check your site's compliance with different standards using the W3C Validator. The Validator will return you a list of errors and remedies.
12 | * legacy Markup Validator for markup other than HTML5: https://validator.w3.org/
13 | * Nu Html Checker newer, experimental version of the validator: https://validator.w3.org/nu/
14 |
15 | **Note**: At address https://validator.w3.org/unicorn you can use the default validator in your language version (Unicorn - W3C's Unified Validator). The unified validator also displays a list of CSS errors.
16 |
17 | **Note**: Web Developers in general have a web developer toolbar in their browser where they can test sites during development.
18 |
19 | **Note**: Tags must be available in all browsers. To test this: https://caniuse.com/
20 |
21 | If you have restrictions on using online tools, you can choose to install this service locally and test against that. The source for the validator is available on github at https://github.com/validator/validator.
22 |
23 | The Validator will not only display a list of errors and warnings, but will also make some pretty good suggestions regarding various ARIA roles and such.
24 | ## Procedure
25 | 1. [Go to the W3C Validator page](https://validator.w3.org/unicorn/).
26 | 2. Enter the URL of the page you want to check on the **By URI** tab, in the **Address** field.
27 | 3. Then press or click the **Check** button. After a while, a list of errors, comments and suggestions is displayed.
28 | 4. Scan the error list.
29 |
30 | Each line contains the line number in the page code, a code snippet, and an error description.
31 | Note important errors and remarks in the audit report.
32 |
--------------------------------------------------------------------------------
/docs/tutorials/tools-color.md:
--------------------------------------------------------------------------------
1 | # Color tools – generators, simulators, checkers
2 |
3 | Appropriate choice of colors is a very important aspect of web accessibility.
4 |
5 | If there is not enough contrast between the text and the background, people will have problems. People with blindness or other visual impairments, as well as persons browsing the Web in less than ideal conditions (bad monitor, window reflections, sunlight striking the screen), may not be able to read the text, at least not without difficulty.
6 |
7 | [Read more about visual impairments](tutorials/understanding-disability.md).
8 |
9 | ## Color schemes vs. accessibility standards
10 |
11 | [Web Content Accessibility Guidlines 2.0](http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) require that text (and images of text) provide adequate contrast for people who have visual impairments. Contrast is measured using [a formula](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) that gives a ratio ranging from 1:1 (no contrast, e.g., black text on a black background) to 21:1 (maximum contrast, e.g., black text on a white background).
12 |
13 | WCAG 2.0 requires that there is sufficient luminance contrast between text and background color:
14 |
15 | * **Success criteria 1.4.3 Contrast (Minimum)** (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
16 | - Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; […]
17 |
18 | * **Success criteria 1.4.6 Contrast (Enhanced)** (Level AAA): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
19 | - Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1; […]"
20 |
21 | ## Color tools list
22 |
23 | On the web, we have tools that can be used to check whether the colors used on the website are in compliance with the relevant WCAG 2.0 accessibility levels. They can also make it easier for web developers to design an accessible website.
24 |
25 | It is worth knowing that there are are different algorithms used to calculate contrast ratios. Some tools use the luminosity contrast ratio algorithm mentioned by the WCAG (Web Content Accessibility Guidelines) 2.0 working draft, while others use the colour brightness and colour difference algorithms that are mentioned in a companion document to WCAG 1.0. Some even use both.
26 |
27 | Note that neither of these algorithms are W3C recommendations (at least not yet), but they are still useful for determining if a combination of text and background colours is likely to cause problems for people with colour blindness or other visual impairments.
28 |
29 | Choosing the right tools from such an extensive list can be difficult, especially for beginners. We encourage you to get acquainted with them. Short quotes will help you find out about their functions.
30 |
31 | Below you will find a list of tools that help you choose the right color for your pages.
32 |
33 | ## Color finder tools
34 |
35 | - [A11y Color Palette – by Matt Long](http://a11yrocks.com/colorPalette/)
36 |
37 | "This tool should help you visualize an entire palette of colors with accessibility in mind. An indicator will be placed next to each foreground color to show if its contrast with the background color is WCAG 2.0 AA and/or AAA compliant for normal and large text. No indicator next to a foreground color means its contrast ratio with the background color is not at all compliant."
38 |
39 | * [Accessibility Color Wheel – Giacomo Mazzocato](http://gmazzocato.altervista.org/colorwheel/wheel.php)
40 |
41 | "Choose a foreground color by pointing the mouse over the wheel or the vertical grey gradation strip and click or, if you have a touch screen, just touch them. Then click the 'Background' button and choose a background color the same way. If a checkmark becomes visible the color pair is good for accessibility. Otherwise change one color or both by selecting foreground or background with the buttons."
42 |
43 | * [Accessible color palette builder – by “toolness”](https://toolness.github.io/accessible-color-matrix/)
44 |
45 | "This is a tool to help designers build color palettes with combinations that conform with accessibility standards."
46 |
47 | * [Color Contrast Checker – by SSB Bart Group](http://www.ssbbartgroup.com/reference/color-contrast-checker/)
48 |
49 | "Enter a RGB foreground and background color in #hex or integer format to check contrast for accessibility."
50 |
51 | * [Color Contrast iOS app – UserLight Ltd](https://itunes.apple.com/na/app/color-contrast/id1095478187)
52 |
53 | "Color Contrast is a tool to measure the contrast between two colors in a screenshot or mobile website, helping ensure your app meets the internationally recognized recommendations in the Web Content Accessibility Guidelines (WCAG) 2.0."
54 |
55 | * [Colour Contrast Determinator – Vision Australia](http://www.visionaustralia.org/business-and-professionals/digital-access-consulting/resources/tools-to-download/colour-contrast-determinator)
56 |
57 | "This tool is a colour contrast analyser that makes it easy to find colours with sufficient contrast. Simply type in colour values or copy and paste a value form a style sheet, then use the sliders to adjust the colour - full height on the slider means the colour has sufficient contrast."
58 |
59 | * [Color Conversion Calculator – Autopedia.com](http://autopedia.com/html/ColorCalculator.html)
60 |
61 | "You may select a color name, enter RGB values or the Hexidecimal values and then push the "compute" button next to your entry and you will see the results. Your selection will automatically be translated to all the appropriate coresponding values."
62 |
63 | * [Color Safe – Donielle Berg and Adrian Rapp](http://colorsafe.co/).
64 |
65 | "Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios..."
66 |
67 | * [Color Theory – Tiffany B. Brown](https://colors.webinista.com/)
68 |
69 | "Ever want to pick a start color and then click a button to create a color scheme? Me too. So I built it."
70 |
71 | * [Colorable – interactive web tool by Brent Jackson](http://jxnblk.com/colorable/demos/text/)
72 |
73 | "Takes a set color palette and shows contrast values for every possible combination. This is useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines..."
74 |
75 | * [ColorZilla – color picker for Firefox and Chrome](http://www.colorzilla.com/chrome/)
76 |
77 | ColorZilla for Google Chrome and for Mozilla Firefox "is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced."
78 |
79 | "ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can analyze the page and inspect a palette of its colors. You can create advanced multi-stop CSS gradients."
80 |
81 | * [Contrast-A – by Annika Hamann](http://dasplankton.de/ContrastA/)
82 |
83 | "The application allows users to experiment with color combinations, examine them under the aspect of accessibility guidelines and to create custom color palettes. Contrast-A checks color combinations for sufficient contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as the results according to older accessibility guidelines, WCAG 1.0 (Difference in Brightness and Color)."
84 |
85 | * [Hex Naw - The Scenery](https://hexnaw.com/)
86 |
87 | "Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest."
88 |
89 | * [HTML Color Codes – by Alex Dixon](http://htmlcolorcodes.com/)
90 |
91 | "Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names..."
92 |
93 | * [Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/)
94 |
95 | "Tanaguru Contrast-Finder finds correct color contrasts for web accessibility..."
96 |
97 | * [Text on background image a11y check – great for text over images](http://www.brandwood.com/a11y/)
98 |
99 | "This is a guide to foreground colour accessibility on a background image. It is intended as guide for designers and developers to test if their design solution is accessible. Change the text size, colour and position. It will check the dimensions of the textarea against the background image."
100 |
101 | * [The Color Palette Creator – by S.G. Chipman](http://slayeroffice.com/tools/color_palette/)
102 |
103 | "It will create 10 shades of the base color, located top-left, at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black (or colors of your choosing as of v1.4). The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row. The bottom row begins at 85% rather than 100% and continues on as the first."
104 |
105 |
106 | ### Color Simulators
107 | * [ChromeLens – Chrome extension by ngzhian](https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?utm_source=chrome-app-launcher-info-dialog)
108 |
109 | "Visual impairment simulation and auditing tools to develop for accessibility. ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development."
110 |
111 | * [Color Oracle – by Bernhard Jenny](http://colororacle.org/)
112 |
113 | "Color Oracle is a colorblindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see..."
114 |
115 | * [Colorblind Web Page Filter](https://www.toptal.com/designers/colorfilter)
116 |
117 | "Use the Colorblind Colorlab to select safe colors earlier in the design process. This tool is still in development, but feedback is welcome while we work on it. If you only use one filter, use the greyscale filter which will not only point out potential problem areas, but will also let you see more clearly which areas the filter is unable to process."
118 |
119 | * [Eye Dropper – Chrome extension](https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en)
120 |
121 | "Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history. Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers."
122 |
123 | * [NoCoffee Vision Simulator – Chrome extension by Aaron Leventhal](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)
124 |
125 | "NoCoffee can be helpful for understanding the problems faced by people with slight to extreme vision problems, such as": Low Acuity, Low Contrast Sensitivity, Colorblindness
126 | * [Sim Daltonism – by Michel Fortin](https://michelf.ca/projects/sim-daltonism/)
127 |
128 | "Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness. Use the camera on your iOS device, or use the Mac app to filter a region of the screen."
129 |
130 | * [Vischeck](http://www.vischeck.com/vischeck/vischeckURL.php)
131 |
132 | Vischeck is a way of showing you what things look like to someone who is color blind. You can use it on a single image or on a web page. You can also download programs to let you run it on your own computer.
133 |
134 |
135 | ### Contrast Checker
136 |
137 | * [Accessible Colors – by Misha Moroshko and Vedran Arnautovic](http://accessible-colors.com/)
138 |
139 | "We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness. We modify the lightness value only, in order to stay as true to the original color as possible."
140 |
141 | * [CheckMyColours – by Giovanni Scala](http://www.checkmycolours.com)
142 |
143 | "It is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the World Wide Web Consortium (W3C)."
144 |
145 | * [Color Contrast Analyzer for Chrome – by by NCSU/Greg Kraus](https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en)
146 |
147 | "This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page."
148 |
149 | * [Color Contrast Checker for Chrome](https://chrome.google.com/webstore/detail/color-contrast-checker/jibccbkkepidahndjomdfbmbnfappopf)
150 |
151 | "Test your web content to make sure the luminosity ratio meets WCAG 2.0 level AA and AAA."
152 |
153 | * [ColorA11y Chrome extension](https://chrome.google.com/webstore/detail/colora11y/icfneoldcbdmgaiocnnobpbbjncdfbfb?hl=en)
154 |
155 | "ColorA11y allows you to easily select a foreground color and a background color, and determine whether or not the contrast ratio between the 2 colors is WCAG 2.0 compliant. ColorA11y can help validate the existence of web accessibility issues you think you already have with color contrast. This Developer Tools extension can also help verify you're technically adhering to the WCAG 2.0 color contrast guidelines."
156 |
157 | * [Color Contrast Checker – by Jared Smith, WebAIM](http://webaim.org/resources/contrastchecker/)
158 |
159 | "Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity..."
160 |
161 | * [Color Contrast Comparison – by Joe Dolson](http://www.joedolson.com/color-contrast-compare.php)
162 |
163 | "I’ve created a basic tool which compares two colors, as well. Evaluate contrast between two colors."
164 |
165 | * [Color Contrast Spectrum – by Joe Dolson](http://www.joedolson.com/color-contrast-tester.php)
166 |
167 | "This test allows you to see a spectrum of color combinations with a color of your choice. The spectrum is sorted into groups which pass or fail the color contrast tests specified in the Web Content Accessibility Guidelines (WCAG) versions 1 and 2."
168 |
169 | * [Colour Contrast Check Tool – by Jonathan Snook.](https://snook.ca/technical/colour_contrast/colour.html)
170 |
171 | "The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast 'when viewed by someone having color deficits or when viewed on a black and white screen.'[W3C] The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate that it sort of passes if only one of the two values exceed their threshold. And finally, it'll fail to pass if neither value exceeds its threshold. The tool will also indicate if the colours pass the newer WCAG 2.0 contrast ratio formula. The WCAG 2.0 formula differentiates between text smaller than 18pt text larger than 18pt (or text that is bold and larger than 14pt). For AA compliance, text should have a ratio of at least 4.5:1 (larger text, at least 3:1). For AAA compliance, text should have a ratio of at least 7:1 (larger text, at least 4.5:1)."
172 |
173 |
174 | * [Colour Contrast Analyser app – by Paciello Group](https://www.paciellogroup.com/resources/contrastanalyser/)
175 |
176 | "The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. This tool provides two useful core functionalities: - a pass/fail assessment against WCAG 2.0 color contrast success criteria - a simulation of certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision."
177 |
178 | * [Contrast Checker – by Acart Communications](http://contrastchecker.com/)
179 |
180 | "This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C."
181 |
182 | * [Contrast-Finder – by Asqatasun](https://app.contrast-finder.org/result.html)
183 |
184 | "Contrast-Finder finds correct color contrasts for web accessibility. "
185 |
186 | * [Contrast Ratio – by Lea Verou](http://leaverou.github.io/contrast-ratio/)
187 |
188 | "As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over."
189 |
190 | * [Juicy Studio Accessibility Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/)
191 |
192 | "The Colour Contrast Analyser Firefox extension lists colour combinations used in the document in a table that summarises the foreground colour, background colour, luminosity contrast ratio, and the colour difference and brightness difference used in the algorithm suggested in the 26th of April 2000 working draft for Accessibility Evaluation and Repair Tools (AERT). Each element is also listed with its parent elements, and class and id attribute values when specified to make it easier to locate the elements." See: [Colour Contrast Analyser - Gez Lemon](http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php)
193 |
194 | * [WCAG Contrast Checker – FireFox Extension by Jorge Rumoroso](https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker/)
195 |
196 | "Checks for compliance with the contrast levels, brightness and shine in the color combination of foreground and background of textual content based on the requirements of WCAG 1 and WCAG 2..."
197 |
--------------------------------------------------------------------------------
/docs/tutorials/understanding-disability.md:
--------------------------------------------------------------------------------
1 | # Understanding disability
2 | Each individual is unique. People have diverse abilities, skills, preferences, and expectations that can impact how they use the Web.
3 | We cannot guarantee that our pages will be accessible to everyone without understanding:
4 | * Why people experience problems using websites.
5 | * What kind of difficulty they are experiencing.
6 | * What support technologies do they use, to cope with them, to meet the challenges.
7 |
8 | ## Types of user capabilities
9 | People's capabilities can be broken down into various categories, of which the following four are particularly relevant, for website interaction.
10 |
11 | ## Vision capabilities
12 |
13 |
14 | Vision is the ability to use the colour and brightness of light to perceive objects, distinguish them, and detect them. People have different vision problems. In general, we can distinguish three groups:
15 | * Blindness - inability to see visual information
16 | * Low vision - loss of central or peripheral vision, blurred vision, generalized haze, extreme light sensitivity - significant visual impairment that can't be corrected fully with glasses, contact lenses, medication or eye surgery
17 | * Color deficiency
18 | * Deuteranopia – red-green color blindness
19 | * Protanopia – red color blindness
20 | * Tritanopia – blue-yellow color blindness
21 | * Achromatopsia - total color blindness
22 |
23 | Blindness and low vision can occur as a result of various illnesses, conditions or accidents. Some eye defects are inherited, others acquired. Loss or impairment of vision can occur in people of all ages, but most often occurs in persons over 65 years of age.
24 |
25 | People who are blind usually navigate, using only the keyboard and use screen readers, braille displays, voice input.
26 |
27 | People with low vision can use the screen magnifiers and assistance from the screen reader.
28 |
29 | People who have color disabilities may need the right colors and more contrast and alternative ways of identifying color content.
30 |
31 | ## Motor and dexterity capabilities
32 |
33 |
34 | Web browsing requires a keyboard and pointing device. These tasks require the skill and dexterity of the hands and shoulders. Many people have different difficulties with manipulating their hands. These difficulties include:
35 |
36 | * Amputation of limbs or fingers or other parts of the human body
37 | * Arthritis - inflammation, degeneration, or damage to the joints
38 | * Fibromyalgia - the chronic pain of muscle and connective tissues
39 | * Rheumatism
40 | * Parkinson's disease
41 | * Muscular dystrophy
42 | * Repetitive stress injury (RSI)
43 | * Tremor and spasms
44 | * Spinal cord injuries
45 | * Cerebral palsy
46 | * Carpal tunnel syndrome
47 | * Reduced dexterity
48 |
49 | People with dexterity disabilities may have little or no motor control in their hands to perform everyday tasks.
50 | Many can continue to operate the computer with one hand, one foot, eyes, a headpointer or a mouth stick or other assistive technologies such as adaptive keyboards, switches, sip and puff, etc.
51 |
52 | ## Hearing
53 |
54 |
55 | The hearing is the ability to differentiate specific tones or speech from ambient noise and orientation, where sounds come from.
56 | Hearing disorders include:
57 |
58 | * Deafness - substantial, uncorrectable impairment of hearing in both ears.
59 | * Hard of hearing - mild or moderate hearing impairments in one or both ears.
60 | * Deaf-blindness - substantial, uncorrectable hearing and visual impairments.
61 |
62 | Deaf and hearing impaired people need sound alternatives - transcripts, captions and information, in clear, comprehensible language.
63 |
64 | ## Intellectual capabilities
65 |
66 |
67 | There are many types of intellectual disability that limit the ability to perceive, recognize, understand, interpret or respond to information.
68 |
69 | **Learning difficulties**
70 | * Attention deficit hyperactivity disorder (ADHD) - involves difficulty focusing on a single task, focusing for longer periods, or being easily distracted.
71 | * Autism spectrum disorder (ASD)
72 | * Perceptual disabilities - dyslexia, dysgraphia, dyscalculia or spatial and temporal orientation
73 | * Low comprehension (having problems understanding content, textual or otherwise)
74 | * Low reading abilities (having problems reading text)
75 | * Other non-verbal learning difficulties
76 |
77 | **Cognitive disabilities**
78 | * Loss of brain function
79 | * Limited short-term memory
80 | * Missing long-term memory
81 | * Limited ability to recall language
82 | * Alzheimer's disease
83 | * Parkinson's disease
84 | * Multiple sclerosis
85 |
86 | **Neurological disabilities**
87 | * Seizure disorders - includes different types of epilepsy and migraines
88 | * Anxiety
89 | * Depression
90 | * Schizophrenia
91 | * many other disorders.
92 |
93 | This group of people uses such assistive technologies as word prediction aids and reading/writing comprehension aids.
94 |
95 | ## Statistics disability
96 | Here are some statistics showing the disability problem.
97 | * Over a billion people, about 15% of the world's population, have some form of disability.
98 | * Between 110 million and 190 million adults have significant difficulties in functioning.
99 | * Rates of disability are increasing due to population ageing and increases in chronic health conditions, among other causes.
100 | * Between 250 million and 500 million people worldwide suffer a spinal cord injury.
101 | * 300 million people worldwide are affected by depression
102 | * 47 million people worldwide have dementia
103 |
104 | The table below shows the percentage of different types of disability on the example of USA.
105 | As we can see the largest group of disability is learning disability. It affects nearly half of USA population.
106 | The next one is motor impairment – strightly connected with only-keyboard users.
107 |
108 | | Disability types | Frequency |
109 | | --- | --- |
110 | | Learning disabilities | 45.7%
111 | | Motor impairments | 13.9%
112 | | Health impairments | 11.6%
113 | | Mental illness | 7.8% |
114 | | Hearing impairments | 5.6% |
115 | | Visually impairments | 4.4% |
116 | | Speech impairments | 0.9% |
117 |
118 | ## Further reading
119 | * [An Alphabet of Accessibility Issues](https://the-pastry-box-project.net/anne-gibson/2014-july-31)
120 | * [Diversity of Web Users. How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/diversity#auditory)
121 | * [Inclusive Design Toolkit: About users](http://www.inclusivedesigntoolkit.com/usercapabilities/usercap.html)
122 | * [Visual Disabilities - Introduction](http://webaim.org/articles/visual/)
123 | * [Visual Disabilities - Blindness](http://webaim.org/articles/visual/blind)
124 | * [Visual Disabilities - Low Vision](http://webaim.org/articles/visual/lowvision)
125 | * [Visual Disabilities - Color-blindness](http://webaim.org/articles/visual/colorblind)
126 | * [Auditory Disabilities - Introduction](http://webaim.org/articles/auditory/)
127 | * [Auditory Disabilities - Types of Auditory Disabilities](http://webaim.org/articles/auditory/auditorydisabilities)
128 | * [Auditory Disabilities - Deaf Culture](http://webaim.org/articles/auditory/culture)
129 | * [Motor Disabilities - Introduction](http://webaim.org/articles/motor/)
130 | * [Motor Disabilities - Types of Motor Disabilities](http://webaim.org/articles/motor/motordisabilities)
131 | * [Motor Disabilities - Assistive Technologies](http://webaim.org/articles/motor/assistive)
132 | * [Cognitive - Introduction](http://webaim.org/articles/cognitive/)
133 | * [Cognitive - Design Considerations](http://webaim.org/articles/cognitive/design)
134 | * [Cognitive - Activity](http://webaim.org/articles/cognitive/activity)
135 | * [Seizure Disorders](http://webaim.org/articles/seizure/)
136 | * [Types of disabilities](http://www.hwns.com.au/Resource-centre/Types-of-disabilities)
137 |
138 | ## Footnote
139 | 1 [WHO | Disability and health](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)
140 | 2 [WHO | Disability and health](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)
141 | 3 [World over population disability and health - The Point Newspaper...](http://thepoint.gm/africa/gambia/article/world-over-population-disability-and-health)
142 | 4 [WHO | Disability and health](http://www.whogis.com/mediacentre/factsheets/fs352/en/)
143 | 5 [WHO | Spinal cord injury](https://www.who.int/news-room/fact-sheets/detail/spinal-cord-injury)
144 | 6 [WHO |Depression](https://www.who.int/news-room/fact-sheets/detail/depression)
145 | 7 [WHO | 10 facts on dementia](https://www.who.int/features/factfiles/dementia/en/)
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------
/docs/tutorials/what-is-web-accessibility.md:
--------------------------------------------------------------------------------
1 | # What is Web accessibility?
2 | There are many different definitions of accessibility. We will use the [W3C WAI definition](https://www.w3.org/WAI/intro/accessibility):
3 |
4 | > Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
5 |
6 | ## Web is for all people
7 | The Web is for all people, for everyone. This idea was best expressed by W3C Director and inventor of the World Wide Web, **Tim John Berners-Lee** in the words:
8 | > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
9 |
10 | ## Dispute over definition
11 | Occasionally, the dispute over the definition of accessibility is revived. In general, we meet two approaches to accessibility, two perspectives:
12 | * Representatives of the first approach saying that "accessibility" means "possible to access for everyone".
13 | * Representatives of the second approach saying that "accessibility" means "possible to access for people with disabilities".
14 |
15 | In fact, there are no contradictions between the two approaches. Design that recognizes the needs of all people also serves people with disabilities. Designing, for people with disabilities, brings benefits to all people - also people without disabilities.
16 |
17 | However, the term "accessibility" was defined to draw the attention of designers, not just web designers, to the specific needs of people with disabilities.
18 |
19 | W3C set up a Web Accessibility Initiative whose mission is to ensure that the web is accessible to people with disabilities including auditory, cognitive, neurological, physical, speech, and visual disabilities.
20 |
21 | Any accessibility advice, eg WCAG 2.0, especially Techniques for WCAG 2.0, is given in the context of who it would affect.
22 |
23 | Therefore, we reserve the term "accessibility" for the inclusive practice of removing barriers that prevent access to websites by people with disabilities.
24 |
25 |
26 | ## What does it include web accessibility?
27 | Web accessibility involves:
28 | * websites, mobile applications and digital documents published on the Web,
29 | * web browsers and media players,
30 | * authoring tools and other technologies for creating online content.
31 |
32 | ## Further reading
33 | * [A Practical Starter Guide on Developing Accessible Websites - Cynthia Ng and Michael Schofield](http://journal.code4lib.org/articles/12697)
34 | * [Accessibility - W3C Education and Outreach Working Group (EOWG)](https://www.w3.org/standards/webdesign/accessibility)
35 | * [Accessibility for All vs. for People with Disabilities - Roger Johansson](http://www.456bereastreet.com/archive/200610/accessibility_for_all_vs_for_people_with_disabilities/)
36 | * [Accessibility is Innovation - Jake Araullo](https://medium.com/safetyculture/accessibility-is-innovation-4961c652bbd5)
37 | * [Accessibility Is More Than 'Possible to Access' - Roger Johansson](http://www.456bereastreet.com/archive/200904/accessibility_is_more_than_possible_to_access/)
38 | * [Accessibility is a Process, Not a Project - Jon Metz](https://medium.com/@jonbmetz/accessibility-is-a-process-not-a-project-ce1c1cdc3aa7)
39 | * [Accessibility vs Universality - Implications - Alastair Campbell](https://alastairc.ac/2007/02/accessibility-vs-universality-implications/)
40 | * [Barrier-Free Web Design, a.k.a. Web Accessibility 2.0 - Roger Johansson and Tommy Olsson](http://www.456bereastreet.com/archive/200610/barrierfree_web_design_aka_web_accessibility_20/)
41 | * [Constructing a POUR Website - WebAIM](http://webaim.org/articles/pour/)
42 | * [Essential Components of Web Accessibility - W3C](https://www.w3.org/WAI/intro/components.php)
43 | * [On Accessibility - Catherine Roy](http://www.catherine-roy.net/blog/2006/08/05/on-accessibility/)
44 | * [The Difference Between Web Site Usability and Accessibility - Justin Mifsud](http://usabilitygeek.com/the-difference-between-web-site-usability-and-accessibility/)
45 | * [The Flip Side of the Coin - Miraz Jordan](http://www.atpm.com/13.03/web-accessibility.shtml)
46 | * [Understanding Web Accessibility - Shawn Lawton Henry](http://www.uiaccess.com/understanding.html)
47 | * [Universality and Accessibility - Gez Lemon](http://juicystudio.com/article/universality-accessibility.php)
48 | * [Web Accessibility: Essential for Some, Useful for All - University of Minnesota Duluth](https://itss.d.umn.edu/news/a11y-perspectives)
49 | * [What Accessibility Means in 25 Words - Glenda Watson Hyatt](http://www.doitmyselfblog.com/2010/what-accessibility-means-in-25-words/)
50 | * [What is Web Accessibility? - Laura Carlson](http://www.d.umn.edu/itss/training/online/access/what/)
51 |
52 |
--------------------------------------------------------------------------------
/meetings/start.md:
--------------------------------------------------------------------------------
1 | Start test
2 |
--------------------------------------------------------------------------------
13 |
14 | Vision is the ability to use the colour and brightness of light to perceive objects, distinguish them, and detect them. People have different vision problems. In general, we can distinguish three groups:
15 | * Blindness - inability to see visual information
16 | * Low vision - loss of central or peripheral vision, blurred vision, generalized haze, extreme light sensitivity - significant visual impairment that can't be corrected fully with glasses, contact lenses, medication or eye surgery
17 | * Color deficiency
18 | * Deuteranopia – red-green color blindness
19 | * Protanopia – red color blindness
20 | * Tritanopia – blue-yellow color blindness
21 | * Achromatopsia - total color blindness
22 |
23 | Blindness and low vision can occur as a result of various illnesses, conditions or accidents. Some eye defects are inherited, others acquired. Loss or impairment of vision can occur in people of all ages, but most often occurs in persons over 65 years of age.
24 |
25 | People who are blind usually navigate, using only the keyboard and use screen readers, braille displays, voice input.
26 |
27 | People with low vision can use the screen magnifiers and assistance from the screen reader.
28 |
29 | People who have color disabilities may need the right colors and more contrast and alternative ways of identifying color content.
30 |
31 | ## Motor and dexterity capabilities
32 | 
33 |
34 | Web browsing requires a keyboard and pointing device. These tasks require the skill and dexterity of the hands and shoulders. Many people have different difficulties with manipulating their hands. These difficulties include:
35 |
36 | * Amputation of limbs or fingers or other parts of the human body
37 | * Arthritis - inflammation, degeneration, or damage to the joints
38 | * Fibromyalgia - the chronic pain of muscle and connective tissues
39 | * Rheumatism
40 | * Parkinson's disease
41 | * Muscular dystrophy
42 | * Repetitive stress injury (RSI)
43 | * Tremor and spasms
44 | * Spinal cord injuries
45 | * Cerebral palsy
46 | * Carpal tunnel syndrome
47 | * Reduced dexterity
48 |
49 | People with dexterity disabilities may have little or no motor control in their hands to perform everyday tasks.
50 | Many can continue to operate the computer with one hand, one foot, eyes, a headpointer or a mouth stick or other assistive technologies such as adaptive keyboards, switches, sip and puff, etc.
51 |
52 | ## Hearing
53 | 
54 |
55 | The hearing is the ability to differentiate specific tones or speech from ambient noise and orientation, where sounds come from.
56 | Hearing disorders include:
57 |
58 | * Deafness - substantial, uncorrectable impairment of hearing in both ears.
59 | * Hard of hearing - mild or moderate hearing impairments in one or both ears.
60 | * Deaf-blindness - substantial, uncorrectable hearing and visual impairments.
61 |
62 | Deaf and hearing impaired people need sound alternatives - transcripts, captions and information, in clear, comprehensible language.
63 |
64 | ## Intellectual capabilities
65 | 
66 |
67 | There are many types of intellectual disability that limit the ability to perceive, recognize, understand, interpret or respond to information.
68 |
69 | **Learning difficulties**
70 | * Attention deficit hyperactivity disorder (ADHD) - involves difficulty focusing on a single task, focusing for longer periods, or being easily distracted.
71 | * Autism spectrum disorder (ASD)
72 | * Perceptual disabilities - dyslexia, dysgraphia, dyscalculia or spatial and temporal orientation
73 | * Low comprehension (having problems understanding content, textual or otherwise)
74 | * Low reading abilities (having problems reading text)
75 | * Other non-verbal learning difficulties
76 |
77 | **Cognitive disabilities**
78 | * Loss of brain function
79 | * Limited short-term memory
80 | * Missing long-term memory
81 | * Limited ability to recall language
82 | * Alzheimer's disease
83 | * Parkinson's disease
84 | * Multiple sclerosis
85 |
86 | **Neurological disabilities**
87 | * Seizure disorders - includes different types of epilepsy and migraines
88 | * Anxiety
89 | * Depression
90 | * Schizophrenia
91 | * many other disorders.
92 |
93 | This group of people uses such assistive technologies as word prediction aids and reading/writing comprehension aids.
94 |
95 | ## Statistics disability
96 | Here are some statistics showing the disability problem.
97 | * Over a billion people, about 15% of the world's population, have some form of disability.
98 | * Between 110 million and 190 million adults have significant difficulties in functioning.
99 | * Rates of disability are increasing due to population ageing and increases in chronic health conditions, among other causes.
100 | * Between 250 million and 500 million people worldwide suffer a spinal cord injury.
101 | * 300 million people worldwide are affected by depression
102 | * 47 million people worldwide have dementia
103 |
104 | The table below shows the percentage of different types of disability on the example of USA.
105 | As we can see the largest group of disability is learning disability. It affects nearly half of USA population.
106 | The next one is motor impairment – strightly connected with only-keyboard users.
107 |
108 | | Disability types | Frequency |
109 | | --- | --- |
110 | | Learning disabilities | 45.7%
111 | | Motor impairments | 13.9%
112 | | Health impairments | 11.6%
113 | | Mental illness | 7.8% |
114 | | Hearing impairments | 5.6% |
115 | | Visually impairments | 4.4% |
116 | | Speech impairments | 0.9% |
117 |
118 | ## Further reading
119 | * [An Alphabet of Accessibility Issues](https://the-pastry-box-project.net/anne-gibson/2014-july-31)
120 | * [Diversity of Web Users. How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/diversity#auditory)
121 | * [Inclusive Design Toolkit: About users](http://www.inclusivedesigntoolkit.com/usercapabilities/usercap.html)
122 | * [Visual Disabilities - Introduction](http://webaim.org/articles/visual/)
123 | * [Visual Disabilities - Blindness](http://webaim.org/articles/visual/blind)
124 | * [Visual Disabilities - Low Vision](http://webaim.org/articles/visual/lowvision)
125 | * [Visual Disabilities - Color-blindness](http://webaim.org/articles/visual/colorblind)
126 | * [Auditory Disabilities - Introduction](http://webaim.org/articles/auditory/)
127 | * [Auditory Disabilities - Types of Auditory Disabilities](http://webaim.org/articles/auditory/auditorydisabilities)
128 | * [Auditory Disabilities - Deaf Culture](http://webaim.org/articles/auditory/culture)
129 | * [Motor Disabilities - Introduction](http://webaim.org/articles/motor/)
130 | * [Motor Disabilities - Types of Motor Disabilities](http://webaim.org/articles/motor/motordisabilities)
131 | * [Motor Disabilities - Assistive Technologies](http://webaim.org/articles/motor/assistive)
132 | * [Cognitive - Introduction](http://webaim.org/articles/cognitive/)
133 | * [Cognitive - Design Considerations](http://webaim.org/articles/cognitive/design)
134 | * [Cognitive - Activity](http://webaim.org/articles/cognitive/activity)
135 | * [Seizure Disorders](http://webaim.org/articles/seizure/)
136 | * [Types of disabilities](http://www.hwns.com.au/Resource-centre/Types-of-disabilities)
137 |
138 | ## Footnote
139 | 1 [WHO | Disability and health](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)
140 | 2 [WHO | Disability and health](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)
141 | 3 [World over population disability and health - The Point Newspaper...](http://thepoint.gm/africa/gambia/article/world-over-population-disability-and-health)
142 | 4 [WHO | Disability and health](http://www.whogis.com/mediacentre/factsheets/fs352/en/)
143 | 5 [WHO | Spinal cord injury](https://www.who.int/news-room/fact-sheets/detail/spinal-cord-injury)
144 | 6 [WHO |Depression](https://www.who.int/news-room/fact-sheets/detail/depression)
145 | 7 [WHO | 10 facts on dementia](https://www.who.int/features/factfiles/dementia/en/)
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------
/docs/tutorials/what-is-web-accessibility.md:
--------------------------------------------------------------------------------
1 | # What is Web accessibility?
2 | There are many different definitions of accessibility. We will use the [W3C WAI definition](https://www.w3.org/WAI/intro/accessibility):
3 |
4 | > Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
5 |
6 | ## Web is for all people
7 | The Web is for all people, for everyone. This idea was best expressed by W3C Director and inventor of the World Wide Web, **Tim John Berners-Lee** in the words:
8 | > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
9 |
10 | ## Dispute over definition
11 | Occasionally, the dispute over the definition of accessibility is revived. In general, we meet two approaches to accessibility, two perspectives:
12 | * Representatives of the first approach saying that "accessibility" means "possible to access for everyone".
13 | * Representatives of the second approach saying that "accessibility" means "possible to access for people with disabilities".
14 |
15 | In fact, there are no contradictions between the two approaches. Design that recognizes the needs of all people also serves people with disabilities. Designing, for people with disabilities, brings benefits to all people - also people without disabilities.
16 |
17 | However, the term "accessibility" was defined to draw the attention of designers, not just web designers, to the specific needs of people with disabilities.
18 |
19 | W3C set up a Web Accessibility Initiative whose mission is to ensure that the web is accessible to people with disabilities including auditory, cognitive, neurological, physical, speech, and visual disabilities.
20 |
21 | Any accessibility advice, eg WCAG 2.0, especially Techniques for WCAG 2.0, is given in the context of who it would affect.
22 |
23 | Therefore, we reserve the term "accessibility" for the inclusive practice of removing barriers that prevent access to websites by people with disabilities.
24 |
25 |
26 | ## What does it include web accessibility?
27 | Web accessibility involves:
28 | * websites, mobile applications and digital documents published on the Web,
29 | * web browsers and media players,
30 | * authoring tools and other technologies for creating online content.
31 |
32 | ## Further reading
33 | * [A Practical Starter Guide on Developing Accessible Websites - Cynthia Ng and Michael Schofield](http://journal.code4lib.org/articles/12697)
34 | * [Accessibility - W3C Education and Outreach Working Group (EOWG)](https://www.w3.org/standards/webdesign/accessibility)
35 | * [Accessibility for All vs. for People with Disabilities - Roger Johansson](http://www.456bereastreet.com/archive/200610/accessibility_for_all_vs_for_people_with_disabilities/)
36 | * [Accessibility is Innovation - Jake Araullo](https://medium.com/safetyculture/accessibility-is-innovation-4961c652bbd5)
37 | * [Accessibility Is More Than 'Possible to Access' - Roger Johansson](http://www.456bereastreet.com/archive/200904/accessibility_is_more_than_possible_to_access/)
38 | * [Accessibility is a Process, Not a Project - Jon Metz](https://medium.com/@jonbmetz/accessibility-is-a-process-not-a-project-ce1c1cdc3aa7)
39 | * [Accessibility vs Universality - Implications - Alastair Campbell](https://alastairc.ac/2007/02/accessibility-vs-universality-implications/)
40 | * [Barrier-Free Web Design, a.k.a. Web Accessibility 2.0 - Roger Johansson and Tommy Olsson](http://www.456bereastreet.com/archive/200610/barrierfree_web_design_aka_web_accessibility_20/)
41 | * [Constructing a POUR Website - WebAIM](http://webaim.org/articles/pour/)
42 | * [Essential Components of Web Accessibility - W3C](https://www.w3.org/WAI/intro/components.php)
43 | * [On Accessibility - Catherine Roy](http://www.catherine-roy.net/blog/2006/08/05/on-accessibility/)
44 | * [The Difference Between Web Site Usability and Accessibility - Justin Mifsud](http://usabilitygeek.com/the-difference-between-web-site-usability-and-accessibility/)
45 | * [The Flip Side of the Coin - Miraz Jordan](http://www.atpm.com/13.03/web-accessibility.shtml)
46 | * [Understanding Web Accessibility - Shawn Lawton Henry](http://www.uiaccess.com/understanding.html)
47 | * [Universality and Accessibility - Gez Lemon](http://juicystudio.com/article/universality-accessibility.php)
48 | * [Web Accessibility: Essential for Some, Useful for All - University of Minnesota Duluth](https://itss.d.umn.edu/news/a11y-perspectives)
49 | * [What Accessibility Means in 25 Words - Glenda Watson Hyatt](http://www.doitmyselfblog.com/2010/what-accessibility-means-in-25-words/)
50 | * [What is Web Accessibility? - Laura Carlson](http://www.d.umn.edu/itss/training/online/access/what/)
51 |
52 |
--------------------------------------------------------------------------------
/meetings/start.md:
--------------------------------------------------------------------------------
1 | Start test
2 |
--------------------------------------------------------------------------------