-
Notifications
You must be signed in to change notification settings - Fork 27
/
semantics.html
2255 lines (2201 loc) · 106 KB
/
semantics.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>Personalization Semantics 1.0</title>
<meta charset="utf-8"/>
<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: "personalization-semantics-1.0",
// if you wish the publication date to be other than today, set this
//publishDate: "2017-05-09",
copyrightStart: "2017",
// 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/personalization-semantics/",
// 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: "[email protected]",
w3cid: 16320
},
{
name: "Rich Schwerdtfeger",
w3cid: 2460
},
{
name: "Michael Cooper",
url: 'https://www.w3.org',
mailto: "[email protected]",
company: "W3C",
companyURI: "http://www.w3.org",
w3cid: 34017
}
],
// 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: "Accessible Rich Internet Applications Working Group",
// URI of the public WG page
wgURI: "https://www.w3.org/WAI/ARIA/",
// name (with the @w3c.org) of the public mailing to which comments are due
wgPublicList: "public-aria",
// 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: "https://www.w3.org/2004/01/pp-impl/83726/status",
//maxTocLevel: 2,
localBiblio: biblio,
// Spec URLs
ariaSpecURLs: {
"ED": "https://w3c.github.io/aria/aria/aria",
"FPWD": "https://www.w3.org/TR/wai-aria-1.1/",
"WD" : "https://www.w3.org/TR/wai-aria-1.1/",
"CR": "https://www.w3.org/TR/wai-aria-1.1/",
"REC": "https://www.w3.org/TR/wai-aria-1.1/"
},
};
</script>
<link href="common/css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="abstract">
<p>Personalization involves tailoring aspects of the user experience to meet the needs and preferences of the user. For example, having familiar terms and symbols is key to many users being able to use the web. However, what is familiar for one user may be unfamiliar to another requiring them to learn new symbols. The challenge has been the ability to identify the types of content in a document that should be adapted to the preferred user experience. The introduction of standardized semantics allows web applications to customize the exposure of that content to one that is familiar to individuals based on their needs and preferences. This specification defines standard semantics to enable user driven personalization such as the association of a user-preferred symbols to elements having those semantics. This ensures that users can quickly find familiar icons, such as a help icon, that apply to user interface elements.</p>
</section>
<section id="sotd"> </section>
<section class="informative" id="introduction">
<h1>Introduction</h1>
<p>The goals of this specification include:</p>
<ul>
<li> expanding the accessibility information that may be supplied by the author;</li>
<li> facilitate preference driven individual personalization;</li>
<li> enable the author to specify key semantics needed to support users with cognitive impairments</li>
</ul>
<p>This is a proposal to define syntax for adaptable content such as: links, buttons, symbols, help and keyboard. This may be an WAI-ARIA COGA Extension.</p>
<p>Personalization involves tailoring aspects of the user experience to meet the preferences or needs of the user. For example, having familiar terms and symbols is key to being able to use the web. However what is familiar for one user may be new for another requiring them to learn new symbols. Personalization could include loading a set of symbols that is appropriate for the specific user, ensuring that all users find the icons simple and familiar.</p>
<p>Technology holds the promise of being extremely flexible and the design of many systems includes the expectation that users will be able to optimize their interaction experience according to their personal preferences or accessibility requirements (needs). </p>
<section class="section" id="why_accessibility">
<h2>Why We Need Personalization</h2>
<p>We need personalization because: </p>
<ul>
<li>Different user needs can conflict</li>
<li>Learning new design patterns (and widgets) can be confusing - we want to allow users to stick with what works for them </li>
<li>Extra support can be annoying to people who do not need it </li>
<li>Making content predictable is necessary for accessibility but can often be considered boring design </li>
<li>Ability to change levels of complexity (increase or decrease) - As people skills improve or decrease over time or context. </li>
<li>Enable us to really meet the user needs </li>
</ul>
<p>Some users need extra support. This can include: </p>
<ul>
<li> Symbols and graphics that they are familiar with </li>
<li> Tool tips </li>
<li> Language they understand </li>
<li> Less features </li>
<li> Separating advertisements, so they do not confuse them with native content </li>
<li> Keyboard short cuts </li>
</ul>
<p>For this we need standardized terms and supportive syntax that can be linked to associated symbols, terms, translations and explanations for the individual use via an attribute and personal preferences. </p>
<p>For example, assume an author can make it programanticaly known that a button is used to send an email. At at the user end, the button could be renderer with a symbol, term, and/or tooltips that is understandable for this particular user. It could automatically imply F1 help that explains the send function in simple terms. It could be identified with a keyboard short cut that will always be used for send. In addition it could be identified as important and always rendered, or rendered as a large button. </p>
<p>Working examples of how this could be used in practice, with user preferences, are available at <a href="https://github.com/ayelet-seeman/coga.personalisation">https://github.com/ayelet-seeman/coga.personalisation</a>. This is a project to help personalization for any use - including people with learning and memory issues. It is described more at: <a href="https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Easy_Personalization">https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Easy_Personalization</a>. </p>
<p>This project consists of 4 parts:</p>
<ol>
<li><a href="https://github.com/ayelet-seeman/coga.personalisation/tree/JSON-Script">JSON files for user setting</a></li>
<li>Proposal for new syntax: (This document) <br /></li>
<li>An HTML page that uses some of the new syntax: <a href="https://github.com/ayelet-seeman/coga.personalisation/tree/ExampleWebPage/">https://github.com/ayelet-seeman/coga.personalisation/tree/ExampleWebPage/</a></li>
<li>Scripts that a web author can use or include that read the user settings in the JSON files and adapt the page for the user needs: <a href="https://github.com/ayelet-seeman/coga.personalisation/tree/Script-Options">https://github.com/ayelet-seeman/coga.personalisation/tree/Script-Options</a></li>
</ol>
<p>This is one example of personalization based on semantics. Others may follow. It is also worth noting that the GPII project is working on making user preferences portable which would also enhance this work.</p>
<p>In another use-case we would like to see interoperable symbol set codes for non-verbal people. Products for people who are non vocal often use symbols to help users communicate. These symbols are in fact peoples language. Unfortunately many of these symbols are both subject to copy write and are not interoperable. That means end-users can only use one device, and can not use apps or AT from a different company. An open set of references for symbol codes for these symbol sets however, could be interoperable. That means the end user could use an open source symbol set or buy the symbols and use them across different devices or applications. Symbols could still be proprietary but they would also be interoperable. </p>
</section>
<section class="section" id="intro_context">
<h2>Contextual Personalization</h2>
<p>One important factor in optimizing the personalization of a product or service is to ensure that the personalization is appropriate for the current context of use. For example, settings that will suit the user of a mobile phone in their office or home will not be well suited to that user when they are driving a car. In a home or office, the typical user would probably prefer to send and receive text messages using the keyboard and screen of the mobile phone. However, in the car, voice input and text to speech output would be the most appropriate. In this car context, the profile settings of a typical user might be very similar to those that a blind user would use in all contexts.</p>
</section>
</section>
<section class="informative" id="terms">
<h1>Important Terms</h1>
<div data-include="common/terms.html" data-oninclude="restrictReferences"></div>
</section>
<section class="normative" id="semanticProperties">
<h1>Personalization Use Cases</h1> This Section covers use cases that can be addressed by personalization, and references the vocabulary items that help meet the use cases.<section>
<h2>Simplification</h2>
<p><strong>Requirement</strong>: The user must be able to request a way to identify and differentiate between critical features, medium features and less important features. These need to be defined as important from a user perspective in the content. Typically, critical features may be used by many or most users, 90% of the time or more. High important features would be above 60% use. Medium important features would be 20% of users use it 20% of the time . Under 20% usage would be of low importance.</p>
<p><strong>User experience</strong>: Based on personalization setting the user can see less options. A sample user experience is available at <a href="https://rawgit.com/ayelet-seeman/coga.personalisation/demo/conactUs.html">https://rawgit.com/ayelet-seeman/coga.personalisation/demo/conactUs.html </a></p>
<p>Relevant properties: <a href="#simplification">simplification</a></p>
</section>
<section>
<h2>Adding Context </h2>
<p><strong>Requirement:</strong> Having familiar terms and symbols is key to being able to use the web. However what is familiar for one user may be strange for another requiring them to learn new symbols. If a user agent or script knows the context of links, buttons, and other page elements then symbols and text used can be ones that the user understands. This can include: </p>
<ul>
<li> Symbols and graphics that they are familiar with </li>
<li> Tool tips </li>
<li> Language the use can understand </li>
<li> Keyboard short cuts </li>
</ul>
<p>For that we need to standardize supportive syntax and terms that can be linked to associated symbols, terms, translations and explanations, for the individual, via an attribute.</p>
<p><strong>Example user experience:</strong>, if an author gives to a button a role "send" then, without any work by the author, the button could be automatically rendered with a symbol, term, and/or tooltips that is understandable by a particular user. It could automatically imply F1 help that explains the send function in simple terms. It could be identified with a keyboard short cut that will always be used for send. In addition it could be identified as important and always rendered, or rendered as a large button. This would enable a consistent UI experience across applications and websites.</p>
<p>Relevant properties: <a href="#action">action</a>, <a href="#destination">destination</a>, <a href="#field">field</a></p>
<section>
<h2>General context</h2>
<p><strong>Requirement: </strong> One important factor in optimizing the personalization of a product or service is to ensure that the personalization is appropriate for the current context of use as well as what is relevant for the user. For example a female user with a cognitive disability may need less options, and options that are for men are less likely to be relevant for her and may be demoted to bellow the scroll or placed under a "more option" button.</p>
<p>Relevant properties: <a href="#context">context</a></p>
</section>
<section>
<h2>Interoperable symbols</h2>
<p><strong>Requirement: </strong>We would like to enable interoperable symbol set codes for Non verbal people. Products for people who are non vocal often use symbols to help users communicate. These symbols are in fact peoples language. Unfortunately many of these symbols are both subject to copy write AND not interoperable. That means end-users can only use one device, and can not use apps or AT from a different company. There are open set of symbol codes for these symbol sets, that could be referenced then they can be interoperable. alternatively wordnet nodes could be referenced. If the users symbols are mapped to the same nodes then users agents will be able to load the user understandable symbol. That means the end use could buy the symbols and use them across different devices or applications. They would still be proprietary but they would also be interoperable. </p>
<p>User experience: AAC users will load symbols that they understand in different applications that are made by a different provider.</p>
<p>Relevant properties: <a href="#concept">concept</a></p>
</section>
</section>
<section>
<h2>Potential parts of a page</h2>
<p><strong>Requirement:</strong> The following could be extensions for aria landmarks or ePub </p>
<p><strong>User experience:</strong> symbols and colors could be used consistently across different content. </p>
<p>Links (such as ePub nav maps) can be automatically generated for people learn via keypoints or examples.</p>
<p><strong>Examples:</strong>
</p>
<ul>
<li>key points </li>
<li>example </li>
<li>note </li>
<li>warning </li>
<li>step </li>
<li>external - for external content, such as sponsored or advertising </li>
<li>offers - for special offers that are complementary to the main content or task </li>
<li>advertisement - advertisement or sponsored content </li>
</ul>
<p>Relevant properties: @@</p>
</section>
<section>
<h2>Number free</h2>
<p><strong>Requirement</strong>: Not everyone can understand numbers. We therefor suggest aui-numberfree for alternative text for people who can not understand the main content</p>
<p><strong>User experience:</strong></p>
<p>A suggested user experience would be: Numerical concepts could be rendered by the user agent slightly different so that the user knows a number free explanation is available. The user can then mouse over the content and a tooltips would give the number free value</p>
<p>Relevant properties: <a href="#numberfree">numberfree</a></p>
</section>
<section>
<h2>Non-literal text and images</h2>
<p><strong>Requirement: </strong>Not everyone can understand non-literal text and icons such as metaphors, idioms etc. We need a tag that identifies text or images as non literal and allows the author to explain non-literal text and images to users.</p>
<p><strong>User experience:</strong></p>
<p>A suggested user experience would be: Non literal content could be rendered by the user agent slightly differently so that the user knows that this content should not be taken literally and that a literal explanation is available. The user can then mouse over the content and a tooltips would give the literal value.</p>
<p>Relevant properties: <a href="#literal">literal</a></p>
</section>
<section>
<h2>Explain and feedback</h2>
<p><strong>Requirement: </strong></p>
<p>Some users need additional help. We request an attribute where the author can provide additional information or what just happened.</p>
<p>Relevant properties: <a href="#feedback">feedback</a>, <a href="#explain">explain</a></p>
</section>
<section>
<h3>More Help</h3>
<p><strong>Requirement: </strong>Some users may need additional information or specifically additional help information. We request additional attributes so that an author can indicate the existence of this additional information.</p>
<p>Relevant properties: <a href="#moreinfo">moreinfo</a>, <a href="#extrahelp">extrahelp</a>, <a href="#helptype">helptype</a></p>
</section>
<section>
<h2>Potential Features</h2>
<p>The following may not be necessary </p>
<ul>
<li>Views </li>
<li>ascending. descending </li>
<li>day, week month </li>
<li>this week </li>
<li>this month </li>
<li>today </li>
</ul>
</section>
<section>
<h2>Language type support</h2>
<p><strong>Requirement: </strong>Sometimes you may want to provide a simplified version of a section of a page. For example, you may wish to provide a simplified summary of legal document, but still have a longer version for other users. These alternative versions may not be identical in content but maintain the gist of the original content.</p>
<p>Relevant properties: <a href="#alternative">alternative</a>, <a href="#easylang">easylang</a></p>
</section>
<section>
<h3 id="logs">Logs</h3>
<p>This proposal is to track the tasks that a user has done, so that they can be reminded of them, and return to or fix a task. The suggested syntax should allow the author to transform some of the information into breadcrumbs via CSS, and the user system can read and present more or less information to the user as per their preferences.</p>
<p>Preferably this should be in the header so that the user agent can build a cross application log of user tasks.</p>
<p>Note that there is no default value.</p>
<p>Relevant properties: <a href="#log">log</a>, <a href="#step">step</a>, <a href="#actiontaken">actiontaken</a>, <a href="#steplocation">steplocation</a>, <a href="#status">status</a></p>
<section>
<h4>Log usage examples</h4>
<pre><div aui-log="booking trip" aui-step="1" aria-label="buy ticket" aria-hidden="true"
aui-actiontaken="bought ticket to NY return" steplocation ="uri" /></pre>
<p>or</p>
<pre><div aui-log="booking trip" aui-step="1" aui-actiontaken="bought ticket to NY return">
buy ticket
<a href="uri">change</a>
</div></pre>
<p>or the step number can be implied by the DOM</p>
<pre><div aui-log="booking trip">
<div aui-actiontaken="bought ticket to NY return">
buy ticket
<a href="uri">change</a>
</div>
</div></pre>
</section>
<section>
<h4>Alternative syntax for log</h4>
<p>Note we are considering supporting an alternative syntax such as:</p>
<pre><log name="booking trip">
<step status ="done">
<name>buy ticket</name>
<actiontaken>bought ticket to NY return</actiontaken>
<view changepossible="yes">url </view>
</step>
<step status ="done">
<name>hotel</name>
<actiontaken>booked Sheraton single room</actiontaken>
<view changepossible="yes">url </view>
</step>
<step status ="current">
<name>car rental</name>
<view current changepossible="yes"/>
</step>
</log>
</pre>
</section>
</section>
<section>
<h3>Reminders and messages</h3>
<p><strong>Requirement: </strong>We require an attribute that enables different users to experience different amount of reminders and messages based on personal preferences. Reminders are a wonderful tool for many people with cognitive disabilities. However too many reminders will be annoying or distracting for some other users. Currently people can turn off distractions such as Skype, and Facebook, across different devices, and then may forget to turn them back on.</p>
<p>These semantics allow for different solutions so that users are able to focus without missing important messages. Users need to manage all distractions by forming a cross application and cross device distraction matrix that manages all distractions in one setting. It is based on a matrix for distractions at the operating system , browser or cloud level. People and users can be clustered in terms of importance or groups. For example, the CEO and your child's care giver could both be considered critical contacts. So even if they do not feel the message is urgent they can sometimes disrupt the user anyway. Some family members and important colleagues can be in another group, friends and extended family in a third group, system messages from the compliance system can be a different group again. </p>
<p>Relevant properties: <a href="#messageimportance">messageimportance</a>, <a href="#messagefrom">messagefrom</a>, <a href="#messagecontext">messagecontext</a>, <a href="#messagetime">messagetime</a></p>
</section>
<section>
<h2>Distractions</h2>
<p><strong>Requirement: </strong> We require an attribute that indicates a distraction so that some users may be able to remove them from content.</p>
<p>Relevant properties: <a href="#distraction">distraction</a></p>
</section>
<section>
<h2>New Misc.</h2> Triggers: for emotional support. aui-trigger: violent, racism, etc. aui-keyparts of the page: key points, example, note, warning, external (content), advertisements, (some may be in digital publishing) aui-dates - (cancellation, return) </section>
</section>
<section id="characteristics_semanticproperties">
<h2>Structure of Properties</h2>
<p>Semantic properties have the characteristics described in the following sections.</p>
<section id="propcharacteristic_relatedconcept">
<h3>Related Concepts</h3>
<p>Advisory information about features from this or other languages that correspond to this <a>property</a>. While the correspondence may not be exact, it is useful to help understand the intent of the state or property.</p>
</section>
<section id="propcharacteristic_value">
<h3>Value</h3>
<p>Value type of the semantic <a>property</a>. The value may be one of the following types:</p>
<dl>
<dt id="valuetype_true-false">true/false</dt>
<dd>Value representing either true or false, with a default "false" value.</dd>
<dt id="valuetype_true-false-undefined">true/false/undefined</dt>
<dd>Value representing true or false, with a default "undefined" value indicating the state or property is not relevant.</dd>
<dt id="valuetype_idref">ID reference</dt>
<dd>Reference to the ID of another <a>element</a> in the same document</dd>
<dt id="valuetype_idref_list">ID reference list</dt>
<dd>A list of one or more ID references.</dd>
<dt id="valuetype_integer">integer</dt>
<dd>A numerical value without a fractional component.</dd>
<dt id="valuetype_number">number</dt>
<dd>Any real numerical value.</dd>
<dt id="valuetype_string">string</dt>
<dd>Unconstrained value type.</dd>
<dt id="valuetype_token">token</dt>
<dd>One of a limited set of allowed values.</dd>
<dt id="valuetype_token_list">token list</dt>
<dd>A list of one or more tokens.</dd>
<dt id="valuetype_uri">URI</dt>
<dd>A Uniform Resource Identifier as defined by <cite><a href="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a></cite> [[RFC3986]]. It may reference a separate document, or a content fragment identifier in a separate document, or a content fragment identifier within the same document.</dd>
</dl>
<p>The "undefined" value, when allowed on a state or property, is an explicit indication that the state or property is not set. The value is used on states and properties that support tokens, and the "undefined" value is a string that is one of the allowed tokens. It is also used on some states and properties that accept true/false values, when "undefined" has a different meaning than "false".</p>
<p>These are generic types for states and properties, but do not define specific representation. See <a href="#state_property_processing" class="specref">State and Property Attribute Processing</a> for details on how these values are expressed and handled in host languages.</p>
</section>
</section>
<section>
<h2>List of properties</h2>
<section class="property">
<h3>simplification</h3>
<div class="property-description">
<p>The <code>simplification</code> attribute differentiates between critical features and less important features for simplification.</p>
<p>This allows simplified interfaces with less options or interfaces that emphasize critical features. Adaptations can be based on personalization settings. </p>
<div class="example"><div class="example-title marker"><span>Example:</span><span style="text-transform: none"> Simplification Using ARIA</span></div>
<input aui-simplification="critical" aria-function="submit" value="Submit" type="submit"/>
</div>
<p class="ednote">This was formerly aui-importance. However different people may feel that sections that would be hidden in a simplified version are still very important, such as marketing content or legal terms.)</p>
<div class="note">
<p>These semantics aid simplification. But what content is most useful to a user varies from user to user. For example, men may be more interested in mens clothing, and may not be interested in the more frequently use womens clothing option. For that reason we may add context for elements that will help the personalization agent select the most useful content for a given user (see the <a href="#context">context</a> attribute). This is also necessary for reminders (see bellow).</p>
<p>It is worth mentioning that a lot of this information is known for personalization of advertisements and content optimization. </p>
</div>
</div>
<table class="property-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="property-related-head" scope="row">Related Concepts:</th>
<td class="property-related"><cite><a href="https://www.w3.org/TR/SVG2/"><abbr title="Scalable Vector Graphics">SVG</abbr></a></cite> [[SVG2]] and <cite><a href="https://www.w3.org/TR/dom/"><abbr title="Document Object Model">DOM</abbr></a></cite> [[DOM4]] active</td>
</tr>
<tr>
<th class="property-applicability-head" scope="row">Used in Roles:</th>
<td class="property-applicability">All elements of the base markup</td>
</tr>
<tr>
<th class="property-descendants-head" scope="row">Inherits into Roles:</th>
<td class="property-descendants">Placeholder</td>
</tr>
<tr>
<th class="property-value-head" scope="row">Value:</th>
<td class="property-value"><a href="#valuetype_token">token</a></td>
</tr>
</tbody>
</table>
<table class="value-descriptions">
<caption>Values:</caption>
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th class="value-name" scope="row">simplest</th>
<td class="value-description">This setting should be used on: <ul>
<li> Elements that are essential for the key function (from the user perspective) of the page (Example: The send button for an email draft in an email application) or</li>
<li> Elements that are sometimes critical to a user being able to use the site, such as "save my work" or "emergency instructions" or</li>
<li> Elements that are used by over 90% of a user group (such as parents or teachers) use this element most times they use the content<br />
</li>
</ul>
<p>Typically 3 links or buttons would be considered "simplest"</p></td>
</tr>
<tr>
<th class="value-name" scope="row"><strong class="default">medium (default)</strong></th>
<td class="value-description">
This setting should be used on: <ul>
<li> Elements that are used frequent but are not essential for the key functioning pf the application. (Example: The delete button for an email draft in an email application) or</li>
<li> Elements that are sometimes important to a user being able to use the site, such as settings or</li>
<li> Elements that are used by frequently (over 60%) by a user group (such as parents or teachers) use this element most times they use the content</li>
</ul></td>
</tr>
<tr>
<th class="value-name" scope="row">low</th>
<td class="value-description">This setting should be used on elements that are rarely used or only used by advanced users. (Example: The terms and services or the archive button for an email application.)
</td>
</tr>
</tbody>
</table>
</section>
<section class="property">
<h3>action</h3>
<div class="property-description">
<p>The <code>action</code> attribute provides the context of a button. It is typically used on a button element or element with role="button".</p>
<pre class="example" title="Action Using ARIA">
<p>For example: <button aui-action="undo" >Revert</button></p>
<p>A personalization agent may add a symbol, replace the text with a more familiar term, or give it a specific presentation. Note that there is no default value.</p>
</pre>
</div>
<table class="property-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="property-related-head" scope="row">Related Concepts:</th>
<td class="property-related"><cite><a href="https://www.w3.org/TR/html5/links.html#linkTypes">link types</a></cite> [[Links]] and <cite><a href="https://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute"><abbr title="Hypertext Markup Language ">HTML </abbr> types</a></cite> [[Types]]</td>
</tr>
<tr>
<th class="property-applicability-head" scope="row">Used in Roles:</th>
<td class="property-applicability">All elements of the base markup</td>
</tr>
<tr>
<th class="property-descendants-head" scope="row">Inherits into Roles:</th>
<td class="property-descendants">Placeholder</td>
</tr>
<tr>
<th class="property-value-head" scope="row">Value:</th>
<td class="property-value"><a href="#valuetype_token">token</a></td>
</tr>
</tbody>
</table>
<p>The following could be supported values of <code>aui-action</code> for buttons:</p>
<table class="value-descriptions">
<caption>Values:</caption>
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th class="value-name" scope="row">compose</th>
<td class="value-description">compose new item such as an email. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">next</th>
<td class="value-description">move to the next item in the series. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">delete</th>
<td class="value-description">delete current item, selected control or text</td>
</tr>
<tr>
<th class="value-name" scope="row">previous</th>
<td class="value-description">move to the previous item in the series. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">toc</th>
<td class="value-description">opens a table of content</td>
</tr>
<tr>
<th class="value-name" scope="row">submit</th>
<td class="value-description">submits the form data or request to the server. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">undo</th>
<td class="value-description">revert to the state before the user's most recent changes</td>
</tr>
<tr>
<th class="value-name" scope="row">cancel</th>
<td class="value-description">closes the dialog and discards any changes the user may have made within that dialog. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">reset</th>
<td class="value-description">resets all the controls to their initial values</td>
</tr>
<tr>
<th class="value-name" scope="row">label</th>
<td class="value-description">add label to the selected item or the item at the current location.</td>
</tr>
<tr>
<th class="value-name" scope="row">buy</th>
<td class="value-description">buy the selected item or buy the item at the current location. Often involves adding the current item into a shopping cart. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">add</th>
<td class="value-description">add the selected item or the item at the current location to a list</td>
</tr>
<tr>
<th class="value-name" scope="row">move</th>
<td class="value-description">move the selected item <p class</td>
</tr>
<tr>
<th class="value-name" scope="row">save</th>
<td class="value-description">save the current content. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">send</th>
<td class="value-description">send a form, email or request. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">close</th>
<td class="value-description">close current dialog. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">more</th>
<td class="value-description">show more information <p class="ednote" > We may need more work to identify the dirction (up left degree etc) but there may be a way to do that already </p></td>
</tr>
<tr>
<th class="value-name" scope="row">print</th>
<td class="value-description">print current page, selection or the item at the current location</td>
</tr>
<tr>
<th class="value-name" scope="row">received</th>
<td class="value-description">open received folder</td>
</tr>
<tr>
<th class="value-name" scope="row">sent</th>
<td class="value-description">open sent folder</td>
</tr>
<tr>
<th class="value-name" scope="row">edit</th>
<td class="value-description">edit current item, selection or the item at the current location</td>
</tr>
<tr>
<th class="value-name" scope="row">forward</th>
<td class="value-description">forward to current item such as an email</td>
</tr>
<tr>
<th class="value-name" scope="row">reply</th>
<td class="value-description">reply to current item such as an email. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">upload</th>
<td class="value-description">upload file to the server</td>
</tr>
<tr>
<th class="value-name" scope="row">open</th>
<td class="value-description">open item. (Implied simplification = "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">new</th>
<td class="value-description">open new item. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">settings</th>
<td class="value-description">open settings and options</td>
</tr>
<tr>
<th class="value-name" scope="row">mode</th>
<td class="value-description">change the mode or functionality. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">higher</th>
<td class="value-description">increases the level of the relevant setting. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">lower</th>
<td class="value-description">increases the level of the relevant setting. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">profile</th>
<td class="value-description">opens the user's profile page</td>
</tr>
<tr>
<th class="value-name" scope="row">expand</th>
<td class="value-description">expand or unexpand the current item</td>
</tr>
<tr>
<th class="value-name" scope="row">refresh</th>
<td class="value-description">manually refresh the current contents of the screen</td>
</tr>
<tr>
<th class="value-name" scope="row">properties</th>
<td class="value-description">shows the properties of the item</td>
</tr>
<tr>
<th class="value-name" scope="row">help</th>
<td class="value-description">opens a help function. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">cut</th>
<td class="value-description">removes the selected control, item or text and places it on the Clipboard</td>
</tr>
<tr>
<th class="value-name" scope="row">copy</th>
<td class="value-description">copies the selected control, item or text onto the Clipboard</td>
</tr>
<tr>
<th class="value-name" scope="row">color</th>
<td class="value-description">opens a color picker</td>
</tr>
<tr>
<th class="value-name" scope="row">date</th>
<td class="value-description">opens a date control. (Implied simplification= "critical".)</td>
</tr>
<tr>
<th class="value-name" scope="row">remove</th>
<td class="value-description">remove an item from a list</td>
</tr>
<tr>
<th class="value-name" scope="row">right</th>
<td class="value-description">moves a selected item to the right to another column or list</td>
</tr>
<tr>
<th class="value-name" scope="row">left</th>
<td class="value-description">moves a selected item to the left to another column or list</td>
</tr>
</tbody>
</table>
</section>
<section class="property">
<h3>destination</h3>
<div class="property-description">
<p>The <code>destination</code> term categorizes the target of a hyperlink.</p>
<p>A personalization agent or user agent may add additional familiar user interface features to help users understand the link and follow the right one easily. User agents might add a familiar customized icon to the link, or style the link in a customized way, or position the link on the page in a location that the user generally expects to find a link of the particular type.</p>
<pre class="example" title="Destination Using ARIA"><a href="home.html" aui-destination="home">our main page</a></pre>
<p>See the <a href="https://rawgit.com/ayelet-seeman/coga.personalisation/demo/conactUs.html">destination sample user experience</a>.</p>
</div>
<table class="property-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="property-related-head" scope="row">Related Concepts:</th>
<td class="property-related"><cite><a href="https://www.w3.org/TR/html5/links.html#linkTypes">link types</a></cite> [[Links]] and <cite><a href="https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute"><abbr title="Hypertext Markup Language ">HTML </abbr> autocomplete</a></cite> [[Autocomplete]] </td>
</tr>
<tr>
<th class="property-applicability-head" scope="row">Used in Roles:</th>
<td class="property-applicability">All elements of the base markup</td>
</tr>
<tr>
<th class="property-descendants-head" scope="row">Inherits into Roles:</th>
<td class="property-descendants">Placeholder</td>
</tr>
<tr>
<th class="property-value-head" scope="row">Value:</th>
<td class="property-value"><a href="#valuetype_token">token</a></td>
</tr>
</tbody>
</table>
<table class="value-descriptions">
<caption>Values:</caption>
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th class="value-name" scope="row">home</th>
<td class="value-description">initial or main page of a website or application</td>
</tr>
<tr>
<th class="value-name" scope="row">contact</th>
<td class="value-description">opens contact information for content owner or producer</td>
</tr>
<tr>
<th class="value-name" scope="row">phone</th>
<td class="value-description">phone content owner or producer</td>
</tr>
<tr>
<th class="value-name" scope="row">email</th>
<td class="value-description">email content owner or producer</td>
</tr>
<tr>
<th class="value-name" scope="row">sitemap</th>
<td class="value-description">content containing a list of pages in a web site</td>
</tr>
<tr>
<th class="value-name" scope="row">help</th>
<td class="value-description">a help function, support or instructions</td>
</tr>
<tr>
<th class="value-name" scope="row">chat</th>
<td class="value-description">Human help or a dialog help function such as a chat bot</td>
</tr>
<tr>
<th class="value-name" scope="row">about</th>
<td class="value-description">information about the content owner or producer</td>
</tr>
<tr>
<th class="value-name" scope="row">terms</th>
<td class="value-description">terms and conditions</td>
</tr>
<tr>
<th class="value-name" scope="row">tools</th>
<td class="value-description">available tools for the current content</td>
</tr>
<tr>
<th class="value-name" scope="row">services</th>
<td class="value-description">services available from the content provider</td>
</tr>
<tr>
<th class="value-name" scope="row">products</th>
<td class="value-description">products available from the content provider</td>
</tr>
<tr>
<th class="value-name" scope="row">comment</th>
<td class="value-description">submit a comment on the current item</td>
</tr>
<tr>
<th class="value-name" scope="row">language</th>
<td class="value-description">language options</td>
</tr>
<tr>
<th class="value-name" scope="row">signin</th>
<td class="value-description">sign in to current web site or application</td>
</tr>
<tr>
<th class="value-name" scope="row">signout</th>
<td class="value-description">sign out current web site or application</td>
</tr>
<tr>
<th class="value-name" scope="row">register</th>
<td class="value-description">register for the current web site or application</td>
</tr>
<tr>
<th class="value-name" scope="row">social</th>
<td class="value-description">content provider on social media</td>
</tr>
<tr>
<th class="value-name" scope="row">post</th>
<td class="value-description">post current item. Item will be visible to other parties.</td>
</tr>
</tbody>
</table>
</section>
<section class="property">
<h3>field</h3>
<div class="property-description">
<p><code>field</code> provides the context of a text input field such as a text box. It is typically used on an input of type text, or element with a responding role.</p>
<pre class="example" title="Fields Using ARIA">
<p><input type="text" name="fname" aui-field="phone"/></p>
</pre>
<p>A personalization agent may add a symbol, replace the text with a more familiar term, or give it a specific presentation. Note that there is no default value.</p><p>The user experience may include filling in the field and adding an icon.</p>
<p>aui-field values that would typically be on form controls and would have a user context - for example phone would relate to the user's phone. Note that there is no default value.</p>
<p>Note they can be more then one value for a field, such as <code>aui-field="country postcode"</code></p>
</div>
<table class="property-features">
<caption>Characteristics:</caption>
<thead>
<tr>
<th scope="col">Characteristic</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th class="property-related-head" scope="row">Related Concepts:</th>
<td class="property-related"><cite><a href="https://www.w3.org/TR/html5/links.html#linkTypes">link types</a></cite> [[Links]] and <cite><a href="https://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute"><abbr title="Hypertext Markup Language ">HTML </abbr> types</a></cite> [[Types]]</td>
</tr>
<tr>
<th class="property-applicability-head" scope="row">Used in Roles:</th>
<td class="property-applicability">All elements of the base markup</td>
</tr>
<tr>
<th class="property-descendants-head" scope="row">Inherits into Roles:</th>
<td class="property-descendants">Placeholder</td>
</tr>
<tr>
<th class="property-value-head" scope="row">Value:</th>
<td class="property-value"><a href="#valuetype_token">token</a></td>
</tr>
</tbody>
</table>
<table class="value-descriptions">
<caption>Values:</caption>
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th class="value-name" scope="row">name</th>
<td class="value-description">full name</td>
</tr>
<tr>
<th class="value-name" scope="row">honorific-prefix</th>
<td class="value-description">prefix or title (Mr., Mrs. Dr., etc.) </td>
</tr>
<tr>
<th class="value-name" scope="row">given-name</th>
<td class="value-description">given or first name</td>
</tr>
<tr>
<th class="value-name" scope="row">additional-name</th>
<td class="value-description">additional or middle name</td>
</tr>
<tr>
<th class="value-name" scope="row">additional-name-initial</th>
<td class="value-description">additional or middle name initial</td>
</tr>
<tr>
<th class="value-name" scope="row">family-name</th>
<td class="value-description">family name, surname, or last name</td>
</tr>
<tr>
<th class="value-name" scope="row">honorific-suffix</th>
<td class="value-description">suffix (Jr., II, etc.)</td>
</tr>
<tr>
<th class="value-name" scope="row">nickname</th>
<td class="value-description">nickname</td>
</tr>
<tr>
<th class="value-name" scope="row">street-address</th>
<td class="value-description">full street address condensed into one line</td>
</tr>
<tr>
<th class="value-name" scope="row">address-line1</th>
<td class="value-description">first line of street address </td>
</tr>
<tr>
<th class="value-name" scope="row">address-line2</th>
<td class="value-description">second line of street address</td>
</tr>
<tr>
<th class="value-name" scope="row">address-line3</th>
<td class="value-description">third line of street address</td>
</tr>
<tr>
<th class="value-name" scope="row">city</th>
<td class="value-description">locality or city</td>
</tr>
<tr>
<th class="value-name" scope="row">area</th>
<td class="value-description">administrative area, state, province, or region</td>
</tr>
<tr>
<th class="value-name" scope="row">postalcode</th>
<td class="value-description">postal or ZIP code</td>
</tr>
<tr>
<th class="value-name" scope="row">country</th>
<td class="value-description">country name</td>
</tr>
<tr>
<th class="value-name" scope="row">fax</th>
<td class="value-description">full fax number, including country code</td>
</tr>
<tr>
<th class="value-name" scope="row">fax-country-code</th>
<td class="value-description">international country code</td>
</tr>
<tr>
<th class="value-name" scope="row">fax-national</th>
<td class="value-description">national fax number: full number minus country code</td>
</tr>
<tr>
<th class="value-name" scope="row">fax-area-code</th>
<td class="value-description">area code</td>
</tr>
<tr>
<th class="value-name" scope="row">fax-local</th>
<td class="value-description">local fax number: full number minus country and area codes</td>
</tr>
<tr>
<th class="value-name" scope="row">fax-extension</th>
<td class="value-description">fax extension number</td>
</tr>
<tr>
<th class="value-name" scope="row">email</th>
<td class="value-description">email address</td>
</tr>
<tr>
<th class="value-name" scope="row">tel</th>
<td class="value-description">full phone number, including country code</td>
</tr>
<tr>
<th class="value-name" scope="row">tel-country-code</th>
<td class="value-description">international country code</td>
</tr>
<tr>
<th class="value-name" scope="row">tel-national</th>
<td class="value-description">national phone number: full number minus country code</td>
</tr>
<tr>
<th class="value-name" scope="row">tel-area-code</th>
<td class="value-description">area code</td>
</tr>
<tr>
<th class="value-name" scope="row">tel-local</th>
<td class="value-description">local phone number: full number minus country and area codes</td>
</tr>
<tr>
<th class="value-name" scope="row">tel-extension</th>
<td class="value-description">phone extension number</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-name</th>
<td class="value-description">full name, as it appears on credit card</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-number</th>
<td class="value-description">credit card number</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-exp-month</th>
<td class="value-description">month of expiration of credit card</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-exp-year</th>
<td class="value-description">year of expiration of credit card</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-exp</th>
<td class="value-description">date of expiration of credit card</td>
</tr>
<tr>
<th class="value-name" scope="row">cc-csc</th>
<td class="value-description">credit card security code</td>
</tr>
<tr>
<th class="value-name" scope="row">language</th>
<td class="value-description">preferred language</td>
</tr>
<tr>
<th class="value-name" scope="row">bday</th>
<td class="value-description">birthday</td>
</tr>