-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
1395 lines (1237 loc) · 104 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Techniques for the The Cognitive and Learning Disabilities Accessibility Task Force (COGA)</title>
<script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
<script src="../common/biblio.js" class="remove"></script>
<script class="remove">
var respecConfig = {
// embed RDFa data in the output
trace: true,
doRDFa: '1.1',
includePermalinks: true,
permalinkEdge: true,
permalinkHide: false,
tocIntroductory: true,
// specification status (e.g., WD, LC, NOTE, etc.). If in doubt use ED.
specStatus: "ED",
noRecTrack: true,
//crEnd: "2012-04-30",
//perEnd: "2013-07-23",
//publishDate: "2013-08-22",
//diffTool: "http://www.aptest.com/standards/htmldiff/htmldiff.pl",
// the specifications short name, as in http://www.w3.org/TR/short-name/
shortName: "coga-techniques",
// if you wish the publication date to be other than today, set this
// publishDate: "2009-08-06",
copyrightStart: "2015",
license: "document",
// if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
// and its maturity status
//previousPublishDate: "",
//previousMaturity: "",
//prevRecURI: "",
//previousDiffURI: "",
// if there a publicly available Editors Draft, this is the link
edDraftURI: "https://w3c.github.io/coga/techniques/",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2012-02-21",
// editors, add as many as you like
// only "name" is required
editors: [
{
name: "Lisa Seeman",
url: 'http://athena-ict.com',
mailto: "lisa.seeman@zoho.com"
},
{
name: "Michael Cooper",
url: 'http://www.w3.org',
mailto: "cooper@w3.org",
company: "W3C",
companyURI: "http://www.w3.org"
}
],
// authors, add as many as you like.
// This is optional, uncomment if you have authors as well as editors.
// only "name" is required. Same format as editors.
//authors: [
// { name: "Your Name", url: "http://example.org/",
// company: "Your Company", companyURI: "http://example.com/" },
//],
/*
alternateFormats: [
{ uri: 'aria-diff.html', label: "Diff from Previous Recommendation" } ,
{ uri: 'aria.ps', label: "PostScript version" },
{ uri: 'aria.pdf', label: "PDF version" }
],
*/
// errata: 'http://www.w3.org/2010/02/rdfa/errata.html',
// name of the WG
wg: ["Cognitive and Learning Disabilities Accessibility Task Force", "Protocols and Formats Working Group", "Web Content Accessibility Guidelines Working Group"],
// URI of the public WG page
wgURI: ["http://www.w3.org/WAI/PF/cognitive-a11y-tf/", "http://www.w3.org/WAI/PF/", "http://www.w3.org/WAI/GL/"],
// name (with the @w3c.org) of the public mailing to which comments are due
wgPublicList: "public-coga-comments",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI from a random
// document unless you know what you're doing. If in doubt ask your friendly neighbourhood
// Team Contact.
wgPatentURI: ["", "http://www.w3.org/2004/01/pp-impl/35422/status", "http://www.w3.org/2004/01/pp-impl/32212/status"],
//maxTocLevel: 2,
localBiblio: biblio,
};
</script>
</head>
<body>
<section id="abstract">
<p>@@</p>
</section>
<section id="sotd"> </section>
<section>
<h2>Introduction</h2>
<p>This document is to help us gather techniques and strategies as we come across them, so that they do not get forgotten or are hard to find later when we are finished the gap analysis.</p>
<p>Larger scale, engineering solutions can also be added to the issue papers.</p>
<p>Editors Note: We intend to add more examples to each technique and provide some example pages </p>
<section>
<h3>Summary </h3>
<p>Most designers want people to be able to use their site. However designs that might be difficult for some people to use can actually bar people with cognitive and learning disabilities from using the content at all. Typically this happens because content providers may not be familiar with the needs of different people. </p>
<p>This document contains detailed techniques that should enable content to be usable by people with cognitive and learning disabilities. </p>
<p>We have identified the following <strong>themes</strong> though the techniques.</p>
<ol>
<li><strong>Help as many users as possible understand the site and know how to use it.</strong> This often involves using things that are clear and familiar to the user so that they do not have to learn new symbols, terms or design patters. <strong>Personalization </strong>and good use of semantics can help make the symbols and design as familiar to the user as possible.</li>
<li><strong>Prevent the user from making mistakes and make it easy to correct mistakes</strong> when they do occur. A good design and use of scripts will make errors less likely, but when they do occur the user should know how to correct them, without having to renter other data or start from the beginning.</li>
<li><strong>Help the use focus and to restore context if attention is lost</strong>. Items like breadcrumbs can help orientate the user and help the user restore the context when it is lost. (Making breadcrumbs clickable can also help the user undo mistakes)</li>
</ol>
<p> </p>
<p>Main techniques include:</p>
<ol>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#provide-a-clear-structure">Use a clear structure </a><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#break-your-content-into-manageable-chunks">with easy to follow sections short paragraphs</a><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#break-your-content-into-manageable-chunks"> manageable chunks</a> </li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#writing-style">Use an easy to follow writing style</a></li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#provide-rapid-and-direct-feedback.x">Provide rapid and direct feedback</a></li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#help-meaning">Help the user understand the content</a> and orientate themselves in the content. </li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#help-users-complete-and-check-their-work">Help users complete and check their work</a> by
less likely that the user will make mistakes and easy to <a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#make-it-easy-to-undo-mistakes">undo mistakes</a> when they occur</li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#provide-help">Provide help</a></li>
<li><a href="https://rawgit.com/w3c/coga/master/techniques/index.html#attention-and-focus"> Help the user focus</a> and help restore the context if attention is lost
</li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#enable-adaptability">Enable adaptability</a> and personalization, so that symbols text and other features rare familiar and helpful to the user</li>
<li><a href="file:///C:/Users/lseeman/Documents/GitHub/coga/techniques/index.html#minimize-the-cognitive-skills-required-to-use-the-content-when-there-is-a-known-alternative">Minimize the cognitive skills required to use the content</a> and avoid barriers that stop people with cognitive disabilities from using content, such as hard to use security mechanisms.</li>
</ol>
<p> </p>
<p> </p>
</section>
<section><h3>Document structure</h3> The top level headings are who the techniques and strategies are for, such as general techniques that help most people with Cognitive and Learning Disabilities, techniques that help for attention, techniques that help people with difficulty processing language etc. The sections are based on function and not disability names. </p>
<p>The document is the divided into topics (such as E<em>mphasis Structure</em>) at heading level 3, and then into individual techniques at heading level 4. Each topic also has a "see also" section where you can put WCAG mappings. Where appropriate the techniques can labeled for localization. </p>
<p>Each technique is divided into: </p>
<ul>
<li>Explanation and who it helps,</li>
<li> Pass examples, (if needed) </li>
<li>Failure examples,(if needed) and </li>
<li>Sources/research. </li>
</ul>
<p>Tags are for who it helps ("use for" tags) and for who can detriment ("avoid for" tags) from use of this strategy. The default is that a strategy is good for all groups.</p>
<p>Tags can be for the cognitive function impairments or other user descriptors such as localization.</p>
<p> For example </p>
<p><strong>Use for:</strong> "Short Term Memory" would imply that this strategy is helpful for people with a short term memory impairment.</p>
<p>Tags can be concatenated. For example: "Short Term Memory-Visual Memory". Additional terms are limiting, and the tag becomes more specific as we concatenate terms.</p>
<p>Tags for cognitive function are found in the Cognitive Function Table (link to be provided soon).</p>
<p> Localization tags so far include: </p>
<ul>
<li>Non-semitic languages and semitic languages (note these tags need more expansion for Chinese etc)</li>
<li>Low context and high context cultures</li>
<li>Familiarity with the Internet and web 2.0. Note this is often age related. Tags are: <ul>
<li>Experienced Internet User: Uses Web 2.0 extensively, will use avatars and familiarizer with social media conventions.</li>
<li> Intermediate Internet User: Knows how to use basic pages without thinking.</li>
<li>Basic Internet user: Has learned about links and buttons.</li>
</ul>
</li>
</ul>
<p>Feel free to put in a technique even if you do not have all this information. However try to provide any research that you know of - even if it is just your own personal experience. If you add a localization category, please also add it to this introduction.</p></section>
<section>
<h3>Exemptions</h3>
<p>The group feel the following situations can create exceptions to parts of techniques</p>
<ul>
<li>When techniques about writing styles detract from a key role of the text you can use a modified writing style guide instead. The modified writing style guide that the page conforms to, should be made public. Examples include content where the main role is artistic or literary (and not to pass on information, social, enable the user to complete a task or other role)</li>
<li>If the main role of the text is artistic then use techniques about formatting styles when they do not detract from the main role of the content.</li>
<li>If the main role of content is to evaluate the user's cognitive abilities, then use techniques as much as possible when they do not detract from the main role of the content.</li>
</ul>
</section>
</section>
<section>
<h2>General techniques </h2>
<p>General techniques are useful for most people with Cognitive and Learning Disabilities</p>
<section>
<h3>Provide a clear structure </h3>
<section>
<h4>Break your content into manageable chunks</h4>
<ul>
<li>Identify 1-3 main tasks that covers most of what users want to do. Make sure it is obvious how to do them as soon as the content loads. </li>
<li>Have one topic per page. </li>
<li>Have one idea per paragraph. (One sentence is enough for a paragraph.) </li>
<li>Have one point per sentences. Long sentences can often be broken up into short sentence or lists. If a sentence can use more then one conjuction or comer, it typically can be broken up.</li>
</ul>
<p>When personalization is supported, you can also divide content using the section tags. The user who prefer less content per page, could then see each section as a separate page with a next button.</p>
<section>
<h5>Explanation and who it helps:</h5>
<p> This brakes the content into digestible pieces that the user can cope with. </p>
</section>
<section>
<h5>Sources/research:</h5>
<p> https://www.mencap.org.uk/sites/default/files/documents/2008-04/make%20it%20clear%20apr09.pdf</p>
<p>The Aphasia Alliance's Top Tips for 'Aphasia Friendlier' Communication taken from http://www.buryspeakeasy.org.uk/documents/Aphasia%20Alliance%20Aphasia%20Friendier%20Communication.pdf</p>
<p> Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
</section>
</section>
<section>
<h4>Help the user find information</h4>
Having a clear path to content helps all users. Also note that personalization can be used to remove extraneous information.
<ul>
<li><strong>When possible have no more than three clicks to get to information. </strong>Divide your pages into sections and subtopics. Try and ensure that it is clear what topic the page would be under. Ensure that it can be reached though any high level page that it logically could belong. Help and support should be one click away</li>
<li><strong>Provide different methods to find information. </strong>Provide a site map, and preferably a the search box as well. <br>
</li>
<li><strong>Limit the number of links in each area</strong>.
Have no more then seven links in any one navigation section or under any one subheading. </li>
<li>Make clickable areas obvious, such as links and buttons</li></ul>
<section><h5>Explanation and who it helps: </h5>
<p>Some people can get overwhelmed by too much information and may give up when it takes too long to find information<br />
</p>
</section>
<section>
<h5>Sources/research:</h5>
<p>http://www.autism.org.uk/working-with/autism-friendly-places/designing-websites-suitable-for-people-with-autism-spectrum-disorders.aspx (08/2015)</p>
</section></section>
<section>
<h4>Use headings and labels to describe topic or purpose.</h4>
<p>Simple colored headings with fonts two size larger than general content to aid navigation skills. </p>
<section>
<h5>Explanation and who it helps:</h5>
<p>This supports those who have reading and some visual perceptual difficulties due to Receptive Aphasia (Wernicke's Aphasia) and acquired dyslexia as well as those with general cognitive learning disabilities, where long sentences and complex words can cause difficulties. [EDN1</p>
</section>
<section>
<h5>Sources/research:</h5>
<p>Rose, T.A., Worrall, L.E., Hickson, L.M., Hoffmann, T.C. (2011). Aphasia friendly written health information: Content and design characteristics. International Journal of Speech-Language Pathology, 13(4), 335-47.</p>
</section>
</section>
<section>
<h4>Use consistent styles</h4>
<p>Ensure:</p>
<ul>
<li>All headings with the same role have the same style,</li>
<li>appearance of controls and menu items consistent in all areas,</li>
<li>clarity of display on plain backgrounds,</li>
<li>icons, controls and menus are used consistently across your site.</li>
</ul>
<section>
<h5>Explanation and who it helps: </h5>
<p>This supports those who have reading and some visual perceptual difficulties due to Receptive Aphasia and acquired dyslexia as well as those with general cognitive learning disabilities. It also helps those with visual acuity difficulties where stroke and age related disabilities co-occur. </p>
<p><strong> Use for tags: </strong>All<br /> Receptive Aphasia, acquired dyslexia, visual acuity difficulties<br />
<strong>Avoid for tags: </strong></p>
</section>
<section>
<h5>Sources/research:</h5>
<p>The Aphasia Alliance's Top Tips for 'Aphasia Friendlier' Communication taken from http://www.buryspeakeasy.org.uk/documents/Aphasia%20Alliance%20Aphasia%20Friendier%20Communication.pdf</p>
</section>
</section>
<section>
<h4>Use presentation, color and symbols to show structure and relationships</h4>
<p>Ensure that </p>
<ul>
<li>icons, controls and menus are located in consistent and non- distracting areas.</li>
<li>highlight key points in bold - (be careful not to over use, because it feels like shouting)</li>
<li>text boxes to highlight important information</li>
</ul>
<section>
<h5>Explanation and who it helps:</h5>
<p>“People with aphasia post-stroke have also been reported to have more specific design preferences compared to people without aphasia, preferring written stroke information to contain color and text supported with diagrams” (Eames et al., 2003)ii </p>
</section>
<section>
<h5>Sources/research:</h5>
<p>The Aphasia Alliance's Top Tips for 'Aphasia Friendlier' Communication taken from http://www.buryspeakeasy.org.uk/documents/Aphasia%20Alliance%20Aphasia%20Friendier%20Communication.pdf</p>
<p>Eames, S., McKenna, K., Worrall, L., & Read, S. (2003). The suitability of written education materials for stroke survivors and their carers. Topics in Stroke Rehabilitation, 10(3), 70-83.</p>
<p> Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
</section>
</section>
<section>
<h4>Use lists and tables</h4>
<p>Ensure that:</p>
<ul>
<li>bullet points are well spaced</li>
<li>a minimal number of words are used (e.g.5)</li>
<li>lists are not cluttered by surrounding items</li>
<li>keywords start the statement such as “Stroke happens suddenly”</li>
</ul>
<p>Tables can also be used to clearly show the relationship between data.</p>
<section>
<h5>Explanation and who it helps:</h5>
<p>This supports people who have reading difficulties. It includes many people with intellectual disabilities, due to Receptive Aphasia and acquired dyslexia as well as those with general cognitive learning disabilities. </p>
</section>
<section>
<h5>Sources/research:</h5>
<p>"Top Five Instructional Tips for Students with Down syndrome" http://specialedpost.org/2013/01/31/top-five-instructional-strategies-for-students-with-down-syndrome/</p>
<p>"Down syndrome and Learning" http://inclusive.tki.org.nz/guides/down-syndrome-and-learning/ </p>
<p>Stroke Association Accessible Information Guidelines http://www.stroke.org.uk/professionals/accessible-information-guidelines</p>
</section>
</section>
<section>
<h4>Use a clear presentation </h4>
<ul>
<li>Identify the main task or information and keep it easy to find, e.g. to the top left where the eye goes first in English (consider localization for right to left languages such as Arabic). </li>
<li>use visual grouping with subheading to enable filtering of content without overwhelming</li>
<li>use white space and lines to define areas </li>
<li>include an index or sitemap</li>
<li>keep linking images simple and explanatory, so that users easily know exactly where they will go if they click the link.</li>
<li>for long or complex content include a short introduction to summarize content </li>
</ul>
<section>
<h5>Explanation and who it helps:</h5>
<p>This supports people with intellectual disabilities those who have any type of Aphasia, specific learning difficulties as well as those with general cognitive learning disabilities. This supports those who have Dementia and/or acquire cognitive disabilities as they Age. </p>
</section>
<section>
<h5>Sources/research:</h5>
<p>"Top Five Instructional Tips for Students with Down syndrome" http://specialedpost.org/2013/01/31/top-five-instructional-strategies-for-students-with-down-syndrome/ "Down syndrome and Learning" http://inclusive.tki.org.nz/guides/down-syndrome-and-learning/ </p>
<p>iBrennan, A., Worrall, L., & McKenna, K. (2005). The relationship between specific features of aphasia-friendly written material and comprehension of written material for people with aphasia: An exploratory study. <em>Aphasiology</em>, <em>19</em>(8), 693-711. doi:10.1080/02687030444000958</p>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
</section>
</section>
</section>
<section>
<h3>Be predictable</h3>
<p>The more predictable your content is the easier it is to know how to use it. </p>
<ul>
<li>Use a consistent layout for all your content</li>
<li>Use the same icons and buttons to serve the same function</li>
<li>Use the same linked text to go to the same page </li>
<li>Use standard layout design, so it is easy to find common content. In 2015 in English sites this includes: <ul>
<li>the search box is in the right hand corner</li>
<li>a link to home page in the left hand corner</li>
<li>site map in the footer, etc.</li>
</ul>
</li>
</ul>
<section>
<h4>Explanation and who it helps:</h4>
<p>All but especially those with some forms of autism</p>
</section>
<section>
<h4>Sources/research:</h4>
<p>Neilson-aging</p>
<p>Computers helping people with special needed, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, Et. Al. Springer (pages 401). Paper: Tablets in the rehabilitation of memory impairment, K Dobsz et. al.</p>
</section>
</section>
<section>
<h3>Writing style</h3>
<section>
<h4>Be clear and to the point</h4>
<p>Making your message clear. The first step is to identify what your main message is. Then ensure that: </p>
<ul>
<li>Extraneous information is separated (preferably removed)</li>
<li>key points are separated out</li>
<li>check that the order of statements is logical </li>
<li>use short clear sentences (avoid multiple points in one sentence) </li>
<li>choose words that are in general use ,and are easily understood by your audience</li>
<li>avoid hyphenated words and acronyms (unless they are easily understandable)</li>
<li>be factual</li>
<li>use clear headings to signpost information. For multi media it should be easy to go back to each section using techniques such as indexing and bookmarks. </li>
<li> use words that make it clear what will happen when links and buttons are used (such as "search" in place of "submit")</li>
<li>avoid the use of metaphors such as 'it's raining cats and dogs' as people may take these literally.</li>
</ul>
<p>In cases where there is a lot of information provide a clear and simple summary of the content.</p>
<p> </p>
<section>
<h5>Explanation and who it helps:</h5>
<p>This supports those who have reading difficulties and some visual perceptual difficulties. It can include people with intellectual disabilities, Receptive Aphasia and acquired dyslexia as well as those with general cognitive learning disabilities, where long sentences and complex words can cause difficulties. This supports those who have Dementia and/or acquire cognitive disabilities as they Age.</p>
<p>Additionally it supports persons with general cognitive learning disabilities, where long sentences and complex words can cause difficulties.</p>
</section>
<section>
<h5>Sources/research:</h5>
<p>i Stroke Association Accessible Information Guidelines http://www.stroke.org.uk/professionals/accessible-information-guidelines</p>
<p> Computers helping people with special needs, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, et. al. Springer (pages 401). Paper: Never Too old to use a tablets, L. Muskens et. al. pages 392 - 393. </p>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
<p>Neilson-aging</p>
<p> "Top Five Instructional Tips for Students with Down syndrome" http://specialedpost.org/2013/01/31/top-five-instructional-strategies-for-students-with-down-syndrome/</p>
<p>http://www.autism.org.uk/working-with/autism-friendly-places/designing-websites-suitable-for-people-with-autism-spectrum-disorders.aspx (downloaded 08/2015)</p>
<p>"Students with Down syndrome" http://www.downssa.asn.au/__files/f/3203/A%20Student%20with%20Down%20Syndrome%202014.pdf</p>
</section>
</section>
<section>
<h4>Give instructions clearly</h4>
<ul>
<li>use short clear sentences</li>
<li>use simple, clear words </li>
<li>do not miss out steps</li>
<li>do not assume users can guess what you mean</li>
<li>leave plenty of space between lines (at least 1.5 spacing between lines)</li>
<li>use unambiguous language</li>
</ul>
<p>Note that many users find it easier if you limit decisions/options for user. However other users find it easier to see all related options at the same time. Providing a consistent "more options" mechanism can help. Personalization can also help address conflicting needs.</p>
<section>
<h5>Explanation and who it helps: </h5>
<p>This supports those who have Dementia and/or acquire cognitive disabilities as they Age.</p>
</section>
<section>
<h5>Sources/research:</h5>
<p>The Aphasia Alliance's Top Tips for 'Aphasia Friendlier' Communication taken from http://www.buryspeakeasy.org.uk/documents/Aphasia%20Alliance%20Aphasia%20Friendier%20Communication.pdf</p>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
<p>Computers helping people with special needed, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, Et. Al. Springer (pages 401). Paper: Tablets in the rehabilitation of memory impairment, K Dobsz et. al.</p>
<p>http://www.autism.org.uk/working-with/autism-friendly-places/designing-websites-suitable-for-people-with-autism-spectrum-disorders.aspx (downloaded 08/2015)</p>
</section>
</section>
<section>
<h4>Use a simple tense and active rather than passive voice.</h4>
<p>Simple present tense is usually easier to understand then other tenses</p>
<p><strong>Example:</strong> "I am using the present tense" as appose to "the present tense was used"</p>
<p>With the <em>active voice,</em> the subject of sentence performs the action. Passive voice the subject receives the action. For example </p>
<p><strong>Example - Active: </strong>Researchers <em>showed</em> that high stress <em>can cause</em> heart attacks.</p>
<p><strong>Example - Passive:</strong> High stress, has been proved by researchers to sometimes be the cause of heart attacks.</p>
<p>To identify passive voicing</p>
<ul>
<li>Check that it is clear who is the subject of the sentence </li>
<li>The term "by" phrase often is used in passive voicing</li>
<li>Possible use of 'you' but careful use of other pronouns such as 'she', 'he' etc ii</li>
<li>Determiners such as 'this' and 'that' can confuse</li>
</ul>
<p>Exemption</p>
<p>There are times when passive voicing or other tense can be clearer. In these cases, there is an exemption if active voicing has been shown in a user test to be harder to understand, less friendly or inappropriate.</p>
<p>For example: The sentence <em>"You many not eat here"</em> may be considered aggressive. <em>"Eating is not allowed in this room"</em> is just as clear and is less aggressive.</p>
<section>
<h5>Explanation and who it helps:</h5>
<p>Those with Expressive Aphasia may ?and the use of passive voice “di?cult due to problems with retrieving the relevant grammatical morphemes” and those with receptive Aphasia may also find it hard to automatically understand the meaning of passive voice . This supports those who have Dementia and/or acquire cognitive disabilities as they Age. </p>
</section>
<section>
<h5>Sources/research:</h5>
<p>iFaroqi-Shah Y, Thompson CK. Effect of lexical cues on the production of active and passive sentences in Broca's and Wernicke's aphasia. Brain and Language. 2003;85:409-426. <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3034248/">http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3034248/</a>
<br /> iiStroke Association Accessible Information Guidelines http://www.stroke.org.uk/professionals/accessible-information-guidelines</p>
<p>Computers helping people with special needs, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, et. al. Springer (pages 401). Paper: Never Too old to use a tablets, L. Muskens et. al. pages 392 - 393. </p>
</section>
</section>
<section>
<h4>Avoid double negatives.</h4>
<ul>
<li>It is important to avoid sentences that contain double negatives or dependent clauses for example <em>“</em><em>He doesn't have nothing but the clothes on his back.”</em></li>
</ul>
<section>
<h5>Explanation and who it helps:</h5>
<p>These sentences tend to be grammatically incorrect and confusing - their use should be avoided for those who have intellectual disabilities, any type of Aphasia, specific learning difficulties as well as those with general cognitive learning disabilities. This supports those who have Dementia and/or acquire cognitive disabilities as they Age.</p>
</section>
<section>
<h5>Sources/research:</h5>
<p> iSarno, M.T(1998) (ed) Acquired Aphasia. San Diego : Academic Press, 1998, <br /> — id: 1029, year: 1998, vol: 1, page: 28</p>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
<p>"Down Syndrome Issues and Information: Speech and Language" (http://www.down-syndrome.org/information/language/) </p>
<p>"Speech and Language Therapy for children with Down Syndrome" (http://www.ndss.org/index.php?option=com_content&view=articl e&id=138:speech-a-language-therapy&catid=51:therapies-adevelopment&itemid=142&showall=1) </p>
<p>"Down syndrome 101 for Educators" http://downsyndromeinfo.org/wp-content/uploads/2014/03/Down-Syndrome-101-for-Educators-DSIA-Presentation.pdf</p>
</section>
</section>
<section>
<h4>Checking Readability </h4>
<p>Check long documents in sections to determine which parts are too hard to read. </p>
<p>One way to do this is to use the Flesch Reading Ease score which rates text on a 100-point scale. The higher the score, the easier it is to understand the document. For most standard documents, aim for a score of approximately 70 to 80. </p>
<p>The Flesch-Kincaid Grade Level score rates text on a U.S. grade-school level. For example, a score of 5.0 means that a fifth grader, i.e., a Year 6, average 10 years old, can understand the document. For most standard documents, aim for a score of approximately 5.0 by using short sentences, not by simplifying vocabulary.</p>
<p>In cases were a higher reading age is required (such as for a legal document) provide an easy to read summary of key points.</p>
</section>
</section>
<section>
<h3>Provide rapid and direct feedback.</h3>
<p>Applications should continuously provide easily-recognizable feedback of success or failure with every action. Confirm that after a user action the user known that the action was successful or not. Applications should also let the user know what just happened and where they are in a process. </p>
<p>Spoken feedback is often more effective then written feedback. However having both spoken feedback and longer lasting written and visual feedback helps the user know where they are and restores the context if attention is lost.</p>
<p><strong>For example: </strong></p>
<ul>
<li>After a button is clicked it should look depressed</li>
<li>After a form is submitted there should be feedback saying what just happened such as "your form was submitted, thank you " or "your email was sent". </li>
<li>After a step is completed the breadcrumbs have a tick next to that step's name and give the title of the next step</li>
</ul>
<p> </p>
<section>
<h4>Explanation and who it helps:</h4>
<p>This supports those who have Dementia and/or acquire cognitive disabilities as they Age. It also helps anyone with impaired short term memory remember what they just did.</p>
</section>
<section>
<h4>Sources/research:</h4>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011.</p>
<p>Neilson- aging</p>
</section>
</section>
<section>
<h3>Help meaning</h3>
<section>
<h4>Include short tooltips on all icons, jargon</h4>
<p> Tooltips should be precise and relate directly to the object.</p>
<p>When possible tooltips should be able to be turned off via personalization. This is because they may not be noticed by some who have severe aphasia and a visual agnosia and could add clutter and even confuse if they are read out by a screen reader or text to speech support. But for those with less severe difficulties they can be helpful.</p>
<section>
<h5>Explanation and who it helps:</h5>
<p>The amount of help offered by tooltips very much depends on the ability of the user as do many of the techniques above. </p>
<p> These is helpful to most persons with intellectual disabilities. Sometimes a person with an intellectual disability can get confused and distracted. If tooltips are to be used they must precise and relate directly to the object.</p>
</section>
<section>
<h5>Sources/research:</h5>
<p>From WCAG:</p>
<ul>
<li>Guideline 3.1 Readable: Make text content readable and understandable.</li>
<li>Unusual Words: A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon. (3.1.3 Level AAA)</li>
<li>Abbreviations: A mechanism for identifying the expanded form or meaning of abbreviations is available. (3.1.4 Level AAA)</li>
<li>Reading Level: When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available. (3.1.5Level AAA)</li>
<li>Pronunciation: A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation. (3.1.6 Level AAA) </li>
</ul>
</section>
</section>
<section>
<h4>Use of charts and graphs</h4>
<p> Where appropriate, create charts and graphics to provide additional ways to reinforce important concepts. Typically, if something can be shown in a chart or a graphic, it will help many users if it is provided.</p>
<p>However, graphics should be clear and easy to identify what is going on</p>
<p> The ability to “read between the lines” of a text, graphic, or lecture may seem like an exercise in “common sense,” but it may create barriers for students with autism, who may not be able to readily discern the intended relevance of graphical data.</p>
<p> Clear explanations may reduce undue cognitive loads for all users.</p>
<p>Further use aria-describedby to associate the graphic or sections of a graphic or chart and the text that describes it can be read by a screen reader whilst the right section of the chart is highlighted.</p>
<section>
<h5>Explanation and who it helps:</h5>
<p>People who find reading or language difficult can be helped by a chart or graph</p>
</section>
<h5>Sources/research:</h5>
<p>“Accommodating-ASD-In-STEM.pdf”. Nathan W . Moon, PhD Robert L. T odd, M S David L. Morton, PhD Emily Ivey, M S (You can download it from John's Dropbox account at http://bit.ly/18wev76.) </p>
<p class="note">Make sure there isn't a copyright violation here.</p>
</section>
<section>
<h4>Use symbols and images to show meaning</h4><section>
<h5>Explanation and who it helps:</h5>
<p>Symbols as an addition to short sentences and phrases can understanding. </p>
<p>However as some people have difficulty remembering symbols, use text with the symbol.</p>
<ul>
<li>Use clear symbols that can easily be seen and expanded</li>
<li>Use images understood by different users</li>
<li>In left to right languages place the image to the left of the text</li>
</ul>
<p>In the future we intend to enable semantics that will add symbols that are easy to use by the individual user.</p>
</section>
<section>
<h4>Sources/research:</h4>
<p>See http://www.bdadyslexia.org.uk/about-dyslexia/further-information/dyslexia-style-guide.html</p>
<p>Garrett, K. L., Beukelman, D. R., & Low-Morrow, D. (1989). A comprehensive augmentative communication system for an adult with Broca's aphasia. Augmentative & Alternative Communication, 5(1), 55.</p>
<p>Top Five Instructional Tips for Students with Down syndrome" http://specialedpost.org/2013/01/31/top-five-instructional-strategies-for-students-with-down-syndrome/ </p>
<p>"Down syndrome and Learning" http://inclusive.tki.org.nz/guides/down-syndrome-and-learning/ </p>
<p>Phiriyapkanon. Is big button interface enough for elderly users, P34, Malardardalen University Press Sweden 2011</p>
<p><strong>Also see:</strong></p>
<ul>
<li> Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (WCAG 1.3.1 Level A) </li>
<li> Headings and Labels: Headings and labels describe topic or purpose. (WCAG 2.4.6 Level AA) </li>
<li>Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (WCAG 3.2.3 Level AA) </li>
<li>Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (WCAG 3.2.4 Level AA)</li>
</ul>
</section></section>
<section>
<h4 >Use of synchronized highlighting, of complex graphics and formula with speech</h4>
<p> Associate maths, sections of math and sections of complex items with explanations. </p>
<p>Provide text or speech explanations for sections of charts, mathematical formula and graphics, so that the section of the formula or graphic being discussed can be highlighted at the same time as the explanatory text is being read. </p>
<p>For example, when the text is describing the denominator of a formula, that denominator should be highlighted. </p>
<p>Note that this requires an accessible format for math such as MathML used with aria-describedby and CSS.</p>
<p>This has been shown to increase math comprehension by 10%
</p>
</p><section><h5 >Sources/research: </h5>
<p>Lewis et al. (2012) </p>
</section></section>
<section>
<!--Start Technique-->
<h4>Temperature</h4>
<ul>
<li>Use the default temperature format of locale </li>
<li>Allow reading of long form temperature. </li>
<li>Reinforce with non-numerical values, e.g., Very Cold, Cold, Cool, Mild, Warm, Hot, Very Hot.</li>
</ul>
<p>These are subjective values and may not always be helpful especially when dealing with weather and ambient temperature (due to reasons such as variances in regional average temperature - what is considered hot in UK is considered cool in India or Thailand). It may be possible to use look up tables and JSON to query relative average temperature based upon locale and adjust temperature ranges accordingly. </p>
<p>Give additional hints and pointers to users to give context.</p>
<p>Explanation and who it helps</p>
<p>The requirement to convert between Centigrade and Fahrenheit and vice versa is burdensome so defaulting to the format of the locale removes one layer of complexity.</p>
<p>Reading the values long form rather than using figures is helpful in for the same reasons outlined in the dates and calendar section.</p>
<p></p>
<p></p>
<h5>Examples</h5>
<p>Even with all of the above in place a person may not be able to marry up the concept of temperature with the numbers so giving additional hints may help make the link to whether something is hot or cold.</p>
<p>Use symbols where appropriate for example for weather the symbols used such as sun, snowflake, sun & cloud will give some indication. </p>
<p><strong>Pass example</strong>: The Temperature is Five Degrees Centigrade (Cold) <img src="img/SnowFlake.png" height="67" width="61" alt="" style="margin: 0px auto;"> hint: It's hat and scarf weather. </p>
<p><strong>Failure example</strong>: Failure to explain figures representing relative values. Temperature = 21℃/70℉</p>
<p>The Temperature is Thirty Degrees Centigrade (Very hot) <img src="img/sun.png" height="62" width="62" alt="" style="margin: 0px auto;"> hint: It's shorts weather </p>
<p>Use for tags: Dyscalculia, dyslexia, attention deficit disorder, high cognitive load, situationally disabled.</p>
<section> <strong>Sources/research</strong></p>
<p>Research carried out by Neil Milliken with web users who have Dyscalculia - case studies.</p>
</section>
</section>
<section>
<h3>Calculations</h3>
<h4>Ability to have mathematical notation read out with text to speech to aid understanding.</h4>
<p>Explanation and who it helps</p>
<p>The reading of Maths notation can be achieved through the use of MathML with text to speech but Maths reading rules need to be applied for the correct reading order and formats may be localized. Correct localization and use of MathML for text to speech reading aloud with text highlighting can help with memory difficulties when coping with complex equations for those with Dyscalculia, dyslexia and attention deficit disorder. </p>
<h5>Examples</h5>
<p>A maths equation using MathML read aloud with MathJax https://www.mathjax.org/</p>
<p><strong>Pass example:</strong> Use of MathML for maths notation http://www.w3.org/TR/MathML/ </p>
<p><strong>Failure examples:</strong> Use of symbols as graphics without explanations.</p>
<p>Use for tags: dyscalculia, dyslexia, attention deficit disorder.</p>
<p>Sources/research</p>
<p>Mathematical Markup Language (MathML) Version 3.0 2nd Edition W3C Recommendation 10 April 2014 <a href="http://www.w3.org/TR/MathML/">http://www.w3.org/TR/MathML/</a></p>
<p>Making Mathematics Accessible <a href="http://ww.dessci.com/en/reference/accessibility/">http://www.dessci.com/en/reference/accessibility/</a></p>
<p>Math on the web <a href="http://www.dessci.com/en/reference/webmath/">http://www.dessci.com/en/reference/webmath/</a></p>
</section>
<!--End Technique-->
<section>
<!--Start Topic-->
<h3>Currency</h3>
<!--Start Technique-->
<h4>Localisation and sequence of symbols and numbers</h4>
<ul>
<li>Consider placement of currency symbols related to locale and offer acronym with explanation or full text </li>
</ul>
<p>Explanation and who it helps</p>
<p>This may help explain the currency being used and also offer clarity in terms of the type of coins such as Australian dollar as opposed to US dollar. This can help everyone including those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load or situationally disabled.</p>
<h5>Examples</h5>
<p>Providing text or shortened forms of currency representations with explanations:</p>
<ul>
<li>€ 234,56 Euro</li>
<li>£ 234,56 British Pounds</li>
<li>$ 234,56 US Dollars</li>
</ul>
<p>Providing standardised text or shortened forms of currency representations. </p>
<p><strong>Failure examples</strong></p>
<p>Failure to provide standardised, recognised currency symbols or text short form in the appropriate position.</p>
<p>Use for tags: All</p>
<h5>Sources/research</h5>
<p>ISO 4217 Currency Codes <a href="http://www.xe.com/iso4217.php">http://www.xe.com/iso4217.php</a></p>
<p>1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A) WCAG advises providing symbol before the number as part of the W3C working draft on <a href="http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/content-structure-separation-programmatic#content-structure-separation-programmatic-intent-head">http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/content-structure-separation-programmatic#content-structure-separation-programmatic-intent-head</a></p>
</section>
<!--End Technique-->
<section>
<!--Start Topic-->
<h3>Buying and Selling Online (Quantities and Size)</h3>
<section>
<!--Start Technique-->
<h4>Do not rely on numbers alone when describing goods. Provide a hint or additional information to aid users.</h4>
<p>Explanation and who it helps</p>
<p>People with dyscalculia frequently struggle with the concept of quantities, this presents challenges when buying goods. In the failure example below it would be easy for someone with dyscalculia to think that the 25Kg was the smaller of the two.</p>
<h5>Examples</h5>
<p></p>
<p><strong>Pass examples</strong></p>
<p>Small Pack of Basmati Rice - 250 grams . (Will make a single meal for two people).</p>
<p>Extra Large Sack of Basmati Rice - 25 Kilograms (Will feed a family for months)</p>
<p><strong>Failure examples</strong></p>
<p>Basmati Rice 250g </p>
<p>Basmati Rice 25Kg</p>
<p>Use for tags: Dyscalculia, dyslexia, Attention Deficit Disorder.</p>
<h5>Sources/research</h5>
<p>Research carried out by Neil Milliken with web users who have dyscalculia - case studies.</p>
</section>
<!--End Technique-->
</section>
<!--End Topic-->
<section>
<!--Start Topic-->
<h3>Buying & Selling Online (Payments)</h3>
<section>
<!--Start Technique-->
<p>See also: <a href="https://rawgit.com/w3c/coga/master/issue-papers/privacy-security.html">Web Security and Privacy Technologies</a></p>
<h4>Functions</h4>
<ul>
<li>Allow use of E-Wallets and password management tools.</li>
<li>Avoid asking people to enter credit card details.</li>
<li>Allow pasting of password and payment details into form fields.</li>
<li>Avoid additional layers of password authentication (e.g., verified by Visa or time sensitive random security numbers).</li>
</ul>
<h4>Format</h4>
<ul>
<li>Break up card input forms to match credit cards, e.g., 4x4 numbers.</li>
<li>Different cards have different patterns of numbers e.g. Amex may have more numbers than Standard Cards. Payment forms usually ask the user for the type of card. The card input form should reflect the payment card type.</li>
</ul>
<p>Explanation and who it helps</p>
<p>People may struggle remembering card numbers or may have difficulty entering numbers in the correct order due to sequencing issues. Multiple layers of authentication compound problems and many banks require two-factor authentication that uses pass codes that time out after 30 seconds. Reducing the requirement for this will be of great benefit to people with dyslexia, dyscalculia, anyone who has poor working memory or issues with sequencing.</p>
<h5>Examples</h5>
<p></p>
<p><strong>Pass examples</strong></p>
<p>Allows user to utilize digital wallet to enter payment details - user choses payment card and details are entered automatically.</p>
<p>User chooses credit card type and the input boxes match the format of the numbers on the card.</p>
<p>User can copy and paste information into form fields.</p>
<p><strong>Failure examples</strong></p>
<p>User cannot use digital wallet or copy and paste in details.</p>
<p>Form fields do not match the numbers on the payment card.</p>
<p>The user is asked for additional authentication which asks requires remembering password fragments e.g. the first second and penultimate characters of a password.</p>
<p>Use for tags: Dyscalculia, dyslexia, Attention Deficit Disorder.</p>
<h5>Sources/research</h5>
<p>Research carried out by Neil Milliken with web users who have dyscalculia - case studies.</p>
</section>
</section>
<section>
</section>
</section>
<section>
<h3> Use a clear design</h3>
<section>
<h3>Use clear visual affordances.</h3>
<p>Actions and actionable items that can be interacted with should have a clear visual style to indicate this e.g. buttons should look like buttons. Use techniques like 'flat design' with great care as they have much reduced affordances.</p>
<section>
<h4>Explanation and who it helps:</h4>
<p>All but especially those with some forms of autism</p></section>
<section>
<h4>Sources/research:</h4>
<p>Citations needed - see <a href="https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Flat_Design">flat design page</a> on our wiki and <a href="http://jkg3.com/Journal/cognitive-accessibility-101-part-1-what-is-cognitive-accessibility">Jamie Knight's blog posts</a></p>
<p>Computers helping people with special needed, 14 international conference ICCHP 2014 Eds. Miesenberger, Fels, Archambault, Et. Al. Springer (pages 401). Paper: Tablets in the rehabilitation of memory impairment, K Dobsz et. al.</p>
</section>
</section><section>
<h4>Have a clean and uncluttered design</h4>
This typically involves: </p>
<ul>
<li>Use a plain, evenly spaced sans serif font such as Arial</li>
<li>There is white-space (or other light background color) around blocks of text and graphics </li>
<li>Use left justification with ragged right edge. (localization: for left to right languages only)</li>
<li>Right justification with ragged left edge. (localization: for right to left languages only)</li>
<li>Font size is between 14 and 18 pt</li>
<li>There is no change in font style</li>
<li>Avoid narrow columns (as used in newspapers)</li>
<li>capital letters are used sparingly e.g. first word only and names</li>
<li>Take care to use bold text just for key items, avoid using <em>italics</em>, ALLCAPS or <span style="text-decoration: underline;">underline</span> for emphasis </li>
<li>Text and images should be expandable.</li>
<li>Avoid text and numbers in images, including equations</li>
<li>Make important information two font sizes bigger </li>
<li>Try to avoid the underlining of text - where hyperlinks may have the default underline ensure they have a different color as well</li>
<li>Lines should not be too long: 60 to70 characters. </li>
<li>Avoid cramping material and using long, dense paragraphs: space it out. with one idea per paragraph. </li>
<li> Line spacing of 1.5 is preferable. </li>
<li>Use bullet points and numbering rather than continuous prose.</li>
<li>Avoid using non standard font alternatives such as Cufo'n </li>
</ul>
<section><h5>Explanation and who it helps:</h5></p>
<p> These are sensible clear reading guidelines for all and can support those with a wide range of disabilities and reading difficulties including those with cognitive learning disabilities. </p></section>
<section>
<h4>Sources/research:</h4>
<p>"Am I making myself clear? Mencap's guidelines for accessible writing http://www.easy-read-online.co.uk/media/10609/making-myself-clear.pdf </p>
<p>"Top Five Instructional Tips for Students with Down syndrome" http://specialedpost.org/2013/01/31/top-five-instructional-strategies-for-students-with-down-syndrome/</p>
<p>"Down syndrome and Learning" http://inclusive.tki.org.nz/guides/down-syndrome-and-learning/ </p>
<p>See http://www.bdadyslexia.org.uk/about-dyslexia/further-information/dyslexia-style-guide.html</p>
<p>Rello et al 2013<a href="http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf" title="http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf"><br />
</a></p>
<p><a href="http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf" title="http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf">http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf</a></p>
<p>Rello et al 2013 - <a href="http://taln.upf.edu/content/biblio/578" title="http://taln.upf.edu/content/biblio/578">http://taln.upf.edu/content/biblio/578</a></p>
<br />
<p>Accessibility of text replacements using Canvas (custom fonts) </p>
<p><a href="http://www.paciellogroup.com/blog/2009/06/notes-accessibility-of-text-replacement-using-html5-canvas/">http://www.paciellogroup.com/blog/2009/06/notes-accessibility-of-text-replacement-using-html5-canvas/</a>
</p>
</section></section><section><!--Start numbers-->
<h3>Formats for Numbers and Time</h3> <section>
<h4>Time</h4>
Check use of appropriate punctuation between numbers when providing times as these may be read inappropriately by text to speech engines.
<section><h5>Explanation and who it helps:</h5>
<p>Being able to hear the numbers for time repeatedly read out aloud accurately with 'text to speech' technologies can help comprehension and memory. Developers need to be aware of how these technologies react to time formats. This feature can provide those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load or situationally disabled with a better understanding of the concepts. </p></section>
<h5>Example</h5>
<p>The international standard notation for the time of day is hh:mm:ss but this can be hard for those with cognitive impairments to fully comprehend - 10:30:10 may be read out as 10 hours, thirty minutes and 10 seconds by most text to speech engines but may be too long to remember. The ISO advises the 24 hour clock for example 13:30 as opposed to 01.30pm - the latter is localized for English speakers but may help those with learning disabilities along with symbols to represent the period in the day such as suggest under calendars. </p>
<p><strong>Pass example:</strong> Numbers representing time can be read out accurately by text to speech engines.</p>
<p><strong>Failure examples:</strong>Numbers fail to be read out accurately by text to speech engines. </p>
</section><!--End Technique-->
<section>
<!--Start Topic-->
<h4>Layout for Numbers</h4>
<p>
Check use of white space and punctuation characters between numbers. Use of spaces and commas within numbers can confuse and text to speech engines cope in different ways.
</p><section>
<h5>Explanation and who it helps</h5>Where any numbers are presented their use needs to be considered. If they are representing dates, time, references, telephone numbers or mathematical notation their layout impacts on users' understanding. Users need to not only recognize standardised layouts but also to be able to understand the meaning as the numbers are read aloud by text to speech engines. This feature can provide those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load or situationally disabled with a better understanding of the concepts.</p></section>
<h5>Example</h5>
<ul>
<li>Reference numbers compared to a quantity or value e.g. Ref: 7241500 as opposed to 7,241,500 chickens </li>
<li>Telephone numbers have localized layouts and text to speech readers cope in different ways with the layout so a telephone symbol and/or word for telephone/mobile/cell phone alongside the number can help avoid confusion. </li>
</ul>
<p><strong>Pass example:</strong> Numbers representing specific concepts can be recognised by their layout as well as being read out accurately by text to speech engines.</p>
<p><strong>Failure example: </strong>Numbers fail to conform to recognised layouts and are not read out accurately by text to speech engines. </p>
</section><section>
<h5>Roman Numerals</h5>
Roman Numerals should be presented in upper case if used in isolation.
<p><strong>Explanation and who it helps</strong></p>
<p>Roman Numerals can be presented as lower case or upper case especially when used with musical notation but these may not always be recognised by text to speech engines or may be confused with other navigational elements such as numerical bullet points. Use of Roman Numerals are not always easily understood. The use of this format for isolated numbers impacts on comprehension for those with dyscalculia, dyslexia and attention deficit disorder and should be avoided if possible. </p>
<h5>Examples</h5>
<p>Text to speech engines will try to read the lower case Roman Numeral as word e.g. vi instead of VI - read as /vie/ instead of six.</p>
<p><strong>Pass example: </strong>Roman Numerals presented in upper case if used in isolation.</p>
<p><strong>Failure example: </strong>Roman Numerals presented in lower case in isolation.</p>
<p>Use for tags: dyscalculia, dyslexia and attention deficit disorder.</p>
<p> Sources/research</p>
<p>Are there any guidelines for the presentation of numbers?</p></section><!--End Technique-->
<section><!--Start Technique-->
<h4> Use linear horizontal text based scales for questionnaires and surveys rather than numbers.</h4>
<p>Explanation and who it helps</p>
<p>It has been found that using linear text positioned horizontally on a page can enhance the results where numerical like rating scales are used to carry out research into people's views on a subject. Using simple text is also important as this can help those with dementia and cognitive learning disabilities as well as those with dyscalculia, dyslexia, attention deficit disorder. </p>
<h5>Examples</h5>
<p>Rather than having a scale of 1-5 where one is poor and 5 is excellent use the words across the page just under the question and it has also been shown that using the higher rating scale first can also impact positively on the results. </p>
<input type="checkbox" name="excellent" value="excellent"> excellent
<input type="checkbox" name="very good" value="very good" > very good
<input type="checkbox" name="good" value="good"> good
<input type="checkbox" name="fair" value="fair"> fair
<input type="checkbox" name="poor" value="poor"> poor
<p>Pass example: Offering users of a survey or questionnaire an alternative format.</p>
<p>Failure example: Failure to offer users of a survey or questionnaire an alternative format.</p>
<p>Sources/research</p>
<p>W3C working group draft F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label <a href="http://www.w3.org/TR/WCAG20-TECHS/F82.html">http://www.w3.org/TR/WCAG20-TECHS/F82.html</a></p>
<p>University of Loughborough DDIG - personal perceptions of dyscalculia and Dyspraxia <a href="http://www.lboro.ac.uk/departments/mec/activities/maths-statistics-support/thedyscalculiaanddyslexiainterestgroup/personalperspectives/">http://www.lboro.ac.uk/departments/mec/activities/maths-statistics-support/thedyscalculiaanddyslexiainterestgroup/personalperspectives/</a>.</p>
<p>Toepoel, V., Das, M. and van Soest, A. 2006. Design of web questionnaires: The effect of layout in rating scales, Tilberg, , The Netherlands: Tilburg University. (Discussion Paper No. 2006‐30, CentERdta) <a href="https://www.researchgate.net/profile/Vera_Toepoel/publication/4784408_Design_of_Web_Questionnaires_The_Effect_of_Layout_in_Rating_Scales/links/0deec520de9f388043000000.pdf">https://www.researchgate.net/profile/Vera_Toepoel/publication/4784408_Design_of_Web_Questionnaires_The_Effect_of_Layout_in_Rating_Scales/links/0deec520de9f388043000000.pdf</a> (accessed 5th june, 2015)</p>
<p>Hartley, J. and Betts, L. 2010. Four layouts and a finding: the effects of changes in the order of the verbal labels and the numerical values on Likert‐type scale scores. International Journal of Social Research Methodology, 13: 17-27 </p>
</section><!--End Technique-->
<section><!--Start Technique-->
<h4>Relative values</h4>
<p>Note: This is not clear.</p>
<ul>
<li>Relate percentages to part of a set and avoid comparing percentages to fractions. </li>
<li>Avoid comparing the value of one item against another where the values are relative.</li>
</ul>
<p>Explanation and who it helps</p>
<p>Real concepts can be understood rather than abstract numbers Using an absolute value is better than comparing values in such a way that an item when compared to another may appear to have a difference in value. Use of imagery and/or text best supports this concept. This also applies to relative sizes, quantity and distance. These ideas support those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load. </p>
<h5>Examples</h5>
<p>Half an apple may be better understood when compared to 50% or <sup>1</sup>⁄<sub>2</sub></p>
<p><strong>Pass examples</strong></p>
<p>Relative values offer an alternative or explanation.</p>
<p><strong>Failure examples</strong></p>
<p>Failure to explain figures representing relative values.</p>
<p>Use for tags: dyscalculia, dyslexia, attention deficit disorder.</p>
<h5> Sources/research</h5>
<p>Harling, P. Decimals and Percentages. St. Martin's College
<a href="http://ictedusrv.cumbria.ac.uk/maths/pgdl/unit7/unit7/page_55.htm">http://ictedusrv.cumbria.ac.uk/maths/pgdl/unit7/unit7/page_55.htm</a> (accessed 05 />06/2015)</p>
<p>Relative Value v. Absolute Value - Cheng, L (2009) blog Thinking about Thinking
<a href="http://larrycheng.com/2009/06/24/relative-value-v-absolute-value/">http://larrycheng.com/2009/06/24/relative-value-v-absolute-value/</a> (Accessed 05/06/2015)</p>
</section><!--End Technique-->
</section></section></section></section>
<section> <section>
<h3>Help users complete and check their work</h3>
<section>
<h4>Enough Time</h4>
<p>Timed event should be avoided - if they are necessary there need to be clear controls, pauses and the ability to return to the original point and an alternative is included. </p>
Timed events rarely help anyone and can cause stress and frustration.
<section>
<h5>Sources/research:</h5>
</section>
</section>
<section>
<h4>Avoid Loss of data </h4>
<p>Data needs to be held, saved and available if web pages are refreshed by accident, closed or new tabs are opened. There needs to be the ability to return to forms partially filled and the ability to save content but security issues may prevent this on some websites. </p>
<section>
<h5>Explanation and who it helps:</h5>
<p>This helps everyone. If these steps cannot be done because of security problems than provide alternatives means to get to the data. </p>
</section>
<section>
<h5>Sources/research:</h5>
<p> "Who needs more time on tests?" http://www.betterevidence.org/issue-13/who-needs-more-time-on-tests/ </p>
<p>Lovett BJ (2010), Extended Time Accommodations for Students with Disabilities: Answers to Five Fundamental Questions, Review of Educational Research, 80, 611-38. </p>
<p>Lovett BJ and Leja AM (2013), Students' Perceptions of Testing Accommodations: What We Know, What We Need to Know, and Why It Matters,Journal of Applied School Psychology, 29, 72-89. </p>
<p>Phillips SE (1994), High-Stakes Testing Accommodations: Validity versus Disabled Rights, Applied Measurement in Education, 7, 93-120. </p>
<p><strong>From WCAG</strong></p>
<ul>
<li>Timing Adjustable: For each time limit that is set by the content, at least one of the following is true: (WCAG2.2.1 Level A)</li>
<li>Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (2.2.2 Level A)</li>
<li>No Timing: Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events. (2.2.3 Level AAA)</li>
<li>Re-authenticating: When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. (2.2.5 Level AAA)</li>
</ul>
</section>
</section>
<section>
<h4>Prevent errors</h4>
<p>Where possible prevent the user from making errors and needing to fix them</p>
<ul>
<li>Require as little information as possible. Make it visually clear what information is required</li>
<li>Provide instructions</li>
<li>Accept as many formats as possible, such as different ways of writing a phone number and date formats</li>
<li>Correct errors in the back-end, such as the post code being written in the text field with the city or state information</li>
<li>Provide a summary before submitting important information. Make it one click to repair information</li>
<li>Users often confuse advertisements and native content. Put advertisements in a box clearly marked as "advertisement". Keep advertisement septate from native content.</li>
<li>Users often forget about the scroll. Put any important features, such as save and send, above the scroll.</li>
<li>Never trick the user into buying or agreeing to something that they did not understand, or create a price structure that is unclear. For example, <ul>
<li>never increase the number of items (such as having a default of two) if the user may not notice</li>
<li>never have hidden charges that are only brought to the users attention after they have given their credit card information. All charges must be clear before the start of the transaction task.</li></ul>
<li>Calendars and dates</li>
<ul>
<li>Calendars should default to the first relevant day. Work calendars should default to first working day of a user's locale. </li>
<li>Calendar based booking systems must avoid ability to book return date before departure date. </li>
<li>If the user tries to select an invalid date it must be clear why a date can not be selected such as with a short clear and friendly error message (for example "sorry that date has passed). This avoids abandonment of the process.</li>
<li>Use terms that describe the present past and future days rather than just using numbers or dates. By using terminology such as <em>today</em>, <em>tomorrow</em> or <em>travel now</em> in the appropriate language for the locale, the user has a clear understanding of the timeliness of the event, booking or occasion. </li>
<li>Display long form of <strong>dates</strong> with punctuation, e.g., June 1st, 2015 or 1st June, 2015. This offers a clear understanding of the date. Punctuation helps the text to speech API read the date in a way that is easier to follow.</li>
<li>When using numbers for time - check use of appropriate punctuation between numbers when providing times as these may be read inappropriately by text to speech engines.</li>
</ul>
<Li>Temperature</li>
<ul>
<li>Use the default temperature format of locale. The requirement to convert between Centigrade and Fahrenheit and vice versa is burdensome so defaulting to the format of the locale removes one layer of complexity.</li>
<li>Allow reading of long form temperature. Reading the values long form rather than using figures is helpful in for the same reasons outlined in the dates and calendar section.</li>
<li>Reinforce with non-numerical values, e.g., Very Cold, Cold, Cool, Mild, Warm, Hot, Very Hot. These are subjective values and may not always be helpful especially when dealing with weather and ambient temperature (due to reasons such as variances in regional average temperature - what is considered hot in UK is considered cool in India or Thailand). It may be possible to use look up tables and JSON to query relative average temperature based upon locale and adjust temperature ranges accordingly. </li>
<li>Give additional hints and pointers to users to give context.</li>
</ul></li></ul>
<section>
<h4>Examples</h4>
<h5>Example</h5>
<p>Currently many web based calendars require settings to be changed to suit the locale. Users may not be aware of the start of the week in the locale e.g. Sunday in the Middle East and be unable to take appropriate actions to suit their needs.</p>
<p><strong>Pass example: </strong>Calendar settings recognize locale and/or offer the ability to edit settings</p>
<p><strong>Failure example: </strong>Incorrect punctuation and poorly localized date layout.</p>
<h5>Example</h5>
<p>The booking form provides two calendars and user is able to select dates without warning as to whether they are possible e.g. flight out on June 1st - flight return May 30th.</p>
<p><strong>Pass example:</strong>User is unable to select inappropriate dates and/or simple explanation provided should he/she do so. </p>
<p><strong>Failure example: </strong>User can select inappropriate dates without warning. Calendar merely grays out inappropriate dates which may not be noticed. No warnings provided. </p>
<h5>Example</h5>
<p>The booking form provides the option to select a short series of terms such as 'today' or 'tomorrow' as well as presenting a calendar. This can speed booking times for those who have failed to organize their booking times in advance as well as those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load or situationally disabled. </p>
<p><strong>Pass example:</strong> User is able to select text based terms for days near to the appropriate booking times not just calendar dates. </p>
<p><strong>Failure example: </strong>Only calendar provided</p>
<h5>Example</h5>
<p>In USA the month appears before the day which is reversed in UK e,g 06/01/2015 or 01/06/2015. Further dyslexics and other user groups will not often confuse the order.</p>
<p><strong>Pass example:</strong> Month is given in text with numbers for date and year.</p>
<p><strong>Failure example: </strong>A series of numbers for the date.</p>
<h5>Example</h5>
<p>The international standard notation for the time of day is hh:mm:ss but this can be hard for those with cognitive impairments to fully comprehend - 10:30:10 may be read out as 10 hours, thirty minutes and 10 seconds by most text to speech engines but may be too long to remember. The ISO advises the 24 hour clock for example 13:30 as opposed to 01.30pm - the latter is localized for English speakers but may help those with learning disabilities along with symbols to represent the period in the day such as suggest under calendars. </p>
<p>Being able to hear the numbers for time repeatedly read out aloud accurately with 'text to speech' technologies can help comprehension and memory. Developers need to be aware of how these technologies react to time formats. This feature can provide those with dyscalculia, dyslexia and attention deficit disorder and those who may be under high cognitive load or situationally disabled with a better understanding of the concepts.</p>
<p><strong>Pass example: </strong>Numbers representing time can be read out accurately by text to speech engines.</p>
<p><strong>Failure example:</strong> Numbers fail to be read out accurately by text to speech engines. </p>
<h5>Example </h5>
<p>Even with all of the above in place a person may not be able to marry up the concept of temperature with the numbers so giving additional hints may help make the link to whether something is hot or cold.</p>
<p>Use symbols where appropriate for example for weather the symbols used such as sun, snowflake, sun & cloud will give some indication. </p>
<p>Pass example: The Temperature is Five Degrees Centigrade (Cold) <img src="img/SnowFlake.png" height="67" width="61" alt="snowflake" style="margin: 0px auto;"> hint: It's hat and scarf weather. </p>
<p>Failure example: Failure to explain figures representing relative values. Temperature = 21℃/70℉</p>
<p>The Temperature is Thirty Degrees Centigrade (Very hot) <img src="img/sun.png" height="62" width="62" alt="sun" style="margin: 0px auto;"> hint: It's shorts weather </p>
<h5>Examples</h5>
<p>A maths equation using MathML read aloud with MathJax https://www.mathjax.org/</p>
<p><strong>Pass example:</strong> Use of MathML for maths notation http://www.w3.org/TR/MathML/ . Aria described by is used to sync any text describing sections of equations.</p>
<p><strong>Failure example:</strong> Use of symbols as graphics without explanations.</p>
<p>Use for tags: dyscalculia, dyslexia, attention deficit disorder.</p>
<p>
<h5>Example</h5>
<p>Providing text or shortened forms of currency representations with explanations:</p>
<ul>
<li>€ 234,56 Euro</li>
<li>£ 234,56 British Pounds</li>
<li>$ 234,56 US Dollars</li>
</ul>
<p>Pass example: Providing standardised text or shortened forms of currency representations. </p>
<p>Failure example: Failure to provide standardised, recognised currency symbols or text short form in the appropriate position.</p>
<p>Use for tags: All</p>
</p></section><section>
<h5>Sources/research</h5>
<p>Research carried out by Neil Milliken with web users who have dyscalculia - case studies.</p>
<p>ISO 4217 Currency Codes <a href="http://www.xe.com/iso4217.php">http://www.xe.com/iso4217.php</a></p>
<p>WCAG 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A) WCAG advises providing symbol before the number as part of the W3C working draft on <a href="http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/content-structure-separation-programmatic#content-structure-separation-programmatic-intent-head">http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/content-structure-separation-programmatic#content-structure-separation-programmatic-intent-head</a></p>
<p>Mathematical Markup Language (MathML) Version 3.0 2nd Edition W3C Recommendation 10 April 2014 <a href="http://www.w3.org/TR/MathML/">http://www.w3.org/TR/MathML/</a></p>