-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1022 lines (968 loc) · 49.3 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-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Notes and Note References</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src='https://www.w3.org/Tools/respec/respec-w3c-common' async="async" class='remove'></script>
<script src='updateExample.js' class='remove'></script>
<script class="remove"><!--
var respecConfig = {
// specification status (e.g., WD, LCWD, NOTE, etc.). If in doubt use ED.
specStatus: "unofficial",
processVersion: "2005",
tocIntroductory: false,
// the specification's short name, as in http://www.w3.org/TR/short-name/
shortName: "html-note",
// if your specification has a subtitle that goes below the main
// formal title, define it here
// subtitle : "an excellent document",
// if you wish the publication date to be other than today, set this
// publishDate: "2015-11-30",
// if the specification's copyright date is a range of years, specify
// the start date here:
copyrightStart: "2016",
// if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
// and its maturity status
// previousPublishDate: "2014-08-14",
// previousMaturity: "WD",
// previousDiffURI: "http://www.w3.org/TR/2014/WD-media-accessibility-reqs-20140814/",
// if there a publicly available Editor's Draft, this is the link
edDraftURI: "https://spec-ops.github.io/html-note/",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// editors, add as many as you like
// only "name" is required
editors: [
{ name: "Shane McCarron", url: 'https://spec-ops.io',
company: "Spec-Ops", companyURL: "https://spec-ops.io" },
{ name: "David MacDonald", url: 'http://www.davidmacd.com/',
company: "CanAdapt Solutions Inc.", companyURL:
'http://www.davidmacd.com/' }
],
// 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 of the WG
wg: "Accessible Platform Architectures Working Group",
// URI of the public WG page
wgURI: "http://www.w3.org/WAI/APA/",
// name (with the @w3c.org) of the public mailing to which comments are due
wgPublicList: "public-APA-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/32212/status",
// Depth for the TOC
maxTocLevel: 2,
// include introduction sections in the ToC
doRDFa: 1.1
};
--></script>
<style>
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid
thin; vertical-align: top; padding: 0.2em; }
.element dt { margin-top: 0.5em; margin-bottom: 0.5em; }
h3 { position: relative; z-index: 3; }
h3 + .element, h3 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #F4F4FA;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #F4F4FA;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
</style>
</head>
<body>
<section id="abstract">
<p>Various communities have, over the years, lamented the lack of classic 'footnote' capabilities
in HTML. This specification defines elements that can be used to markup notes and references
thereto. It further specifies default styling for these elements, and suggests alternate ways
that they might be organized and presented for specific uses.</p>
</section>
<section id="sotd">
<p>This specification is designed to be an extension to [[!HTML5]].
This is a very early draft to collect together use cases, prioritize them, and start to mock up
a solution that can address them.</p>
</section>
<section class="informative" id="intro">
<h2>Introduction</h2>
<p>Since the earliest versions of HTML, it has been possible to define a connection between
areas of documents. Unfortunately, this simple and ubiquitous mechanism is not completely able to
represent the rich semantics inherent in all sorts of connections that appear within and among
documents. </p>
</section>
<section class="informative" id="terms">
<h2>Terms</h2>
<p>This section defines terms that are use throughout this specification.</p>
<dl>
<dt><dfn>Accessible Name</dfn></dt>
<dd>
<p>The accessible name is the name of a user interface element. Each platform accessibility <abbr title="application programming interface">API</abbr> provides
the accessible name property. The value of the accessible name may be
derived from a visible (e.g., the visible text on a button) or invisible
(e.g., the text alternative that describes an icon) property of the user
interface element.</p>
<p>A simple use for the accessible name property may be illustrated by
an "OK" button. The text "OK" is the accessible name.
When the button receives focus, assistive technologies may concatenate
the platform's role description with the accessible name. For example,
a screen reader may speak "push-button OK" or "OK button".
The order of concatenation and specifics of the role description (e.g., "button", "push-button", "clickable
button") are determined by platform accessibility APIs or assistive
technologies.</p>
</dd>
<dt><dfn>Assistive Technologies</dfn></dt>
<dd><p>Hardware and/or software that:</p>
<ul>
<li>relies on services provided by a user agent to retrieve and render Web content </li>
<li>works with a user agent or web content itself through the use of APIs, and</li>
<li>provides services beyond those offered by the user agent to facilitate user interaction with web content by people with disabilities</li>
</ul>
<p>This definition may differ from that used in other documents.</p>
<p>Examples of assistive technologies that are important in the context
of this document include the following:</p>
<ul>
<li>screen magnifiers, which are used to enlarge and improve the visual
readability of rendered text and images;</li>
<li>screen readers, which are most-often used to convey information through
synthesized speech or a refreshable Braille display;</li>
<li>text-to-speech software, which is used to convert text into synthetic
speech;</li>
<li>speech recognition software, which is used to allow spoken control
and dictation;</li>
<li>alternate input technologies (including head pointers, on-screen
keyboards, single switches, and sip/puff devices), which are used to
simulate the keyboard;</li>
<li>alternate pointing devices, which are used to simulate mouse pointing
and clicking.</li>
</ul>
</dd>
<dt><dfn data-lt="display values">Display Value</dfn></dt>
<dd>The <a>display value</a> for a <a>note</a> is the ordinal value
(manually or automatically) assigned to the note, transformed into a
display style as defined by the <a>note's</a> associated type.</dd>
<dt><dfn data-lt="notes|note's">Note</dfn></dt>
<dd>For the purposes of <em>this</em> specification, a <a>note</a> is ancillary or supporting
content that is referenced 0 or more times in the document.</dd>
<dt><dfn data-lt="note group|note groups|note group's|group|groups|group's">Note Group</dfn></dt>
<dd>A <a>note group</a> is a collection of notes that are related to one
another in some way. <a>Notes</a> in a <a>note group</a> have <a>display
values</a> that are unique with the <a>note group</a>.</dd>
<dt><dfn data-lt="note references|references|reference">Note Reference</dfn></dt>
<dd>For purposes of <em>this</em> specification, a <a>note reference</a> is an explicit connection
from a location in the document to a <a>note</a>.</dd>
</dl>
</section>
<section class="informative" id="UCnR">
<h2>Use Cases and Requirements</h2>
<section>
<h3>Use Cases</h3>
<ol>
<li id='UC-1'>
Dave is writing a scientific article for a journal. The article will be published both
on-line and in print. The article has many supporting references and ancillary data that are
gathered at its end. Those references and data are referred to from within the article.
Dave needs a consistent way to define these "notes" and refer to them that is easy to use,
accessible, and will work well on-line and in print.
</li>
<li id='UC-2'>
Matthew is editing his thesis on the history of the kilt into a
large-format sumptuously illustrated book for a more general audience. He
uses end-notes for references that he cites and keeps small anecdotes,
glossary explanations and occasional dates in footnotes, so that
readers can easily see at a glance whether a footnote might be
interesting to them.
</li>
<li id="UC-3">
Susan has been helping an Iranian scholar edit an English translation
of some poems from modern Persian; simple glosses (word explanations)
appear in the right margin. Where possible the glosses are aligned with
the text they explain; if necessary they are shifted up or down to make
room. Footnotes point to longer explanations that contextualize the
work. Both footnotes and glosses include mixtures of text direction,
language and script. The original English translation had footnotes of
its own, and these are numbered separately on each page and are printed
immediately below the main text, above any new footnotes. The Persian
also has occasional footnotes which again are numbered separately and
printed (in English) at the foot of the page below the new footnotes. A
line separates the three sets of footnotes.
</li>
<li id="UC-4">
Annette is writing Calculus Basics and wants to offer her lecture notes to
other instructors. She uses Web Annotations [[ANNOTATION-MODEL]] to add tips for instructors in
the margins to create an instructors’ Edition, available in print or
electronic format.
</li>
<li id="UC-5">
Pria is writing a journal article with multiple bibliographic reference
using the <a href="http://www.apastyle.org/">APA style guide</a>, meaning multiple references point to the
same note. It must be possible for her readers to examine the note and
return to the point from which it was referenced.
(Note: this has implications for [[WCAG20]] compliance, requiring title on the link).
</li>
</ol>
</section>
<section>
<h3>Requirements</h3>
<p>The following requirements were gathered via several email exchanges in 2015.</p>
<ul>
<li>There must be a way to declaratively define a <a>note</a> and one or more references to a <a>note</a>.</li>
<li>There must be a way to easily navigate to and from a <a>note</a>, or to examine the
content of the <a>note</a> from the context of a <a>reference</a> to that <a>note</a>.</li>
<li>There must be a way to determine / navigate among all references to a <a>note</a>.</li>
<li>It must be possible to fully style <a>notes</a> such that, for example, they could manifest differently on different sorts of devices, appear as side notes, appear as floating "tooltips", be organized into "endnotes", or whatever other innovative presentation mechanism the author might come up with.</li>
<li>It must be possible to support a mixture of end-notes, footnotes, inline notes, and marginalia</li>
<li>It must be possible to reference a single note multiple times; navigation back from a note must return to the correct starting-point even where a note had multiple reference pointing to it.</li>
<li>It should be possible to navigate among all <a>notes</a> / <a>notes</a> with specific @role or @rel values.</li>
<li>The scope of a note (beginning and end) must be well-defined, so that it is possible to extract all <a>notes</a> or process them separately in any order.</li>
<li>It must be possible to embed a <a>note</a> within a <a>note</a>. @@@ What does this mean in terms of knowing where a note starts and ends?</li>
<li>It must be possible to include markup (including for example MathML, SVG, HTML tables...) in a <a>note</a></li>
<li>It must be possible to enhance the semantics associated with a <a>note</a> through
well-defined values for @role or other attributes that inform semantics.</li>
<li>It must be possible to have <a>note</a> identifiers be automatically generated.</li>
<li>It must be possible to override the automatic generation of <a>note</a> identifiers</li>
<li>It should be possible to define multiple sequences of notes / <a>note</a> identifiers</li>
<li>It must be possible to carefully control the position of notes - from Bill Kasdorf</li>
<li>It must be possible for end-users to override the publisher's positioning requirements - from Bill Kasdorf</li>
<li>It must be possible to mark a section of text as the link to the <a>note</a> (anchor), rather than just a marker at a single point - from http://lists.w3.org/Archives/Public/public-digipub-ig/2015Feb/0094.html Robert Sanderson]</li>
<li>It must be possible to have a <a>note</a> refer to multiple sections of the text, rather
than only one @@@ This seems odd - notes don't refer to the text. Text refers to notes. @@@</li>
<li>It should be possible to have alternative representations of the <a>note</a> based upon arbitrary criteria (e.g., age, developmental level, interest level)</li>
<li>It should be possible to reference a <a>note</a> so that it can be further commented upon</li>
<li>It must be possible to create <a>notes</a> that reference non-text items such as the
bounding box of image-based media @@@ again - notes don't reference text @@@</li>
<li>It must be possible to define a <a>note</a> with non-text (e.g., image, audio, video)</li>
<li>It must be possible to style the reference to a <a>note</a></li>
<li>It must be possible to extract semantic information about the provenance of a <a>note</a>
(e.g., creator, date created, etc) when that information is available @@@ this supposes some
external annotation techniques, and may be outside the scope of this specification; however,
it should not be precluded @@@</li>
<li>It must be possible for an author or enduser to control the presentation of the <a>note</a> through scripting and/or other preference settings.</li>
</ul>
</section>
</section>
<section id="elements">
<h2>Elements</h2>
<p class="issue">
Instead of relying up @role to control the semantics of the notes, we *could*
introduce an enumerated list of @kind values (ala the HTML5 track element)
and define explicit semantics for the <em>kinds</em> of notes we support.
Optionally permit other values for @kind, but say that their semantics are
undefined. Candidate values for @kind would be footnote, sectionnote,
endnote. If we wanted it to be really fun and declarative, also define the
region where the notes would be gathered / relocated via @region (IDREF).</p>
<section id="E-notegroup">
<h2>The <code>notegroup</code> element</h2>
<dl class="element">
<dt>Categories:</dt>
<dd>Flow</dd>
<dd>Sectioning</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where flow content is expected.</dd>
<dt>Content model:</dt>
<dd>Flow content.</dd>
<dt>Content attributes:</dt>
<dd>Global attributes</dd>
<dd><code>group</code> — Default group name to use for <a>notes</a> contained in
the element</dd>
<dd><code>type</code> — Default type of note marker to use for <a>notes</a>
contained in the element</dd>
<dt>Tag omission in text/html:</dt>
<dd>Neither tag is omissible.</dd>
<dt>Allowed ARIA role attribute values:</dt>
<dd><code>region</code> (default - <em>do not set</em>),
<code>doc-endnotes</code> [[!DPUB-ARIA-1.0]]</dd>
<dt>Allowed ARIA State and Property Attributes:</dt>
<dd>Global aria-* attibutes</dd>
<dd>Any aria-* attributes applicable to the allowed roles.</dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">
interface HTMLNotegroupElement : HTMLElement {
attribute DOMString group;
attribute DOMString type;
};
interface GroupInfo {
readonly attribute DOMString group;
readonly attribute DOMString type;
readonly attribute long nextValue;
};
interface HTMLNotegroupCollection {
readonly attribute long length;
getter GroupInfo (unsigned long index);
getter GroupInfo (DOMString group);
};
partial interface Document {
[SameObject] readonly attribute HTMLNotegroupCollection noteGroups;
};
</pre>
</dd>
</dl>
<p>The <code>notegroup</code> element represents a section of a document
or application that encloses <a>note</a> and other related content.
Typically the content of a <code>notegroup</code> is one or more <a
href="#E-note">note</a> elements.</p>
<p>If a <code>group</code> attribute value is supplied, it represents
the name of this collection of notes. It's value can effect the <a>note
group</a> of any
enclosed <code>note</code> elements.</p>
<p>If a <code>type</code> attribute is supplied,
it can effect the <a data-for="HTMLNoteElement">type</a> of any enclosed <code>note</code>
elements.</p>
<p>The <a data-for="HTMLNotegroupElement">group</a> IDL attribute
MUST reflect the value of the <code>group</code> attribute.</p>
<p>The <a data-for="HTMLNotegroupElement">type</a> IDL attribute
MUST reflect the value of the <code>type</code> attribute.</p>
<p>This specification extends the <a data-for="Document">document</a>
object with the
<a data-for="HTMLNotegroupCollection">HTMLNotegroupCollection</a>
<a data-for="document">noteGroups</a>. This is a list of all of
the <a>note groups</a> defined in the document along with their associated
state information.</p>
<p class="issue">A note is a self-contained node. When such a note is
referenced via a <a href="#E-noteref">noteref</a> element, and that
reference is activated via someone using assistive technology, should the
AT only "display" the contents of the referenced note? Even if the note
is part of a large collection of notes? Or should the AT start
"displaying" at the node for the node, and continue until it runs out of
content or the user stops the displaying and returns to the reference via
the "back" action?</p>
<section id="notegroup-processing-model">
<h3>Processing model</h3>
<p>User agents MUST process the <code>notegroup</code> element as follows:</p>
<ol>
<li>Determine the value for <em>Group</em>:
<ol type='a'>
<li>If the element's <code>group</code> attribute is present, let <em>Group</em> equal
its value.</li>
<li>Otherwise, if the element is a child of a <code>notegroup</code> element, and that
element's <code>group</code> attribute is present, let <em>Group</em> equal its
value.</li>
<li>Otherwise, let <em>Group</em> equal the empty string.</li>
</ol>
</li>
<li>If the <a data-for='Document'>noteGroups</a>
entry associated with <em>Group</em> does not exist, create one and set
its <a data-for="GroupInfo">group</a> attribute to <em>Group</em>.</li>
<li>Let <em>GroupInfo</em> equal the
<a data-for='Document'>noteGroups</a> entry associated with <em>Group</em>.</li>
<li>Determine the value for <em>Type</em>:
<ol type='a'>
<li>If the element's <code>type</code> attribute is present, let <em>Type</em> equal
its value.</li>
<li>Otherwise, if <em>GroupInfo</em> has a value for its
<a data-for="GroupInfo">type</a> attribute,
let <em>Type</em> equal that value.</li>
<li>Otherwise, if the element is a child of a <code>notegroup</code> element, and that
element's <code>type</code> attribute is present, let <em>Type</em> equal its
value.</li>
<li>Otherwise, let <em>Type</em> equal '1'.</li>
</ol>
</li>
<li>If the <a data-for="GroupInfo">nextValue</a> attribute
of <em>GroupInfo</em> is NOT set, set it to 1.</li>
<li>If the <a data-for="GroupInfo">type</a> attribute of
<em>GroupInfo</em> is NOT set, set it to <em>Type</em>.</li>
</ol>
</section>
</section>
<section id="E-note">
<h2>The <code>note</code> element</h2>
<dl class="element">
<dt>Categories:</dt>
<dd>Flow</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>@@@TODO@@@</dd>
<dt>Content model:</dt>
<dd>Flow</dd>
<dt>Tag omission in text/html:</dt>
<dd>Neither tag is omissible.</dd>
<dt>Content attributes:</dt>
<dd>Global attributes</dd>
<dd><code>group</code> — Name of the note group</dd>
<dd><code>value</code> — Ordinal value of the note</dd>
<dd><code>type</code> — The type of the note marker</dd>
<dt>Allowed ARIA role attribute values:</dt>
<dd><code>note</code> (default - <em>do not set</em>),
<code>doc-footnote</code>, <code>doc-endnote</code> [[!DPUB-ARIA-1.0]]</dd>
<dt>Allowed ARIA State and Property Attributes:</dt>
<dd>Global aria-* attibutes</dd>
<dd>Any aria-* attributes applicable to the allowed roles.</dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">
interface HTMLNoteElement : HTMLElement {
attribute DOMString group;
attribute DOMString type;
attribute DOMString title;
attribute long value;
readonly attribute DOMString displayValue;
readonly attribute NodeList references;
};
</pre>
</dd>
</dl>
<p>The <code>note</code> element represents content that is related to other content in the
document. Typically the content of a <code>note</code> is a reference or other supporting
information that would be distracting to the reader if it were included in the normal flow of
the content that references it.</p>
<p>The <code>group</code> content attribute, if present, represents the name of a
<a>note group</a>.
If no <code>group</code> is specified, then the default
group is used.</p>
<p>The <code>type</code>
attribute
can be used to specify the kind of marker to use on the
note.
The attribute, if specified, must have a value that is a
case-sensitive match
for one of the values given in the first cell of one of the rows of
the table in <a href="#note-types">Appendix A</a>. The <code>type</code> attribute
represents the state given in the cell in the
second column of the row whose first cell matches the attribute’s
value; if none of the cells
match, or if the attribute is omitted, then the attribute
represents the decimal state.</p>
<p>The <code>value</code> content attribute, if present, must be an
integer giving the ordinal value of the note.
If no <code>value</code> is supplied, the next available value within the
note's <a>group</a> is used.</p>
<p>The <a data-for="htmlnotelement">group</a> IDL attribute MUST reflect the content attribute of the same name.</p>
<p>The <a data-for="HTMLNoteElement">type</a> IDL attribute MUST reflect
the content attribute of the same name, limited to only known values from
the table in <a href="#note-types">Appendix A</a>.</p>
<p>The <a data-for="HTMLNoteElement">value</a> IDL attribute MUST reflect the ordinal value for the note (see <a
href="#note-processing-model">Processing model</a> below for details about determining
value).</p>
<p>The <a data-for="HTMLNoteElement">displayValue</a> IDL attribute MUST
reflect the <a data-for="HTMLNoteElement">value</a> IDL attribute when
transformed according to the element's <a data-for="HTMLNoteElement">type</a> IDL
attribute as defined in <a href="#note-types">Appendix A</a>.</p>
<p>The <a data-for="HTMLNoteElement">references</a> IDL attribute MUST
reflect the list of <code>noteref</code> elements that reference the
note.</p>
<p>By default, the contents of this element are displayed prefixed by the
note's <a>display value</a>.</p>
<section id="note-processing-model">
<h3>Processing model</h3>
<p>User agents MUST process the <code>note</code> element as follows:</p>
<p class='issue'>This model requires that the ID of each note be document unique. In
theory it is possible to only require that the ID be unique within the collection of notes
in the same group within the document. This would require implementations to perform
navigation using something other than fragment identifiers, however. Is this
desirable?</p>
<p class="issue">The style of value processing defined here permits duplicate values
within a group of notes. Should duplicate note values be prevented?</p>
<ol>
<li>If the element's <code>id</code> attribute is present and is not unique in the
document, or if the element's <code>id</code> attribute is NOT present, abort processing. This
is not a valid <a>note</a> as it cannot be referenced.</li>
<li>Otherwise, determine the value for <em>Group</em>:
<ol type='a'>
<li>If the element's <code>group</code> attribute is present, let <em>Group</em> equal
its value.</li>
<li>Otherwise, if the element is a child of a <code>notegroup</code> element, and that
element's <code>group</code> attribute is present, let <em>Group</em> equal its
value.</li>
<li>Otherwise, let <em>Group</em> equal the empty string.</li>
</ol>
</li>
<li>If the <a data-for='Document'>noteGroups</a>
entry associated with <em>Group</em> does not exist, create one and set
its <a data-for="GroupInfo">group</a> attribute to <em>Group</em>.</li>
<li>Let <em>GroupInfo</em> equal the
<a data-for='Document'>noteGroups</a> entry associated with <em>Group</em>.</li>
<li>Determine the value for <em>Type</em>:
<ol type='a'>
<li>If the element's <code>type</code> attribute is present, let <em>Type</em> equal
its value.</li>
<li>Otherwise, if <em>GroupInfo</em> has a value for its
<a data-for="GroupInfo">type</a> attribute,
let <em>Type</em> equal that value.</li>
<li>Otherwise, if the element is a child of a <code>notegroup</code> element, and that
element's <code>type</code> attribute is present, let <em>Type</em> equal its
value.</li>
<li>Otherwise, let <em>Type</em> equal '1'.</li>
</ol>
</li>
<li>Determine the value for <em>Value</em>:
<ol type='a'>
<li>If the element's <code>value</code> attribute is present, let <em>Value</em> equal
its value.</li>
<li>Otherwise, if <em>GroupInfo</em> has a value for its
<a data-for='GroupInfo'>nextValue</a> attribute, let <em>Value</em> equal its
value.</li>
<li>Otherwise, let <em>Value</em> equal '1'.</li>
</ol>
</li>
<li>Set the <a data-for="GroupInfo">nextValue</a> attribute
of <em>GroupInfo</em> to <em>Value</em> plus 1.</li>
<li>If the <a data-for="GroupInfo">type</a> attribute of <em>GroupInfo</em> is NOT
set, set it to <em>Type</em>.</li>
<li>Set the <a data-for="HTMLNoteElement">displayValue</a> attribute to the
appropriate display value by correlating <em>Type</em> with
<em>title</em> and / or <em>Value</em> as defined
in the <a href="#note-types">Appendix A</a>.</li>
</ol>
</section>
</section>
<section id="E-noteref">
<h2>The <code>noteref</code> element</h2>
<dl class="element">
<dt>Categories:</dt>
<dd>Phrasing</dd>
<dt>Contexts in which this element can be used:</dt>
<dd>Where phrasing content is expected.</dd>
<dt>Content model:</dt>
<dd>Transparent, but there MUST be no interactive content or <code>noteref</code> or
<code>a</code> element descendants.</dd>
<dt>Tag omission in text/html:</dt>
<dd>Neither tag is omissible.</dd>
<dt>Content attributes:</dt>
<dd>Global attributes</dd>
<dd><code>note</code> — the ID of a note to reference</dd>
<dt>Allowed ARIA role attribute values:</dt>
<dd><code>link</code> (default - <em>do not set</em>),
<code>doc-noteref</code> [[!DPUB-ARIA-1.0]]</dd>
<dt>Allowed ARIA State and Property Attributes:</dt>
<dd>Global aria-* attibutes</dd>
<dd>aria-linktype</dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">
interface HTMLNoterefElement : HTMLElement {
readonly attribute DOMString displayValue;
readonly attribute DOMString note;
};
</pre>
</dd>
</dl>
<div class="issue">
<p>
The content model for <code>noteref</code> is similar to that of <code>a</code>. This makes
sense and is maximally flexible. However, in the most common use case, <code>noteref</code>
will be used with no content at all:</p>
<pre class="example highlight" data-transform="updateExample"><!--
<p>This is a sentence that references a footnote<noteref note='fn1'></noteref>.</p>
-->
</pre>
<p>Requiring the opening and closing tags in this common use case is
inconvenient. Unfortunately, HTML does not have a simple way to short
circuit a tag like XML does. And permitting the omission of the
end tag in this case would result in inconsistent and undesirable
parsing.</p>
</div>
<p>The <code>noteref</code> element represents a reference to a note
within the same document. When this element is visible, its content is displayed prefixed
with the
<a>display value</a> of the associated <a>note</a>.</p>
<p>The note's <a>display value</a> and any content of the
<code>noteref</code> element are focusable and selectable. By default,
selecting and activating the
content changes focus to the <a>note</a> referenced, in
<strong>exactly</strong> the same manner as navigation from an
<code>a</code> element to its target. This has the logical follow-on
effect that the user agent's "back" functionality will return focus to
the location of the original reference.</p>
<p class="note">It is possible to override the default behavior through
scripting. For example, changing focus to the <a>note</a> could cause
the referenced note's content to be displayed in a pop-up window, in a
magin, in an area at the bottom of the screen, or whatever other
mechanism is appropriate for the style of <a>note</a> and the idiom of
the document. When such features are implemented, they SHOULD always keep
in mind the needs of users with various accessibility requirements. For
example, having the content of a note appear in a pop-up window when the
reference acquires focus is fine for sighted users, but a user relying up
a screen reader may wish to activate the reference in order to change
focus to that popup so their reader will convey the contents of the
note.</p>
<p>The <code>note</code> content attribute represents the <code>id</code> of the <code>note</code> element
being referenced. A <code>note</code> element with that ID MUST be present in the document in
order for the <code>noteref</code> element to be considered a reference to a note (see <a
href="#noteref-processing-model">Processing Model</a> below).</p>
<p class="note">A <a>note reference</a> SHOULD have an <a>accessible name</a> so that <a>assistive
technologies</a> can make the semantics of the reference clear to their users.</p>
<section id="noteref-processing-model">
<h3>Processing model</h3>
<p>If the <code>noteref</code> element has a <code>note</code> attribute specified, user
agents MUST process it as follows:</p>
<ol>
<li>Parse the attribute's value using the rules for parsing a hash-name reference to a
<code>note</code> element, with the element's node document as the context node. This
will return either an element (<em>the note</em>) or null.</li>
<li>If that returned null, then abort these steps.</li>
<li>Otherwise, perform the following steps:
<ol type='a'>
<li>Set the element's IDL attribute <a
data-for="HTMLNoteRefElement">note</a> to the value of the
element's <code>note</code> attribute.</li>
<li>Set the element's IDL attribute
<a data-for="HTMLNoterefElement">displayValue</a>
to <em>the note</em>'s IDL
attribute <a data-for="HTMLNoteElement">displayValue</a></li>
<li>Add the element's DOM node to <em>the note</em>'s IDL attribute
<code>references</code>.</li>
</ol>
</li>
</ol>
</section>
</section>
</section>
<section id="note-types" class="appendix">
<h2>Note types</h2>
<p>The <a>display value</a> for a <a>note</a> is determined by using its
<a data-for="HTMLNoteElement">type</a> to transform its
<a data-for="HTMLNoteElement">value</a> according to the table below.</p>
<table class="type-table">
<thead>
<tr>
<th colspan="11">
Note Types Table
</th>
</tr>
<tr>
<th>Keyword
</th><th>State
</th><th>Description
</th><th
colspan="8">Examples
for
values
1-3
and
3999-4001
</th></tr></thead><tbody>
<tr>
<td><dfn
data-dfn-for="HTMLNoteElement/type"
data-dfn-type="attr-value"
data-export=""
id="attr-valuedef-note-type-none"><code>none</code><a
class="self-link"
href="#attr-valuedef-note-type-none"></a></dfn>
(U+006e U+006f U+006e U+0065)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-empty">none or decimal<a
class="self-link"
href="#statedef-note-none"></a></dfn>
</td><td>Title attribute or Decimal
numbers if no title
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>1.</samp>
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>2.</samp>
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>3.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>3999.</samp>
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>4000.</samp>
</td><td
class="eg"><samp>title</samp><br>-or-<br><samp>4001.</samp>
</td><td
class="eg">...
</td></tr>
<tr>
<td><dfn
data-dfn-for="HTMLNoteElement/type"
data-dfn-type="attr-value"
data-export=""
id="attr-valuedef-note-type-1"><code>1</code><a
class="self-link"
href="#attr-valuedef-note-type-1"></a></dfn>
(U+0031)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-decimal">decimal<a
class="self-link"
href="#statedef-note-decimal"></a></dfn>
</td><td>Decimal
numbers
</td><td
class="eg"><samp>1.</samp>
</td><td
class="eg"><samp>2.</samp>
</td><td
class="eg"><samp>3.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>3999.</samp>
</td><td
class="eg"><samp>4000.</samp>
</td><td
class="eg"><samp>4001.</samp>
</td><td
class="eg">...
</td></tr><tr>
<td><dfn
data-dfn-for="HTMLNoteElement/type"
data-dfn-type="attr-value"
data-export=""
id="attr-valuedef-note-type-a"><code>a</code><a
class="self-link"
href="#attr-valuedef-note-type-a"></a></dfn>
(U+0061)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-lower-alpha">lower-alpha<a
class="self-link"
href="#statedef-note-lower-alpha"></a></dfn>
</td><td>Lowercase
latin
alphabet
</td><td
class="eg"><samp>a.</samp>
</td><td
class="eg"><samp>b.</samp>
</td><td
class="eg"><samp>c.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>ewu.</samp>
</td><td
class="eg"><samp>ewv.</samp>
</td><td
class="eg"><samp>eww.</samp>
</td><td
class="eg">...
</td></tr><tr>
<td><code>A</code>
(U+0041)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-upper-alpha">upper-alpha<a
class="self-link"
href="#statedef-note-upper-alpha"></a></dfn>
</td><td>Uppercase
latin
alphabet
</td><td
class="eg"><samp>A.</samp>
</td><td
class="eg"><samp>B.</samp>
</td><td
class="eg"><samp>C.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>EWU.</samp>
</td><td
class="eg"><samp>EWV.</samp>
</td><td
class="eg"><samp>EWW.</samp>
</td><td
class="eg">...
</td></tr><tr>
<td><dfn
data-dfn-for="HTMLNoteElement/type"
data-dfn-type="attr-value"
data-export=""
id="attr-valuedef-note-type-i"><code>i</code><a
class="self-link"
href="#attr-valuedef-note-type-i"></a></dfn>
(U+0069)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-lower-roman">lower-roman<a
class="self-link"
href="#statedef-note-lower-roman"></a></dfn>
</td><td>Lowercase
roman
numerals
</td><td
class="eg"><samp>i.</samp>
</td><td
class="eg"><samp>ii.</samp>
</td><td
class="eg"><samp>iii.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>mmmcmxcix.</samp>
</td><td
class="eg"><samp>i̅v̅.</samp>
</td><td
class="eg"><samp>i̅v̅i.</samp>
</td><td
class="eg">...
</td></tr><tr>
<td><code>I</code>
(U+0049)
</td><td><dfn
data-dfn-for="HTMLNoteElement"
data-dfn-type="state"
data-export=""
id="statedef-note-upper-roman">upper-roman<a
class="self-link"
href="#statedef-note-upper-roman"></a></dfn>
</td><td>Uppercase
roman
numerals
</td><td
class="eg"><samp>I.</samp>
</td><td
class="eg"><samp>II.</samp>
</td><td
class="eg"><samp>III.</samp>
</td><td
class="eg">...
</td><td
class="eg"><samp>MMMCMXCIX.</samp>
</td><td
class="eg"><samp>I̅V̅.</samp>
</td><td
class="eg"><samp>I̅V̅I.</samp>
</td><td
class="eg">...
</td></tr></tbody></table>
<section id="display-value-processing-model">
<h3>Processing model</h3>
<p>When determining the <a>display value</a>, user agents MUST process the <code>type</code>
and <code>title</code> attributes as follows:</p>
<ol>
<li>Let <em>DisplayValue</em> equal the <a data-for="HTMLNoteElement">value</a> of the note.</li>
<li>If the <a data-for="HTMLNoteElement">type</a> of the note equals <code>none</code>:
<ol type='a'>
<li>If the <a data-for="HTMLNoteElement">title</a> of the note is non-empty, let
<em>DisplayValue</em> equal the value of <a data-for="HTMLNoteElement">title</a>.
<p class="HTMLNoteElement">In the case where <em>title</em> is empty, the DisplayValue will
already be set to the <em>value</em> of the note in Decimal form.</p>
</li>
</ol>
</li>
<li>Otherwise:
<ol type='a'>
<li>If the value of the <a data-for="HTMLNoteElement">type</a> matches a value from
column 1 of the table, transform the <em>DisplayValue</em> into the form as defined in
column 2 of the table.
</li>
<li>If the value of the <em>title</em> of the note is non-empty, append a space
(U+0020) and the value of the <em>title</em> to <em>DisplayValue</em>.</li>
</ol>
</li>
</ol>
</section>
</section>
<section class='informative'>
<h2>Examples</h2>
<pre class="example highlight" data-transform="updateExample"><!--
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Footnote Example 1</title>
</head>
<body>
<h2>Here is a section</h2>
<p>There is example content here. Within the content there are references
to various notes.<noteref note="note-1"></noteref> These references can be
basic or more ornate.
<noteref note="snote-1">Ornate reference</noteref>
<noteref note="snote-2">Second ornate reference</noteref>
</p>
<note type='i' id="note-1">This is note 1 - it was referenced first.</note>
<notegroup type="A" group="secondary">
<note id="snote-1">This is a secondary note. It uses letters for identifiers.</note>
<note id="snote-2">This is another secondary note. It also uses
letters for identifiers.</note>
</notegroup>
<p>In another paragraph there is yet another reference.<noteref note="snote-3"></noteref>
That reference is to a note that is outside of a notegroup, but it will
inherit the settings of the group because they are already established.</p>
<note id="snote-3" group="secondary">This is a third secondary note.</note>
<p>This is a final paragraph to show how notes can be interleaved in
the source and still be simple footnote references.</p>
</body>
</html>
-->
</pre>
<pre class="example highlight" data-transform="updateExample"><!--
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Footnote Example 2</title>
</head>
<body>
<section>
<h2>Here is a section</h2>
<p>In this example content there are references to other documents
<noteref note="bib-dpub-aria"></noteref>. It is possible to have many of these
references to support the easy use of whatever style of bibliography the author likes
<noteref note="bib-html5"></noteref>
</p>
</section>
<section id="normative-references">
<h3 id="h-normative-references">A. Normative references</h3>
<notegroup group="bibliography" type="none">
<note id="bib-dpub-aria" title="DPUB-ARIA-1.0">
[DPUB-ARIA-1.0] Matt Garrish; Tzviya Siegman; Markus Gylling; Shane McCarron. W3C.
<a href="http://www.w3.org/TR/dpub-aria-1.0/"><cite>Digital Publishing WAI-ARIA Module 1.0</cite></a>.
17 March 2016. W3C Working Draft.
URL: <a href="http://www.w3.org/TR/dpub-aria-1.0/">http://www.w3.org/TR/dpub-aria-1.0/</a>
</note>
<note id="bib-html5" title="HTML5">[HTML5]
Ian Hickson; Robin Berjon; Steve Faulkner; Travis Leithead;
Erika Doyle Navara; Edward O'Connor; Silvia Pfeiffer. W3C.
<a href="http://www.w3.org/TR/html5/"><cite>HTML5</cite></a>.
28 October 2014. W3C Recommendation.
URL: <a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a>