-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathHTML-image-alt-ja.html
2540 lines (2240 loc) · 97.6 KB
/
HTML-image-alt-ja.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="ja"><head><meta charset="utf-8">
<title>HTML — Requirements for providing text to act as an alternative for images（日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>
<script>
Util.ready = function(){
const source_data = {
toc_main: 'MAIN',
generate: expand
};
Util.switchWordsInit(source_data);
}
function expand(){
const class_map = this.class_map;
const tag_map = this.tag_map;
const link_map = this.link_map;
return this.html.replace(
/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
create_html
);
function create_html(match, key, indicator, klass){
if(!key) {//%
return `<var>${match.slice(1)}</var>`;
}
let href = '';
let href1 = '';
{
const n = key.indexOf('＠');
if(n > 0) {
href1 = key.slice(n + 1);
key = key.slice(0, n);
}
}
let text = key;
switch(klass){
case 'r':
text = `[${key}]`;
href = `HTML-references.html#refs${key}`;
break;
case 'l':
text = `"<code class="literal">${text}</code>"`;
break;
case 'm':
case 'mS':
const n = text.indexOf('(');
if(n > 0){
key = text.slice(0, n);
text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
}
break;
case 't':
text = `<${text}>`;
break;
case 'tag':
text = `<${text}>`;
break;
case 'U':
text = `U+${key}`;
break;
case 'smb':
text = `(<span class="char-symbol">${text}</span>)`;
break;
case 'xCode':
return `<a id="_ex-html-${key}">＊</a>`;
break;
case 'AA':
return `<a href="~HTMLARIA#el-${key}">作者~向け</a>／<a href="~HTMLAAM#el-${key}">実装者~向け</a>`;
break;
case 'en':
return `<span lang="en">${key}</span>`;
break;
}
let tag = tag_map[klass];
if(tag) {
let classname = class_map[klass];
classname = classname ? ` class="${classname}"` : '';
text = `<${tag}${classname}>${text}</${tag}>`;
}
if(indicator !== '^'){
href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
if(!href){
console.log(match); // check error
return match;
}
switch(indicator){
case '$':
text = `<a href="${href}">${text}</a>`;
break;
case '@':
text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
break;
}
}
return text;
}
}
</script>
<script type="text/plain" id="_source_data">
●●options
spec_date:2022-05-19
trans_update:2021-09-01
source_checked:2020-04-07
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/images.html
nav_prev:HEimages
nav_next:HEembed
trans_1st_pub:2020-04-12
●●class_map
e:element
a:attr
●●tag_map
e:code
a:code
i:i
em:em
●●original_id_map
●●link_map
e.a:~HEtextlevel#the-a-element
e.button:~HEforms#the-button-element
e.figcaption:~HEgrouping#the-figcaption-element
e.figure:~HEgrouping#the-figure-element
e.img:~HEimages#the-img-element
a.generator-unable-to-provide-required-alt:#attr-img-generator-unable-to-provide-required-alt
a.alt:~HEimages#attr-img-alt
a.src:~HEimages#attr-img-src
a.title:~HTMLdom#attr-title
a.width:~HEembed#attr-dim-width
a.height:~HEembed#attr-dim-height
画像は可用:~HEimages#img-available
画像~map:~HEimages#image-map
~hyperlink:~HTMLlinks#hyperlink
要素間~空白:~HTMLdom#inter-element-whitespace
~flow内容:~HTMLdom#flow-content-2
images/parsing-model-overview.svg
#guidance-for-conformance-checkers
#figcaption-as-alt-condition
#unknown-images
●●words_table1
●●words_table
●仕様
継目なく:seamlessに:継ぎ目なく
関連性:relevance:~
関連中で:relevantであって:関連していて
欠如:lack:~
帰結:corollary:~
想定-:suppose:~
補足的:supplemental:~
補足:supplementary:~
補足-:supplement:~
欲した:desireした:~
惑わす:confuseする:~
個人:person:~
当人:individual:~
当人:she
個人的:personal:~
種類:kind:~
実体:entity:~
補強-:reinforce:~
私的:private:~
不可避:inevitable:~
補佐的:ancillary:~
句:phrase:~
流儀:fashion:~
変種:variant:~
偽りな:phonyな:~
馬鹿げた:egregiousな:ばかげた
本当の:realな:~
拠所:resort:拠り所
黙って:silentに:~
目指して:aimして:~
目指して:aimed at
概略的:brief:~
関心事:interest:~
従来的:conventional:~
説明的:explanatory:~
良な:goodな:良い
難しい:hardな:~
出所:provenance:~
デタラメ:bogus:~
対象読者:target audience:~
黙らす:silenceする:~
見かけ:looks:~
必要不可欠:critical:不可欠
冗長:redundant:~
主目的:point:~
鍵:key:~
鍵を成:key part
保つ:keepする:~
悟る:realizeする:~
助け:help:~
間違い:wrong
間違っている:wrong
言い尽くす:thorough
価するものは無い:no-value
指して:refer
〜さは変わらない:~make 〜 less
一目で:at a glance
ときには:sometimes
事実:fact
~~実際には:in fact
~~実際，:indeed
属する:belong
最初から無かった:had never been there in the first place
したくなる:tempted
分類される:falls into this category
その前の:previous
しっかり／ひどく:quite
あいにく，:unfortunate
言い換える:rephrase
実用的でない:impractical
無理:defyする:~
必要十分でない:inadequate
平易に:helpfully
少しでもある:even slightest
最終的に:eventually
ほとんどない:little
要求-:must
同じ目的:identical purpose
でも:despite
漠然として:indistinct
~~公正に伝える:do justice
見過ごされ:miss
何も思い浮かばない:not have any idea what
表して:stand for
注意:note
注意:notice
単に:merely
~~強要-:pressure:~
様子:how
そのような無駄なくどさ:taunting them twice yet ... if they had only read or heard the caption once
調べる:see
満たす:satisfies
当然ながら:naturally
促し:encourage
これまでの各節:entries
より劣る:lesser
まさに:very
~~不可能:state-of-the-art 〜 cannot
アリ性:possibility
●例
WYSIWYG:
CAPTCHA:
project::::プロジェクト
band::::バンド
package::::パッケージ
webcam::::web カメラ
pointing::::ポインタ指示
国:country:~
tooltip::::ツールチップ
tablet::::タブレット
touch::::タッチ
email::::メール
mailing-list::::メーリングリスト
mail::::メール
news::::ニュース
blog::::ブログ
text-only::::テキスト
hands-free::::ハンズフリー
自動車:automobile:~
voice:::音声::ボイス
通貨:currency:~
記号:symbol:~
電話:phone::~
会社:company:~
組織:organization:~
screenshot::::スクリーンショット
^en:comic strip
fractal::::フラクタル
図表:chart:~:::チャート
illustration::::イラスト
flowchart:::流れ図::フローチャート
logo::::ロゴ
想起-:inspire:~
展示:gallery:~
雑誌:magazine:~
新聞漫画:comic strip:~
review::::レビュー
写真:photo:~
写真:photograph
写真家:photographer:~
凡例:legend::~
地図:map:~
投稿:post:~
装飾写本:illuminated manuscript:~
友人:friend:~
旗:flag:~
徽章:insignia:~
紋章:emblem:~
詩:poem:~
絵画:painting:~
地形図:topographical map:~
政治家:politician:~
政治的:political:~
career::::キャリア
将来性:prospect:~
人物像:figure:~
格付け:rating:~
財務-:financial:~
盲目:blind:~
撮っ:takeし:~
朗読-:recite:~
肖像写真:picture:~
記事:article:~
来歴:biography:~
数える:countする:~
来歴:biography:~
落胆-:sad
喜ぶ:happy
憂いて:unhappy
言わんと:likely saying
国民投票:referendum
二分-:divide
大統領:the President
公開書簡:open letter
色違いの星印の個数:three filled stars and two empty stars
中空な:empty
星印:star
空欄:blank
空飛ぶスパゲッティモンスター教:flying-spaghetti-monster
左側:left side／:right
右側:right side／:left
触手:noodly appendage
ロールシャッハテスト:Rorschach inkblot test::~
マンデルブロ:Mandelbrot
アイザック・アシモフ:Isaac Asimov
社:Corp
売り上げ:sales:
草花:flowers and plants
新規な:novel
新式の:new-fangled
顔:face
髪や肌の色:whether the individual has red hair or blond hair, whether the individual has white skin or black skin,
片目かどうか:one eye or two eyes
怒り, 喜び, 落胆:as angry, or particularly happy, or devastated
趣向をこらす:spice up
買収:acquisition
買う:buying
眼鏡:glasses
かけて:wore
見たとおりに:literally
商標的な何か:branding
脇で:side
丸っこい:curly
E
棒:bar
ある催し:Burning Man
ある光景:Black Rock City landscape
広い額:high forehead／tall forehead
見解:opinion piece
^en:adventure
●未分類
書く:writeする::~
書け:writeでき::~
書かれ:writeされ::~
書出す:writeする::書き出す
読上げら:read outさ::読み上げら
読上げる:read outする::読み上げる
選取する:pickする:選ぶ
選取でき:pickでき:選べ
聴取っ:listenし::聴きとっ
置いて／置く:put
話して:talk
在っても:presence
重複-:duplicate:~
要素間:inter-element::~
絵図:picture:~
装飾-:decorate::~
装飾:decoration::~
装飾的:decorative::~
素材:material:~
heading:::見出し
解法:solution:~
論題:topic:~
代用-:substitute:~
置換:replacement:~
共有:sharing::~
〜共有:-sharing
回送-:forward:~
typographic::::タイポグラフィック
:typographicな:typographical:~
強調-:highlight:~
発音:pronunciation:~
-:phonetic
外字:gaiji:~
異体字:itaiji:~
平仮名:hiragana:ひらがな
片仮名:katakana:カタカナ
論調:tone:~
切分けら:sliceさ:切り分けら
切分ける:sliceする:切り分ける
切分けた:sliceした:切り分けた
流れな:flowしな::~
流れる:flowする::~
精緻:fine:~
精緻に~~調整された:finely-tuned
出現-:appear:~
遅い:slowな:~
報道:story:~
置いて／置く:put
`Web Fonts^:web Fonts
~code片:snippet
触れ:mention
誰か:someone
伝える:read
~~考える:think
言う:say
~~出発点:start
何か:Whatever
~icon的:iconic
~site全般:site-wide
一方で:whereas
見込みが高い:likely
変わる:varies
各文字:letters
-:letter
~graphicな代替~表現:alternative graphical representation
●指示語
残り:the rest
彼:he
〜のみ:-only
のみからなる:sole
多かれ少なかれ:more or less
一連の:set of
一連の:series of
〜の隣:next to 〜
すぐ隣:right next to
より大き:larger
より小さ:smaller
真ん中:in the middle
短い:short
もの:thing
周囲の:surrounding
次に，:second
一緒:together
2 つに:into two pieces
等しく:equally
残りの:remaining
違い:difference
最後に、:finally
まるごと:altogether
最新:up-to-date
各部:parts
全体として:as a whole
ずっと:a lot
●●html_code_list
■imgAlt.2-1
<％h1>色を選んでください</h1>
<ul>
<li><a href="green.html">＜<img src="green.jpeg" alt="Green"></a>＞</li>
<li><a href="blue.html">＜<img src="blue.jpeg" alt="Blue"></a>＞</li>
<li><a href="red.html">＜<img src="red.jpeg" alt="Red"></a>＞</li>
</ul>
<％h1>Pick your color</h1>
<ul>
<li><a href="green.html">＜<img src="green.jpeg" alt="Green"></a>＞</li>
<li><a href="blue.html">＜<img src="blue.jpeg" alt="Blue"></a>＞</li>
<li><a href="red.html">＜<img src="red.jpeg" alt="Red"></a>＞</li>
</ul>
■imgAlt.2-2
<button name="rgb">＜<img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt="">＞</button>
<button name="cmyk">＜<img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt="">＞</button>
■imgAlt.2-3
<button name="rgb">＜<img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B">＞</button>
<button name="cmyk">＜<img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K">＞</button>
■imgAlt.2-4
<button name="rgb">＜<img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt="">＞</button>
<button name="cmyk">＜<img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt="">＞</button>
■imgAlt.3-1
<p>トークン化段階で取り扱われるデータは、よくある事例ではネットワークから来るが、スクリプトから来ることもある。</p>
<p>＜<img src="images/parsing-model-overview.svg" alt="データはネットワークから入力ストリーム処理器に渡され，トークン化器に渡され，さらにツリー構築段階へ渡される。データはそこから、 DOM, スクリプト実行どちらへも流れる。スクリプト実行は DOM にリンクされ、 document.write() を利用してデータをトークン化器へ渡す。">＞</p>
<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p>＜<img src="images/parsing-model-overview.svg" alt="The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer.">＞</p>
■imgAlt.3-2
<!-- 正しい仕方 -->
<p>
あなたは今、家の西にある草原に立っている。
＜<img src="house.jpeg" alt="家は白く、門扉がある。">＞
そこには小さな郵便受けがある。
</p>
<!-- This is the correct way to do things. -->
<p>
You are standing in an open field west of a house.
＜<img src="house.jpeg" alt="The house is white, with a boarded front door.">＞
There is a small mailbox here.
</p>
■imgAlt.3-3 bad
<!-- 間違った仕方 -->
<p>
あなたは今、家の西にある草原に立っている。
<img src="house.jpeg" alt="門扉がある白い家">
そこには小さな郵便受けがある。
</p>
<!-- This is the wrong way to do things. -->
<p>
You are standing in an open field west of a house.
<img src="house.jpeg" alt="A white house, with a boarded front door.">
There is a small mailbox here.
</p>
■imgAlt.4-1
<nav>
<p><a href="/help/">＜<img src="/icons/help.png" alt="">＞ヘルプ</a></p>
<p><a href="/configure/">＜<img src="/icons/configuration.png" alt="">＞環境設定ツール</a></p>
</nav>
<nav>
<p><a href="/help/">＜<img src="/icons/help.png" alt="">＞ Help</a></p>
<p><a href="/configure/">＜<img src="/icons/configuration.png" alt="">＞
Configuration Tools</a></p>
</nav>
■imgAlt.4-2
<body>
<article>
<header>
<h1><i>年間最優秀映画</i>賞は「レミーのおいしいレストラン」が受賞</h1>
<p>＜<img src="movies.png" alt="映画">＞</p>
</header>
<p>Pixar は、まだ他にも最近 12 年間で 8 回も<i>年間最優秀映画</i>賞を受賞しています。</p>
</article>
<article>
<header>
<h1>最新の TWiT エピソードがオンラインに</h1>
<p>＜<img src="podcasts.png" alt="ポッドキャスト">＞</p>
</header>
<p>
最新の TWiT エピソードが投稿され、いくつかの tech ニュース報道を見聞できます。また、 iPhone について，もっとたくさんのことを学べます。今週は、パネリストたちが iPhone の Apple ロゴの反射率について比較しました。</p>
</article>
</body>
<body>
<article>
<header>
<h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
<p>＜<img src="movies.png" alt="Movies">＞</p>
</header>
<p>Pixar has won yet another <i>Best Movie of the Year</i> award,
making this its 8th win in the last 12 years.</p>
</article>
<article>
<header>
<h1>Latest TWiT episode is online</h1>
<p>＜<img src="podcasts.png" alt="Podcasts">＞</p>
</header>
<p>The latest TWiT episode has been posted, in which we hear
several tech news stories as well as learning much more about the
iPhone. This week, the panelists compare how reflective their
iPhones' Apple logos are.</p>
</article>
</body>
■imgAlt.4-3
<％h1>＜<img src="XYZ.gif" alt="XYZ 社">＞</h1>
<％h1>＜<img src="XYZ.gif" alt="The XYZ company">＞</h1>
■imgAlt.4-4
<article>
<h2>ニュース</h2>
<p>私たちは最近、このタイプの製品に特化したギリシャの小さな会社
＜<img src="alpha.gif" alt=""> ΑΒΓ 社＞を買うことを検討しています。
</p>
<article>
<h2>News</h2>
<p>We have recently been looking at buying the ＜<img src="alpha.gif"
alt=""> ΑΒΓ company＞, a small Greek company
specializing in our type of product.</p>
■imgAlt.4-5
＜<aside><p><img src="alpha-large.gif" alt=""></p></aside>＞
<p>ΑΒΓ 社は良い四半期でした。 ΑΒΓ 社の収支報告に対する調査から、円グラフの青い区分が緑やオレンジの区分よりずっと大きいことが示唆されました — それは常に良い兆候です。</p>
</article>
＜<aside><p><img src="alpha-large.gif" alt=""></p></aside>＞
<p>The ΑΒΓ company has had a good quarter, and our
pie chart studies of their accounts suggest a much bigger blue slice
than its green and orange slices, which is always a good sign.</p>
</article>
■imgAlt.4-6
<p>彼らのロゴについて、しばし考えてみる：</p>
％
＜<p><img src="/images/logo" alt="それは、緑な円と その内側にある緑な疑問符からなる。"></p>＞
％
<p>1 個の疑問符とは、なんと質素な。でしょ？ 実に<em>革新的</em>かつ<em>画期的</em>だ。誰もが今すぐ，彼らの仕様の採用へ向けて突き進むことに違いない。少なくとも何らかの類の — 私は知らないが — 様々な濃淡の緑な影を伴い，白で太く縁取られ，丸みのある正方形は試したであろうが、少なくとも青い本の表紙上では良い見かけになろう。</p>
<p>Consider for a moment their logo:</p>
％
＜<p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p>＞
％
<p>How unoriginal can you get? I mean, oooooh, a question mark, how
<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p>
■imgAlt.5-1
<％h1>＜<img src="earthdayheading.png" alt="Earth Day">＞</h1>
■imgAlt.5-2
<p><img src="initials/o.svg" alt="遠">い遠い昔のある日のこと、夜の闇に深く覆われたころ、丘を越え、森を抜け、海を渡った遠い国の、満月に照らされた、丘の上の小さな家で...
<p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...
■imgAlt.5-3
<p>なんと ＜<img src="euro.png" alt="ユーロ">＞5.99！
<p>Only ＜<img src="euro.png" alt="euro ">＞5.99!
■imgAlt.6-1
<p>
データはネットワークから入力ストリーム処理器に渡され，トークン化器に渡され，さらにツリー構築段階へ渡される。データはそこから、 DOM, スクリプト実行どちらへも流れる。スクリプト実行は DOM にリンクされ、 document.write() を利用してデータをトークン化器へ渡す。
</p>
＜<p><img src="images/parsing-model-overview.svg" alt=""></p>＞
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
＜<p><img src="images/parsing-model-overview.svg" alt=""></p>＞
■imgAlt.6-2
<p>
データはネットワークから入力ストリーム処理器に渡され，トークン化器に渡され，さらにツリー構築段階へ渡される。データはそこから、 DOM, スクリプト実行どちらへも流れる。スクリプト実行は DOM にリンクされ、 document.write() を利用してデータをトークン化器へ渡す。
</p>
<p>＜<img src="images/parsing-model-overview.svg"
alt=""
title="構文解析モデルを表現する流れ図。">＞</p>
<!-- Using the title="" attribute -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p>＜<img src="images/parsing-model-overview.svg" alt=""
title="Flowchart representation of the parsing model.">＞</p>
■imgAlt.6-3
<p>
データはネットワークから入力ストリーム処理器に渡され，トークン化器に渡され，さらにツリー構築段階へ渡される。データはそこから、 DOM, スクリプト実行どちらへも流れる。スクリプト実行は DOM にリンクされ、 document.write() を利用してデータをトークン化器へ渡す。
</p>
<figure>
＜<img src="images/parsing-model-overview.svg"
alt="データはネットワークから入力ストリーム処理器, トークン化器を経て, ツリー構築段階へ至る。ツリー構築段階からは 2 つに分かれる。うちスクリプト実行へ至るものは document.write() 介してトークン化器へ戻る。他は DOM へ至る。 DOM はスクリプト実行に関係する。">＞
<figcaption>構文解析モデルを表現する流れ図。</figcaption>
</figure>
<!-- Using <figure> and <figcaption> -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<figure>
＜<img src="images/parsing-model-overview.svg" alt="The Network leads to
the Input Stream Preprocessor, which leads to the Tokenizer, which
leads to the Tree Construction stage. The Tree Construction stage
leads to two items. The first is Script Execution, which leads via
document.write() back to the Tokenizer. The second item from which
Tree Construction leads is the DOM. The DOM is related to the Script
Execution.">＞
<figcaption>Flowchart representation of the parsing model.</figcaption>
</figure>
■imgAlt.6-4 bad
<p>
データはネットワークから入力ストリーム処理器に渡され，トークン化器に渡され，さらにツリー構築段階へ渡される。データはそこから、 DOM, スクリプト実行どちらへも流れる。スクリプト実行は DOM にリンクされ、 document.write() を利用してデータをトークン化器へ渡す。
</p>
<p><img src="images/parsing-model-overview.svg"
alt="構文解析モデルを表現する流れ図。"></p>
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg"
alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->
■imgAlt.6-5
<p>何十億ページもの調査から、 2007 年における web 上の文書のうち 62% は “過去互換” モード, 30% は “ほぼ標準” モード, 9% は “標準” モードを web ブラウザの具現化モードとして誘発していた。</p>
＜<p><img src="rendering-mode-pie-chart.png" alt=""></p>＞
<p>According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
＜<p><img src="rendering-mode-pie-chart.png" alt=""></p>＞
■imgAlt.7-1
<p>＜<img src="president.jpeg" alt="">＞
今日の国民投票に先立ち、大統領は、すべての登録済み有権者へ向けて公開書簡を書いた。その中で大統領は、国が二分されていることを認めた。</p>
<p>＜<img src="president.jpeg" alt="">＞
Ahead of today's referendum, the President wrote an open letter to all registered voters. In it, she admitted that the country was divided.</p>
■imgAlt.7-2
<p>＜<img src="president.jpeg" alt="落胆する大統領。">＞
今日の国民投票に先立ち、大統領は、すべての登録済み有権者へ向けて公開書簡を書いた。その中で大統領は、国が二分されていることを認めた。
</p>
<p>＜<img src="president.jpeg" alt="The President is sad.">＞
Ahead of today's referendum, the President wrote an open letter to all registered voters. In it, she admitted that the country was divided.</p>
■imgAlt.7-3
<p>＜<img src="president.jpeg" alt="喜ぶ大統領。">＞
今日の国民投票に先立ち、大統領は、すべての登録済み有権者へ向けて公開書簡を書いた。その中で大統領は、国が二分されていることを認めた。
</p>
<p>＜<img src="president.jpeg" alt="The President is happy!">＞
Ahead of today's referendum, the President wrote an open letter to all registered voters. In it, she admitted that the country was divided.</p>
■imgAlt.7-4
<p>
今日の国民投票に先立ち、大統領は、すべての登録済み有権者へ向けて公開書簡を書いた。その中で大統領は、国が二分されていることを認めた。
</p>
＜<figure>
<img src="alexsalmond.jpeg"
alt="広い額、陽気な性格、黒い髪、満足気な顔の大統領。">
<figcaption> ルリタニアの大統領, Photo © 2014 PolitiPhoto. </figcaption>
</figure>＞
<p>Ahead of today's referendum, the President wrote an open letter to all registered voters. In it, she admitted that the country was divided.</p>
＜<figure>
<img src="president.jpeg"
alt="A high forehead, cheerful disposition, and dark hair round out the President's face.">
<figcaption> The President of Ruritania. Photo © 2014 PolitiPhoto. </figcaption>
</figure>＞
■imgAlt.8-1
<％h1>The Lady of Shalott</h1>
<p>＜<img src="shalott.jpeg" alt="">＞</p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>
■imgAlt.9-1
<％h1>＜<img src="logo1.png" alt="XYZ 社"><img src="logo2.png" alt="">＞</h1>
<％h1>＜<img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt="">＞</h1>
■imgAlt.9-2
<p>格付け：
<meter max=5 value=3>＜<img src="1" alt="5 段階評価で 3"><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""><img src="0" alt="">＞</meter>
</p>
<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
>＜<img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
><img src="0" alt="">＞</meter></p>
■imgAlt.10-1
<％h1>聖堂</h1>
<p>空飛ぶスパゲッティモンスター教へようこそ。どっち側の触手から福音をお望みですか？</p>
＜<p><a href="?go=left" ><img src="fsm-left.png" alt="左側。"></a
><img src="fsm-middle.png" alt=""
><a href="?go=right"><img src="fsm-right.png" alt="右側。"></a></p>＞
<％h1>The Church</h1>
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
＜<p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a
><img src="fsm-middle.png" alt=""
><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>＞
■imgAlt.11-1
<figure>
＜<img src="KDE%20Light%20desktop.png"
alt="デスクトップは青く、左手にはアイコンが 2 列に並んでいて, System, Home, K-Mail, 等々と読める。開いたウインドウは、メニューを示していて，ウインドウ幅に収まりきらない場合は 2 行目に折り返される。ウインドウの上端にはアイコンのリストがあり, その下にアドレスバーがあり, 左端にはタブ用のアイコンのリスト, 下端にはステータスバー, 中央部には 2 つのペインがある。デスクトップにはスクリーン下端にバーがあり，少数のボタン, ページャ, 開いたアプリのリスト, 時計がある。">＞
<figcaption>KDE デスクトップのスクリーンショット</figcaption>
</figure>
<figure>
＜<img src="KDE%20Light%20desktop.png"
alt="The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock.">＞
<figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>
■imgAlt.11-2
＜<img src="sales.gif"
title="売り上げグラフ"
alt="1998年から 2005年までの売り上げは、次に挙げる百分率で年々増大している： 624%, 75%, 138%, 40%, 35%, 9%, 21%">＞
＜<img src="sales.gif"
title="Sales graph"
alt="From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">＞
■imgAlt.11-3
<figure>
＜<img
src="/commons/a/a7/Rorschach1.jpg"
alt="辺がぼやけた左右対称な図形は、中央部に小さな隙間，中央から少し外れた所に 2 個の大きな隙間, それらの下に 2 個の 同様な隙間がある。外形線は、下半分より上半分の方が幅広く，その左右端は中央部より高く上方へ広がっていて，中央部はその左右端より下へ広がっている。">＞
<figcaption>
ロールシャッハテストを成す 10 枚のカードのうち最初のカードの黒い外形線。
</figcaption>
</figure>
<figure>
＜<img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
the center extending below the sides.">＞
<figcaption>A black outline of the first of the ten cards
in the Rorschach inkblot test.</figcaption>
</figure>
■imgAlt.11-4 bad
<!-- この例は間違い。複製しないこと。 -->
<figure>
<img src="/commons/a/a7/Rorschach1.jpg" alt="ロールシャッハテストを成す 10 枚のカードのうち最初のカードの黒い外形線。">
<figcaption>
ロールシャッハテストを成す 10 枚のカードのうち最初のカードの黒い外形線。
</figcaption>
</figure>
<!-- This example is wrong. Do not copy it. -->
<figure>
<img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
of the first of the ten cards in the Rorschach inkblot test.">
<figcaption>A black outline of the first of the ten cards
in the Rorschach inkblot test.</figcaption>
</figure>
■imgAlt.11-5
＜<img src="ms1.jpeg" alt="マンデルブロ集合は、同じ中心線に整列している心臓形と より小さな球形として現れる。心臓形の尖点は正な実数軸上にあり、 2 つの図形は負な実数軸上で接している。これら 2 つの図形の周囲には、もっと小さな様々なサイズの球形も伴われる。">＞
＜<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes.">＞
■imgAlt.11-6
<section class="bio">
<h1>アイザック・アシモフの来歴</h1>
<p>1920 年 <b>Isaak Yudovich Ozimov</b> として生まれた。アイザックは多作家であった。</p>
<p><img src="headpics/asimov.jpeg" alt="アイザック・アシモフは、黒髪で, 額が広く, 眼鏡をかけていた。後年の彼は、もみあげを生やしていた。">
<p>アシモフはロシアに生まれ、 3 歳の頃，米国に移住した。</p>
<p>...</p>
</section>
<section class="bio">
<h1>A Biography of Isaac Asimov</h1>
<p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
<p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
Later in life, he wore long white sideburns."></p>
<p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
<p>...</p>
</section>
■imgAlt.11-7
<figure>
＜<img src="1100670787_6a7c664aef.jpg">＞
<figcaption>バブルズは、私たちとともに至る所へ旅をした。</figcaption>
</figure>
<figure>
＜<img src="1100670787_6a7c664aef.jpg">＞
<figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>
■imgAlt.11-8
<article>
<h1>写真を撮った</h1>
<p>今日は外へ出て写真を撮ったよ！</p>
<figure>
＜<img src="photo2.jpeg">＞
<figcaption>家の玄関前から盲目に撮った写真。</figcaption>
</figure>
</article>
<article>
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
＜<img src="photo2.jpeg">＞
<figcaption>A photograph taken blindly from my front porch.</figcaption>
</figure>
</article>
■imgAlt.11-9
<article>
<h1>写真を撮った</h1>
<p>今日は外へ出て写真を撮ったよ！</p>
<figure>
＜<img src="photo2.jpeg" alt="この写真には、屋根の端から吊り下げたリスの餌箱が写っており、背景には焦点が合っていない木も写っている。餌箱は木製で、鉄製の格子窓もあり、ピーナッツで半分ほど満たされているが、周りにはリスは居ない。屋根の端も木製で、水色と白の縞模様に塗られている。">＞
<figcaption>家の玄関前から盲目に撮った写真。</figcaption>
</figure>
</article>
<article>
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
＜<img src="photo2.jpeg" alt="The photograph shows my squirrel
feeder hanging from the edge of my roof. It is half full, but there
are no squirrels around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
with light blue streaks.">＞
<figcaption>A photograph taken blindly from my front porch.</figcaption>