-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
1177 lines (1155 loc) · 57.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Accessible jQuery-ui Components Demo</title>
<script type="text/javascript" src="jquery-ui-min/jquery-1.7.2.min.js"></script>
<!-- jQuery-UI Core files (minified) -->
<link type="text/css" href="jquery-ui-min/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="jquery-ui-min/jquery.ui.menubar.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-min/jquery-ui.min.js"></script>
<!-- JCarousel specific files -->
<link rel="stylesheet" type="text/css" href="jcarousel/skins/tango/skin.css" />
<script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.js"></script>
<!-- JSTree plugin files -->
<script type="text/javascript" src="jstree-a11y/jsTree.v.1.0rc2/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="jstree-a11y/jsTree.v.1.0rc2/lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="jstree-a11y/jsTree.v.1.0rc2/jquery.jstree.js"></script>
<!-- Temporary Datepicker Files -->
<script type="text/javascript" src="jquery-ui-min/external/globalize.js"></script>
<script type="text/javascript" src="jquery-ui-min/datepicker-rewrite/localization.js"></script>
<script type="text/javascript" src="jquery-ui-min/datepicker-rewrite/date.js"></script>
<script type="text/javascript" src="jquery-ui-min/datepicker-rewrite/picker.js"></script>
<script type="text/javascript" src="jquery-ui-min/datepicker-rewrite/jquery.tmpl.js"></script>
<!-- Demo specific files -->
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<div class="demo">
<h1>Accessible jQuery-ui Components Demonstration</h1>
<div class="ui-helper-hidden-accessible" aria-live="polite" >
<h2>Instructions for Screen Reader Users:</h2>
<p>This page contains some interactive controls that you would normally only find in desktop applications.
Examples of such controls are tab lists, menu bars, sliders, and tree views. These controls are often operated using the arrow keys, which means your screen
reader must temporarily switch off virtual navigation mode in order to interact with them. Some screen readers will automatically switch between modes depending on the control's type,
while others require you to manually turn virtual mode off. The list below shows how to switch between modes on some popular screen readers:
</p>
<dl>
<dt>JAWS</dt>
<dd>JAWS KEY + Z, use twice to make switch permanent</dd>
<dt>NVDA</dt>
<dd>NVDA KEY + SPACE</dd>
<dt>WindowEyes</dt>
<dd>Ctrl + Shift + A</dd>
</dl>
</div>
<p class="ui-helper-hidden-accessible" id="demoTabsLabel">Widgets Tabs</p>
<div id="demoTabs">
<ul aria-labelledby="demoTabsLabel">
<li><a href="#slider">Slider</a></li>
<li><a href="#progressbar">Progress bar</a></li>
<li><a href="#menubar">Menubar</a></li>
<li><a href="#button">Buttons</a></li>
<li><a href="#dialog">Dialog</a></li>
<li><a href="#checkbox">Checkbox</a></li>
<li><a href="#accordion">Accordion</a></li>
<li><a href="#tree">Tree</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#tooltip">Tooltip</a></li>
<li><a href="#autocomplete">Autocomplete </a></li>
<!-- <li><a href="#panel">Panel</a></li>-->
<li><a href="#datepicker">Datepicker</a></li>
<!-- <li><a href="#selectmenu">Select Menu</a></li>-->
</ul>
<div id="slider">
<div class="ui-helper-clearfix">
<h2>About the Slider Widget</h2>
<div class="leftColumn">
<h3>How to use the Slider widget:</h3>
<p>Each slider thumb takes up one stop in the tab order. The slider thumb's value can be changed using the following shortcuts:</p>
<ul>
<li>Left Arrow: Descrease value by 1</li>
<li>Left Arrow: Inscrease value by 1</li>
<li>Page Down: Descrease value by larger increment</li>
<li>Page Up: Inscrease value by larger increment</li>
<li>Home: Set value to minimum</li>
<li>End: Set value to maximum</li>
<li>Tab: move focus between multiple thumbs</li>
</ul>
<p>To be announced properly, the slider must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode,</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/slider/default.html" target="_blank">Original Slider</a>:</h3>
<ul>
<li>Added ARIA markup so role, name & state information is exposed</li>
<li>Added keyboard support</li>
<li>Support for Double Slider labeling </li>
</ul>
</div>
</div>
<h2>Demo: Example sliders for choosing a price</h2>
<h3>Choose the price slider</h3>
<label for="txt1">Price:</label>
<div style="padding: 25px;">
<span id="slider1Val" class="sliderValue"></span>
<div id="singleSlider1" class="demoWidget"></div>
<input id="txt1" type="text" class="fallback"/>
</div>
<h3>Choose the min and max price double slider</h3>
<p>Price range:</p>
<div class="ui-helper-clearfix">
<span class="sliderValue" id="slider2ValMin"></span>
<span class="sliderValue" id="slider2ValMax"></span>
<div id="rangeSlider1" class="demoWidget"></div>
</div>
<div class="fallback">
<label for="txt2">Price range minimum:</label>
<input id="txt2" type="text" />
<label for="txt3">Price range Maximum:</label>
<input id="txt3" type="text" />
</div>
<div class="widgetControls"></div>
</div>
<div id="progressbar">
<div class="ui-helper-clearfix">
<h2>About the Progress Bar Widget </h2>
<div class="leftColumn">
<h3>How to use the Progress Bar widget:</h3>
<p>Activate the button labeled "Trigger Progressbar". A progressbar will appear and automatically increase it's value up to a 100%. This takes about 12 seconds. While the progressbar is being shown, keyboard interaction is prohibited.</p>
<p>The Progressbar widget does not require any keyboard shortcuts.</p>
<p>To be announced properly, the an ARIA compliant screen reader must be used that will correctly announce progressbar updates.</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/progressbar/default.html" target="_blank">Original Progressbar</a>:</h3>
<ul>
<li>Added support for high contrast mode</li>
<li>Added ARIA markup for role & state information</li>
</ul>
</div>
</div>
<h2>Demo: Example Progress Bar Simulating a Download Process </h2>
<button id="progressTrigger">Simulate a file download using a progress bar indicator</button>
<br />
<br />
<div id="progressDialog">
<div id='sampleProgressBar' class="demoWidget"></div>
</div>
</div>
<div id="menubar">
<div class="ui-helper-clearfix">
<h2>About the Menu Bar Widget </h2>
<div class="leftColumn">
<h3>How to use the Menubar widget:</h3>
<p>The menubar takes up one stop in the tab order, can can be navigated with the following keyboard shortcuts:</p>
<ul>
<li>Left Arrow: Collapse currently focused expanded submenu, or move focus to the to left adjacent submenu in the menubar</li>
<li>Right Arrow: Expand currently focused collapsed menu item, or move focus to the right adjacent submenu in the menubar</li>
<li>Up Arrow: move focus up in the currently expanded submenu, or wrap focus to its last item</li>
<li>Down Arrow: move focus down in the currently expanded submenu, or wrap focus to its first item</li>
<li>Escape: Collapse the currently focused submenu without activating a menu item</li>
<li>Enter: Activate the currently focused menu item, or expand it if it has a submenu</li>
<li>Any letter key: Perform a first letter search the the currently expanded submenu</li>
</ul>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the Menubar (no original version):</h3>
<ul>
<li>Added ARIA markup so role, name & state information is exposed</li>
<li>Added keyboard navigation support</li>
<li>Added high contrast mode support</li>
</ul>
</div>
</div>
<h2>Sample Menubar containing Menu Items and Sub Menus</h2>
<ul id="sampleMenubar" class="myTest demoWidget" aria-label="Sample Options">
<li><a href="#">File</a>
<ul aria-label="File">
<li><a href="#">Open...</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Save as...</a></li>
<li><a href="#">Recent Documents</a>
<ul>
<li><a href="#">Document 1</a></li>
<li><a href="#">Document 2</a></li>
<li><a href="#">Document 3</a></li>
<li><a href="#">Continuous Web Accessibility Monitoring</a></li>
<li><a href="#">Multimedia Transcription and Captioning</a></li>
</ul>
</li>
<li><a href="#">Close</a></li>
<li><a href="#">Quit</a></li>
</ul>
</li>
<li>
<a href="#">Edit</a>
<ul aria-label="Edit">
<li><a href="#">Copy</a></li>
<li><a href="#">Cut</a></li>
<li><a href="#">Paste</a></li>
<li><a href="#">Options</a>
<ul>
<li><a href="#">Sub Options</a>
<ul>
<li><a href="#">Sub Option 1</a></li>
<li><a href="#">Sub Option 2</a></li>
<li><a href="#">Sub Option 3</a></li>
<li><a href="#">Sub Option 4</a></li>
<li><a href="#">Sub Option 5</a></li>
<li><a href="#">Sub Option 6</a></li>
</ul>
</li>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">More Options</a>
<ul>
<li><a href="#">Sub Option 1</a></li>
<li><a href="#">Sub Option 2</a></li>
<li><a href="#">Sub Option 3</a></li>
<li><a href="#">Sub Option 4</a></li>
<li><a href="#">Sub Option 5</a></li>
<li><a href="#">Sub Option 6</a></li>
</ul>
</li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">View</a>
<ul aria-label="View">
<li><a href="#">Fullscreen</a></li>
<li><a href="#">Fit into view</a></li>
<li><a href="#">Customize</a>
<ul>
<li><a href="#">480 x 640</a></li>
<li><a href="#">800 x 600</a></li>
<li><a href="#">1024 x 768</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">More Options</a>
<ul aria-label="More options">
<li><a href="#">Sub Option 1</a></li>
<li><a href="#">Sub Option 2</a></li>
<li><a href="#">Sub Option 3</a></li>
<li><a href="#">Sub Option 4</a></li>
<li><a href="#">Sub Option 5</a></li>
<li><a href="#">Sub Option 6</a></li>
</ul>
</li>
</ul>
<div class="widgetControls"></div>
</div>
<div id="button">
<div class="ui-helper-clearfix">
<h2>About the Button Widget</h2>
<div class="leftColumn">
<h3>How to use the Button widget:</h3>
<p>Each button is a separate stop in the tab order, except for button groups which take up only one stop.</p>
<p>Buttons are activated or toggled using the Space key. Button groups behave similar to radio button groups: The selcted button is changed by using the arrow keys.</p>
<p>For screen reader users, Toggle Buttons and Button Groups are announced as traditional checkboxes and radio button groups.</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/button/toolbar.html" target="_blank">original Button / Buttongroup</a></h3>
<ul>
<li>Applied fixes for visual focus indications</li>
<li>Added support for high contrast mode</li>
</ul>
</div>
</div>
<h2>Demo: Sample Buttons of a Media Player</h2>
<div id="toolbar" role="toolbar">
<button id="beginning" class="demoWidget">go to beginning</button>
<button id="rewind" class="demoWidget">rewind</button>
<button id="play" class="demoWidget">play</button>
<button id="stop" class="demoWidget">stop</button>
<button id="forward" class="demoWidget">fast forward</button>
<button id="end" class="demoWidget">go to end</button>
<input type="checkbox" id="shuffle" class="demoWidget" /><label for="shuffle">Shuffle</label>
<fieldset class="hiddenFieldset" id="repeat">
<legend>Repeat options</legend>
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</fieldset>
</div>
<div class="widgetControls"></div>
</div>
<div id="dialog">
<div class="ui-helper-clearfix">
<h2>About the Dialog Widget</h2>
<div class="leftColumn">
<h3>How to use the Dialog widget:</h3>
<p>The demo dialog is activated by clicking on the "Trigger Dialog" button.</p>
<p>While the dialog contains focus, the tab order will wrap inside the dialog. If the dialog is modal, it is not possible to move focus to the main page until the dialog is closed.</p>
<p>If the dialog is movable or resizable, the dialog user interface will include buttons that allow these actions to be performed by keyboard. To do this. move focus to the button, and use the arrow keys to move or resize the dialog. </p>
<p>To close the dialog, press Escape.</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/dialog/default.html" target="_blank">Original Dialog</a>:</h3>
<ul>
<li>Added support for high contrast mode</li>
<li>Added keyboard support for move and resize actions</li>
</ul>
</div>
</div>
<h2>Demo: Sample Dialog Containing a Sample Form</h2>
<a href="#" id="dialogTrigger">Trigger Dialog</a>
<div id="sampleDialog" title="Profile Information" aria-describedby="dialogDescription" tabindex="-1">
<div role="group" aria-describedby="dialogDescription">
<p id="dialogDescription">
Please share something personal about yourself
</p>
<p>
<label for="sampleField1">Your favorite animal</label>
<input type="text" id="sampleField1" />
</p>
<p>
<label for="sampleField2">Your favorite color</label>
<input type="text" id="sampleField2" />
</p>
</div>
<div class="dialogSubGroup" role="group" aria-labelledby="groupLbl1" aria-describedby="groupDesc1">
<h3 id="groupLbl1">Additional Information</h3>
<p id="groupDesc1">These fields are optional</p>
<p>
<label for="sampleField3">Favorite Food:</label>
<input type="text" id="sampleField3" />
<br /><br />
<input type="checkbox" id="sampleField4" />
<label for="sampleField4">Do you Smoke?</label>
</p>
</div>
</div>
</div>
<div id="checkbox">
<div class="ui-helper-clearfix">
<h2>About the Checkbox Widget</h2>
<div class="leftColumn">
<h3>How to use the Checkbox widget:</h3>
<p>The checkbox can be checked or unchecked by pressing the Space key.</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/checkbox/default.html" target="_blank">Original Checkbox</a>:</h3>
<ul>
<li>Applied fixes for visual indication of focus</li>
</ul>
</div>
</div>
<h2>Demo: Sample Checkboxes for Choosing Animals</h2>
<form>
<div role="group" aria-labelledby="checkboxGroup1">
<h3 id="checkboxGroup1">Choose your favorite Animals</h3>
<label><input type="checkbox" class="demoWidget"/>Dog</label>
<label><input type="checkbox" id="check2" class="demoWidget" />Cat</label>
<input type="checkbox" id="check3" class="demoWidget" /><label for="check3">Cow</label>
<input type="checkbox" id="check4" class="demoWidget" /><span><label for="check4">Bee</label></span>
<input type="checkbox" id="check5" class="demoWidget" /><span><label for="check5">Fish</label></span>
<input type="checkbox" id="check6" class="demoWidget" /><span><label for="check6">Bears</label></span>
<input type="checkbox" id="check7" class="demoWidget" /><span><label for="check7">Lizard</label></span>
</div>
</form>
<div class="widgetControls"></div>
</div>
<div id="accordion">
<div class="ui-helper-clearfix">
<h2>About the Accordion Widget</h2>
<div class="leftColumn">
<h3>How to use the Accordion widget:</h3>
<p>The accordion takes up one tab stop in the tab order. It can be navigated with the following shortcuts:</p>
<ul>
<li>Up or Left Arrow: Move focus to the previous accordion header</li>
<li>Down or Right Arrow: Move focus to the next accordion header</li>
<li>Space and Enter key: Expand the currently focused accordion header</li>
</ul>
<p>
The accordion is marked up as an ARIA tablist. To be announced properly by screen readers, the accordion must be used
with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the Original Accordeon:</h3>
<p>No changes were made. </p>
</div>
</div>
<h2>Demo: Sample Accordion Widgets Containing Animal Information</h2>
<div id="sampleAccordion" class="demoWidget">
<h3>
Dogs
</h3>
<div>
<p>
The dog (Canis lupus familiaris, is a domesticated
form of the wolf, a member of the Canidae family of
the order Carnivora. The term is used for both
feral and pet varieties. The domestic dog has been
one of the most widely kept working and companion
animals in human history. The word "dog" may also
mean the male of a canine species, as opposed to
the word "bitch" for the female of the species.
</p>
<p>
The dog quickly became ubiquitous across culture
across the world, and was extremely valuable to
early human settlements. For instance, it is
believed that the successful emigration across the
Bering Strait might not have been possible without
sled dogs. Dogs perform many roles for people, such
as hunting, herding, protection, assisting police
and military, companionship, and, more recently,
aiding handicapped individuals. This versatility,
more than almost any other known animal, has given
them the nickname "Man's best friend" in the
western world. Currently, there are estimated to be
400 million dogs in the world.
</p>
<p>
Over the 15,000 year span that the dog had been
domesticated, it diverged into only a handful of
landraces, groups of similar animals whose
morphology and behavior have been shaped by
environmental factors and functional roles. As the
modern understanding of genetics developed, humans
began to intentionally breed dogs for a wide range
of specific traits. Through this process, the dog
has developed into hundreds of varied breeds, and
shows more behavioral and morphological variation
than any other land mammal. For example, height
measured to the withers ranges from a few inches in
the Chihuahua to a few feet in the Irish Wolfhound;
color varies from white through grays (usually
called "blue'") to black, and browns from light
(tan) to dark ("red" or "chocolate") in a wide
variation of patterns; coats can be short or long,
coarse-haired to wool-like, straight, curly, or
smooth. It is common for most breeds to shed this
coat.
</p>
<p>
<a href="http://en.wikipedia.org/wiki/Dogs">More
information about Dogs on Wikipedia</a>
</p>
</div>
<h2>
Cats
</h2>
<div>
<p>
The cat (Felis catus), also known as the domestic
cat or housecat to distinguish it from other
felines and felids, is a small domesticated
carnivorous mammal that is valued by humans for its
companionship and its ability to hunt vermin and
household pests. Cats have been associated with
humans for at least 9,500 years, and are currently
the most popular pet in the world. Due to their
close association with humans, cats are now found
almost everywhere on Earth. This extreme
adaptability and their worrying impacts on native
animals has led to them being classed as an
invasive species. Most of these problems are caused
by the large number of feral cats worldwide, with a
population of up to 60 million of these animals in
the United States alone.
</p>
<p>
Cats are similar in size and anatomy to the other
Felids, with light, flexible bodies and teeth
adapted to killing small prey. A skilled predator,
the cat hunts over 1,000 species for food, using
its excellent eyesight and hearing. Unusually, cats
have lost the ability to taste sugar and in some
breeds show hereditary deafness. Despite being
solitary hunters, cats are a social species and use
a variety of vocalizations, pheromones and types of
body language for communication. These include
meowing, purring, trilling, hissing, growling, and
grunting. They are also bred and shown as
registered pedigree pets. This hobby is known as
cat fancy.
</p>
<p>
As The New York Times wrote in 2007, "Until
recently the cat was commonly believed to have been
domesticated in ancient Egypt, where it was a cult
animal." A study that year found that the lines of
descent of all house cats probably run through as
few as five self-domesticating African Wildcats
(Felis silvestris lybica) circa 8000 BC, in the
Near East. The earliest direct evidence of cat
domestication is a kitten that was buried with its
owner 9,500 years ago in Cyprus.
</p>
<p>
<a href="http://en.wikipedia.org/wiki/cats">More
information about Cats on Wikipedia</a>
</p>
</div>
<h3>
Sheep
</h3>
<div>
<p>
Domestic sheep are quadrupedal, ruminant mammals
typically kept as livestock. Like all ruminants,
sheep are members of the order Artiodactyla, the
even-toed ungulates. Although the name "sheep"
applies to many species, in everyday usage it
almost always refers to Ovis aries. Numbering a
little over 1 billion, domestic sheep are the most
numerous species in their genus.
</p>
<p>
Sheep are most likely descended from the wild
mouflon of Europe and Asia. One of the earliest
animals to be domesticated for agricultural
purposes, sheep are raised for fleece, meat (lamb,
hogget or mutton) and milk. A sheep's wool is the
most widely used of any animal, and is usually
harvested by shearing. Ovine meat is called lamb
when from younger animals and mutton when from
older ones. Sheep continue to be important for wool
and meat today, and are also occasionally raised
for pelts, as dairy animals, or as model organisms
for science.
</p>
<p>
<a href="http://en.wikipedia.org/wiki/sheep">More
information about Sheep on Wikipedia</a>
</p>
</div>
<h3>
Fish
</h3>
<div>
<p>
A fish is any member of a paraphyletic group of
organisms that consist of all gill-bearing aquatic
craniate animals that lack limbs with digits.
Included in this definition are the living hagfish,
lampreys, and cartilaginous and bony fish, as well
as various extinct related groups. Most fish are
ectothermic ("cold-blooded"), allowing their body
temperatures to vary as ambient temperatures
change, though some of the large active swimmers
like white shark and tuna can hold a higher core
temperature. Fish are abundant in most bodies
of water. They can be found in nearly all aquatic
environments, from high mountain streams (e.g.,
char and gudgeon) to the abyssal and even hadal
depths of the deepest oceans (e.g., gulpers and
anglerfish). At 32,000 species, fish exhibit
greater species diversity than any other group of
vertebrates.
</p>
<p>
Fish are an important resource worldwide,
especially as food. Commercial and subsistence
fishers hunt fish in wild fisheries (see fishing)
or farm them in ponds or in cages in the ocean (see
aquaculture). They are also caught by recreational
fishers, kept as pets, raised by fishkeepers, and
exhibited in public aquaria. Fish have had a role
in culture through the ages, serving as deities,
religious symbols, and as the subjects of art,
books and movies.
</p>
<p>
Because the term "fish" is defined negatively, and
excludes the tetrapods (i.e., the amphibians,
reptiles, birds and mammals) which descend from
within the same ancestry, it is paraphyletic, and
is not considered a proper grouping in systematic
biology. The traditional term pisces (also
ichthyes) is considered a typological, but not a
phylogenetic classification.
</p>
<p>
The earliest organisms that can be classified as
fish were soft-bodied chordates that first appeared
during the Cambrian period. Although they lacked a
true spine, they possessed notochords which allowed
them to be more agile than their invertebrate
counterparts. Fish would continue to evolve through
the Paleozoic era, diversifying into a wide variety
of forms. Many fish of the Paleozoic developed
external armor that protected them from predators.
The first fish with jaws appeared in the Silurian
period, after which many (such as sharks) became
formidable marine predators rather than just the
prey of arthropods.
</p>
<p>
<a href="http://en.wikipedia.org/wiki/Fish">More
information about Fish on Wikipedia</a>
</p>
</div>
<h3>
Lizards
</h3>
<div>
<p>
Lizards are a widespread group of squamate
reptiles, with more than 5600 species , ranging
across all continents except Antarctica as well as
most oceanic island chains. The group,
traditionally recognized as the suborder
Lacertilia, is defined as all extant members of the
Lepidosauria (reptiles with overlapping scales),
which are neither sphenodonts (i.e., tuatara) nor
snakes – they form an
evolutionary grade. While the snakes are
recognized as falling phylogenetically within the
Toxicofera clade from which they evolved, the
Sphenodonts are the sister group to the Squamates,
the larger monophyletic group, which includes both
the lizards and the snakes.
</p>
<p>
Lizards typically have feet and external ears,
while snakes lack both of these characteristics.
However, because they are defined negatively as
excluding snakes, lizards have no unique
distinguishing characteristic as a group. Lizards
and snakes share a movable quadrate bone,
distinguishing them from the sphenodonts, which
have a more primitive and solid diapsid skull. Many
lizards can detach their tails to escape from
predators, an act called autotomy, but this ability
is not shared by all lizards. Vision, including
color vision, is particularly well developed in
most lizards, and most communicate with body
language or bright colors on their bodies as well
as with pheromones.
</p>
<p>
The adult length of species within the suborder
ranges from a few cm for chameleons like Brookesia
micra and geckos like Sphaerodactylus ariasae to
nearly 3 m (9.8 ft) in the case of the largest
living varanid lizard, the Komodo Dragon. Some
extinct varanids reached great size. The extinct
aquatic mosasaurs reached 17 m (56 ft), and the
giant monitor Megalania prisca is estimated to have
reached perhaps 7 m (23 ft).
</p>
<p>
<a href="http://en.wikipedia.org/wiki/Lizards">More
information about Lizards on Wikipedia</a>
</p>
</div>
</div>
<div class="widgetControls"></div>
</div>
<div id="tree">
<div class="ui-helper-clearfix">
<h2>About the Tree Widget</h2>
<div class="leftColumn">
<h3>How to use the Tree widget:</h3>
<p>The tree takes up one tab stop in the tab order. It can be navigated with the following shortcuts:</p>
<ul>
<li>Up Arrow: Move focus the the previous tree item</li>
<li>Down Arrow: Move focus the the next tree item</li>
<li>Right Arrow: Expand current branch or move focus into its first tree item</li>
<li>Left Arrow: Move focus to parent branch or collapse current branch</li>
</ul>
<p>
The tree is marked up as an ARIA tree widget. To be announced properly by screen readers, the accordion must be used
with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jsTree/demo.html" target="_blank">Original Tree</a>:</h3>
<ul>
<li>Added ARIA tree markup so role, name & state information is exposed</li>
<li>Added high contrast support</li>
<li>Added fixes related to programmatic focus</li>
</ul>
</div>
</div>
<h2>Demo: Tree View Containing Sample Documents</h2>
<h3 id="sampleTree1Lbl">My Documents</h3>
<div id="sampleTree">
<ul aria-labelledby="sampleTree1Lbl">
<li> <a href="#">Invoices</a>
<ul>
<li> <a href="#">January</a>
<ul>
<li> <a href="#">Invoice A</a> </li>
<li> <a href="#">Invoice B</a> </li>
<li> <a href="#">Invoice C</a> </li>
</ul>
</li>
<li> <a href="#">February</a>
<ul>
<li> <a href="#">Invoice D</a> </li>
<li> <a href="#">Invoice E</a> </li>
<li> <a href="#">Invoice F</a> </li>
</ul>
</li>
<li> <a href="#">March</a>
<ul>
<li> <a href="#">Invoice G</a> </li>
<li> <a href="#">Invoice H</a> </li>
<li> <a href="#">Invoice I</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Job Applications</a>
<ul>
<li> <a href="#">Unhandled</a>
<ul>
<li> <a href="#">Application A</a> </li>
<li> <a href="#">Application B</a> </li>
<li> <a href="#">Application C</a> </li>
<li> <a href="#">Application D</a> </li>
<li> <a href="#">Application E</a> </li>
<li> <a href="#">Application F</a> </li>
<li> <a href="#">Application G</a> </li>
<li> <a href="#">Application H</a> </li>
</ul>
</li>
<li> <a href="#">Accepted</a>
<ul>
<li> <a href="#">Peter Merchant</a> </li>
<li> <a href="#">Susan Jennings</a> </li>
<li> <a href="#">John Smith</a> </li>
</ul>
</li>
<li> <a href="#">Declined</a>
<ul>
<li> <a href="#">John Doe</a> </li>
<li> <a href="#">Jack Smith</a> </li>
<li> <a href="#">Hannah Boyd</a> </li>
<li> <a href="#">Reconsider?</a>
<ul>
<li> <a href="#">Sandra johnson</a> </li>
<li> <a href="#">Dan Smith</a> </li>
<li> <a href="#">Jason Bourne</a> </li>
<li> <a href="#">Jason Maple</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Manuals</a>
<ul>
<li> <a href="#">Fax</a> </li>
<li> <a href="#">Copier</a> </li>
<li> <a href="#">Scanner</a> </li>
<li> <a href="#">Laptop</a> </li>
</ul>
</li>
<li> <a href="#">Welcome Letter</a> </li>
<li> <a href="#">Getting Started</a> </li>
<li> <a href="#">Trouble Shooting</a> </li>
</ul>
</div>
</div>
<div id="carousel">
<div class="ui-helper-clearfix">
<h2>About the Carousel Widget</h2>
<div class="leftColumn">
<h3>How to use the Carousel widget:</h3>
<p>The carousel takes up three tab stops at most:</p>
<ul>
<li>The 'previous' button (if not diabled)</li>
<li>The carrousel items list</li>
<li>The 'next' button (if not diabled)</li>
</ul>
<p>When the carousel list is focused, it can be navigated using the following shortcuts:</p>
<ul>
<li>Left Arrow: Move focus to the previous carousel item</li>
<li>Right Arrow: Move focus to the next carousel item</li>
<li>Page Up: Move focus to the next carousel item group</li>
<li>Page Down: Move focus to the previous carousel item group</li>
<li>Home: Move focus to the first carousel item in the list</li>
<li>End: Move focus to the last carousel item in the list</li>
</ul>
<p>
The carousel is marked up as an ARIA listbox widget. To be announced properly by screen readers, the accordion must be used
with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the <a href="http://access.aol.com/aegis/before/jcarousel/examples/static_simple.html" target="_blank">Original Carousel</a>:</h3>
<ul>
<li>Added ARIA markup so role, name & state information is exposed</li>
<li>Added keyboard navigation for switching items using arrow keys</li>
<li>Made carousel items focusable and navigable</li>
</ul>
</div>
</div>
<h2>Demo: Sample Carousel Displaying Pictures of Flowers</h2>
<h3 id="carouselId">My Favorite Flowers Carousel</h3>
<div class="viewer">
<img id="viewerImg" alt="" src="images/199481236_dc98b5abb3_s.jpg" width="250" height="250" />
</div>
<ul id="mycarousel1" aria-labelledby="carouselId" class="jcarousel-skin-tango">
<li><img src="images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="Sun Flower" /></li>
<li><img src="images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="White Flower" /></li>
<li><img src="images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="Lilly" /></li>
<li><img src="images/199481108_4359e6b971_s.jpg" width="75" height="75" alt="Orange Flowers" /></li>
<li><img src="images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="Petals" /></li>
<li><img src="images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="More Petals" /></li>
<li><img src="images/199481218_264ce20da0_s.jpg" width="75" height="75" alt="Rose" /></li>
<li><img src="images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="Tulip" /></li>
<li><img src="images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="Unidentified Flower" /></li>
<li><img src="images/229228324_08223b70fa_s.jpg" width="75" height="75" alt="Purple Flower" /></li>
</ul>
</div>
<div id="tabs">
<div class="ui-helper-clearfix">
<h2>About the Tabs Widget</h2>
<div class="leftColumn">
<h3>How to use the Tabs widget:</h3>
<p>The tablist takes up one tab stop in the tab order. It can be navigated with the following shortcuts:</p>
<ul>
<li>Left or Up Arrow: Select the previous tab</li>
<li>Right or Down Arrow: Select the next tab</li>
<li>Home: Select the first tab</li>
<li>End: Select the last tab</li>
<li>Alt + Page Down (from anywhere inside the tab panel: Select the previous tab and move focus to the tablist</li>
<li>Alt + Page Up (from anywhere inside the tab panel: Select the next tab and move focus to the tablist</li>
</ul>
<p>
The tabs widget is marked up as an ARIA tablist widget. To be announced properly by screen readers, it must be used
with an ARIA compliant browser and a screen reader that runs in (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes made to the <a href="http://access.aol.com/aegis/before/jquery-ui/demos/tabs/basiccontent.html" target="_blank">Original Tabs</a></h3>
<ul>
<li>Added ARIA Tablist markup so role, name & state information is exposed</li>
<li>Added keyboard navigation for switching tabs using arrow keys</li>
</ul>
</div>
</div>
<h2 id="tabsDemoLbl">Demo: Sample Tab List Containing Information about Animals</h2>
<div id="sampleTabs" class="demoWidget">
<ul>
<li><a href="#tabsdemo-1">Dogs</a></li>
<li><a href="#tabsdemo-2">Cats</a></li>
<li><a href="#tabsdemo-3">Sheep</a></li>
</ul>
<div id="tabsdemo-1">
<h2>Dogs</h2>
<p>The dog (Canis lupus familiaris, is a domesticated form of the wolf, a member of the Canidae family of the order Carnivora. The term is used for both feral and pet varieties. The domestic dog has been one of the most widely kept working and companion animals in human history. The word "dog" may also mean the male of a canine species, as opposed to the word "bitch" for the female of the species.
</p><p>
The dog quickly became ubiquitous across culture across the world, and was extremely valuable to early human settlements. For instance, it is believed that the successful emigration across the Bering Strait might not have been possible without sled dogs. Dogs perform many roles for people, such as hunting, herding, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This versatility, more than almost any other known animal, has given them the nickname "Man's best friend" in the western world. Currently, there are estimated to be 400 million dogs in the world.
</p><p>
Over the 15,000 year span that the dog had been domesticated, it diverged into only a handful of landraces, groups of similar animals whose morphology and behavior have been shaped by environmental factors and functional roles. As the modern understanding of genetics developed, humans began to intentionally breed dogs for a wide range of specific traits. Through this process, the dog has developed into hundreds of varied breeds, and shows more behavioral and morphological variation than any other land mammal. For example, height measured to the withers ranges from a few inches in the Chihuahua to a few feet in the Irish Wolfhound; color varies from white through grays (usually called "blue'") to black, and browns from light (tan) to dark ("red" or "chocolate") in a wide variation of patterns; coats can be short or long, coarse-haired to wool-like, straight, curly, or smooth. It is common for most breeds to shed this coat.
</p><p>
<p><a href="http://en.wikipedia.org/wiki/Dogs">More information about Dogs on Wikipedia</a></p>
</div>
<div id="tabsdemo-2">
<h2>Cats</h2>
<p>
The cat (Felis catus), also known as the domestic cat or housecat to distinguish it from other felines and felids, is a small domesticated carnivorous mammal that is valued by humans for its companionship and its ability to hunt vermin and household pests. Cats have been associated with humans for at least 9,500 years, and are currently the most popular pet in the world. Due to their close association with humans, cats are now found almost everywhere on Earth. This extreme adaptability and their worrying impacts on native animals has led to them being classed as an invasive species. Most of these problems are caused by the large number of feral cats worldwide, with a population of up to 60 million of these animals in the United States alone.
</p><p>
Cats are similar in size and anatomy to the other Felids, with light, flexible bodies and teeth adapted to killing small prey. A skilled predator, the cat hunts over 1,000 species for food, using its excellent eyesight and hearing. Unusually, cats have lost the ability to taste sugar and in some breeds show hereditary deafness. Despite being solitary hunters, cats are a social species and use a variety of vocalizations, pheromones and types of body language for communication. These include meowing, purring, trilling, hissing, growling, and grunting. They are also bred and shown as registered pedigree pets. This hobby is known as cat fancy.
</p><p>
As The New York Times wrote in 2007, "Until recently the cat was commonly believed to have been domesticated in ancient Egypt, where it was a cult animal." A study that year found that the lines of descent of all house cats probably run through as few as five self-domesticating African Wildcats (Felis silvestris lybica) circa 8000 BC, in the Near East. The earliest direct evidence of cat domestication is a kitten that was buried with its owner 9,500 years ago in Cyprus.
</p>
<p><a href="http://en.wikipedia.org/wiki/cats">More information about Cats on Wikipedia</a></p>
</div>
<div id="tabsdemo-3">
<h2>Sheep</h2>
<p>
Domestic sheep are quadrupedal, ruminant mammals typically kept as livestock. Like all ruminants, sheep are members of the order Artiodactyla, the even-toed ungulates. Although the name "sheep" applies to many species, in everyday usage it almost always refers to Ovis aries. Numbering a little over 1 billion, domestic sheep are the most numerous species in their genus.
</p><p>
Sheep are most likely descended from the wild mouflon of Europe and Asia. One of the earliest animals to be domesticated for agricultural purposes, sheep are raised for fleece, meat (lamb, hogget or mutton) and milk. A sheep's wool is the most widely used of any animal, and is usually harvested by shearing. Ovine meat is called lamb when from younger animals and mutton when from older ones. Sheep continue to be important for wool and meat today, and are also occasionally raised for pelts, as dairy animals, or as model organisms for science.
</p>
<p><a href="http://en.wikipedia.org/wiki/sheep">More information about Sheep on Wikipedia</a></p>
</div>
</div>
<div class="widgetControls"></div>
</div>
<div id="tooltip">
<div class="ui-helper-clearfix">
<h2>About the Tooltips Widget</h2>
<div class="leftColumn">
<h3>How to use the Tooltip widget:</h3>
<p>A tooltip appears when focusing the trigger element by keyboard or hovering over it with the mouse.
For focusable elements, the tooltip can be hidden by pressing the Esc key</p>
<p>
The tooltips are made available to screen readers using the aria-describedby property. To be announced properly, it must be used
with an ARIA compliant browser and a screen reader that runs in (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to the Original Tooltip:</h3>
<ul>
<li>Added keyboard support for tooltips on static content </li>
</ul>
</div>
</div>
<h2>Demo: Sample Tooltips</h2>
<p><a href="#" class="demoWidget" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
</p>
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input class="demoWidget" id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
<div class="toggleTooltips">
<div>
<img src="images/199481072_b4a0d09597_s.jpg" alt="My Favorite Flower" title="My Favorite Flower" class="demoWidget"/>
</div>
<div id="tooltipButtonAnchor">
<blockquote class="demoWidget" title="Attributed to Elbert Hubbard">The man who doesn't relax and hoot a few hoots voluntarily, now and then, is in great danger of hooting hoots
and standing on his head for the edification of the pathologist and trained nurse, a little later on.</blockquote>
</div>
</div>
<div class="widgetControls"></div>
</div>
<div id="autocomplete">
<div class="ui-helper-clearfix">
<h2>About the Autocomplete Widget</h2>
<div class="leftColumn">
<h3>How to use the Autocomplete:</h3>
<p>Typing into the text field will generate a dropdown list with auto-complete suggestions. The suggestions can be navigated using the arrow keys and selected using the Enter key. </p>
<p>
Autocomplete feedback is provided through an ARIA live region. To be announced properly, it must be used
with an ARIA compliant browser and a screen reader that runs in (auto) forms mode or application mode.
</p>
</div>
<div class="rightColumn">
<h3>Accessibility Changes Made to Autocomplete:</h3>
<ul>
<li>Added Screen reader support for autocomplete fields using multiple values</li>
<li>Added notification about number of results found</li>
</ul>
</div>
</div>
<h2>Demo: Sample Auto Complete Field Listing Countries</h2>
<div class="ui-widget">
<label for="tags-1">Your Favorite Country</label>
<input id="tags-1" class="demoWidget"/>
</div>
<!--
<h3>Autocomplete with Multiple Values</h3>
<div class="ui-widget">
<label for="tags-2">Tag programming languages: </label>
<input id="tags-2" size="50" class="demoWidget"/>
</div>
-->
<div class="widgetControls"></div>
</div>
<!--
<div id="panel">
<h2>Panel</h2>
<div id="samplePanel" class="demoWidget">
<h3><a href="#">About jQuery</a></h3>
<div id="jq-intro" class="ui-helper-clearfix">
<h4><span class="jq-jquery"><span>jQuery</span></span> is a new kind of JavaScript Library.</h4>
<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. <strong>jQuery is designed to change the way that you write JavaScript.</strong></p>
<ul class="jq-checkpoints ui-helper-clearfix">
<li><a href="http://docs.jquery.com/Tutorials" title="Lightweight Footprint" class="jq-thickbox">Lightweight Footprint</a>
<div class="jq-checkpointSubhead" style="display: none; ">
<p>About 24KB in size <em>(Minified and Gzipped)</em></p>
</div>
</li>
<li><a href="http://docs.jquery.com/Tutorials" title="CSS3 Compliant" class="jq-thickbox">CSS3 Compliant</a>
<div class="jq-checkpointSubhead" style="display: none; ">
<p>Supports CSS 1-3 selectors and more!</p>
</div>
</li>
<li><a href="http://docs.jquery.com/Tutorials" title="Cross-browser" class="jq-thickbox">Cross-browser</a>
<div class="jq-checkpointSubhead" style="display: none; ">
<p>IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome</p>
</div>
</li>
</ul>
</div>
<h3 id="panelTestId"><a href="#">Getting Started with jQuery</a></h3>
<div>
<div class="leftColumn">
<h4>Useful Links</h4>
<ul><li> <a href="/Downloading_jQuery" title="Downloading jQuery">Downloading jQuery</a>
</li><li> <a href="/How_jQuery_Works" title="How jQuery Works">How jQuery Works</a>
</li><li> <a href="/Frequently_Asked_Questions" title="Frequently Asked Questions">Frequently Asked Questions</a>
</li><li> <a href="/Tutorials" title="Tutorials">Tutorials</a>
</li><li> <a href="/Using_jQuery_with_Other_Libraries" title="Using jQuery with Other Libraries">Using jQuery with Other Libraries</a>
</li><li> <a href="/Types" title="Types">Variable Types</a>
</li></ul>
</div>