-
Notifications
You must be signed in to change notification settings - Fork 0
/
editing.html
2606 lines (2565 loc) · 302 KB
/
editing.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"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML 5.1: User interaction</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="WD" name="w3c-status">
<link href="../default.css" rel="stylesheet" type="text/css">
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link href="https://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css">
<meta content="Bikeshed 1.0.0" name="generator">
<style>.highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; }
.highlight .c { color: #708090 } /* Comment */
.highlight .k { color: #990055 } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #0077aa } /* Name */
.highlight .o { color: #999999 } /* Operator */
.highlight .p { color: #999999 } /* Punctuation */
.highlight .cm { color: #708090 } /* Comment.Multiline */
.highlight .cp { color: #708090 } /* Comment.Preproc */
.highlight .c1 { color: #708090 } /* Comment.Single */
.highlight .cs { color: #708090 } /* Comment.Special */
.highlight .kc { color: #990055 } /* Keyword.Constant */
.highlight .kd { color: #990055 } /* Keyword.Declaration */
.highlight .kn { color: #990055 } /* Keyword.Namespace */
.highlight .kp { color: #990055 } /* Keyword.Pseudo */
.highlight .kr { color: #990055 } /* Keyword.Reserved */
.highlight .kt { color: #990055 } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #000000 } /* Literal.Number */
.highlight .s { color: #a67f59 } /* Literal.String */
.highlight .na { color: #0077aa } /* Name.Attribute */
.highlight .nc { color: #0077aa } /* Name.Class */
.highlight .no { color: #0077aa } /* Name.Constant */
.highlight .nd { color: #0077aa } /* Name.Decorator */
.highlight .ni { color: #0077aa } /* Name.Entity */
.highlight .ne { color: #0077aa } /* Name.Exception */
.highlight .nf { color: #0077aa } /* Name.Function */
.highlight .nl { color: #0077aa } /* Name.Label */
.highlight .nn { color: #0077aa } /* Name.Namespace */
.highlight .py { color: #0077aa } /* Name.Property */
.highlight .nt { color: #669900 } /* Name.Tag */
.highlight .nv { color: #0077aa } /* Name.Variable */
.highlight .ow { color: #999999 } /* Operator.Word */
.highlight .mb { color: #000000 } /* Literal.Number.Bin */
.highlight .mf { color: #000000 } /* Literal.Number.Float */
.highlight .mh { color: #000000 } /* Literal.Number.Hex */
.highlight .mi { color: #000000 } /* Literal.Number.Integer */
.highlight .mo { color: #000000 } /* Literal.Number.Oct */
.highlight .sb { color: #a67f59 } /* Literal.String.Backtick */
.highlight .sc { color: #a67f59 } /* Literal.String.Char */
.highlight .sd { color: #a67f59 } /* Literal.String.Doc */
.highlight .s2 { color: #a67f59 } /* Literal.String.Double */
.highlight .se { color: #a67f59 } /* Literal.String.Escape */
.highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */
.highlight .si { color: #a67f59 } /* Literal.String.Interpol */
.highlight .sx { color: #a67f59 } /* Literal.String.Other */
.highlight .sr { color: #a67f59 } /* Literal.String.Regex */
.highlight .s1 { color: #a67f59 } /* Literal.String.Single */
.highlight .ss { color: #a67f59 } /* Literal.String.Symbol */
.highlight .vc { color: #0077aa } /* Name.Variable.Class */
.highlight .vg { color: #0077aa } /* Name.Variable.Global */
.highlight .vi { color: #0077aa } /* Name.Variable.Instance */
.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */
.highlight { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
</style>
</head>
<body class="h-entry">
<div class="head">
<header>
<p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft, <time class="dt-updated" datetime="2016-01-20">20 January 2016</time></span></h2>
</header>
</div>
<nav class="prev_next"> — ← <a href="semantics.html#semantics"><span class="secno">4</span> <span class="content">The elements of HTML</span></a> — <a href="index.html#contents">Table of contents</a> →<a href="browsers.html#browsers"><span class="secno">6</span> <span class="content">Loading Web pages</span></a></nav><nav data-fill-with="table-of-contents" id="toc">
<h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
<ol class="toc" role="directory">
<li>
<a href="editing.html#editing"><span class="secno">5</span> <span class="content">User interaction</span></a>
<ol class="toc">
<li><a href="editing.html#the-hidden-attribute"><span class="secno">5.1</span> <span class="content">The <span><code>hidden</code></span> attribute</span></a>
</li><li><a href="editing.html#inert-subtrees"><span class="secno">5.2</span> <span class="content">Inert subtrees</span></a>
</li><li><a href="editing.html#activation"><span class="secno">5.3</span> <span class="content">Activation</span></a>
</li><li>
<a href="editing.html#focus"><span class="secno">5.4</span> <span class="content">Focus</span></a>
<ol class="toc">
<li><a href="editing.html#focus-introduction"><span class="secno">5.4.1</span> <span class="content">Introduction</span></a>
</li><li><a href="editing.html#data-model"><span class="secno">5.4.2</span> <span class="content">Data model</span></a>
</li><li><a href="editing.html#the-tabindex-attribute"><span class="secno">5.4.3</span> <span class="content">The <code>tabindex</code> attribute</span></a>
</li><li><a href="editing.html#focus-processing-model"><span class="secno">5.4.4</span> <span class="content">Processing model</span></a>
</li><li><a href="editing.html#sec-sequential-focus-navigation"><span class="secno">5.4.5</span> <span class="content">Sequential focus navigation</span></a>
</li><li><a href="editing.html#focus-management-apis"><span class="secno">5.4.6</span> <span class="content">Focus management APIs</span></a>
</li></ol>
</li><li>
<a href="editing.html#assigning-keyboard-shortcuts"><span class="secno">5.5</span> <span class="content">Assigning keyboard shortcuts</span></a>
<ol class="toc">
<li><a href="editing.html#assigning-keyboard-shortcuts-introduction"><span class="secno">5.5.1</span> <span class="content">Introduction</span></a>
</li><li><a href="editing.html#the-accesskey-attribute"><span class="secno">5.5.2</span> <span class="content">The <span><code>accesskey</code></span> attribute</span></a>
</li><li><a href="editing.html#assigning-keyboard-shortcuts-processing-model"><span class="secno">5.5.3</span> <span class="content">Processing model</span></a>
</li></ol>
</li><li>
<a href="editing.html#user-interaction-editing"><span class="secno">5.6</span> <span class="content">Editing</span></a>
<ol class="toc">
<li><a href="editing.html#making-document-regions-editable-the-contenteditable-content-attribute"><span class="secno">5.6.1</span> <span class="content">Making document regions editable: The <code>contenteditable</code> content attribute</span></a>
</li><li><a href="editing.html#making-entire-documents-editable-the-designmode-idl-attribute"><span class="secno">5.6.2</span> <span class="content">Making entire documents editable: The <code>designMode</code> IDL attribute</span></a>
</li><li><a href="editing.html#best-practices-for-in-page-editors"><span class="secno">5.6.3</span> <span class="content">Best practices for in-page editors</span></a>
</li><li><a href="editing.html#editing-apis"><span class="secno">5.6.4</span> <span class="content">Editing APIs</span></a>
</li><li><a href="editing.html#spelling-and-grammar-checking"><span class="secno">5.6.5</span> <span class="content">Spelling and grammar checking</span></a>
</li></ol>
</li><li>
<a href="editing.html#drag-and-drop"><span class="secno">5.7</span> <span class="content">Drag and drop</span></a>
<ol class="toc">
<li><a href="editing.html#drag-and-drop-introduction"><span class="secno">5.7.1</span> <span class="content">Introduction</span></a>
</li><li><a href="editing.html#the-drag-data-store"><span class="secno">5.7.2</span> <span class="content">The drag data store</span></a>
</li><li>
<a href="editing.html#the-datatransfer-interface"><span class="secno">5.7.3</span> <span class="content">The <code>DataTransfer</code> interface</span></a>
<ol class="toc">
<li><a href="editing.html#the-datatransferitemlist-interface"><span class="secno">5.7.3.1</span> <span class="content">The <code>DataTransferItemList</code> interface</span></a>
</li><li><a href="editing.html#the-datatransferitem-interface"><span class="secno">5.7.3.2</span> <span class="content">The <code>DataTransferItem</code> interface</span></a>
</li></ol>
</li><li><a href="editing.html#the-dragevent-interface"><span class="secno">5.7.4</span> <span class="content">The <code>DragEvent</code> interface</span></a>
</li><li><a href="editing.html#drag-and-drop-processing-model"><span class="secno">5.7.5</span> <span class="content">Drag-and-drop processing model</span></a>
</li><li><a href="editing.html#events-summary"><span class="secno">5.7.6</span> <span class="content">Events summary</span></a>
</li><li><a href="editing.html#the-draggable-attribute"><span class="secno">5.7.7</span> <span class="content">The <span><code>draggable</code></span> attribute</span></a>
</li><li><a href="editing.html#the-dropzone-attribute"><span class="secno">5.7.8</span> <span class="content">The <span><code>dropzone</code></span> attribute</span></a>
</li><li><a href="editing.html#security-risks-in-the-drag-and-drop-model"><span class="secno">5.7.9</span> <span class="content">Security risks in the drag-and-drop model</span></a>
</li></ol>
</li></ol>
</li></ol>
</nav>
<main>
<section>
<h2 class="heading settled" data-level="5" id="editing"><span class="secno">5. </span><span class="content">User interaction</span><a class="self-link" href="editing.html#editing"></a></h2>
<h3 class="heading settled" data-level="5.1" id="the-hidden-attribute"><span class="secno">5.1. </span><span class="content">The <dfn data-dfn-type="dfn" data-noexport="" id="hidden"><code>hidden</code><a class="self-link" href="editing.html#hidden"></a></dfn> attribute</span><a class="self-link" href="editing.html#the-hidden-attribute"></a></h3>
<p>All <a data-link-type="dfn" href="infrastructure.html#html-element">html elements</a> may have the <code>hidden</code> content attribute set. The <code>hidden</code> attribute is a <a data-link-type="dfn" href="infrastructure.html#boolean-attribute">boolean attribute</a>. When specified on an element, it
indicates that the element is not yet, or is no longer, directly relevant to the page’s current
state, or that it is being used to declare content to be reused by other parts of the page as
opposed to being directly accessed by the user. <span class="impl">User agents should not render
elements that have the <code>hidden</code> attribute specified. This requirement may be
implemented indirectly through the style layer. For example, an HTML+CSS user agent could
implement these requirements using the rules suggested in <a href="rendering.html#rendering">§10 Rendering</a>.</span></p>
<p class="note" role="note"> Because this attribute is typically implemented using CSS, it’s also possible to override it
using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the
effects of the <code>hidden</code> attribute. Authors therefore have to take care when writing
their style sheets to make sure that the attribute is still styled as expected. </p>
<div class="example" id="example-0f32ae7c">
<a class="self-link" href="editing.html#example-0f32ae7c"></a> In the following skeletal example, the attribute is used to hide the Web game’s main screen
until the user logs in:
<pre class="highlight"><span class="nt"><h1></span>The Example Game<span class="nt"></h1></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Login<span class="nt"></h2></span>
<span class="nt"><form></span>
...
<span class="c"><!-- calls login() once the user’s credentials have been checked --></span>
<span class="nt"></form></span>
<span class="nt"><script></span>
<span class="kd">function</span> <span class="nx">login</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// switch screens</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'login'</span><span class="p">).</span><span class="nx">hidden</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'game'</span><span class="p">).</span><span class="nx">hidden</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">hidden</span><span class="nt">></span>
...
<span class="nt"></section></span></pre>
</div>
<p>The <code>hidden</code> attribute must not be used to hide content that
could legitimately be shown in another presentation. For example, it is incorrect to use <code>hidden</code> to hide panels in a tabbed dialog, because the tabbed interface
is merely a kind of overflow presentation — one could equally well just show all the form
controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide
content just from one presentation — if something is marked <code>hidden</code>, it is hidden from all presentations, including, for instance,
screen readers.</p>
<p>Elements that are not themselves <code>hidden</code> must not <a data-link-type="dfn" href="semantics.html#hyperlink">hyperlink</a> to elements that are <code>hidden</code>. The <code>for</code> attributes of <code>label</code> and <code><a data-link-type="element" href="semantics.html#elementdef-output">output</a></code> elements that are not
themselves <code>hidden</code> must similarly not refer to elements that are <code>hidden</code>. In both cases, such references would cause user
confusion.</p>
<p>Elements and scripts may, however, refer to elements that are <code>hidden</code> in other contexts.</p>
<div class="example" id="example-bf0741c4">
<a class="self-link" href="editing.html#example-bf0741c4"></a> For example, it would be incorrect to use the <code><a data-link-type="element-attr" href="semantics.html#element-attrdef-links-href">href</a></code> attribute to link to a
section marked with the <code>hidden</code> attribute. If the content is not applicable or relevant, then there
is no reason to link to it.
<p>It would be fine, however, to use the ARIA <code>aria-describedby</code> attribute to
refer to descriptions that are themselves <code>hidden</code>. While hiding the descriptions
implies that they are not useful alone, they could be written in
such a way that they are useful in the specific context of being
referenced from the images that they describe.</p>
<p>Similarly, a <code><a data-link-type="element" href="semantics.html#elementdef-canvas">canvas</a></code> element with the <code>hidden</code> attribute could be used by a
scripted graphics engine as an off-screen buffer, and a form
control could refer to a hidden <code><a data-link-type="element" href="semantics.html#elementdef-form">form</a></code> element using its <code>form</code> attribute.</p>
</div>
<p>Accessibility APIs are encouraged to provide a way to expose
structured content while marking it as hidden in the default view.
Such content should not be perceivable to users in the normal document
flow in any modality, whether using Assistive Technology (AT) or
mainstream User Agents.</p>
<p>When such features are available, User Agents may use them to
expose the full semantics of <code>hidden</code> elements to AT when appropriate, if such content is referenced
indirectly by an <a data-link-type="dfn" href="http://www.w3.org/TR/dom/#concept-id">ID reference</a> or <a data-link-type="dfn" href="infrastructure.html#valid-hash-name-reference">valid hash-name reference</a>. This allows ATs to access the
structure of these <code>hidden</code> elements
upon user request, while keeping the content hidden in all
presentations of the normal document flow. Authors who wish to prevent
user-initiated viewing of a <code>hidden</code> element should not reference the element with such a mechanism.</p>
<p>Because some User Agents have flattened hidden content when
exposing such content to AT, authors should not reference <code>hidden</code> content which would lose essential
meaning when flattened.</p>
<div class="example" id="example-74952907">
<a class="self-link" href="editing.html#example-74952907"></a> For example, it would be incorrect to use the <code><a data-link-type="element-attr" href="semantics.html#element-attrdef-links-href">href</a></code> attribute to link to a section marked with the <code>hidden</code> attribute.
If the content is not applicable or relevant, then there is no reason to link to it.
<p>It would be fine, however, to use the ARIA <code>aria-describedby</code> attribute to refer to descriptions that are
themselves <code>hidden</code>. While hiding the descriptions implies that
they are not useful alone, they could be written in such a way that they are useful in the
specific context of being referenced from the images that they describe.</p>
<p>Similarly, a <code><a data-link-type="element" href="semantics.html#elementdef-canvas">canvas</a></code> element with the <code>hidden</code> attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control
could refer to a hidden <code><a data-link-type="element" href="semantics.html#elementdef-form">form</a></code> element using its <code>form</code> attribute.</p>
</div>
<p>Elements in a section hidden by the <code>hidden</code> attribute are still
active, e.g. scripts and form controls in such sections still execute and submit respectively.
Only their presentation to the user changes.</p>
<div class="impl"> The <dfn class="idl-code" data-dfn-for="common" data-dfn-type="attribute" data-export="" id="dom-common-hidden"><code>hidden</code><a class="self-link" href="editing.html#dom-common-hidden"></a></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection">reflect</a> the
content attribute of the same name. </div>
<h3 class="heading settled" data-level="5.2" id="inert-subtrees"><span class="secno">5.2. </span><span class="content">Inert subtrees</span><a class="self-link" href="editing.html#inert-subtrees"></a></h3>
<p class="note" role="note"> This section <strong>does not</strong> define or create any content attribute
named "inert". This section merely defines an abstract <em>concept</em> of <a data-link-type="dfn" href="editing.html#inertness">inertness</a>. </p>
<p>A node (in particular elements and text nodes) can be marked as <dfn data-dfn-type="dfn" data-lt="inertness|inert" data-noexport="" id="inertness">inert<a class="self-link" href="editing.html#inertness"></a></dfn>. When a node
is <a data-link-type="dfn" href="editing.html#inertness">inert</a>, then the user agent must act as if the node was absent for the purposes of
targeting user interaction events, may ignore the node for the purposes of text search user
interfaces (commonly known as "find in page"), and may prevent the user from selecting text in
that node. User agents should allow the user to override the restrictions on search and text
selection, however.</p>
<p class="example" id="example-181959b1"><a class="self-link" href="editing.html#example-181959b1"></a> For example, consider a page that consists of just a single <a data-link-type="dfn" href="editing.html#inertness">inert</a> paragraph positioned in the middle of a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code>. If a user moves their pointing device
from the <code>body</code> over to the <a data-link-type="dfn" href="editing.html#inertness">inert</a> paragraph and clicks on the paragraph,
no <code>mouseover</code> event would be fired, and the <code>mousemove</code> and <code>click</code> events would
be fired on the <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element rather than the paragraph. </p>
<p class="note" role="note"> When a node is inert, it generally cannot be focused. Inert nodes that are <a data-link-type="dfn" href="semantics.html#menuitem-defines-a-command">commands</a> will also get disabled. </p>
<p>While a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a> is marked as <a data-link-type="dfn" href="editing.html#inertness">inert</a>, its <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>, and all nodes in that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>, must be marked as <a data-link-type="dfn" href="editing.html#inertness">inert</a>.</p>
<p>An entire <code>Document</code> can be marked as <dfn data-dfn-type="dfn" data-lt="blocked by the modal dialog|blocked by a modal dialog" data-noexport="" id="blocked-by-the-modal-dialog">blocked by a modal dialog<a class="self-link" href="editing.html#blocked-by-the-modal-dialog"></a></dfn> <var>subject</var>. While a <code>Document</code> is so marked, every node that is <a data-link-type="dfn" href="infrastructure.html#in-the-document">in the <code>Document</code></a>, with the exception of the <var>subject</var> element and its
descendants, must be marked <a data-link-type="dfn" href="editing.html#inertness">inert</a>. (The elements excepted by this paragraph can
additionally be marked <a data-link-type="dfn" href="editing.html#inertness">inert</a> through other means; being part of a modal dialog does not
"protect" a node from being marked <a data-link-type="dfn" href="editing.html#inertness">inert</a>.)</p>
<p>Only one element at a time can mark a <code>Document</code> as being <a data-link-type="dfn" href="editing.html#blocked-by-the-modal-dialog">blocked by a modal
dialog</a>. When a new <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> is made to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block">block</a> a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>, the previous element, if any, stops blocking the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>.</p>
<p class="note" role="note"> The <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element’s <code>showModal()</code> method makes use of this mechanism. </p>
<h3 class="heading settled" data-level="5.3" id="activation"><span class="secno">5.3. </span><span class="content">Activation</span><a class="self-link" href="editing.html#activation"></a></h3>
<p>Certain elements in HTML have an <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a>, which means that the user
can activate them. This triggers a sequence of events dependent on the activation mechanism, and
normally culminating in a <code>click</code> event<span class="impl">, as described below</span>.</p>
<div class="impl">
<p>The user agent should allow the user to manually trigger elements that have an <a data-link-type="dfn" href="editing.html#activation-behavior">activation
behavior</a>, for instance using keyboard or voice input, or through mouse clicks. When the
user triggers an element with a defined <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a> in a manner other than
clicking it, the default action of the interaction event must be to <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps">run synthetic click
activation steps</a> on the element.</p>
<p>Each element has a <var>click in progress</var> flag, initially set to false.</p>
<p>When a user agent is to <dfn data-dfn-type="dfn" data-lt="running synthetic click activation steps|run synthetic click activation steps" data-noexport="" id="running-synthetic-click-activation-steps">run synthetic click activation steps<a class="self-link" href="editing.html#running-synthetic-click-activation-steps"></a></dfn> on an element, the user
agent must run the following steps:</p>
<ol>
<li>If the element’s <var>click in progress</var> flag is set to true, then abort
these steps.
</li><li>Set the <var>click in progress</var> flag on the element to true.
</li><li><a data-link-type="dfn" href="editing.html#run-pre-click-activation-steps">Run pre-click activation steps</a> on the element.
</li><li><a data-link-type="dfn" href="webappapis.html#fire-a-click-event">Fire a <code>click</code> event</a> at the element. If the <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps">run synthetic click activation steps</a> algorithm was invoked because the <code>click()</code> method was invoked, then the <code>isTrusted</code> attribute must be initialized to false.
</li><li>
<p>If this <code>click</code> event is not canceled, <a data-link-type="dfn" href="editing.html#run-post-click-activation-steps">run post-click
activation steps</a> on the element.</p>
<p>If the event <em>is</em> canceled, the user agent must <a data-link-type="dfn" href="editing.html#run-canceled-activation-steps">run canceled activation
steps</a> on the element instead.</p>
</li><li>Set the <var>click in progress</var> flag on the element to false.
</li></ol>
<p>When a pointing device is clicked, the user agent must <a data-link-type="dfn" href="editing.html#run-authentic-click-activation-steps">run authentic click activation
steps</a> instead of firing the <code>click</code> event. When a user agent is to <dfn data-dfn-type="dfn" data-noexport="" id="run-authentic-click-activation-steps">run authentic click activation steps<a class="self-link" href="editing.html#run-authentic-click-activation-steps"></a></dfn> for a given event <var>event</var>, it must
follow these steps:</p>
<ol>
<li>Let <var>target</var> be the element designated by the user (the target of <var>event</var>).
</li><li>If <var>target</var> is a <code><a data-link-type="element" href="semantics.html#elementdef-canvas">canvas</a></code> element, run the canvas <code>MouseEvent</code> rerouting steps. If this changes <var>event</var>’s
target, then let <var>target</var> be the new target.
</li><li>Set the <var>click in progress</var> flag on <var>target</var> to
true.
</li><li>Let <var>e</var> be the <a data-link-type="dfn" href="editing.html#nearest-activatable-element">nearest activatable element</a> of <var>target</var> (defined below), if any.
</li><li>If there is an element <var>e</var>, <a data-link-type="dfn" href="editing.html#run-pre-click-activation-steps">run pre-click activation steps</a> on it.
</li><li>
<p><a data-link-type="dfn" href="infrastructure.html#dispatch">Dispatch</a> <var>event</var> (the
required <code>click</code> event) at <var>target</var>.</p>
<p>If there is an element <var>e</var> and the <code>click</code> event is not canceled, <a data-link-type="dfn" href="editing.html#run-post-click-activation-steps">run post-click activation steps</a> on element <var>e</var>.</p>
<p>If there is an element <var>e</var> and the event <em>is</em> canceled, <a data-link-type="dfn" href="editing.html#run-canceled-activation-steps">run
canceled activation steps</a> on element <var>e</var>.</p>
</li><li>Set the <var>click in progress</var> flag on <var>target</var> to
false.
</li></ol>
<p class="note" role="note"> The algorithms above don’t run for arbitrary synthetic events dispatched by author script. The <code>click()</code> method can be used to make the <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps">run synthetic click activation steps</a> algorithm happen programmatically. </p>
<p class="note" role="note"> Click-focusing behavior (e.g. the focusing of a text field when user clicks in one) typically
happens before the click, when the mouse button is first depressed, and is therefore not
discussed here. </p>
<p>Given an element <var>target</var>, the <dfn data-dfn-type="dfn" data-noexport="" id="nearest-activatable-element">nearest activatable element<a class="self-link" href="editing.html#nearest-activatable-element"></a></dfn> is the element
returned by the following algorithm:</p>
<ol>
<li>If <var>target</var> has a defined <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a>, then return <var>target</var> and abort these steps.
</li><li>If <var>target</var> has a parent element, then set <var>target</var> to
that parent element and return to the first step.
</li><li>Otherwise, there is no <a data-link-type="dfn" href="editing.html#nearest-activatable-element">nearest activatable element</a>.
</li></ol>
<p>When a user agent is to <dfn data-dfn-type="dfn" data-noexport="" id="run-pre-click-activation-steps">run pre-click activation steps<a class="self-link" href="editing.html#run-pre-click-activation-steps"></a></dfn> on an element, it must run
the <dfn data-dfn-type="dfn" data-noexport="" id="pre-click-activation-steps">pre-click activation steps<a class="self-link" href="editing.html#pre-click-activation-steps"></a></dfn> defined for that element, if any.</p>
<p>When a user agent is to <dfn data-dfn-type="dfn" data-noexport="" id="run-canceled-activation-steps">run canceled activation steps<a class="self-link" href="editing.html#run-canceled-activation-steps"></a></dfn> on an element, it must run the <dfn data-dfn-type="dfn" data-noexport="" id="canceled-activation-steps">canceled activation steps<a class="self-link" href="editing.html#canceled-activation-steps"></a></dfn> defined for that element, if any.</p>
<p>When a user agent is to <dfn data-dfn-type="dfn" data-noexport="" id="run-post-click-activation-steps">run post-click activation steps<a class="self-link" href="editing.html#run-post-click-activation-steps"></a></dfn> on an element, it must run
the <dfn data-dfn-type="dfn" data-noexport="" id="activation-behavior">activation behavior<a class="self-link" href="editing.html#activation-behavior"></a></dfn> defined for that element, if any. Activation behaviors can
refer to the <code>click</code> event that was fired by the steps above
leading up to this point.</p>
</div>
<dl class="domintro">
<dt><var>element</var> . <code>click</code>()
</dt><dd>Acts as if the element was clicked.
</dd></dl>
<div class="impl">
The <dfn class="idl-code" data-dfn-for="common" data-dfn-type="method" data-export="" id="dom-common-click"><code>click()</code><a class="self-link" href="editing.html#dom-common-click"></a></dfn> method must run the following steps:
<ol>
<li data-md="">
<p>If the element is a form control that is disabled, abort these steps.</p>
</li><li data-md="">
<p><a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps">Run synthetic click activation steps</a> on the element.</p>
</li></ol>
</div>
<h3 class="heading settled" data-level="5.4" id="focus"><span class="secno">5.4. </span><span class="content">Focus</span><a class="self-link" href="editing.html#focus"></a></h3>
<h4 class="heading settled" data-level="5.4.1" id="focus-introduction"><span class="secno">5.4.1. </span><span class="content">Introduction</span><a class="self-link" href="editing.html#focus-introduction"></a></h4>
<p><em>This section is non-normative.</em></p>
<p>An HTML user interface typically consists of multiple interactive widgets, such as form
controls, scrollable regions, links, dialog boxes, browser tabs, and so forth. These widgets form
a hierarchy, with some (e.g. browser tabs, dialog boxes) containing others (e.g. links, form
controls).</p>
<p>When interacting with an interface using a keyboard, key input is channeled from the system,
through the hierarchy of interactive widgets, to an active widget, which is said to be <a data-link-type="dfn" href="editing.html#focused">focused</a>.</p>
<div class="example" id="example-592aaa68">
<a class="self-link" href="editing.html#example-592aaa68"></a> Consider an HTML application running in a browser tab running in a graphical environment.
Suppose this application had a page with some text fields and links, and was currently showing a
modal dialog, which itself had a text field and a button.
<p>The hierarchy of focusable widgets, in this scenario, would include the browser window, which
would have, amongst its children, the browser tab containing the HTML application. The tab itself
would have as its children the various links and text fields, as well as the dialog. The dialog
itself would have as its children the text field and the button.</p>
<p><img alt="" height="450" src="images/focus-tree.png" width="800"></p>
<p>If the widget with <a data-link-type="dfn" href="editing.html#focused">focus</a> in this example was the text field in the dialog box, then key
input would be channeled from the graphical system to ① the Web browser, then to ②
the tab, then to ③ the dialog, and finally to ④ the text field.</p>
</div>
<p>Keyboard <em>events</em> are always targeted at this <a data-link-type="dfn" href="editing.html#focused">focused</a> element.</p>
<h4 class="heading settled" data-level="5.4.2" id="data-model"><span class="secno">5.4.2. </span><span class="content">Data model</span><a class="self-link" href="editing.html#data-model"></a></h4>
<p>The term <dfn data-dfn-type="dfn" data-lt="focusable|focusable area" data-noexport="" id="focusable">focusable area<a class="self-link" href="editing.html#focusable"></a></dfn> is used to refer to regions of the interface that can become
the target of keyboard input. Focusable areas can be elements, parts of elements, or other regions
managed by the user agent.</p>
<p>Each <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> has a <dfn data-dfn-type="dfn" data-noexport="" id="dom-anchor">DOM anchor<a class="self-link" href="editing.html#dom-anchor"></a></dfn>, which is a <code>Node</code> object
that represents the position of the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> in the DOM. (When the <a data-link-type="dfn" href="editing.html#focusable">focusable
area</a> is itself a <code>Node</code>, it is its own <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a>.) The <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is
used in some APIs as a substitute for the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> when there is no other DOM object
to represent the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>.</p>
<p>The following table describes what objects can be <a data-link-type="dfn" href="editing.html#focusable">focusable
areas</a>. The cells in the left column describe objects that can be <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a>; the cells in the right column describe the <a data-link-type="dfn" href="editing.html#dom-anchor">DOM
anchors</a> for those elements. (The cells that span both columns are non-normative examples.)</p>
<table>
<thead>
<tr>
<th><a data-link-type="dfn" href="editing.html#focusable">Focusable area</a>
</th><th><a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a>
</th></tr><tr>
<th colspan="2">Examples
</th></tr></thead><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> Elements that have their <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a> set, that are not <a data-link-type="dfn" href="semantics.html#disabling">actually disabled</a>, that are not <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>, and that are either <a data-link-type="dfn" href="rendering.html#being-rendered">being
rendered</a> or <a data-link-type="dfn" href="semantics.html#being-used-as-relevant-canvas-fallback-content">being used as relevant canvas fallback content</a>.
</th><td headers="td-fa-1 th-fa-dom-rep"> The element itself.
</td></tr><tr>
<td colspan="2" headers="td-fa-1 th-fa-examples">
<p class="example" id="example-d41d8cd9"><a class="self-link" href="editing.html#example-d41d8cd9"></a> </p>
<p><code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code>, <code><input
type=text></code>, sometimes <code><a href=""></code> (depending on platform
conventions).</p>
<p></p>
</td></tr></tbody><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> The shapes of <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> elements in an <a data-link-type="dfn" href="semantics.html#image-map">image map</a> associated with an <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> element that is <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a> and is not <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>.
</th><td headers="td-fa-2 th-fa-dom-rep"> The <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> element.
</td></tr><tr>
<td colspan="2" headers="td-fa-2 th-fa-examples">
<div class="example" id="example-78107be7">
<a class="self-link" href="editing.html#example-78107be7"></a> In the following example, the <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element creates two shapes, one on each
image. The <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> of the first shape is the first <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> element, and the <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> of the second shape is the second <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> element.
<pre class="highlight"><span class="nt"><map</span> <span class="na">id=</span><span class="s">wallmap</span><span class="nt">><area</span> <span class="na">alt=</span><span class="s">"Enter Door"</span> <span class="na">coords=</span><span class="s">"10,10,100,200"</span> <span class="na">href=</span><span class="s">"door.html"</span><span class="nt">></map></span>
...
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/innerwall.jpeg"</span> <span class="na">alt=</span><span class="s">"There is a white wall here, with a door."</span> <span class="na">usemap=</span><span class="s">"#wallmap"</span><span class="nt">></span>
...
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/outerwall.jpeg"</span> <span class="na">alt=</span><span class="s">"There is a red wall here, with a door."</span> <span class="na">usemap=</span><span class="s">"#wallmap"</span><span class="nt">></span></pre>
</div>
</td></tr></tbody><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> The user-agent provided subwidgets of elements that are <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a> and are not <a data-link-type="dfn" href="semantics.html#disabling">actually disabled</a> or <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>.
</th><td headers="td-fa-3 th-fa-dom-rep"> The element for which the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is a subwidget.
</td></tr><tr>
<td colspan="2" headers="td-fa-3 th-fa-examples">
<p class="example" id="example-bf67362b"><a class="self-link" href="editing.html#example-bf67362b"></a>The <a data-link-type="dfn" href="semantics.html#exposing-a-user-interface">controls in the user
interface that is exposed to the user</a> for a <code><a data-link-type="element" href="semantics.html#elementdef-video">video</a></code> element, the up and down
buttons in a spin-control version of <code><input
type=number></code>, the two range control widgets in a <code><input type=range multiple></code>, the part of a <code><a data-link-type="element" href="semantics.html#elementdef-details">details</a></code> element’s rendering that enabled the element to be opened or closed using
keyboard input. </p>
</td></tr></tbody><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> The scrollable regions of elements that are <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a> and are not <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>.
</th><td headers="td-fa-4 th-fa-dom-rep"> The element for which the box that the scrollable region scrolls was created.
</td></tr><tr>
<td colspan="2" headers="td-fa-4 th-fa-examples">
<p class="example" id="example-7d1a38d4"><a class="self-link" href="editing.html#example-7d1a38d4"></a> The CSS <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css-overflow-3/#overflow">overflow</a> property’s <span class="css">scroll</span> value typically creates a scrollable
region. </p>
</td></tr></tbody><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> The viewport of a <code>Document</code> that is in a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> and is not <a data-link-type="dfn" href="editing.html#inertness">inert</a>.
</th><td headers="td-fa-5 th-fa-dom-rep"> The <code>Document</code> for which the viewport was created.
</td></tr><tr>
<td colspan="2" headers="td-fa-5 th-fa-examples">
<p class="example" id="example-d2837fc5"><a class="self-link" href="editing.html#example-d2837fc5"></a> The contents of an <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code>. </p>
</td></tr></tbody><tbody>
<tr>
<th class="data-header" headers="th-fa-area"> Any other element or part of an element, especially to aid with accessibility or to better
match platform conventions.
</th><td headers="td-fa-6 th-fa-dom-rep"> The element.
</td></tr><tr>
<td colspan="2" headers="td-fa-6 th-fa-examples">
<p class="example" id="example-f0aeeb32"><a class="self-link" href="editing.html#example-f0aeeb32"></a> A user agent could make all list item bullets focusable, so that a user can
more easily navigate lists. </p>
<p class="example" id="example-52641c2b"><a class="self-link" href="editing.html#example-52641c2b"></a> Similarly, a user agent could make all elements with <code>title</code> attributes focusable, so that their advisory information can
be accessed. </p>
</td></tr></tbody></table>
<p class="note" role="note"> A <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a> (e.g. an <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code>) is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, but key events routed to a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a> get immediately routed to the <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active
document</a>. Similarly, in sequential focus navigation a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a> essentially acts merely as a placeholder for its <<a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>. </p>
<p>Each <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> belongs to a <dfn data-dfn-type="dfn" data-noexport="" id="control-group">control group<a class="self-link" href="editing.html#control-group"></a></dfn>. Each <a data-link-type="dfn" href="editing.html#control-group">control group</a> has
an <dfn data-dfn-type="dfn" data-noexport="" id="owner">owner<a class="self-link" href="editing.html#owner"></a></dfn>. <a data-link-type="dfn" href="editing.html#control-group-owner">Control group
owners</a> are <dfn data-dfn-type="dfn" data-lt="control group owner|control group owner objects|control group owner object" data-noexport="" id="control-group-owner">control group owner objects<a class="self-link" href="editing.html#control-group-owner"></a></dfn>. The
following are <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner objects</a>:</p>
<ul class="brief">
<li><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code> object in <a data-link-type="dfn" href="browsers.html#browsing-context">browsing contexts</a>.
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> elements that have an <code>open</code> attribute specified and that are <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a>.
</li></ul>
<p>Each <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> owns one <a data-link-type="dfn" href="editing.html#control-group">control group</a> (though that group might be
empty).</p>
<p>If the <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> of a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner
object</a>, then that <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> belongs to that <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner
object</a>’s <a data-link-type="dfn" href="editing.html#control-group">control group</a>. Otherwise, the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> belongs to its <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a>’s nearest ancestor <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a>.</p>
<div class="example" id="example-fcc4c156"><a class="self-link" href="editing.html#example-fcc4c156"></a> Thus, a viewport always belongs to the <a data-link-type="dfn" href="editing.html#control-group">control group</a> of the <code>Document</code> for which the viewport was created, an <code><a data-link-type="element" href="semantics.html#elementdef-input">input</a></code> control belongs to the <a data-link-type="dfn" href="editing.html#control-group">control
group</a> of its nearest ancestor <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> or <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>, and an image
map’s shapes belong to the nearest ancestor <code>dialog</code> or <code>Document</code> of the <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> elements (not the <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> elements — this means one <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element might create multiple shapes in different <a data-link-type="dfn" href="editing.html#control-group">control groups</a>). </div>
<p>An element is <dfn data-dfn-type="dfn" data-noexport="" id="expressly-inert">expressly inert<a class="self-link" href="editing.html#expressly-inert"></a></dfn> if it is <a data-link-type="dfn" href="editing.html#inertness">inert</a> but it is not a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> and its nearest
ancestor <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> is not <a data-link-type="dfn" href="editing.html#inertness">inert</a>.</p>
<p>One <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> in each non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a> is designated the <dfn data-dfn-type="dfn" data-lt="focused area|focused area of the control group|focused dialog|focused area of that focus group|focused area of a control group|focused dialog of a dialog group|focused dialog of its dialog group" data-noexport="" id="focused-area">focused area of the control group<a class="self-link" href="editing.html#focused-area"></a></dfn>. Which control is so designated changes over time,
based on algorithms in this specification. If a <a data-link-type="dfn" href="editing.html#control-group">control group</a> is empty, it has no <a data-link-type="dfn" href="editing.html#focused-area">focused area</a>.</p>
<p>Each <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> can also act as the <dfn data-dfn-type="dfn" data-lt="dialog group manager|manager" data-noexport="" id="dialog-group-manager">manager<a class="self-link" href="editing.html#dialog-group-manager"></a></dfn> of a <dfn data-dfn-type="dfn" data-noexport="" id="dialog-group">dialog group<a class="self-link" href="editing.html#dialog-group"></a></dfn>.</p>
<p>Each <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element that has an <code>open</code> attribute specified and that is <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a> (i.e. that is a <a data-link-type="dfn" href="editing.html#control-group-owner">control group
owner object</a>) and is not <a data-link-type="dfn" href="editing.html#dialog-expressly-inert">expressly inert</a> belongs to the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> whose <a data-link-type="dfn" href="editing.html#dialog-group-manager">manager</a> is
the <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element’s nearest ancestor <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a>.</p>
<p>A <code>dialog</code> is <dfn data-dfn-for="dialog" data-dfn-type="dfn" data-noexport="" id="dialog-expressly-inert">expressly inert<a class="self-link" href="editing.html#dialog-expressly-inert"></a></dfn> if it is <a data-link-type="dfn" href="editing.html#inertness">inert</a> but its nearest ancestor <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> is not.</p>
<p>If no <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element has a particular <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> as
its nearest ancestor <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a>, then that <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner
object</a> has no <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>.</p>
<p>Each <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> can have a <code>dialog</code> designated as the <dfn data-dfn-type="dfn" data-noexport="" id="focused-dialog-of-the-dialog-group">focused
dialog of the dialog group<a class="self-link" href="editing.html#focused-dialog-of-the-dialog-group"></a></dfn>. Which <code>dialog</code> is so designated changes over time,
based on algorithms in this specification.</p>
<hr>
<p><a data-link-type="dfn" href="editing.html#focusable">Focusable areas</a> in <a data-link-type="dfn" href="editing.html#control-group">control groups</a> are ordered relative to the <a data-link-type="dfn" href="infrastructure.html#tree-order">tree order</a> of their <a data-link-type="dfn" href="editing.html#dom-anchor">DOM
anchors</a>. <a data-link-type="dfn" href="editing.html#focusable">Focusable areas</a> with the same <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> in a <a data-link-type="dfn" href="editing.html#control-group">control group</a> are ordered relative to their CSS box’s relative positions in a pre-order,
depth-first traversal of the box tree. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a></p>
<p>Elements in <a data-link-type="dfn" href="editing.html#dialog-group">dialog groups</a> are ordered in <a data-link-type="dfn" href="infrastructure.html#tree-order">tree
order</a>.</p>
<hr>
<p>The <dfn data-dfn-type="dfn" data-lt="currently focused area of the top-level browsing context|currently focused area of a top-level browsing context" data-noexport="" id="currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context<a class="self-link" href="editing.html#currently-focused-area-of-the-top-level-browsing-context"></a></dfn> at any particular time is
the <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> or <code>dialog</code> returned by this algorithm:</p>
<ol>
<li>Let <var>candidate</var> be the <code>Document</code> of the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level
browsing context</a>.
</li><li>
<p>If <var>candidate</var> has a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> with a designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, then let <var>candidate</var> be the
designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, and redo this step.</p>
<p>Otherwise, if <var>candidate</var> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, and the
designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a>, then let <var>candidate</var> be the <a data-link-type="dfn" href="browsers.html#active-document">active document</a> of
that <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>’s <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, and redo
this step.</p>
<p>Otherwise, if <var>candidate</var> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, let <var>candidate</var> be the designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control
group</a>.</p>
</li><li>Return <var>candidate</var>.
</li></ol>
<p>An element that is the <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> of a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is said to <dfn data-dfn-type="dfn" data-noexport="" id="gain-focus">gain focus<a class="self-link" href="editing.html#gain-focus"></a></dfn> when that <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> becomes the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a
top-level browsing context</a>. When an element is the <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> of a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> of the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>, it is <dfn data-dfn-type="dfn" data-noexport="" id="focused">focused<a class="self-link" href="editing.html#focused"></a></dfn>.</p>
<div class="impl">
The <dfn data-dfn-type="dfn" data-noexport="" id="focus-chain">focus chain<a class="self-link" href="editing.html#focus-chain"></a></dfn> of a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> or <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> <var>subject</var> is the ordered list constructed as follows:
<ol>
<li>Let <var>current object</var> be <var>subject</var>.
</li><li>Let <var>output</var> be an empty list.
</li><li><i>Loop</i>: Append <var>current object</var> to <var>output</var>.
</li><li>
<p>If <var>current object</var> is an <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element’s shape, append
that <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element to <var>output</var>.</p>
<p>Otherwise, if <var>current object</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM
anchor</a> is an element that is not <var>current object</var> itself, append that <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> element to <var>output</var>.</p>
</li><li>
<p>If <var>current object</var> is a <code>dialog</code> object in a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>,
let <var>current object</var> be that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>’s <a data-link-type="dfn" href="editing.html#dialog-group-manager">manager</a>, and return to the step labeled <i>loop</i>.</p>
<p>Otherwise, if <var>current object</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, let <var>current
object</var> be that <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>’s <a data-link-type="dfn" href="editing.html#control-group">control group</a>’s <a data-link-type="dfn" href="editing.html#owner">owner</a>, and return to the step labeled <i>loop</i>.</p>
<p>Otherwise, if <var>current object</var> is a <code>Document</code> in a <<a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, let <var>current object</var> be its <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>,
and return to the step labeled <i>loop</i>.</p>
</li><li>
<p>Return <var>output</var>.</p>
<p class="note" role="note"> The chain starts with <var>subject</var> and (if <var>subject</var> is or can be the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>) continues up the focus
hierarchy up to the <code>Document</code> of the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a>. </p>
</li></ol>
</div>
<h4 class="heading settled" data-level="5.4.3" id="the-tabindex-attribute"><span class="secno">5.4.3. </span><span class="content">The <code>tabindex</code> attribute</span><a class="self-link" href="editing.html#the-tabindex-attribute"></a></h4>
<p>The <dfn data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-tabindex"><code>tabindex</code><a class="self-link" href="editing.html#element-attrdef-global-tabindex"></a></dfn> content attribute allows authors to
indicate that an element is supposed to be <a data-link-type="dfn" href="editing.html#focusable">focusable</a>, and
whether it is supposed to be reachable using <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a> and, if so,
what is to be the relative order of the element for the purposes of sequential focus navigation.
The name "tab index" comes from the common use of the "tab" key to navigate through the focusable
elements. The term "tabbing" refers to moving forward through the focusable elements that can be
reached using sequential focus navigation.</p>
<p>When the attribute is omitted, the user agent applies defaults. (There is no way to make an
element that is <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a> be not focusable at all without <a data-link-type="dfn" href="semantics.html#disabling">disabling</a> it or making it <a data-link-type="dfn" href="editing.html#inertness">inert</a>.)</p>
<p>The <code>tabindex</code> attribute, if specified, must have a value
that is a <a data-link-type="dfn" href="infrastructure.html#valid-integer">valid integer</a>. Positive numbers specify the relative position of the
element’s <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus
navigation order</a>, and negative numbers indicate that the control is to be unreachable by <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a>.</p>
<div class="impl">
<p>Each element can have a <dfn data-dfn-type="dfn" data-lt="can be focused|tabindex focus flag" data-noexport="" id="can-be-focused">tabindex focus flag<a class="self-link" href="editing.html#can-be-focused"></a></dfn> set, as defined
below. This flag is a factor that contributes towards determining whether an element is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, as described in the previous section.</p>
<p>If the <code>tabindex</code> attribute is specified on an element, it
must be parsed using the <a data-link-type="dfn" href="infrastructure.html#integers-parses">rules for parsing integers</a>. The attribute’s values, or lack
thereof, must be interpreted as follows:</p>
<dl>
<dt>If the attribute is omitted or parsing the value returns an error
</dt><dd>
<p>The user agent should follow platform conventions to determine if the element’s <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a> is set and, if so, whether the element and any <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> that have the element as their <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> can
be reached using <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a>, and if so, what their relative
position in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a> is to be.</p>
<p>Modulo platform conventions, it is suggested that for the following elements, the <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a> be set:</p>
<ul>
<li><code><a data-link-type="element" href="#a">a</a></code> elements that have an <code><a data-link-type="element-attr" href="semantics.html#element-attrdef-links-href">href</a></code> attribute
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-link">link</a></code> elements that have an <code><a data-link-type="element-attr" href="semantics.html#element-attrdef-link-href">href</a></code> attribute
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-button">button</a></code> elements
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-input">input</a></code> elements whose <code>type</code> attribute are
not in the <a data-link-type="dfn" href="editing.html#hidden">Hidden</a> state
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-select">select</a></code> elements
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-textarea">textarea</a></code> elements
</li><li><code><a data-link-type="element" href="semantics.html#elementdef-menuitem">menuitem</a></code> elements
</li><li>Elements with a <code>draggable</code> attribute set, if that would
enable the user agent to allow the user to begin a drag operations for those elements without
the use of a pointing device
</li><li><a data-link-type="dfn" href="editing.html#editing-host">Editing hosts</a>
</li><li><a data-link-type="dfn" href="browsers.html#browsing-context-container">Browsing context containers</a>
</li><li><a data-link-type="dfn" href="semantics.html#sorting-interface-th-element">Sorting interface <code>th</code> elements</a>
</li></ul>
<p class="note" role="note"> One valid reason to ignore the platform conventions and always allow an element
to be focused (by setting its <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a>) would be if the user’s only
mechanism for activating an element is through a keyboard action that triggers the focused
element. </p>
</dd><dt>If the value is a negative integer
</dt><dd>
<p>The user agent must set the element’s <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a>, but should omit the
element from the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a>.</p>
<p class="note" role="note"> One valid reason to ignore the requirement that sequential focus navigation not
allow the author to lead to the element would be if the user’s only mechanism for moving the
focus is sequential focus navigation. For instance, a keyboard-only user would be unable to
click on a text field with a negative <code>tabindex</code>, so that
user’s user agent would be well justified in allowing the user to tab to the control
regardless. </p>
</dd><dt>If the value is a zero
</dt><dd>
<p>The user agent must set the element’s <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a>, should allow the
element and any <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> that have the element as their <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> to be reached using <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a>, following
platform conventions to determine the element’s relative position in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus
navigation order</a>.</p>
</dd><dt>If the value is greater than zero
</dt><dd>
<p>The user agent must set the element’s <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a>, should allow the
element and any <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> that have the element as their <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> to be reached using sequential focus navigation, and should place the element
— referenced as <var>candidate</var> below — and the aforementioned <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a> order so that, relative to other <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a>, they are:</p>
<ul>
<li>before any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has been omitted or whose value, when parsed,
returns an error,
</li><li>before any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has a value equal to or less than zero,
</li><li>after any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has a value greater than zero but less than
the value of the <code>tabindex</code> attribute on <var>candidate</var>,
</li><li>after any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has a value equal to the value of the <code>tabindex</code> attribute on <var>candidate</var> but that is
earlier in the document in <a data-link-type="dfn" href="infrastructure.html#tree-order">tree order</a> than <var>candidate</var>,
</li><li>before any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has a value equal to the value of the <code>tabindex</code> attribute on <var>candidate</var> but that is
later in the document in <a data-link-type="dfn" href="infrastructure.html#tree-order">tree order</a> than <var>candidate</var>, and
</li><li>before any <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a> is an element whose <code>tabindex</code> attribute has a value greater than the value of the <code>tabindex</code> attribute on <var>candidate</var>.
</li></ul>
</dd></dl>
<p>An element that has its <a data-link-type="dfn" href="editing.html#can-be-focused">tabindex focus flag</a> set but does not otherwise have an <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a> defined has an <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a> that does
nothing.</p>
<p class="note" role="note"> This means that an element that is only focusable because of its <code>tabindex</code> attribute will fire a <code>click</code> event in response to a non-mouse activation (e.g. hitting the
"enter" key while the element is <a data-link-type="dfn" href="editing.html#focused">focused</a>). </p>
<p>An element with the <code>tabindex</code> attribute specified is <a data-link-type="dfn" href="dom.html#interactive-content">interactive content</a>.</p>
<p>The <dfn class="idl-code" data-dfn-for="global" data-dfn-type="attribute" data-export="" id="dom-global-tabindex"><code>tabIndex</code><a class="self-link" href="editing.html#dom-global-tabindex"></a></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection">reflect</a> the value of the <code>tabindex</code> content
attribute. Its default value is 0 for elements that are focusable and -1 for elements that
are not focusable.</p>
</div>
<div class="impl">
<h4 class="heading settled" data-level="5.4.4" id="focus-processing-model"><span class="secno">5.4.4. </span><span class="content">Processing model</span><a class="self-link" href="editing.html#focus-processing-model"></a></h4>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="focusing-steps">focusing steps<a class="self-link" href="editing.html#focusing-steps"></a></dfn> for an object <var>new focus target</var> that is
either a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, or an element that is not a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, or a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a>, are as follows. They can optionally be run with a <i>fallback target</i>.</p>
<ol>
<li>
<p>If <var>new focus target</var> is neither a <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element that has an <code>open</code> attribute specified and that is <a data-link-type="dfn" href="rendering.html#being-rendered">being
rendered</a> (i.e. that is a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a>), nor a <a data-link-type="dfn" href="editing.html#focusable">focusable
area</a>, then run the first matching set of steps from the following list:</p>
<dl class="switch">
<dt>If <var>new focus target</var> is an <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element with one or more
shapes that are <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a>
</dt><dd>
<p>Let <var>new focus target</var> be the shape corresponding to the first <code><a data-link-type="element" href="semantics.html#elementdef-img">img</a></code> element in <a data-link-type="dfn" href="infrastructure.html#tree-order">tree order</a> that uses the image map to which the <code>area</code> element belongs.</p>
</dd><dt>If <var>new focus target</var> is an element with one or more scrollable regions
that are <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a>
</dt><dd>
<p>Let <var>new focus target</var> be the element’s first scrollable region,
according to a pre-order, depth-first traversal of the box tree. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a></p>
</dd><dt>If <var>new focus target</var> is the <a data-link-type="dfn" href="infrastructure.html#root-element">root element</a> of its <code>Document</code>
</dt><dd>
<p>Let <var>new focus target</var> be the <code>Document</code>’s viewport.</p>
</dd><dt>If <var>new focus target</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a>
</dt><dd>
<p>Let <var>new focus target</var> be the <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>.</p>
</dd><dt>If <var>new focus target</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>
</dt><dd>
<p>Let <var>new focus target</var> be the <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>’s <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>.</p>
</dd><dt>Otherwise
</dt><dd>
<p>If no <i>fallback target</i> was specified, abort the <a data-link-type="dfn" href="editing.html#focusing-steps">focusing steps</a>.</p>
<p>Otherwise, let <var>new focus target</var> be the <i>fallback target</i>.</p>
</dd></dl>
</li><li>
<p>If <var>new focus target</var> is a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> that is
not a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, but does have a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>, and that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> has a designated <a data-link-type="dfn" href="editing.html#focused-area">focused dialog</a>, then
let <var>new focus target</var> be the <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog
group</a>, and redo this step.</p>
<p>Otherwise, if <var>new focus target</var> is a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner
object</a> that is not a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, and its <a data-link-type="dfn" href="editing.html#control-group">control group</a> is not empty,
then designate <var>new focus target</var> as the <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control
group</a>, and redo this step.</p>
<p>Otherwise, if <var>new focus target</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a>, then let <var>new focus target</var> be the <<a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>, and redo this step.</p>
<p class="note" role="note"> A <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element can be both a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner
object</a> and a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, if it has both an <code>open</code> attribute specified and a <code>tabindex</code> attribute specified and is <a data-link-type="dfn" href="rendering.html#being-rendered">being
rendered</a>. </p>
</li><li>If <var>new focus target</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> and its <a data-link-type="dfn" href="editing.html#dom-anchor">DOM
anchor</a> is <a data-link-type="dfn" href="editing.html#inertness">inert</a>, then abort these steps.
</li><li>If <var>new focus target</var> is the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a
top-level browsing context</a>, then abort these steps.
</li><li>Let <var>old chain</var> be the <a data-link-type="dfn" href="editing.html#focus-chain">focus chain</a> of the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of the
top-level browsing context</a> in which <var>new focus target</var> finds
itself.
</li><li>Let <var>new chain</var> be the <a data-link-type="dfn" href="editing.html#focus-chain">focus chain</a> of <var>new
focus target</var>.
</li><li>Run the <a data-link-type="dfn" href="editing.html#loses-focus">focus update steps</a> with <var>old chain</var>, <var>new chain</var>, and <var>new focus target</var> respectively.
</li></ol>
<p>User agents must <a data-link-type="dfn" href="infrastructure.html#immediately">immediately</a> run the <a data-link-type="dfn" href="editing.html#focusing-steps">focusing steps</a> for a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code>, or <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> <var>candidate</var> whenever the
user attempts to move the focus to <var>candidate</var>.</p>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="unfocusing-steps">unfocusing steps<a class="self-link" href="editing.html#unfocusing-steps"></a></dfn> for an object <var>old focus target</var> that is
either a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> or an element that is not a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> are as
follows:</p>
<ol>
<li>If <var>old focus target</var> is <a data-link-type="dfn" href="editing.html#inertness">inert</a>, then abort these
steps.
</li><li>
<p>If <var>old focus target</var> is an <code><a data-link-type="element" href="semantics.html#elementdef-area">area</a></code> element and one of its shapes is the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>, or, if <var>old focus
target</var> is an element with one or more scrollable regions, and one of them is the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>, then let <var>old focus
target</var> be that <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>.</p>
</li><li>Let <var>old chain</var> be the <a data-link-type="dfn" href="editing.html#focus-chain">focus chain</a> of the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently
focused area of a top-level browsing context</a>.
</li><li>If <var>old focus target</var> is not one of the entries in <var>old
chain</var>, then abort these steps.
</li><li>
<p>If <var>old focus target</var> is a <code>dialog</code> in a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>, and
the <a data-link-type="dfn" href="editing.html#dialog-group-manager">dialog group manager</a> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, then let <var>new focus target</var> be the designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of that focus group</a>.</p>
<p>Otherwise, if <var>old focus target</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, then let <var>new
focus target</var> be the first <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> of its <a data-link-type="dfn" href="editing.html#control-group">control group</a> (if the <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner</a> is a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>, this will always be a
viewport).</p>
<p>Otherwise, let <var>new focus target</var> be null.</p>
</li><li>If <var>new focus target</var> is not null, then run the <a data-link-type="dfn" href="editing.html#focusing-steps">focusing
steps</a> for <var>new focus target</var>.
</li></ol>
<p>When the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a> is somehow
unfocused without another element being explicitly focused in its stead, the user agent must <a data-link-type="dfn" href="infrastructure.html#immediately">immediately</a> run the <a data-link-type="dfn" href="editing.html#unfocusing-steps">unfocusing steps</a> for that object.</p>
<p class="note" role="note"> The <a data-link-type="dfn" href="editing.html#unfocusing-steps">unfocusing steps</a> do not always result in the focus changing, even
when applied to the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a>. For
example, if the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a> is a viewport,
then it will usually keep its focus regardless until another <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is explicitly
focused with the <a data-link-type="dfn" href="editing.html#focusing-steps">focusing steps</a>. </p>
<hr>
<p>When a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is added to an empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, it must be designated
the <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a>.</p>
<p>When a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> is formed, if the <a data-link-type="dfn" href="editing.html#dialog-group-manager">dialog group manager</a> has an empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, the first non-<a data-link-type="dfn" href="editing.html#inertness">inert</a> <code>dialog</code> in the <a data-link-type="dfn" href="editing.html#dialog-group">dialog
group</a>, if any, or else the first <code>dialog</code> in the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> regardless of <a data-link-type="dfn" href="editing.html#inertness">inertness</a>, must be designated the <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog
group</a>.</p>
<p><dfn data-dfn-type="dfn" data-noexport="" id="focus-fixup-rule-one">Focus fixup rule one<a class="self-link" href="editing.html#focus-fixup-rule-one"></a></dfn>: When the designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of a control group</a> is removed from that <a data-link-type="dfn" href="editing.html#control-group">control group</a> in
some way (e.g. it stops being a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, it is removed from the DOM, it
becomes <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>, etc), and the <a data-link-type="dfn" href="editing.html#control-group">control
group</a> is still not empty: designate the first non-<a data-link-type="dfn" href="editing.html#inertness">inert</a> <a data-link-type="dfn" href="editing.html#focused-area">focused area</a> in that <a data-link-type="dfn" href="editing.html#control-group">control group</a> to be the new <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a>, if any; if they are all <a data-link-type="dfn" href="editing.html#inertness">inert</a>, then
designate the first <a data-link-type="dfn" href="editing.html#focused-area">focused area</a> in that <a data-link-type="dfn" href="editing.html#control-group">control group</a> to be the new <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a> regardless
of <a data-link-type="dfn" href="editing.html#inertness">inertness</a>. If such a removal instead results in the <a data-link-type="dfn" href="editing.html#control-group">control
group</a> being empty, then there is simply no longer a <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control
group</a>.</p>
<p class="example" id="example-5ec11306"><a class="self-link" href="editing.html#example-5ec11306"></a> For example, this might happen because an element is removed from its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>, or has a <code>hidden</code> attribute added. It might
also happen to an <code><a data-link-type="element" href="semantics.html#elementdef-input">input</a></code> element when the element gets disabled. </p>
<p><dfn data-dfn-type="dfn" data-noexport="" id="focus-fixup-rule-two">Focus fixup rule two<a class="self-link" href="editing.html#focus-fixup-rule-two"></a></dfn>: When a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> has no designed <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused
dialog of the dialog group</a>, and its <a data-link-type="dfn" href="editing.html#dialog-group-manager">dialog group manager</a>’s <a data-link-type="dfn" href="editing.html#control-group">control
group</a> changes from being non-empty to being empty, the first non-<a data-link-type="dfn" href="editing.html#inertness">inert</a> <code>dialog</code> in the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>, if any, or else the first <code>dialog</code> in
the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> regardless of <a data-link-type="dfn" href="editing.html#inertness">inertness</a>, must be designated
the <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>.</p>
<p><dfn data-dfn-type="dfn" data-noexport="" id="focus-fixup-rule-three">Focus fixup rule three<a class="self-link" href="editing.html#focus-fixup-rule-three"></a></dfn>: When the designated <a data-link-type="dfn" href="editing.html#focused-area">focused dialog of a dialog group</a> is removed from that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> in
some way (e.g. it stops <a data-link-type="dfn" href="rendering.html#being-rendered">being rendered</a>, it loses its <code>open</code> attribute, it becomes <a data-link-type="dfn" href="editing.html#expressly-inert">expressly inert</a>, etc), and there is still a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> (because the <code>dialog</code> in question was not the last <code>dialog</code> in that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>):
if the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>’s <a data-link-type="dfn" href="editing.html#dialog-group-manager">manager</a>’s <a data-link-type="dfn" href="editing.html#control-group">control
group</a> is non-empty, let there be no designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a> any more; otherwise (in the case that the <a data-link-type="dfn" href="editing.html#control-group">control group</a> is empty), designate the first
non-<a data-link-type="dfn" href="editing.html#inertness">inert</a> <code>dialog</code> in the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> to be the <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused
dialog of the dialog group</a>, or, if they are all <a data-link-type="dfn" href="editing.html#inertness">inert</a>, designate the first <code>dialog</code> in the <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> to be the <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog
group</a> regardless of <a data-link-type="dfn" href="editing.html#inertness">inertness</a>.</p>
<p>When the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing context</a> was a <a data-link-type="dfn" href="editing.html#focusable">focusable
area</a> but stops being a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, or when it was a <code>dialog</code> in a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> and stops being part of that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>, or when it
starts being <a data-link-type="dfn" href="editing.html#inertness">inert</a>, the user agent must run the following steps:</p>
<ol>
<li>Let <var>old focus target</var> be whatever the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of the top-level browsing
context</a> was immediately before this algorithm became applicable (e.g. before the element
was disabled, or the dialog was closed, or whatever caused this algorithm to run).
</li><li>Let <var>old chain</var> be the <a data-link-type="dfn" href="editing.html#focus-chain">focus chain</a> of the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of the
top-level browsing context</a> at the same time.
</li><li>Make sure that the changes implied by the focus fixup rules <span>one</span>, <span>two</span>, and <span>three</span> above are applied.
</li><li>Let <var>new focus target</var> be the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a
top-level browsing context</a>.
</li><li>If <var>old focus target</var> and <var>new focus target</var> are the
same, abort these steps.
</li><li>Let <var>new chain</var> be the <a data-link-type="dfn" href="editing.html#focus-chain">focus chain</a> of <var>new
focus target</var>.
</li><li>Run the <a data-link-type="dfn" href="editing.html#loses-focus">focus update steps</a> with <var>old chain</var>, <var>new chain</var>, and <var>new focus target</var> respectively.
</li></ol>
<hr>
<p>The <dfn data-dfn-type="dfn" data-lt="loses focus|focus update steps" data-noexport="" id="loses-focus">focus update steps<a class="self-link" href="editing.html#loses-focus"></a></dfn>, given an <var>old chain</var>, a <var>new chain</var>, and a <var>new focus target</var> respectively, are as
follows:</p>
<ol>
<li>Unset the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation-starting-point">sequential focus navigation starting point</a>.
</li><li>If the last entry in <var>old chain</var> and the last entry in <var>new chain</var> are the same, pop the last entry from <var>old chain</var> and the last entry from <var>new chain</var> and redo this step.
</li><li>
<p>For each entry <var>entry</var> in <var>old chain</var>, in order, run
these substeps:</p>
<ol>
<li>If <var>entry</var> is an <code>input</code> element, and the <code>change</code> event <a data-link-type="dfn" href="semantics.html#apply">applies</a> to the element, and the element does not have a
defined <a data-link-type="dfn" href="editing.html#activation-behavior">activation behavior</a>, and the user has changed the element’s <a data-link-type="dfn" href="semantics.html#forms-value">value</a> or its list of <a data-link-type="dfn" href="semantics.html#selected-files">selected files</a> while the control was focused
without committing that change, then <a data-link-type="dfn" href="infrastructure.html#fire">fire a simple event</a> that bubbles named <code>change</code> at the element.
</li><li>
<p>If <var>entry</var> is an element, let <var>blur event target</var> be <var>entry</var>.</p>
<p>If <var>entry</var> is a <code>Document</code> object, let <var>blur
event target</var> be that <code>Document</code> object’s <code>Window</code> object.</p>
<p>Otherwise, let <var>blur event target</var> be null.</p>
</li><li>If <var>entry</var> is the last entry in <var>old chain</var>, and <var>entry</var> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element">Element</a></code>, and the last entry in <var>new
chain</var> is also an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element">Element</a></code>, then let <var>related blur target</var> be the last entry in <var>new chain</var>. Otherwise, let <var>related blur
target</var> be null.
</li><li>
<p>If <var>blur event target</var> is not null, <a data-link-type="dfn" href="editing.html#fire-a-focus-event">fire a focus event</a> named <code>blur</code> at <var>blur event target</var>, with <var>related blur target</var> as the related target.</p>
<p class="note" role="note"> In some cases, e.g. if <var>entry</var> is an <code>area</code> element’s shape, a scrollable region, or a viewport, no event is fired. </p>
</li></ol>
</li><li>Apply any relevant platform-specific conventions for focusing <var>new focus
target</var>. (For example, some platforms select the contents of a text field when that field is
focused.)
</li><li>
<p>For each entry <var>entry</var> in <var>new chain</var>, in reverse
order, run these substeps:</p>
<ol>
<li>If <var>entry</var> is a <code><a data-link-type="element" href="semantics.html#elementdef-dialog">dialog</a></code> element: Let <var>entry</var> be the designated <a data-link-type="dfn" href="editing.html#focused-area">focused dialog of its dialog group</a>.
</li><li>
<p>If <var>entry</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>: Designate <var>entry</var> as the <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a>. If its <a data-link-type="dfn" href="editing.html#control-group">control
group</a>’s <a data-link-type="dfn" href="editing.html#owner">owner</a> is also a <a data-link-type="dfn" href="editing.html#dialog-group-manager">dialog group
manager</a>, then let there be no designated <a data-link-type="dfn" href="editing.html#focused-area">focused dialog</a> in that <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>.</p>
<p class="note" role="note"> It is possible for <var>entry</var> to be both a <code>dialog</code> element and a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, in which case it is its own <a data-link-type="dfn" href="editing.html#control-group-owner">control group
owner</a>. </p>
</li><li>
<p>If <var>entry</var> is an element, let <var>focus event target</var> be <var>entry</var>.</p>
<p>If <var>entry</var> is a <code>Document</code> object, let <var>focus
event target</var> be that <code>Document</code> object’s <code>Window</code> object.</p>
<p>Otherwise, let <var>focus event target</var> be null.</p>
</li><li>If <var>entry</var> is the last entry in <var>new chain</var>, and <var>entry</var> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element">Element</a></code>, and the last entry in <var>old
chain</var> is also an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element">Element</a></code>, then let <var>related focus target</var> be the last entry in <var>old chain</var>. Otherwise, let <var>related
focus target</var> be null.
</li><li>
<p>If <var>focus event target</var> is not null, <a data-link-type="dfn" href="editing.html#fire-a-focus-event">fire a focus event</a> named <code>focus</code> at <var>focus event target</var>, with <var>related focus target</var> as the related target.</p>
<p class="note" role="note"> In some cases, e.g. if <var>entry</var> is an <code>area</code> element’s shape, a scrollable region, or a viewport, no event is fired. </p>
</li></ol>
</li></ol>
<p>When a user agent is required to <dfn data-dfn-type="dfn" data-noexport="" id="fire-a-focus-event">fire a focus event<a class="self-link" href="editing.html#fire-a-focus-event"></a></dfn> named <var>e</var> at
an element <var>t</var> and with a given related target <var>r</var>, the user
agent must create a <a data-link-type="dfn" href="infrastructure.html#trusted">trusted</a> <code>FocusEvent</code> object, initialize it to have the given name <var>e</var>, to not bubble, to not be
cancelable, and to have the <code>relatedTarget</code> attribute initialized to <var>r</var>, the <code>view</code> attribute initialized to the <code>Window</code> object of the <code>Document</code> object of <var>t</var>, and the <code>detail</code> attribute initialized to 0, and must then <a data-link-type="dfn" href="infrastructure.html#dispatch">dispatch</a> the newly created <code>FocusEvent</code> object
at the specified target element <var>t</var>.</p>
<hr>
<p>When a key event is to be routed in a <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a>, the user agent
must run the following steps:</p>
<ol>
<li>Let <var>target area</var> be the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of the top-level browsing
context</a>.
</li><li>If <var>target area</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a>, let <var>target
node</var> be <var>target area</var>’s <a data-link-type="dfn" href="editing.html#dom-anchor">DOM anchor</a>. Otherwise, <var>target area</var> is a <code>dialog</code>; let <var>target node</var> be <var>target area</var>.
</li><li>
<p>If <var>target node</var> is a <code>Document</code> that has a <code><a data-link-type="element" href="semantics.html#elementdef-body">body</a></code> element, then let <var>target node</var> be <a href="semantics.html#the-body-element">the <code>body</code> element</a> of that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>.</p>
<p>Otherwise, if <var>target node</var> is a <code>Document</code> that has a <a data-link-type="dfn" href="infrastructure.html#root-element">root element</a>, then let <var>target node</var> be the <a data-link-type="dfn" href="infrastructure.html#root-element">root
element</a> of that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>.</p>
</li><li>
<p>If <var>target node</var> is not <a data-link-type="dfn" href="editing.html#inertness">inert</a>, fire the event at <var>target node</var>.</p>
<p class="note" role="note"> It is possible for the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level browsing
context</a> to be <a data-link-type="dfn" href="editing.html#inertness">inert</a>, for example if a <a data-link-type="dfn" href="semantics.html#modal-dialog-is-shown">modal dialog is shown</a>, and then that <code>dialog</code> element is made <a data-link-type="dfn" href="editing.html#inertness">inert</a>. It is likely to be the result of a logic error in the
application, though. </p>
</li><li>If the event was not canceled, then let <var>target area</var> handle the key
event. This might include <a data-link-type="dfn" href="editing.html#running-synthetic-click-activation-steps">running synthetic
click activation steps</a> for <var>target node</var>.
</li></ol>
<hr>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="has-focus-steps">has focus steps<a class="self-link" href="editing.html#has-focus-steps"></a></dfn>, given a <code>Document</code> object <var>target</var>, are
as follows:</p>
<ol>
<li>Let <var>candidate</var> be the <code>Document</code> of the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing
context</a>.
</li><li>If <var>candidate</var> is <var>target</var>, return true and abort these steps.
</li><li>
<p>If <var>candidate</var> has a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> with a designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused
dialog of the dialog group</a>, then let <var>candidate</var> be the designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, and redo this step.</p>
<p>Otherwise, if <var>candidate</var> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, and the
designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a>, and the <a data-link-type="dfn" href="browsers.html#active-document">active document</a> of that <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a>’s <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a> is <var>target</var>, then
return true and abort these steps.</p>
<p>Otherwise, if <var>candidate</var> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, and the
designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control group</a> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context
container</a>, then let <var>candidate</var> be the <a data-link-type="dfn" href="browsers.html#active-document">active document</a> of
that <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>’s <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>, and redo
this step.</p>
<p>Otherwise, return false and abort these steps.</p>
</li></ol>
<h4 class="heading settled" data-level="5.4.5" id="sec-sequential-focus-navigation"><span class="secno">5.4.5. </span><span class="content">Sequential focus navigation</span><a class="self-link" href="editing.html#sec-sequential-focus-navigation"></a></h4>
<p>Each <a data-link-type="dfn" href="editing.html#control-group">control group</a> has a <dfn data-dfn-type="dfn" data-lt="sequential focus navigation|sequential focus navigation order" data-noexport="" id="sequential-focus-navigation">sequential focus navigation order<a class="self-link" href="editing.html#sequential-focus-navigation"></a></dfn>, which orders some
or all of the <a data-link-type="dfn" href="editing.html#focusable">focusable areas</a> in the <a data-link-type="dfn" href="editing.html#control-group">control group</a> relative to each other. The order in the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a> does not
have to be related to the order in the <a data-link-type="dfn" href="editing.html#control-group">control group</a> itself. If a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> is
omitted from the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a> of its <a data-link-type="dfn" href="editing.html#control-group">control group</a>, then
it is unreachable via <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation</a>.</p>
<p>There can also be a <dfn data-dfn-type="dfn" data-noexport="" id="sequential-focus-navigation-starting-point">sequential focus navigation starting point<a class="self-link" href="editing.html#sequential-focus-navigation-starting-point"></a></dfn>. It is initially
unset. The user agent may set it when the user indicates that it should be moved.</p>
<p class="example" id="example-7f4ad2ac"><a class="self-link" href="editing.html#example-7f4ad2ac"></a> For example, the user agent could set it to the position of the user’s click if
the user clicks on the document contents. </p>
<p>When the user requests that focus move from the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level
browsing context</a> to the next or previous <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> (e.g. as the default action
of pressing the <kbd>tab</kbd> key), or when the user requests that focus sequentially move to a <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a> in the first place (e.g. from the browser’s location bar),
the user agent must use the following algorithm:</p>
<ol>
<li>Let <var>starting point</var> be the <a data-link-type="dfn" href="editing.html#currently-focused-area-of-the-top-level-browsing-context">currently focused area of a top-level
browsing context</a>, if the user requested to move focus sequentially from there, or else the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a> itself, if the user instead requested to move focus from
outside the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a>.
</li><li>If there is a <a data-link-type="dfn" href="editing.html#sequential-focus-navigation-starting-point">sequential focus navigation starting point</a> defined and it is
inside <var>starting point</var>, then let <var>starting point</var> be the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation-starting-point">sequential
focus navigation starting point</a> instead.
</li><li>
<p>Let <var>direction</var> be <i>forward</i> if the user requested the <em>next</em> control, and <i>backward</i> if the user requested the previous control.</p>
<p class="note" role="note"> Typically, pressing <kbd>tab</kbd> requests the next control, and pressing <kbd><kbd>shift</kbd>+<kbd>tab</kbd></kbd> requests the previous control. </p>
</li><li>
<p><i>Loop</i>: Let <var>selection mechanism</var> be <i>sequential</i> if the <var>starting
point</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a> or if <var>starting point</var> is in its <a data-link-type="dfn" href="editing.html#control-group">control group</a>’s <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a>.</p>
<p>Otherwise, <var>starting point</var> is not in its <a data-link-type="dfn" href="editing.html#control-group">control group</a>’s <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a>; let <var>selection mechanism</var> be <i>DOM</i>.</p>
</li><li>Let <var>candidate</var> be the result of running the <a data-link-type="dfn" href="editing.html#sequential-navigation-search-algorithm">sequential navigation search
algorithm</a> with <var>starting point</var>, <var>direction</var>, and <var>selection
mechanism</var> as the arguments.
</li><li>If <var>candidate</var> is not null, then run the <a data-link-type="dfn" href="editing.html#focusing-steps">focusing steps</a> for <var>candidate</var> and abort these steps.
</li><li>Otherwise, unset the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation-starting-point">sequential focus navigation starting point</a>.
</li><li>
<p>If <var>starting point</var> is the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a>, or a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> in the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a>, the user agent
should transfer focus to its own controls appropriately (if any), honouring <var>direction</var>, and then abort these steps.</p>
<p class="example" id="example-7611db4a"><a class="self-link" href="editing.html#example-7611db4a"></a> For example, if <var>direction</var> is <i>backward</i>, then the last
focusable control before the browser’s rendering area would be the control to focus. </p>
<p>If the user agent has no focusable controls — a kiosk-mode browser, for instance
—
then the user agent may instead restart these steps with the <var>starting point</var> being the <a data-link-type="dfn" href="browsers.html#top-level-browsing-context">top-level browsing context</a> itself.</p>
</li><li>Otherwise, <var>starting point</var> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> in a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>. Let <var>starting point</var> be that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a>’s <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>, and return to the
step labeled <i>loop</i>.
</li></ol>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="sequential-navigation-search-algorithm">sequential navigation search algorithm<a class="self-link" href="editing.html#sequential-navigation-search-algorithm"></a></dfn> consists of the following steps. This
algorithm takes three arguments: <var>starting point</var>, <var>direction</var>,
and <var>selection mechanism</var>.</p>
<ol>
<li>
<p>Pick the appropriate cell from the following table, and follow the instructions in that cell.</p>
<p>The appropriate cell is the one that is from the column whose header describes <var>direction</var> and from the first row whose header describes <var>starting point</var> and <var>selection mechanism</var>.</p>
<table>
<thead>
<tr>
<th>
</th><th><var>direction</var> is <i>forward</i>
</th><th><var>direction</var> is <i>backward</i>
</th></tr></thead><tbody>
<tr>
<th><var>starting point</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a>
</th><td> Let <var>candidate</var> be the first <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in <var>starting point</var>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>’s <a data-link-type="dfn" href="editing.html#primary-control-group">primary control group</a>, if
any; or else null
</td><td> Let <var>candidate</var> be the last <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in <var>starting point</var>’s <a data-link-type="dfn" href="browsers.html#active-document">active document</a>’s <a data-link-type="dfn" href="editing.html#primary-control-group">primary control group</a>, if
any; or else null
</td></tr><tr>
<th><var>selection mechanism</var> is <i>DOM</i>
</th><td> Let <var>candidate</var> be the first <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in the <a data-link-type="dfn" href="editing.html#home-control-group">home control group</a> following <var>starting point</var>, if any; or else null
</td><td> Let <var>candidate</var> be the last <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in the <a data-link-type="dfn" href="editing.html#home-control-group">home control group</a> preceding <var>starting point</var>, if any; or else null
</td></tr><tr>
<th><var>selection mechanism</var> is <i>sequential</i>
</th><td> Let <var>candidate</var> be the first <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in the <a data-link-type="dfn" href="editing.html#home-sequential-focus-navigation-order">home sequential focus navigation order</a> following <var>starting point</var>, if
any; or else null
</td><td> Let <var>candidate</var> be the last <a data-link-type="dfn" href="editing.html#suitable-sequentially-focusable-area">suitable sequentially focusable area</a> in the <a data-link-type="dfn" href="editing.html#home-sequential-focus-navigation-order">home sequential focus navigation order</a> preceding <var>starting point</var>, if
any; or else null
</td></tr></tbody></table>
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="suitable-sequentially-focusable-area">suitable sequentially focusable area<a class="self-link" href="editing.html#suitable-sequentially-focusable-area"></a></dfn> is a <a data-link-type="dfn" href="editing.html#focusable">focusable area</a> whose <a data-link-type="dfn" href="editing.html#dom-anchor">DOM
anchor</a> is not <a data-link-type="dfn" href="editing.html#inertness">inert</a> and that is in its <a data-link-type="dfn" href="editing.html#control-group">control group</a>’s <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential
focus navigation order</a>.</p>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="primary-control-group">primary control group<a class="self-link" href="editing.html#primary-control-group"></a></dfn> of a <a data-link-type="dfn" href="editing.html#control-group-owner">control group owner object</a> <var>X</var> is the <a data-link-type="dfn" href="editing.html#control-group">control group</a> of <var>X</var> if <var>X</var> has no <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> or if its <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> has no
designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, otherwise, it is the <a data-link-type="dfn" href="editing.html#primary-control-group">primary
control group</a> of <var>X</var>’s <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a>’s designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>.</p>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="home-control-group">home control group<a class="self-link" href="editing.html#home-control-group"></a></dfn> is the <a data-link-type="dfn" href="editing.html#control-group">control group</a> to which <var>starting point</var> belongs.</p>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="home-sequential-focus-navigation-order">home sequential focus navigation order<a class="self-link" href="editing.html#home-sequential-focus-navigation-order"></a></dfn> is the <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus
navigation order</a> to which <var>starting point</var> belongs.</p>
<p class="note" role="note"> The <a data-link-type="dfn" href="editing.html#home-sequential-focus-navigation-order">home sequential focus navigation order</a> is the <a data-link-type="dfn" href="editing.html#home-control-group">home
control group</a>’s <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a>, but is only used when the <var>starting point</var> is in that <a data-link-type="dfn" href="editing.html#sequential-focus-navigation">sequential focus navigation order</a> (when it’s not, <var>selection mechanism</var> will be <i>DOM</i>). </p>
</li><li>
<p>If <var>candidate</var> is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>, then let <var>new candidate</var> be the result of running the <a data-link-type="dfn" href="editing.html#sequential-navigation-search-algorithm">sequential navigation search
algorithm</a> with <var>candidate</var>’s <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a> as
the first argument, <var>direction</var> as the second, and <i>sequential</i> as the third.</p>
<p>If <var>new candidate</var> is null, then let <var>starting point</var> be <var>candidate</var>, and return to the top of this algorithm. Otherwise, let <var>candidate</var> be <var>new candidate</var>.</p>
</li><li>Return <var>candidate</var>.
</li></ol>
</div>
<h4 class="heading settled" data-level="5.4.6" id="focus-management-apis"><span class="secno">5.4.6. </span><span class="content">Focus management APIs</span><a class="self-link" href="editing.html#focus-management-apis"></a></h4>
<dl class="domintro">
<dt><var>document</var> . <code>activeElement</code>
</dt><dd>
<p>Returns the deepest element in the document through which or to which key events are being
routed. This is, roughly speaking, the focused element in the document.</p>
<p>For the purposes of this API, when a <a data-link-type="dfn" href="browsers.html#child-browsing-context">child browsing context</a> is focused, its <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a> is <a data-link-type="dfn" href="editing.html#focused">focused</a> in the <a data-link-type="dfn" href="browsers.html#parent-browsing-context">parent browsing context</a>. For example, if the user moves the focus to a text field
in an <code><a data-link-type="element" href="semantics.html#elementdef-iframe">iframe</a></code>, the <code>iframe</code> is the element returned by the <code>activeElement</code> API in the <code>iframe</code>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document">node document</a>.</p>
</dd><dt><var>document</var> . <code>hasFocus</code>()
</dt><dd>
<p>Returns true if key events are being routed through or to the document; otherwise, returns
false. Roughly speaking, this corresponds to the document, or a document nested inside this
one, being focused.</p>
</dd><dt><var>window</var> . <code>focus</code>()
</dt><dd>
<p>Moves the focus to the window’s <a data-link-type="dfn" href="browsers.html#browsing-context">browsing context</a>, if any.</p>
</dd><dt><var>element</var> . <code>focus</code>()
</dt><dd>
<p>Moves the focus to the element.</p>
<p>If the element is a <a data-link-type="dfn" href="browsers.html#browsing-context-container">browsing context container</a>, moves the focus to the <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts">nested browsing context</a> instead.</p>
</dd><dt><var>element</var> . <code>blur</code>()
</dt><dd>
<p>Moves the focus to the viewport. Use of this method is discouraged; if you want to focus the
viewport, call the <code>focus()</code> method on the <code>Document</code>’s root element.</p>
<p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
use a CSS rule to override the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-ui/#propdef-outline">outline</a> property, and provide a different way to show what
element is focused. Be aware that if an alternative focusing style isn’t made available, the
page will be significantly less usable for people who primarily navigate pages using a keyboard,
or those with reduced vision who use focus outlines to help them navigate the page.</p>
<div class="example" id="example-267407fd">
<a class="self-link" href="editing.html#example-267407fd"></a> For example, to hide the outline from links and instead use a yellow background to indicate
focus, you could use:
<pre class="highlight"><span class="nt">:link:focus, :visited:focus </span><span class="p">{</span> <span class="k">outline</span><span class="p">:</span> none<span class="p">;</span> <span class="k">background</span><span class="p">:</span> yellow<span class="p">;</span> <span class="k">color</span><span class="p">:</span> black<span class="p">;</span> <span class="p">}</span></pre>
</div>
<p>Do not use this method to hide the focus ring. Do not use any
other method that hides the focus ring from keyboard users, in
particular do not use a CSS rule to override the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/css3-ui/#propdef-outline">outline</a> property. Removal of the focus ring leads to serious accessibility
issues for users who navigate and interact with interactive
content using the keyboard.</p>
</dd></dl>
<div class="impl">
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="activeelement"><code>activeElement</code><a class="self-link" href="editing.html#activeelement"></a></dfn> attribute on <code>Document</code> objects must return the value returned by the following steps:</p>
<ol>
<li>Let <var>candidate</var> be the <code>Document</code> on which the method was
invoked.
</li><li>If <var>candidate</var> has a <a data-link-type="dfn" href="editing.html#dialog-group">dialog group</a> with a designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, then let <var>candidate</var> be the
designated <a data-link-type="dfn" href="editing.html#focused-dialog-of-the-dialog-group">focused dialog of the dialog group</a>, and redo this step.
</li><li>If <var>candidate</var> has a non-empty <a data-link-type="dfn" href="editing.html#control-group">control group</a>, let <var>candidate</var> be the designated <a data-link-type="dfn" href="editing.html#focused-area">focused area of the control
group</a>.