@mew-lab/a11y-cli 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -347,1123 +347,957 @@ function patternsByCategory() {
347
347
  items: patterns.filter((p) => p.category === category)
348
348
  }));
349
349
  }
350
- var waic = (anchor) => `https://waic.jp/translations/WCAG22/#${anchor}`;
351
- var understanding = (anchor) => `https://www.w3.org/WAI/WCAG22/Understanding/${anchor}.html`;
352
- var rawCriteria = [
353
- // ───────────────────────────────────────── 知覚可能 ─────
354
- {
355
- num: "1.1.1",
356
- slug: "1-1-1",
357
- ja: "\u975E\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30C6\u30F3\u30C4",
358
- en: "Non-text Content",
359
- level: "A",
360
- principle: "\u77E5\u899A\u53EF\u80FD",
361
- guideline: "1.1 \u30C6\u30AD\u30B9\u30C8\u306B\u3088\u308B\u4EE3\u66FF",
362
- summary: "\u753B\u50CF\u30FB\u30A2\u30A4\u30B3\u30F3\u30FB\u56F3\u306A\u3069\u6587\u5B57\u3067\u306A\u3044\u30B3\u30F3\u30C6\u30F3\u30C4\u306B\u306F\u3001\u540C\u3058\u610F\u5473\u3092\u4F1D\u3048\u308B\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8\u3092\u7528\u610F\u3059\u308B\u3002\u88C5\u98FE\u3060\u3051\u306E\u3082\u306E\u306F\u652F\u63F4\u6280\u8853\u304B\u3089\u96A0\u3059\u3002",
363
- waicUrl: waic("non-text-content"),
364
- understandingUrl: understanding("non-text-content"),
365
- patterns: ["meter", "table"]
366
- },
367
- {
368
- num: "1.3.1",
369
- slug: "1-3-1",
370
- ja: "\u60C5\u5831\u53CA\u3073\u95A2\u4FC2\u6027",
371
- en: "Info and Relationships",
372
- level: "A",
373
- principle: "\u77E5\u899A\u53EF\u80FD",
374
- guideline: "1.3 \u9069\u5FDC\u53EF\u80FD",
375
- summary: "\u898B\u305F\u76EE\u3067\u4F1D\u3048\u3066\u3044\u308B\u69CB\u9020\u3084\u95A2\u4FC2\uFF08\u898B\u51FA\u3057\u30FB\u30EA\u30B9\u30C8\u30FB\u8868\u306E\u5BFE\u5FDC\u30FB\u30E9\u30D9\u30EB\u3068\u5165\u529B\u6B04\u306E\u7D50\u3073\u3064\u304D\uFF09\u3092\u3001HTML \u306E\u30DE\u30FC\u30AF\u30A2\u30C3\u30D7\u3084 ARIA \u3067\u30D7\u30ED\u30B0\u30E9\u30E0\u306B\u3082\u4F1D\u308F\u308B\u5F62\u306B\u3059\u308B\u3002",
376
- waicUrl: waic("info-and-relationships"),
377
- understandingUrl: understanding("info-and-relationships"),
378
- patterns: [
379
- "accordion",
380
- "disclosure",
381
- "alert",
382
- "dialog-modal",
383
- "alertdialog",
384
- "breadcrumb",
385
- "menu-menubar",
386
- "menu-button",
387
- "link",
388
- "landmarks",
389
- "checkbox",
390
- "radio-group",
391
- "switch",
392
- "combobox",
393
- "listbox",
394
- "meter",
395
- "tabs",
396
- "table",
397
- "grid",
398
- "treegrid",
399
- "tree-view",
400
- "feed",
401
- "carousel",
402
- "tooltip"
403
- ]
404
- },
405
- {
406
- num: "1.4.3",
407
- slug: "1-4-3",
408
- ja: "\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\uFF08\u6700\u4F4E\u9650\uFF09",
409
- en: "Contrast (Minimum)",
410
- level: "AA",
411
- principle: "\u77E5\u899A\u53EF\u80FD",
412
- guideline: "1.4 \u5224\u5225\u53EF\u80FD",
413
- summary: "\u6587\u5B57\u3068\u80CC\u666F\u306E\u660E\u6697\u306E\u5DEE\uFF08\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\uFF09\u3092\u3001\u901A\u5E38\u306E\u6587\u5B57\u3067 4.5:1 \u4EE5\u4E0A\u3001\u5927\u304D\u306A\u6587\u5B57\u3067 3:1 \u4EE5\u4E0A\u306B\u3059\u308B\u3002",
414
- waicUrl: waic("contrast-minimum"),
415
- understandingUrl: understanding("contrast-minimum"),
416
- patterns: []
417
- },
418
- {
419
- num: "1.4.11",
420
- slug: "1-4-11",
421
- ja: "\u975E\u30C6\u30AD\u30B9\u30C8\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8",
422
- en: "Non-text Contrast",
423
- level: "AA",
424
- principle: "\u77E5\u899A\u53EF\u80FD",
425
- guideline: "1.4 \u5224\u5225\u53EF\u80FD",
426
- summary: "\u30DC\u30BF\u30F3\u306E\u5883\u754C\u3084\u30D5\u30A9\u30FC\u30E0\u90E8\u54C1\u3001\u72B6\u614B\u3092\u793A\u3059\u30A2\u30A4\u30B3\u30F3\u306A\u3069\u3001\u64CD\u4F5C\u306B\u5FC5\u8981\u306A\u898B\u305F\u76EE\u306E\u8981\u7D20\u3082\u80CC\u666F\u3068 3:1 \u4EE5\u4E0A\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u3092\u78BA\u4FDD\u3059\u308B\u3002",
427
- waicUrl: waic("non-text-contrast"),
428
- understandingUrl: understanding("non-text-contrast"),
429
- patterns: ["button", "slider", "slider-multithumb"]
430
- },
431
- {
432
- num: "1.4.13",
433
- slug: "1-4-13",
434
- ja: "\u30DB\u30D0\u30FC\u53C8\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u8868\u793A\u3055\u308C\u308B\u30B3\u30F3\u30C6\u30F3\u30C4",
435
- en: "Content on Hover or Focus",
436
- level: "AA",
437
- principle: "\u77E5\u899A\u53EF\u80FD",
438
- guideline: "1.4 \u5224\u5225\u53EF\u80FD",
439
- summary: "\u30DB\u30D0\u30FC\u3084\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u51FA\u308B\u8FFD\u52A0\u8868\u793A\uFF08\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u7B49\uFF09\u306F\u3001\u6D88\u3055\u305A\u306B\u8AAD\u3081\u308B\u30FB\u30DD\u30A4\u30F3\u30BF\u3092\u91CD\u306D\u3089\u308C\u308B\u30FBEsc \u306A\u3069\u3067\u6D88\u305B\u308B\u3001\u306E3\u3064\u3092\u6E80\u305F\u3059\u3002",
440
- waicUrl: waic("content-on-hover-or-focus"),
441
- understandingUrl: understanding("content-on-hover-or-focus"),
442
- patterns: ["tooltip"]
443
- },
444
- // ───────────────────────────────────────── 操作可能 ─────
445
- {
446
- num: "2.1.1",
447
- slug: "2-1-1",
448
- ja: "\u30AD\u30FC\u30DC\u30FC\u30C9",
449
- en: "Keyboard",
450
- level: "A",
451
- principle: "\u64CD\u4F5C\u53EF\u80FD",
452
- guideline: "2.1 \u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u53EF\u80FD",
453
- summary: "\u3059\u3079\u3066\u306E\u6A5F\u80FD\u3092\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30DE\u30A6\u30B9\u524D\u63D0\u306E\u72EC\u81EA\u90E8\u54C1\u3067\u3082\u3001Tab \u3067\u5230\u9054\u3057 Enter/Space/\u77E2\u5370\u306A\u3069\u3067\u64CD\u4F5C\u3067\u304D\u308B\u3053\u3068\u3002",
454
- waicUrl: waic("keyboard"),
455
- understandingUrl: understanding("keyboard"),
456
- patterns: [
457
- "accordion",
458
- "disclosure",
459
- "menu-menubar",
460
- "menu-button",
461
- "link",
462
- "button",
463
- "checkbox",
464
- "radio-group",
465
- "switch",
466
- "combobox",
467
- "listbox",
468
- "slider",
469
- "slider-multithumb",
470
- "spinbutton",
471
- "tabs",
472
- "toolbar",
473
- "grid",
474
- "treegrid",
475
- "tree-view",
476
- "carousel",
477
- "window-splitter"
478
- ]
479
- },
480
- {
481
- num: "2.1.2",
482
- slug: "2-1-2",
483
- ja: "\u30AD\u30FC\u30DC\u30FC\u30C9\u30C8\u30E9\u30C3\u30D7\u306A\u3057",
484
- en: "No Keyboard Trap",
485
- level: "A",
486
- principle: "\u64CD\u4F5C\u53EF\u80FD",
487
- guideline: "2.1 \u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u53EF\u80FD",
488
- summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u5165\u3063\u305F\u5834\u6240\u304B\u3089\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u629C\u3051\u51FA\u305B\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30E2\u30FC\u30C0\u30EB\u5185\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u9589\u3058\u8FBC\u3081\u3089\u308C\u305F\u307E\u307E\u623B\u308C\u306A\u3044\u72B6\u614B\u3092\u4F5C\u3089\u306A\u3044\u3002",
489
- waicUrl: waic("no-keyboard-trap"),
490
- understandingUrl: understanding("no-keyboard-trap"),
491
- patterns: ["dialog-modal", "alertdialog"]
492
- },
493
- {
494
- num: "2.2.2",
495
- slug: "2-2-2",
496
- ja: "\u4E00\u6642\u505C\u6B62\u3001\u505C\u6B62\u3001\u975E\u8868\u793A",
497
- en: "Pause, Stop, Hide",
498
- level: "A",
499
- principle: "\u64CD\u4F5C\u53EF\u80FD",
500
- guideline: "2.2 \u5341\u5206\u306A\u6642\u9593",
501
- summary: "\u81EA\u52D5\u3067\u52D5\u304F\u30FB\u70B9\u6EC5\u3059\u308B\u30FB\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u30B3\u30F3\u30C6\u30F3\u30C4\uFF08\u30AB\u30EB\u30FC\u30BB\u30EB\u7B49\uFF09\u306F\u3001\u30E6\u30FC\u30B6\u30FC\u304C\u4E00\u6642\u505C\u6B62\u30FB\u505C\u6B62\u30FB\u975E\u8868\u793A\u306B\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002",
502
- waicUrl: waic("pause-stop-hide"),
503
- understandingUrl: understanding("pause-stop-hide"),
504
- patterns: ["carousel"]
505
- },
506
- {
507
- num: "2.4.3",
508
- slug: "2-4-3",
509
- ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u9806\u5E8F",
510
- en: "Focus Order",
511
- level: "A",
512
- principle: "\u64CD\u4F5C\u53EF\u80FD",
513
- guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
514
- summary: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u79FB\u308B\u9806\u756A\u3092\u3001\u610F\u5473\u3068\u64CD\u4F5C\u304C\u901A\u3058\u308B\u81EA\u7136\u306A\u9806\u5E8F\u306B\u3059\u308B\u3002\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u958B\u3044\u305F\u3089\u4E2D\u3078\u3001\u9589\u3058\u305F\u3089\u5143\u306E\u4F4D\u7F6E\u3078\u3001\u3068\u3044\u3063\u305F\u79FB\u52D5\u3082\u542B\u3080\u3002",
515
- waicUrl: waic("focus-order"),
516
- understandingUrl: understanding("focus-order"),
517
- patterns: [
518
- "accordion",
519
- "dialog-modal",
520
- "alertdialog",
521
- "breadcrumb",
522
- "menu-menubar",
523
- "landmarks",
524
- "radio-group",
525
- "tabs",
526
- "toolbar",
527
- "grid"
528
- ]
529
- },
530
- {
531
- num: "2.4.7",
532
- slug: "2-4-7",
533
- ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u53EF\u8996\u5316",
534
- en: "Focus Visible",
535
- level: "AA",
536
- principle: "\u64CD\u4F5C\u53EF\u80FD",
537
- guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
538
- summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3057\u3066\u3044\u308B\u4ECA\u3069\u3053\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u3042\u308B\u304B\u304C\u3001\u898B\u3066\u5206\u304B\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u305F\u307E\u307E\u306B\u3057\u306A\u3044\u3002",
539
- waicUrl: waic("focus-visible"),
540
- understandingUrl: understanding("focus-visible"),
541
- patterns: ["accordion", "disclosure", "dialog-modal", "menu-menubar", "link", "button", "tabs"]
542
- },
543
- {
544
- num: "2.4.11",
545
- slug: "2-4-11",
546
- ja: "\u96A0\u3055\u308C\u306A\u3044\u30D5\u30A9\u30FC\u30AB\u30B9\uFF08\u6700\u4F4E\u9650\uFF09",
547
- en: "Focus Not Obscured (Minimum)",
548
- level: "AA",
549
- principle: "\u64CD\u4F5C\u53EF\u80FD",
550
- guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
551
- isNew22: true,
552
- summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u305F\u8981\u7D20\u304C\u3001\u56FA\u5B9A\u30D8\u30C3\u30C0\u30FC\u3084\u30C0\u30A4\u30A2\u30ED\u30B0\u306A\u3069\u306B\u5B8C\u5168\u306B\u96A0\u308C\u3066\u898B\u3048\u306A\u304F\u306A\u3089\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002",
553
- waicUrl: waic("focus-not-obscured-minimum"),
554
- understandingUrl: understanding("focus-not-obscured-minimum"),
555
- patterns: ["dialog-modal"]
556
- },
557
- {
558
- num: "2.5.7",
559
- slug: "2-5-7",
560
- ja: "\u30C9\u30E9\u30C3\u30B0\u52D5\u4F5C",
561
- en: "Dragging Movements",
562
- level: "AA",
563
- principle: "\u64CD\u4F5C\u53EF\u80FD",
564
- guideline: "2.5 \u5165\u529B\u30E2\u30C0\u30EA\u30C6\u30A3",
565
- isNew22: true,
566
- summary: "\u30C9\u30E9\u30C3\u30B0\u3067\u884C\u3046\u64CD\u4F5C\uFF08\u30B9\u30E9\u30A4\u30C0\u30FC\u30FB\u4E26\u3079\u66FF\u3048\u30FB\u5883\u754C\u306E\u79FB\u52D5\u306A\u3069\uFF09\u306B\u306F\u3001\u30C9\u30E9\u30C3\u30B0\u3092\u4F7F\u308F\u306A\u3044\u4EE3\u66FF\u624B\u6BB5\uFF08\u30AF\u30EA\u30C3\u30AF\u3084\u30DC\u30BF\u30F3\uFF09\u3082\u7528\u610F\u3059\u308B\u3002",
567
- waicUrl: waic("dragging-movements"),
568
- understandingUrl: understanding("dragging-movements"),
569
- patterns: ["slider", "slider-multithumb", "window-splitter"]
570
- },
571
- {
572
- num: "2.5.8",
573
- slug: "2-5-8",
574
- ja: "\u30BF\u30FC\u30B2\u30C3\u30C8\u306E\u30B5\u30A4\u30BA\uFF08\u6700\u5C0F\uFF09",
575
- en: "Target Size (Minimum)",
576
- level: "AA",
577
- principle: "\u64CD\u4F5C\u53EF\u80FD",
578
- guideline: "2.5 \u5165\u529B\u30E2\u30C0\u30EA\u30C6\u30A3",
579
- isNew22: true,
580
- summary: "\u30AF\u30EA\u30C3\u30AF\u30FB\u30BF\u30C3\u30D7\u3067\u304D\u308B\u5BFE\u8C61\u306F\u539F\u5247 24\xD724 CSS\u30D4\u30AF\u30BB\u30EB\u4EE5\u4E0A\u306B\u3059\u308B\u304B\u3001\u5341\u5206\u306A\u9593\u9694\u3092\u7A7A\u3051\u308B\u3002\u5C0F\u3055\u3059\u304E\u308B\u64CD\u4F5C\u5BFE\u8C61\u3092\u907F\u3051\u308B\u3002",
581
- waicUrl: waic("target-size-minimum"),
582
- understandingUrl: understanding("target-size-minimum"),
583
- patterns: ["menu-button", "link", "button", "checkbox", "switch", "spinbutton"]
584
- },
585
- // ───────────────────────────────────────── 理解可能 ─────
586
- {
587
- num: "3.2.1",
588
- slug: "3-2-1",
589
- ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u6642",
590
- en: "On Focus",
591
- level: "A",
592
- principle: "\u7406\u89E3\u53EF\u80FD",
593
- guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
594
- summary: "\u8981\u7D20\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u305F\u3060\u3051\u3067\u3001\u30DA\u30FC\u30B8\u9077\u79FB\u3084\u30E2\u30FC\u30C0\u30EB\u8868\u793A\u306A\u3069\u6587\u8108\u304C\u52DD\u624B\u306B\u5909\u308F\u308B\u3053\u3068\u306E\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002",
595
- waicUrl: waic("on-focus"),
596
- understandingUrl: understanding("on-focus"),
597
- patterns: []
598
- },
599
- {
600
- num: "3.2.2",
601
- slug: "3-2-2",
602
- ja: "\u5165\u529B\u6642",
603
- en: "On Input",
604
- level: "A",
605
- principle: "\u7406\u89E3\u53EF\u80FD",
606
- guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
607
- summary: "\u5024\u3092\u9078\u3093\u3060\u308A\u5165\u529B\u3057\u305F\u3060\u3051\u3067\u4E88\u671F\u305B\u305A\u6587\u8108\u304C\u5909\u308F\u3089\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002\u5909\u3048\u308B\u5834\u5408\u306F\u4E8B\u524D\u306B\u77E5\u3089\u305B\u308B\u3002",
608
- waicUrl: waic("on-input"),
609
- understandingUrl: understanding("on-input"),
610
- patterns: []
611
- },
612
- {
613
- num: "3.2.6",
614
- slug: "3-2-6",
615
- ja: "\u4E00\u8CAB\u3057\u305F\u30D8\u30EB\u30D7",
616
- en: "Consistent Help",
617
- level: "A",
618
- principle: "\u7406\u89E3\u53EF\u80FD",
619
- guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
620
- isNew22: true,
621
- summary: "\u554F\u3044\u5408\u308F\u305B\u5148\u3084\u30D8\u30EB\u30D7\u3078\u306E\u5C0E\u7DDA\u3092\u8907\u6570\u30DA\u30FC\u30B8\u3067\u63D0\u4F9B\u3059\u308B\u5834\u5408\u3001\u5404\u30DA\u30FC\u30B8\u3067\u540C\u3058\u76F8\u5BFE\u7684\u306A\u4F4D\u7F6E\u30FB\u9806\u5E8F\u306B\u7F6E\u304F\u3002",
622
- waicUrl: waic("consistent-help"),
623
- understandingUrl: understanding("consistent-help"),
624
- patterns: []
625
- },
626
- {
627
- num: "3.3.1",
628
- slug: "3-3-1",
629
- ja: "\u30A8\u30E9\u30FC\u306E\u7279\u5B9A",
630
- en: "Error Identification",
631
- level: "A",
632
- principle: "\u7406\u89E3\u53EF\u80FD",
633
- guideline: "3.3 \u5165\u529B\u652F\u63F4",
634
- summary: "\u5165\u529B\u30A8\u30E9\u30FC\u3092\u81EA\u52D5\u691C\u51FA\u3057\u305F\u3089\u3001\u3069\u3053\u304C\u30FB\u4F55\u304C\u9593\u9055\u3063\u3066\u3044\u308B\u304B\u3092\u30C6\u30AD\u30B9\u30C8\u3067\u5177\u4F53\u7684\u306B\u4F1D\u3048\u308B\u3002",
635
- waicUrl: waic("error-identification"),
636
- understandingUrl: understanding("error-identification"),
637
- patterns: []
638
- },
639
- {
640
- num: "3.3.2",
641
- slug: "3-3-2",
642
- ja: "\u30E9\u30D9\u30EB\u53C8\u306F\u8AAC\u660E",
643
- en: "Labels or Instructions",
644
- level: "A",
645
- principle: "\u7406\u89E3\u53EF\u80FD",
646
- guideline: "3.3 \u5165\u529B\u652F\u63F4",
647
- summary: "\u30D5\u30A9\u30FC\u30E0\u90E8\u54C1\u306B\u306F\u3001\u4F55\u3092\u5165\u529B\u3059\u308C\u3070\u3088\u3044\u304B\u5206\u304B\u308B\u30E9\u30D9\u30EB\u3084\u8AAC\u660E\u3092\u4ED8\u3051\u308B\u3002\u30D7\u30EC\u30FC\u30B9\u30DB\u30EB\u30C0\u30FC\u3060\u3051\u306B\u983C\u3089\u306A\u3044\u3002",
648
- waicUrl: waic("labels-or-instructions"),
649
- understandingUrl: understanding("labels-or-instructions"),
650
- patterns: ["checkbox", "radio-group", "combobox", "listbox", "slider", "spinbutton"]
651
- },
652
- {
653
- num: "3.3.7",
654
- slug: "3-3-7",
655
- ja: "\u5197\u9577\u306A\u5165\u529B",
656
- en: "Redundant Entry",
657
- level: "A",
658
- principle: "\u7406\u89E3\u53EF\u80FD",
659
- guideline: "3.3 \u5165\u529B\u652F\u63F4",
660
- isNew22: true,
661
- summary: "\u540C\u3058\u624B\u7D9A\u304D\u306E\u4E2D\u3067\u4E00\u5EA6\u5165\u529B\u3057\u305F\u60C5\u5831\u3092\u518D\u5165\u529B\u3055\u305B\u306A\u3044\u3002\u81EA\u52D5\u5165\u529B\u3059\u308B\u304B\u3001\u524D\u306B\u5165\u529B\u3057\u305F\u5024\u304B\u3089\u9078\u3079\u308B\u3088\u3046\u306B\u3059\u308B\u3002",
662
- waicUrl: waic("redundant-entry"),
663
- understandingUrl: understanding("redundant-entry"),
664
- patterns: []
665
- },
666
- {
667
- num: "3.3.8",
668
- slug: "3-3-8",
669
- ja: "\u30A2\u30AF\u30BB\u30B7\u30D6\u30EB\u306A\u8A8D\u8A3C\uFF08\u6700\u4F4E\u9650\uFF09",
670
- en: "Accessible Authentication (Minimum)",
671
- level: "AA",
672
- principle: "\u7406\u89E3\u53EF\u80FD",
673
- guideline: "3.3 \u5165\u529B\u652F\u63F4",
674
- isNew22: true,
675
- summary: "\u30ED\u30B0\u30A4\u30F3\u8A8D\u8A3C\u3067\u3001\u8A18\u61B6\u3084\u30D1\u30BA\u30EB\u306E\u3088\u3046\u306A\u8A8D\u77E5\u6A5F\u80FD\u30C6\u30B9\u30C8\u3060\u3051\u306B\u983C\u3089\u305B\u306A\u3044\u3002\u30D1\u30B9\u30EF\u30FC\u30C9\u7BA1\u7406\u3084\u30B3\u30D4\u30DA\u7B49\u306E\u4EE3\u66FF\u3092\u59A8\u3052\u306A\u3044\u3002",
676
- waicUrl: waic("accessible-authentication-minimum"),
677
- understandingUrl: understanding("accessible-authentication-minimum"),
678
- patterns: []
679
- },
680
- // ───────────────────────────────────────── 堅牢 ─────────
681
- {
682
- num: "4.1.2",
683
- slug: "4-1-2",
684
- ja: "\u540D\u524D\uFF08name\uFF09\u30FB\u5F79\u5272\uFF08role\uFF09\u53CA\u3073\u5024\uFF08value\uFF09",
685
- en: "Name, Role, Value",
686
- level: "A",
687
- principle: "\u5805\u7262",
688
- guideline: "4.1 \u4E92\u63DB\u6027",
689
- summary: "\u3059\u3079\u3066\u306E UI \u90E8\u54C1\u306B\u3064\u3044\u3066\u3001\u540D\u524D\uFF08\u4F55\u304B\uFF09\u30FB\u5F79\u5272\uFF08\u7A2E\u985E\uFF09\u30FB\u72B6\u614B\u3084\u5024\uFF08\u4ECA\u3069\u3046\u306A\u3063\u3066\u3044\u308B\u304B\uFF09\u304C\u652F\u63F4\u6280\u8853\u306B\u4F1D\u308F\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u81EA\u4F5C\u90E8\u54C1\u3067\u306F ARIA \u3067\u88DC\u3046\u3002",
690
- waicUrl: waic("name-role-value"),
691
- understandingUrl: understanding("name-role-value"),
692
- patterns: [
693
- "accordion",
694
- "disclosure",
695
- "dialog-modal",
696
- "alertdialog",
697
- "breadcrumb",
698
- "menu-menubar",
699
- "menu-button",
700
- "link",
701
- "button",
702
- "checkbox",
703
- "radio-group",
704
- "switch",
705
- "combobox",
706
- "listbox",
707
- "slider",
708
- "slider-multithumb",
709
- "spinbutton",
710
- "meter",
711
- "tabs",
712
- "toolbar",
713
- "grid",
714
- "treegrid",
715
- "tree-view",
716
- "feed",
717
- "carousel",
718
- "tooltip",
719
- "window-splitter"
720
- ]
721
- },
722
- {
723
- num: "4.1.3",
724
- slug: "4-1-3",
725
- ja: "\u30B9\u30C6\u30FC\u30BF\u30B9\u30E1\u30C3\u30BB\u30FC\u30B8",
726
- en: "Status Messages",
727
- level: "AA",
728
- principle: "\u5805\u7262",
729
- guideline: "4.1 \u4E92\u63DB\u6027",
730
- summary: '\u300C\u4FDD\u5B58\u3057\u307E\u3057\u305F\u300D\u300C3\u4EF6\u30D2\u30C3\u30C8\u300D\u306A\u3069\u306E\u72B6\u614B\u901A\u77E5\u3092\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3055\u305A\u306B\u652F\u63F4\u6280\u8853\u3078\u4F1D\u3048\u308B\u3002live region\uFF08aria-live / role="status" \u7B49\uFF09\u3092\u4F7F\u3046\u3002',
731
- waicUrl: waic("status-messages"),
732
- understandingUrl: understanding("status-messages"),
733
- patterns: ["alert", "alertdialog", "combobox", "feed"]
734
- }
735
- ];
736
- var criteria = criterionSchema.array().parse(rawCriteria);
737
- function getCriterion(slug) {
738
- return criteria.find((c) => c.slug === slug);
739
- }
740
- function numKey(num) {
741
- return num.split(".").map((n) => parseInt(n, 10));
742
- }
743
- function compareByNum(a, b) {
744
- const ka = numKey(a.num);
745
- const kb = numKey(b.num);
746
- for (let i = 0; i < 3; i++) {
747
- const va = ka[i] ?? 0;
748
- const vb = kb[i] ?? 0;
749
- if (va !== vb) return va - vb;
750
- }
751
- return 0;
752
- }
753
- function criteriaByPrinciple() {
754
- return principles.map((principle) => ({
755
- principle,
756
- items: criteria.filter((c) => c.principle === principle).sort(compareByNum)
757
- }));
758
- }
759
- function criteriaForPattern(patternSlug) {
760
- return criteria.filter((c) => c.patterns.includes(patternSlug)).sort(compareByNum);
761
- }
762
350
  var accordion = {
763
351
  slug: "accordion",
764
352
  keyboard: [
765
353
  {
766
- keys: "Enter / Space",
767
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3066\u3044\u308B\u898B\u51FA\u3057\u306E\u30D1\u30CD\u30EB\u3092\u958B\u304F/\u9589\u3058\u308B",
354
+ keys: "Enter / Space",
355
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3066\u3044\u308B\u898B\u51FA\u3057\u306E\u30D1\u30CD\u30EB\u3092\u958B\u304F/\u9589\u3058\u308B",
356
+ requirement: "required"
357
+ },
358
+ {
359
+ keys: "Tab",
360
+ action: "\u6B21\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\uFF08\u6B21\u306E\u898B\u51FA\u3057\u306A\u3069\uFF09\u3078\u79FB\u52D5",
361
+ requirement: "required"
362
+ },
363
+ {
364
+ keys: "\u2193 / \u2191",
365
+ action: "\u6B21 / \u524D\u306E\u898B\u51FA\u3057\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
366
+ requirement: "recommended"
367
+ },
368
+ {
369
+ keys: "Home / End",
370
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\u898B\u51FA\u3057\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
371
+ requirement: "optional"
372
+ }
373
+ ],
374
+ aria: [
375
+ {
376
+ target: "\u898B\u51FA\u3057\u306E\u30DC\u30BF\u30F3",
377
+ attr: 'aria-expanded="true | false"',
378
+ meaning: "\u5BFE\u5FDC\u3059\u308B\u30D1\u30CD\u30EB\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u72B6\u614B\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
379
+ },
380
+ {
381
+ target: "\u898B\u51FA\u3057\u306E\u30DC\u30BF\u30F3",
382
+ attr: 'aria-controls="\u30D1\u30CD\u30EB\u306Eid"',
383
+ meaning: "\u3069\u306E\u30D1\u30CD\u30EB\u3092\u5236\u5FA1\u3059\u308B\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
384
+ },
385
+ {
386
+ target: "\u898B\u51FA\u3057\u306E\u5916\u5074",
387
+ attr: "<h2>\u301C<h4>",
388
+ meaning: "\u30DA\u30FC\u30B8\u306E\u69CB\u9020\u306B\u5408\u3063\u305F\u898B\u51FA\u3057\u30EC\u30D9\u30EB\u3067\u56F2\u3080\u3002\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u898B\u51FA\u3057\u30B8\u30E3\u30F3\u30D7\u306B\u5F79\u7ACB\u3064\u3002"
389
+ },
390
+ {
391
+ target: "\u30D1\u30CD\u30EB",
392
+ attr: 'role="region" + aria-labelledby="\u898B\u51FA\u3057\u306Eid"',
393
+ meaning: "\u30D1\u30CD\u30EB\u3092\u540D\u524D\u4ED8\u304D\u306E\u9818\u57DF\u306B\u3059\u308B\uFF08\u4EFB\u610F\u3060\u304C\u63A8\u5968\u3002\u9818\u57DF\u304C\u591A\u3059\u304E\u308B\u3068\u9006\u52B9\u679C\u306A\u306E\u3067\u6570\u304C\u591A\u3044\u3068\u304D\u306F\u7701\u7565\u53EF\uFF09\u3002"
394
+ },
395
+ {
396
+ target: "\u9589\u3058\u3066\u3044\u308B\u30D1\u30CD\u30EB",
397
+ attr: "hidden",
398
+ meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F DOM \u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
399
+ }
400
+ ],
401
+ checklist: [
402
+ '\u898B\u51FA\u3057\u306E\u30C8\u30EA\u30AC\u30FC\u306F <button type="button"> \u3067\u3042\u308B',
403
+ "\u30DC\u30BF\u30F3\u306F\u898B\u51FA\u3057\u8981\u7D20\uFF08<h2>\u301C<h4>\uFF09\u3067\u56F2\u307E\u308C\u3066\u3044\u308B",
404
+ "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
405
+ "aria-controls \u3067\u30D1\u30CD\u30EB\u306E id \u3092\u6307\u3057\u3066\u3044\u308B",
406
+ "\u9589\u3058\u3066\u3044\u308B\u30D1\u30CD\u30EB\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
407
+ '\u30D1\u30CD\u30EB\u306B role="region" + aria-labelledby\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09',
408
+ "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u958B\u9589\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
409
+ "\uFF08\u4EFB\u610F\uFF09\u2191 \u2193 Home End \u3067\u898B\u51FA\u3057\u9593\u3092\u79FB\u52D5\u3067\u304D\u308B"
410
+ ],
411
+ antipatterns: [
412
+ {
413
+ title: "div + onclick \u3067\u898B\u51FA\u3057\u3092\u4F5C\u308B",
414
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u4E00\u5207\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
415
+ },
416
+ {
417
+ title: "\u5F79\u5272\uFF08role\uFF09\u3092\u4F1D\u3048\u306A\u3044",
418
+ why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u300D\u306B\u805E\u3053\u3048\u3001\u62BC\u305B\u308B\u3053\u3068\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
419
+ },
420
+ {
421
+ title: "\u72B6\u614B\u3092\u4F1D\u3048\u306A\u3044",
422
+ why: "aria-expanded \u304C\u306A\u304F\u3001\u958B\u3044\u3066\u3044\u308B\u304B\u9589\u3058\u3066\u3044\u308B\u304B\u3092\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
423
+ },
424
+ {
425
+ title: "display:none \u983C\u307F\u3067\u96A0\u3059",
426
+ why: "hidden \u5C5E\u6027\u3084\u9069\u5207\u306A\u72B6\u614B\u7BA1\u7406\u304C\u306A\u304F\u3001\u30A4\u30F3\u30E9\u30A4\u30F3 style \u983C\u307F\u306B\u306A\u3063\u3066\u3044\u308B\u3002"
427
+ }
428
+ ],
429
+ notes: [
430
+ "Enter / Space \u3067\u306E\u958B\u9589\u306F\u3001\u898B\u51FA\u3057\u3092 <button> \u306B\u3059\u308B\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u308B\uFF08\u81EA\u524D\u306E\u30AD\u30FC\u51E6\u7406\u306F\u4E0D\u8981\uFF09\u3002",
431
+ "\u300C\u540C\u6642\u306B1\u3064\u3060\u3051\u958B\u304F\u300D\u6319\u52D5\u3067\u3082\u3001\u3059\u3079\u3066\u9589\u3058\u3089\u308C\u308B\u3088\u3046\u306B\u3057\u3066\u304A\u304F\u306E\u304C\u89AA\u5207\uFF08APG \u63A8\u5968\uFF09\u3002"
432
+ ]
433
+ };
434
+ var alert = {
435
+ slug: "alert",
436
+ keyboard: [
437
+ {
438
+ keys: "\uFF08\u5C02\u7528\u30AD\u30FC\u306A\u3057\uFF09",
439
+ action: "\u30A2\u30E9\u30FC\u30C8\u81EA\u4F53\u306B\u7279\u5225\u306A\u30AD\u30FC\u64CD\u4F5C\u306F\u306A\u3044\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3055\u306A\u3044\u306E\u304C\u6B63\u3057\u3044\u6319\u52D5\u3002",
440
+ requirement: "required"
441
+ },
442
+ {
443
+ keys: "Tab",
444
+ action: "\u30E1\u30C3\u30BB\u30FC\u30B8\u3092\u8868\u793A\u3055\u305B\u308B\u30C8\u30EA\u30AC\u30FC\uFF08\u30DC\u30BF\u30F3\u306A\u3069\uFF09\u3078\u306F\u901A\u5E38\u3069\u304A\u308A\u79FB\u52D5\u3067\u304D\u308B\u3002",
445
+ requirement: "required"
446
+ }
447
+ ],
448
+ aria: [
449
+ {
450
+ target: "\u901A\u77E5\u9818\u57DF\u306E\u30B3\u30F3\u30C6\u30CA",
451
+ attr: 'role="alert"',
452
+ meaning: '\u7DCA\u6025\u306E\u8AAD\u307F\u4E0A\u3052\u9818\u57DF\u306B\u3059\u308B\u3002aria-live="assertive" \u76F8\u5F53\u306E\u6319\u52D5\u306B\u306A\u308B\u3002'
453
+ },
454
+ {
455
+ target: "\u901A\u77E5\u9818\u57DF\u306E\u30B3\u30F3\u30C6\u30CA",
456
+ attr: 'aria-atomic="true"\uFF08\u4EFB\u610F\uFF09',
457
+ meaning: "\u5185\u5BB9\u304C\u5909\u308F\u3063\u305F\u3068\u304D\u3001\u9818\u57DF\u5168\u4F53\u3092\u307E\u3068\u3081\u3066\u8AAD\u307F\u4E0A\u3052\u308B\u3002"
458
+ },
459
+ {
460
+ target: "\u30B3\u30F3\u30C6\u30CA\u306E\u8A2D\u7F6E\u30BF\u30A4\u30DF\u30F3\u30B0",
461
+ attr: "\uFF08\u5C5E\u6027\u3067\u306F\u306A\u304F\u5B9F\u88C5\uFF09",
462
+ meaning: "\u6700\u521D\u304B\u3089\u7A7A\u3067 DOM \u306B\u7F6E\u3044\u3066\u304A\u304F\u3002\u3042\u3068\u304B\u3089\u6587\u5B57\u3092\u5DEE\u3057\u8FBC\u3080\u3068\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002\u5F8C\u304B\u3089\u9818\u57DF\u3054\u3068\u633F\u5165\u3059\u308B\u3068\u8AAD\u307E\u308C\u306A\u3044\u3053\u3068\u304C\u3042\u308B\u3002"
463
+ }
464
+ ],
465
+ checklist: [
466
+ 'role="alert" \u306E\u9818\u57DF\u3092\u6700\u521D\u304B\u3089\u7A7A\u3067 DOM \u306B\u7F6E\u3044\u3066\u3044\u308B',
467
+ "\u30E1\u30C3\u30BB\u30FC\u30B8\u306F\u9818\u57DF\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5DEE\u3057\u66FF\u3048\u308B\u5F62\u3067\u633F\u5165\u3057\u3066\u3044\u308B",
468
+ "\u30A2\u30E9\u30FC\u30C8\u8868\u793A\u6642\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3063\u3066\u3044\u306A\u3044",
469
+ '\u7DCA\u6025\u3067\u306A\u3044\u901A\u77E5\u306F role="status"\uFF08polite\uFF09\u3092\u4F7F\u3044\u5206\u3051\u3066\u3044\u308B',
470
+ "\u540C\u3058\u6587\u8A00\u306E\u518D\u901A\u77E5\u306F\u5185\u5BB9\u3092\u5909\u5316\u3055\u305B\u3066\u78BA\u5B9F\u306B\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u3066\u3044\u308B",
471
+ "\u9589\u3058\u308B\u30DC\u30BF\u30F3\u3092\u4ED8\u3051\u308B\u5834\u5408\u306F\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
472
+ ],
473
+ antipatterns: [
474
+ {
475
+ title: "\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044",
476
+ why: 'role="alert" \u3082 aria-live \u3082\u7121\u3044\u306E\u3067\u3001\u5909\u5316\u304C\u901A\u77E5\u3055\u308C\u306A\u3044\u3002'
477
+ },
478
+ {
479
+ title: "\u6C17\u3065\u3051\u306A\u3044",
480
+ why: "\u753B\u9762\u306E\u5225\u306E\u5834\u6240\u3092\u8AAD\u3093\u3067\u3044\u308B\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u5229\u7528\u8005\u306B\u306F\u5B58\u5728\u81EA\u4F53\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
481
+ },
482
+ {
483
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3046",
484
+ why: "\u300C\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u305F\u3044\u304B\u3089\u300D\u3068\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3046\u306E\u3082\u8AA4\u308A\u3002\u64CD\u4F5C\u4F4D\u7F6E\u3092\u898B\u5931\u308F\u305B\u308B\u3002"
485
+ }
486
+ ],
487
+ notes: [
488
+ '\u7DCA\u6025\u3067\u306A\u3044\u901A\u77E5\uFF08\u4F8B:\u300C\u81EA\u52D5\u4FDD\u5B58\u3057\u307E\u3057\u305F\u300D\uFF09\u306F role="status"\uFF08\uFF1Daria-live="polite"\uFF09\u3092\u4F7F\u3044\u3001\u5272\u308A\u8FBC\u307E\u305A\u8AAD\u307F\u4E0A\u3052\u308B\u306E\u304C\u89AA\u5207\u3002',
489
+ "\u540C\u3058\u6587\u8A00\u3092\u7D9A\u3051\u3066\u5165\u308C\u308B\u3068\u8AAD\u307F\u4E0A\u3052\u304C\u7E70\u308A\u8FD4\u3055\u308C\u306A\u3044\u3053\u3068\u304C\u3042\u308B\u3002\u56DE\u6570\u8868\u793A\u3092\u52A0\u3048\u308B\u304B\u3001\u4E00\u5EA6\u7A7A\u306B\u3057\u3066\u304B\u3089\u5165\u308C\u76F4\u3059\u3068\u78BA\u5B9F\u3002"
490
+ ]
491
+ };
492
+ var alertdialog = {
493
+ slug: "alertdialog",
494
+ keyboard: [
495
+ {
496
+ keys: "Esc",
497
+ action: "\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u9589\u3058\u308B\uFF08\uFF1D\u30AD\u30E3\u30F3\u30BB\u30EB\u6271\u3044\u3002showModal() \u306A\u3089\u6A19\u6E96\u5BFE\u5FDC\uFF09",
768
498
  requirement: "required"
769
499
  },
770
500
  {
771
- keys: "Tab",
772
- action: "\u6B21\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\uFF08\u6B21\u306E\u898B\u51FA\u3057\u306A\u3069\uFF09\u3078\u79FB\u52D5",
501
+ keys: "Tab / Shift+Tab",
502
+ action: "\u30DC\u30BF\u30F3\u9593\u3092\u5FAA\u74B0\u79FB\u52D5\uFF08\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u306B\u9589\u3058\u8FBC\u3081\u3089\u308C\u308B\uFF09",
773
503
  requirement: "required"
774
504
  },
775
505
  {
776
- keys: "\u2193 / \u2191",
777
- action: "\u6B21 / \u524D\u306E\u898B\u51FA\u3057\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
778
- requirement: "recommended"
506
+ keys: "Enter / Space",
507
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u5B9F\u884C",
508
+ requirement: "required"
779
509
  },
780
510
  {
781
- keys: "Home / End",
782
- action: "\u6700\u521D / \u6700\u5F8C\u306E\u898B\u51FA\u3057\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
783
- requirement: "optional"
511
+ keys: "\uFF08\u958B\u3044\u305F\u76F4\u5F8C\uFF09",
512
+ action: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5B89\u5168\u5074\uFF08\u30AD\u30E3\u30F3\u30BB\u30EB\uFF09\u306E\u30DC\u30BF\u30F3\u306B\u7F6E\u304F",
513
+ requirement: "required"
784
514
  }
785
515
  ],
786
516
  aria: [
787
517
  {
788
- target: "\u898B\u51FA\u3057\u306E\u30DC\u30BF\u30F3",
789
- attr: 'aria-expanded="true | false"',
790
- meaning: "\u5BFE\u5FDC\u3059\u308B\u30D1\u30CD\u30EB\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u72B6\u614B\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
518
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
519
+ attr: 'role="alertdialog"',
520
+ meaning: "\u300C\u91CD\u8981\u306A\u78BA\u8A8D\u30FB\u8B66\u544A\u306E\u30C0\u30A4\u30A2\u30ED\u30B0\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
791
521
  },
792
522
  {
793
- target: "\u898B\u51FA\u3057\u306E\u30DC\u30BF\u30F3",
794
- attr: 'aria-controls="\u30D1\u30CD\u30EB\u306Eid"',
795
- meaning: "\u3069\u306E\u30D1\u30CD\u30EB\u3092\u5236\u5FA1\u3059\u308B\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
523
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
524
+ attr: 'aria-modal="true"',
525
+ meaning: "\u80CC\u9762\u304C\u64CD\u4F5C\u4E0D\u53EF\u306E\u30E2\u30FC\u30C0\u30EB\u3067\u3042\u308B\u3053\u3068\u3092\u660E\u793A\uFF08role \u3092\u4E0A\u66F8\u304D\u3057\u305F\u305F\u3081\u660E\u793A\u3059\u308B\uFF09\u3002"
796
526
  },
797
527
  {
798
- target: "\u898B\u51FA\u3057\u306E\u5916\u5074",
799
- attr: "<h2>\u301C<h4>",
800
- meaning: "\u30DA\u30FC\u30B8\u306E\u69CB\u9020\u306B\u5408\u3063\u305F\u898B\u51FA\u3057\u30EC\u30D9\u30EB\u3067\u56F2\u3080\u3002\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u898B\u51FA\u3057\u30B8\u30E3\u30F3\u30D7\u306B\u5F79\u7ACB\u3064\u3002"
528
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
529
+ attr: 'aria-labelledby="\u30BF\u30A4\u30C8\u30EB\u306Eid"',
530
+ meaning: "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u540D\u524D\uFF08\u8CEA\u554F\u6587\uFF09\u3092\u6307\u3059\u3002"
801
531
  },
802
532
  {
803
- target: "\u30D1\u30CD\u30EB",
804
- attr: 'role="region" + aria-labelledby="\u898B\u51FA\u3057\u306Eid"',
805
- meaning: "\u30D1\u30CD\u30EB\u3092\u540D\u524D\u4ED8\u304D\u306E\u9818\u57DF\u306B\u3059\u308B\uFF08\u4EFB\u610F\u3060\u304C\u63A8\u5968\u3002\u9818\u57DF\u304C\u591A\u3059\u304E\u308B\u3068\u9006\u52B9\u679C\u306A\u306E\u3067\u6570\u304C\u591A\u3044\u3068\u304D\u306F\u7701\u7565\u53EF\uFF09\u3002"
533
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
534
+ attr: 'aria-describedby="\u8AAC\u660E\u306Eid"',
535
+ meaning: "\u7D50\u679C\u306E\u91CD\u5927\u3055\u3092\u8AAC\u660E\u3059\u308B\u672C\u6587\u3092\u95A2\u9023\u4ED8\u3051\u3001\u958B\u3044\u305F\u77AC\u9593\u306B\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u308B\u3002"
806
536
  },
807
537
  {
808
- target: "\u9589\u3058\u3066\u3044\u308B\u30D1\u30CD\u30EB",
809
- attr: "hidden",
810
- meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F DOM \u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
538
+ target: "\u30AD\u30E3\u30F3\u30BB\u30EB\u30DC\u30BF\u30F3",
539
+ attr: "autofocus",
540
+ meaning: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5B89\u5168\u5074\u306B\u7F6E\u304F\u3002"
811
541
  }
812
542
  ],
813
543
  checklist: [
814
- '\u898B\u51FA\u3057\u306E\u30C8\u30EA\u30AC\u30FC\u306F <button type="button"> \u3067\u3042\u308B',
815
- "\u30DC\u30BF\u30F3\u306F\u898B\u51FA\u3057\u8981\u7D20\uFF08<h2>\u301C<h4>\uFF09\u3067\u56F2\u307E\u308C\u3066\u3044\u308B",
816
- "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
817
- "aria-controls \u3067\u30D1\u30CD\u30EB\u306E id \u3092\u6307\u3057\u3066\u3044\u308B",
818
- "\u9589\u3058\u3066\u3044\u308B\u30D1\u30CD\u30EB\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
819
- '\u30D1\u30CD\u30EB\u306B role="region" + aria-labelledby\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09',
820
- "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u958B\u9589\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
821
- "\uFF08\u4EFB\u610F\uFF09\u2191 \u2193 Home End \u3067\u898B\u51FA\u3057\u9593\u3092\u79FB\u52D5\u3067\u304D\u308B"
544
+ "\u30CD\u30A4\u30C6\u30A3\u30D6 <dialog> + showModal() \u3092\u4F7F\u3063\u3066\u3044\u308B",
545
+ 'role="alertdialog" \u3068 aria-modal="true" \u3092\u4ED8\u3051\u3066\u3044\u308B',
546
+ "aria-labelledby \u3067\u8CEA\u554F\u6587\u3001aria-describedby \u3067\u7D50\u679C\u306E\u8AAC\u660E\u3092\u95A2\u9023\u4ED8\u3051\u3066\u3044\u308B",
547
+ "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5B89\u5168\u5074\uFF08\u30AD\u30E3\u30F3\u30BB\u30EB\uFF09\u306B\u7F6E\u3044\u3066\u3044\u308B",
548
+ "Tab \u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3092\u5FAA\u74B0\u3057\u3001\u80CC\u9762\u306B\u6F0F\u308C\u306A\u3044",
549
+ "Esc \u3067\u9589\u3058\u3089\u308C\u308B",
550
+ "\u9589\u3058\u308B\u3068\u958B\u3044\u305F\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u623B\u308B",
551
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
822
552
  ],
823
553
  antipatterns: [
824
554
  {
825
- title: "div + onclick \u3067\u898B\u51FA\u3057\u3092\u4F5C\u308B",
826
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u4E00\u5207\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
555
+ title: "\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044",
556
+ why: 'role="alertdialog" \u3082 aria-describedby \u3082\u7121\u304F\u3001\u4F55\u306E\u78BA\u8A8D\u304B\u4F1D\u308F\u3089\u306A\u3044\u3002'
827
557
  },
828
558
  {
829
- title: "\u5F79\u5272\uFF08role\uFF09\u3092\u4F1D\u3048\u306A\u3044",
830
- why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u300D\u306B\u805E\u3053\u3048\u3001\u62BC\u305B\u308B\u3053\u3068\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
559
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u79FB\u3089\u306A\u3044",
560
+ why: "\u958B\u3044\u3066\u3082\u30DC\u30C3\u30AF\u30B9\u306B\u5165\u3089\u305A\u3001\u80CC\u9762\u306B Tab \u3067\u629C\u3051\u3066\u3057\u307E\u3046\u3002"
831
561
  },
832
562
  {
833
- title: "\u72B6\u614B\u3092\u4F1D\u3048\u306A\u3044",
834
- why: "aria-expanded \u304C\u306A\u304F\u3001\u958B\u3044\u3066\u3044\u308B\u304B\u9589\u3058\u3066\u3044\u308B\u304B\u3092\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
563
+ title: "Esc \u3067\u9589\u3058\u306A\u3044",
564
+ why: "\u5B89\u5168\u306A\u96E2\u8131\u624B\u6BB5\u304C\u7121\u3044\u3002"
835
565
  },
836
566
  {
837
- title: "display:none \u983C\u307F\u3067\u96A0\u3059",
838
- why: "hidden \u5C5E\u6027\u3084\u9069\u5207\u306A\u72B6\u614B\u7BA1\u7406\u304C\u306A\u304F\u3001\u30A4\u30F3\u30E9\u30A4\u30F3 style \u983C\u307F\u306B\u306A\u3063\u3066\u3044\u308B\u3002"
567
+ title: "\u9078\u629E\u80A2\u304C <span>",
568
+ why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u300C\u306F\u3044/\u3044\u3044\u3048\u300D\u3092\u9078\u3079\u306A\u3044\u3002"
569
+ },
570
+ {
571
+ title: "\u5371\u967A\u306A\u64CD\u4F5C\u306E\u9632\u5FA1\u304C\u7121\u3044",
572
+ why: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3084\u5B89\u5168\u5074\u306E\u914D\u616E\u304C\u306A\u3044\u3002"
839
573
  }
840
574
  ],
841
575
  notes: [
842
- "Enter / Space \u3067\u306E\u958B\u9589\u306F\u3001\u898B\u51FA\u3057\u3092 <button> \u306B\u3059\u308B\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u308B\uFF08\u81EA\u524D\u306E\u30AD\u30FC\u51E6\u7406\u306F\u4E0D\u8981\uFF09\u3002",
843
- "\u300C\u540C\u6642\u306B1\u3064\u3060\u3051\u958B\u304F\u300D\u6319\u52D5\u3067\u3082\u3001\u3059\u3079\u3066\u9589\u3058\u3089\u308C\u308B\u3088\u3046\u306B\u3057\u3066\u304A\u304F\u306E\u304C\u89AA\u5207\uFF08APG \u63A8\u5968\uFF09\u3002"
576
+ 'role="alertdialog" \u3092\u4ED8\u3051\u308B\u3068 <dialog> \u65E2\u5B9A\u306E role="dialog" \u3092\u4E0A\u66F8\u304D\u3059\u308B\u305F\u3081\u3001aria-modal="true" \u3082\u5408\u308F\u305B\u3066\u660E\u793A\u3057\u3066\u304A\u304F\u306E\u304C\u5B89\u5168\u3002'
844
577
  ]
845
578
  };
846
- var disclosure = {
847
- slug: "disclosure",
579
+ var breadcrumb = {
580
+ slug: "breadcrumb",
848
581
  keyboard: [
849
582
  {
850
- keys: "Enter / Space",
851
- action: "\u9818\u57DF\u3092\u958B\u304F / \u9589\u3058\u308B",
583
+ keys: "Tab / Shift+Tab",
584
+ action: "\u524D\u5F8C\u306E\u30EA\u30F3\u30AF\u3078\u79FB\u52D5\uFF08\u666E\u901A\u306E\u30EA\u30F3\u30AF\u3068\u540C\u3058\uFF09",
585
+ requirement: "required"
586
+ },
587
+ {
588
+ keys: "Enter",
589
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30EA\u30F3\u30AF\u5148\u3078\u79FB\u52D5",
852
590
  requirement: "required"
591
+ }
592
+ ],
593
+ aria: [
594
+ {
595
+ target: "\u5916\u5074\u306E\u30B3\u30F3\u30C6\u30CA",
596
+ attr: '<nav aria-label="\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8">',
597
+ meaning: "\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306E\u30E9\u30F3\u30C9\u30DE\u30FC\u30AF\u306B\u3057\u3001\u540D\u524D\u3067\u533A\u5225\u3059\u308B\u3002"
598
+ },
599
+ {
600
+ target: "\u30EA\u30F3\u30AF\u306E\u4E26\u3073",
601
+ attr: "<ol> > <li>",
602
+ meaning: "\u9806\u5E8F\u306E\u3042\u308B\u30EA\u30B9\u30C8\u306B\u3057\u3066\u3001\u968E\u5C64\u306E\u6570\u3068\u9806\u756A\u3092\u4F1D\u3048\u308B\u3002"
603
+ },
604
+ {
605
+ target: "\u73FE\u5728\u5730\u306E\u9805\u76EE",
606
+ attr: 'aria-current="page"',
607
+ meaning: "\u300C\u73FE\u5728\u306E\u30DA\u30FC\u30B8\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002\u30EA\u30F3\u30AF\u306B\u306F\u3057\u306A\u3044\u3002"
608
+ },
609
+ {
610
+ target: "\u533A\u5207\u308A\u6587\u5B57",
611
+ attr: "\uFF08CSS \u306E ::before\uFF09",
612
+ meaning: "\u300C/\u300D\u300C>\u300D\u306F\u88C5\u98FE\u3002\u30C6\u30AD\u30B9\u30C8\u306B\u305B\u305A\u64EC\u4F3C\u8981\u7D20\u3067\u63CF\u304D\u3001\u8AAD\u307F\u4E0A\u3052\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
613
+ }
614
+ ],
615
+ checklist: [
616
+ '\u5916\u5074\u3092 <nav aria-label="\u2026"> \u3067\u56F2\u3093\u3067\u3044\u308B',
617
+ "\u4E2D\u8EAB\u306F <ol> > <li> \u306E\u9806\u5E8F\u4ED8\u304D\u30EA\u30B9\u30C8",
618
+ "\u5404\u968E\u5C64\u306F <a href>\uFF08\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u79FB\u52D5\u3067\u304D\u308B\uFF09",
619
+ '\u73FE\u5728\u5730\u306F aria-current="page" \u3092\u4ED8\u3051\u3001\u30EA\u30F3\u30AF\u306B\u3057\u3066\u3044\u306A\u3044',
620
+ "\u533A\u5207\u308A\u6587\u5B57\u306F CSS \u306E\u64EC\u4F3C\u8981\u7D20\u3067\u63CF\u304D\u3001\u30C6\u30AD\u30B9\u30C8\u306B\u3057\u3066\u3044\u306A\u3044",
621
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
622
+ ],
623
+ antipatterns: [
624
+ {
625
+ title: "\u30E9\u30F3\u30C9\u30DE\u30FC\u30AF\u304C\u7121\u3044",
626
+ why: "<nav> \u3067\u306A\u3044\u306E\u3067\u3001\u30D1\u30F3\u304F\u305A\u3078\u4E00\u767A\u3067\u79FB\u52D5\u3067\u304D\u306A\u3044\u3002"
627
+ },
628
+ {
629
+ title: "\u30EA\u30B9\u30C8\u69CB\u9020\u304C\u7121\u3044",
630
+ why: "<ol>/<li> \u3067\u306A\u3044\u306E\u3067\u300C\u4F55\u9805\u76EE\u3042\u308B\u304B\u300D\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
631
+ },
632
+ {
633
+ title: "\u73FE\u5728\u5730\u304C\u4F1D\u308F\u3089\u306A\u3044",
634
+ why: 'aria-current="page" \u304C\u7121\u304F\u3001\u3044\u307E\u3069\u3053\u306B\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002'
853
635
  },
636
+ {
637
+ title: "\u533A\u5207\u308A\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B",
638
+ why: "\u30C6\u30AD\u30B9\u30C8\u306E\u300C>\u300D\u304C\u4E00\u3064\u305A\u3064\u8AAD\u307E\u308C\u3001\u8033\u969C\u308A\u306B\u306A\u308B\u3002"
639
+ }
640
+ ],
641
+ notes: ["\u30D1\u30F3\u304F\u305A\u306F\u305F\u3060\u306E\u30EA\u30F3\u30AF\u306E\u4E26\u3073\u3067\u3059\u3002<a href> \u3092\u4F7F\u3048\u3070\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306F\u81EA\u52D5\u3067\u5F97\u3089\u308C\u307E\u3059\u3002"]
642
+ };
643
+ var button = {
644
+ slug: "button",
645
+ keyboard: [
854
646
  {
855
647
  keys: "Tab",
856
- action: "\u6B21 / \u524D\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\u3078\u79FB\u52D5",
648
+ action: "\u6B21 / \u524D\u306E\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5\uFF08\u7121\u52B9\u306A\u30DC\u30BF\u30F3\u306F\u98DB\u3070\u3055\u308C\u308B\uFF09",
649
+ requirement: "required"
650
+ },
651
+ {
652
+ keys: "Enter",
653
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3059",
654
+ requirement: "required"
655
+ },
656
+ {
657
+ keys: "Space",
658
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3059",
857
659
  requirement: "required"
858
660
  }
859
661
  ],
860
662
  aria: [
861
663
  {
862
- target: "\u30C8\u30EA\u30AC\u30FC",
664
+ target: "\u30DC\u30BF\u30F3\uFF08\u63A8\u5968\uFF09",
863
665
  attr: '<button type="button">',
864
- meaning: "\u62BC\u305B\u308B\u8981\u7D20\u306B\u3059\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u30FBEnter/Space\u30FB\u300C\u30DC\u30BF\u30F3\u300D\u30ED\u30FC\u30EB\u304C\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
666
+ meaning: "\u30ED\u30FC\u30EB\u30FB\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30AD\u30FC\u64CD\u4F5C\u304C\u3059\u3079\u3066\u81EA\u52D5\u3002ARIA \u306F\u57FA\u672C\u4E0D\u8981\u3002"
865
667
  },
866
668
  {
867
- target: "\u30C8\u30EA\u30AC\u30FC",
868
- attr: 'aria-expanded="true | false"',
869
- meaning: "\u9818\u57DF\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u72B6\u614B\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
669
+ target: "\u30D5\u30A9\u30FC\u30E0\u9001\u4FE1",
670
+ attr: 'type="submit" / type="button"',
671
+ meaning: '\u610F\u56F3\u3057\u306A\u3044\u9001\u4FE1\u3092\u907F\u3051\u308B\u305F\u3081\u3001\u9001\u4FE1\u3067\u306A\u3044\u30DC\u30BF\u30F3\u306B\u306F type="button" \u3092\u4ED8\u3051\u308B\u3002'
870
672
  },
871
673
  {
872
- target: "\u30C8\u30EA\u30AC\u30FC",
873
- attr: 'aria-controls="\u9818\u57DF\u306Eid"',
874
- meaning: "\u3069\u306E\u9818\u57DF\u3092\u5236\u5FA1\u3059\u308B\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
674
+ target: "\u7121\u52B9\u5316",
675
+ attr: "disabled",
676
+ meaning: "\u64CD\u4F5C\u4E0D\u53EF\u306B\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304B\u3089\u3082\u5916\u3059\u3002\u652F\u63F4\u6280\u8853\u306B\u3082\u4F1D\u308F\u308B\u3002"
875
677
  },
876
678
  {
877
- target: "\u9589\u3058\u3066\u3044\u308B\u9818\u57DF",
878
- attr: "hidden",
879
- meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F DOM \u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
679
+ target: "div \u3067\u4EE3\u7528\u3059\u308B\u5834\u5408\u306E\u307F",
680
+ attr: 'role="button" + tabindex="0"',
681
+ meaning: "\u300C\u30DC\u30BF\u30F3\u300D\u3068\u8A8D\u8B58\u3055\u305B\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306B\u3059\u308B\u3002\u3055\u3089\u306B\u30AD\u30FC\u51E6\u7406\u306E\u81EA\u4F5C\u304C\u5FC5\u9808\u3002"
880
682
  }
881
683
  ],
882
684
  checklist: [
883
- '\u30C8\u30EA\u30AC\u30FC\u306F <button type="button"> \u3067\u3042\u308B',
884
- "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
885
- "aria-controls \u3067\u9818\u57DF\u306E id \u3092\u6307\u3057\u3066\u3044\u308B",
886
- "\u9589\u3058\u3066\u3044\u308B\u9818\u57DF\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
887
- "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u958B\u9589\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
888
- "\uFF08\u4EFB\u610F\uFF09\u30DC\u30BF\u30F3\u306E\u30E9\u30D9\u30EB\u304C\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5207\u308A\u66FF\u308F\u308B"
685
+ "\u64CD\u4F5C\uFF08\u5B9F\u884C\uFF09\u306E\u90E8\u54C1\u306F <button> \u3092\u4F7F\u3063\u3066\u3044\u308B",
686
+ '\u9001\u4FE1\u3067\u306A\u3044\u30DC\u30BF\u30F3\u306B\u306F type="button" \u3092\u4ED8\u3051\u3066\u3044\u308B',
687
+ "\u30DE\u30A6\u30B9\u30FBEnter\u30FBSpace \u306E\u3059\u3079\u3066\u3067\u52D5\u304F",
688
+ "\u7121\u52B9\u306B\u3057\u305F\u3044\u3068\u304D\u306F disabled \u3092\u4F7F\u3063\u3066\u3044\u308B",
689
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
690
+ '\uFF08div \u4EE3\u7528\u6642\u306E\u307F\uFF09role="button"\u30FBtabindex="0"\u30FB\u30AD\u30FC\u51E6\u7406\u3092\u3059\u3079\u3066\u8DB3\u3057\u3066\u3044\u308B'
889
691
  ],
890
692
  antipatterns: [
891
693
  {
892
- title: "div + onclick \u3067\u30C8\u30EA\u30AC\u30FC\u3092\u4F5C\u308B",
893
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u4E00\u5207\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
694
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u306A\u3044",
695
+ why: "div \u306F Tab \u306E\u5BFE\u8C61\u5916\u3002\u305D\u3082\u305D\u3082\u5230\u9054\u3067\u304D\u306A\u3044\u3002"
894
696
  },
895
697
  {
896
- title: "\u5F79\u5272\u3092\u4F1D\u3048\u306A\u3044",
897
- why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u300D\u306B\u805E\u3053\u3048\u3001\u62BC\u305B\u308B\u3068\u5206\u304B\u3089\u306A\u3044\u3002"
698
+ title: "Space / Enter \u3067\u52D5\u304B\u306A\u3044",
699
+ why: "div \u306B\u306F\u30AD\u30FC\u51E6\u7406\u304C\u306A\u304F\u3001\u81EA\u5206\u3067\u66F8\u304B\u306A\u3051\u308C\u3070\u53CD\u5FDC\u3057\u306A\u3044\u3002"
898
700
  },
899
701
  {
900
- title: "\u72B6\u614B\u3092\u4F1D\u3048\u306A\u3044",
901
- why: "aria-expanded \u304C\u306A\u304F\u3001\u958B/\u9589\u304C\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
702
+ title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
703
+ why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u300C\u30DC\u30BF\u30F3\u300D\u3068\u8A8D\u8B58\u3055\u308C\u305A\u3001\u62BC\u305B\u308B\u3053\u3068\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
902
704
  },
903
705
  {
904
- title: "display:none \u306E\u30A4\u30F3\u30E9\u30A4\u30F3\u30B9\u30BF\u30A4\u30EB\u983C\u307F\u306B\u3059\u308B",
905
- why: "hidden \u5C5E\u6027\u3084\u72B6\u614B\u7BA1\u7406\u304C\u7121\u304F\u3001\u652F\u63F4\u6280\u8853\u306B\u96A0\u308C\u3066\u3044\u308B\u304B\u3069\u3046\u304B\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
706
+ title: "\u7121\u52B9\u5316\u3067\u304D\u306A\u3044",
707
+ why: "div \u306B\u306F disabled \u306E\u6982\u5FF5\u304C\u306A\u304F\u3001\u62BC\u305B\u306A\u3044\u72B6\u614B\u3092\u652F\u63F4\u6280\u8853\u306B\u4F1D\u3048\u3089\u308C\u306A\u3044\u3002"
906
708
  }
907
709
  ],
908
710
  notes: [
909
- "Enter / Space \u3067\u306E\u958B\u9589\u306F\u3001\u30C8\u30EA\u30AC\u30FC\u3092 <button> \u306B\u3059\u308B\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\uFF08\u81EA\u524D\u306E\u30AD\u30FC\u51E6\u7406\u306F\u4E0D\u8981\uFF09\u3002",
910
- "\u30DC\u30BF\u30F3\u306E\u30E9\u30D9\u30EB\u3092\u300C\u3082\u3063\u3068\u898B\u308B\u300D\u21C4\u300C\u9589\u3058\u308B\u300D\u306E\u3088\u3046\u306B\u5207\u308A\u66FF\u3048\u308B\u3068\u3001\u6674\u773C\u306E\u30E6\u30FC\u30B6\u30FC\u306B\u3082\u6B21\u306E\u52D5\u4F5C\u304C\u4F1D\u308F\u3063\u3066\u89AA\u5207\u3067\u3059\u3002"
711
+ "<button> \u306A\u3089\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\uFF08Tab / Enter / Space\uFF09\u3068\u652F\u63F4\u6280\u8853\u3078\u306E\u901A\u77E5\u304C\u30B3\u30FC\u30C9\u3092\u66F8\u304B\u305A\u306B\u52D5\u304D\u307E\u3059\u3002",
712
+ "\u305D\u306E\u5834\u3067\u4F55\u304B\u3092\u5B9F\u884C\u3059\u308B\u306A\u3089 <button>\u3001\u5225\u306E\u5834\u6240\u3078\u79FB\u52D5\u3059\u308B\u306A\u3089 <a href> \u3068\u5F79\u5272\u3067\u9078\u3073\u307E\u3057\u3087\u3046\u3002"
911
713
  ]
912
714
  };
913
- var alert = {
914
- slug: "alert",
715
+ var carousel = {
716
+ slug: "carousel",
915
717
  keyboard: [
916
718
  {
917
- keys: "\uFF08\u5C02\u7528\u30AD\u30FC\u306A\u3057\uFF09",
918
- action: "\u30A2\u30E9\u30FC\u30C8\u81EA\u4F53\u306B\u7279\u5225\u306A\u30AD\u30FC\u64CD\u4F5C\u306F\u306A\u3044\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3055\u306A\u3044\u306E\u304C\u6B63\u3057\u3044\u6319\u52D5\u3002",
719
+ keys: "Tab \u2192 Enter / Space\uFF08\u518D\u751F\u505C\u6B62\u30DC\u30BF\u30F3\uFF09",
720
+ action: "\u81EA\u52D5\u56DE\u8EE2\u306E\u518D\u751F / \u505C\u6B62\u3092\u5207\u308A\u66FF\u3048\u308B",
721
+ requirement: "required"
722
+ },
723
+ {
724
+ keys: "Enter / Space\uFF08\u524D/\u6B21\u30DC\u30BF\u30F3\uFF09",
725
+ action: "\u524D / \u6B21\u306E\u30B9\u30E9\u30A4\u30C9\u3078\u624B\u52D5\u79FB\u52D5\uFF08\u79FB\u52D5\u3059\u308B\u3068\u81EA\u52D5\u56DE\u8EE2\u306F\u505C\u6B62\uFF09",
919
726
  requirement: "required"
920
727
  },
921
728
  {
922
- keys: "Tab",
923
- action: "\u30E1\u30C3\u30BB\u30FC\u30B8\u3092\u8868\u793A\u3055\u305B\u308B\u30C8\u30EA\u30AC\u30FC\uFF08\u30DC\u30BF\u30F3\u306A\u3069\uFF09\u3078\u306F\u901A\u5E38\u3069\u304A\u308A\u79FB\u52D5\u3067\u304D\u308B\u3002",
729
+ keys: "\u30D5\u30A9\u30FC\u30AB\u30B9 / \u30DB\u30D0\u30FC",
730
+ action: "\u30AB\u30EB\u30FC\u30BB\u30EB\u5185\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30DE\u30A6\u30B9\u304C\u3042\u308B\u9593\u306F\u81EA\u52D5\u56DE\u8EE2\u3092\u4E00\u6642\u505C\u6B62",
924
731
  requirement: "required"
925
732
  }
926
733
  ],
927
734
  aria: [
928
735
  {
929
- target: "\u901A\u77E5\u9818\u57DF\u306E\u30B3\u30F3\u30C6\u30CA",
930
- attr: 'role="alert"',
931
- meaning: '\u7DCA\u6025\u306E\u8AAD\u307F\u4E0A\u3052\u9818\u57DF\u306B\u3059\u308B\u3002aria-live="assertive" \u76F8\u5F53\u306E\u6319\u52D5\u306B\u306A\u308B\u3002'
736
+ target: "\u30AB\u30EB\u30FC\u30BB\u30EB\u5168\u4F53",
737
+ attr: 'aria-roledescription="carousel" + aria-label',
738
+ meaning: "\u30AB\u30EB\u30FC\u30BB\u30EB\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
932
739
  },
933
740
  {
934
- target: "\u901A\u77E5\u9818\u57DF\u306E\u30B3\u30F3\u30C6\u30CA",
935
- attr: 'aria-atomic="true"\uFF08\u4EFB\u610F\uFF09',
936
- meaning: "\u5185\u5BB9\u304C\u5909\u308F\u3063\u305F\u3068\u304D\u3001\u9818\u57DF\u5168\u4F53\u3092\u307E\u3068\u3081\u3066\u8AAD\u307F\u4E0A\u3052\u308B\u3002"
741
+ target: "\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3",
742
+ attr: "<button> + \u72B6\u614B\u306B\u5FDC\u3058\u305F aria-label",
743
+ meaning: "\u81EA\u52D5\u56DE\u8EE2\u3092\u6B62\u3081/\u518D\u958B\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\uFF08\u81EA\u52D5\u56DE\u8EE2\u6642\u306F\u5FC5\u9808\uFF09\u3002"
937
744
  },
938
745
  {
939
- target: "\u30B3\u30F3\u30C6\u30CA\u306E\u8A2D\u7F6E\u30BF\u30A4\u30DF\u30F3\u30B0",
940
- attr: "\uFF08\u5C5E\u6027\u3067\u306F\u306A\u304F\u5B9F\u88C5\uFF09",
941
- meaning: "\u6700\u521D\u304B\u3089\u7A7A\u3067 DOM \u306B\u7F6E\u3044\u3066\u304A\u304F\u3002\u3042\u3068\u304B\u3089\u6587\u5B57\u3092\u5DEE\u3057\u8FBC\u3080\u3068\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002\u5F8C\u304B\u3089\u9818\u57DF\u3054\u3068\u633F\u5165\u3059\u308B\u3068\u8AAD\u307E\u308C\u306A\u3044\u3053\u3068\u304C\u3042\u308B\u3002"
746
+ target: "\u524D/\u6B21\u30DC\u30BF\u30F3",
747
+ attr: "<button> + aria-label",
748
+ meaning: "\u30A2\u30A4\u30B3\u30F3\u3060\u3051\u3067\u3082\u76EE\u7684\u304C\u4F1D\u308F\u308B\u3088\u3046\u30E9\u30D9\u30EB\u3092\u4ED8\u3051\u308B\u3002"
749
+ },
750
+ {
751
+ target: "\u5404\u30B9\u30E9\u30A4\u30C9",
752
+ attr: 'role="group" + aria-roledescription="\u30B9\u30E9\u30A4\u30C9" + aria-label="3\u679A\u4E2D1\u679A\u76EE"',
753
+ meaning: "\u5168\u4F53\u306E\u679A\u6570\u3068\u73FE\u5728\u4F4D\u7F6E\u3092\u4F1D\u3048\u308B\u3002"
754
+ },
755
+ {
756
+ target: "\u30B9\u30E9\u30A4\u30C9\u306E\u7BB1",
757
+ attr: 'aria-live="off | polite"',
758
+ meaning: "\u81EA\u52D5\u56DE\u8EE2\u4E2D\u306F off\u3001\u505C\u6B62/\u624B\u52D5\u4E2D\u306F polite \u306B\u5207\u308A\u66FF\u3048\u308B\u3002"
759
+ },
760
+ {
761
+ target: "\u975E\u8868\u793A\u30B9\u30E9\u30A4\u30C9",
762
+ attr: "hidden",
763
+ meaning: "\u8868\u793A\u4E2D\u4EE5\u5916\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
942
764
  }
943
765
  ],
944
766
  checklist: [
945
- 'role="alert" \u306E\u9818\u57DF\u3092\u6700\u521D\u304B\u3089\u7A7A\u3067 DOM \u306B\u7F6E\u3044\u3066\u3044\u308B',
946
- "\u30E1\u30C3\u30BB\u30FC\u30B8\u306F\u9818\u57DF\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5DEE\u3057\u66FF\u3048\u308B\u5F62\u3067\u633F\u5165\u3057\u3066\u3044\u308B",
947
- "\u30A2\u30E9\u30FC\u30C8\u8868\u793A\u6642\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3063\u3066\u3044\u306A\u3044",
948
- '\u7DCA\u6025\u3067\u306A\u3044\u901A\u77E5\u306F role="status"\uFF08polite\uFF09\u3092\u4F7F\u3044\u5206\u3051\u3066\u3044\u308B',
949
- "\u540C\u3058\u6587\u8A00\u306E\u518D\u901A\u77E5\u306F\u5185\u5BB9\u3092\u5909\u5316\u3055\u305B\u3066\u78BA\u5B9F\u306B\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u3066\u3044\u308B",
950
- "\u9589\u3058\u308B\u30DC\u30BF\u30F3\u3092\u4ED8\u3051\u308B\u5834\u5408\u306F\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
767
+ "\u81EA\u52D5\u56DE\u8EE2\u3059\u308B\u306A\u3089\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u3092\u5FC5\u9808\u3067\u7528\u610F\u3057\u3066\u3044\u308B",
768
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\uFF0F\u30DB\u30D0\u30FC\u306E\u9593\u306F\u81EA\u52D5\u56DE\u8EE2\u304C\u4E00\u6642\u505C\u6B62\u3059\u308B",
769
+ "\u524D/\u6B21/\u518D\u751F\u505C\u6B62\u306F\u3059\u3079\u3066\u30CD\u30A4\u30C6\u30A3\u30D6\u306E <button>\uFF08div \u3092\u4F7F\u308F\u306A\u3044\uFF09",
770
+ "\u30A2\u30A4\u30B3\u30F3\u30DC\u30BF\u30F3\u306B aria-label\u3001\u505C\u6B62/\u958B\u59CB\u3067\u30E9\u30D9\u30EB\u3092\u5207\u308A\u66FF\u3048\u3066\u3044\u308B",
771
+ '\u5404\u30B9\u30E9\u30A4\u30C9\u306B role="group" + \u300C\u25CB\u679A\u4E2D\u25CB\u679A\u76EE\u300D\u306E\u30E9\u30D9\u30EB\u304C\u3042\u308B',
772
+ '\u81EA\u52D5\u56DE\u8EE2\u4E2D\u306F aria-live="off"\u3001\u505C\u6B62/\u624B\u52D5\u6642\u306F polite',
773
+ "\u8868\u793A\u4E2D\u4EE5\u5916\u306E\u30B9\u30E9\u30A4\u30C9\u306F hidden",
774
+ 'aria-roledescription="carousel"\uFF08\u4EFB\u610F\uFF09\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B'
951
775
  ],
952
776
  antipatterns: [
953
777
  {
954
- title: "\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044",
955
- why: 'role="alert" \u3082 aria-live \u3082\u7121\u3044\u306E\u3067\u3001\u5909\u5316\u304C\u901A\u77E5\u3055\u308C\u306A\u3044\u3002'
778
+ title: "\u505C\u6B62\u3067\u304D\u306A\u3044",
779
+ why: "\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u304C\u306A\u304F\u3001WCAG 2.2.2 \u9055\u53CD\u3002\u52D5\u304D\u306B\u5F31\u3044\u4EBA\u304C\u8AAD\u3081\u306A\u3044\u3002"
956
780
  },
957
781
  {
958
- title: "\u6C17\u3065\u3051\u306A\u3044",
959
- why: "\u753B\u9762\u306E\u5225\u306E\u5834\u6240\u3092\u8AAD\u3093\u3067\u3044\u308B\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u5229\u7528\u8005\u306B\u306F\u5B58\u5728\u81EA\u4F53\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
782
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9/\u30DB\u30D0\u30FC\u3067\u3082\u6B62\u307E\u3089\u306A\u3044",
783
+ why: "\u64CD\u4F5C\u4E2D\u3082\u52DD\u624B\u306B\u5207\u308A\u66FF\u308F\u308B\u3002"
960
784
  },
961
785
  {
962
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3046",
963
- why: "\u300C\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u305F\u3044\u304B\u3089\u300D\u3068\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u596A\u3046\u306E\u3082\u8AA4\u308A\u3002\u64CD\u4F5C\u4F4D\u7F6E\u3092\u898B\u5931\u308F\u305B\u308B\u3002"
786
+ title: "\u77E2\u5370\u304C\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u53EF",
787
+ why: "div + onclick \u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u304B\u3089\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
788
+ },
789
+ {
790
+ title: "\u4F4D\u7F6E\u304C\u4F1D\u308F\u3089\u306A\u3044",
791
+ why: '\u30B9\u30E9\u30A4\u30C9\u306B role="group" \u3082\u300C\u25CB\u679A\u4E2D\u25CB\u679A\u76EE\u300D\u30E9\u30D9\u30EB\u3082\u306A\u3044\u3002'
964
792
  }
965
793
  ],
966
794
  notes: [
967
- '\u7DCA\u6025\u3067\u306A\u3044\u901A\u77E5\uFF08\u4F8B:\u300C\u81EA\u52D5\u4FDD\u5B58\u3057\u307E\u3057\u305F\u300D\uFF09\u306F role="status"\uFF08\uFF1Daria-live="polite"\uFF09\u3092\u4F7F\u3044\u3001\u5272\u308A\u8FBC\u307E\u305A\u8AAD\u307F\u4E0A\u3052\u308B\u306E\u304C\u89AA\u5207\u3002',
968
- "\u540C\u3058\u6587\u8A00\u3092\u7D9A\u3051\u3066\u5165\u308C\u308B\u3068\u8AAD\u307F\u4E0A\u3052\u304C\u7E70\u308A\u8FD4\u3055\u308C\u306A\u3044\u3053\u3068\u304C\u3042\u308B\u3002\u56DE\u6570\u8868\u793A\u3092\u52A0\u3048\u308B\u304B\u3001\u4E00\u5EA6\u7A7A\u306B\u3057\u3066\u304B\u3089\u5165\u308C\u76F4\u3059\u3068\u78BA\u5B9F\u3002"
795
+ "aria-roledescription \u3092\u4ED8\u3051\u308B\u3068\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u9818\u57DF\u3092\u300C\u304A\u3059\u3059\u3081\u7279\u96C6, \u30AB\u30EB\u30FC\u30BB\u30EB\u300D\u3001\u5404\u30B9\u30E9\u30A4\u30C9\u3092\u300C3\u679A\u4E2D1\u679A\u76EE, \u30B9\u30E9\u30A4\u30C9\u300D\u306E\u3088\u3046\u306B\u6848\u5185\u3057\u307E\u3059\uFF08\u4EFB\u610F\u3067\u3059\u304C\u5206\u304B\u308A\u3084\u3059\u304F\u306A\u308A\u307E\u3059\uFF09\u3002",
796
+ "\u300C\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u300D\u306F\u3001\u30B9\u30E9\u30A4\u30C9\u3088\u308A\u524D\uFF08DOM \u4E0A\u3067\u5148\uFF09\u306B\u7F6E\u304F\u306E\u304C\u63A8\u5968\u3067\u3059\u3002\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u52D5\u304D\u306B\u6C17\u3065\u3044\u305F\u3068\u304D\u3001\u3059\u3050\u6B62\u3081\u3089\u308C\u308B\u3088\u3046\u306B\u3059\u308B\u305F\u3081\u3067\u3059\u3002"
969
797
  ]
970
798
  };
971
- var dialogModal = {
972
- slug: "dialog-modal",
799
+ var checkbox = {
800
+ slug: "checkbox",
973
801
  keyboard: [
974
802
  {
975
- keys: "Esc",
976
- action: "\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u9589\u3058\u308B\uFF08showModal() \u306A\u3089\u6A19\u6E96\u3067\u5BFE\u5FDC\uFF09",
977
- requirement: "required"
978
- },
979
- {
980
- keys: "Tab / Shift+Tab",
981
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3060\u3051\u3092\u5FAA\u74B0\u3059\u308B\uFF08\u5916\u306B\u6F0F\u308C\u306A\u3044\uFF09",
803
+ keys: "Tab",
804
+ action: "\u6B21\u306E\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
982
805
  requirement: "required"
983
806
  },
984
807
  {
985
- keys: "Enter / Space",
986
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u5B9F\u884C",
808
+ keys: "Space",
809
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u30AA\u30F3/\u30AA\u30D5",
987
810
  requirement: "required"
988
811
  }
989
812
  ],
990
813
  aria: [
991
814
  {
992
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
993
- attr: "<dialog> \u8981\u7D20",
994
- meaning: '\u6697\u9ED9\u306E role="dialog" \u3092\u6301\u3064\u3002showModal() \u3067\u30E2\u30FC\u30C0\u30EB\u3068\u3057\u3066\u958B\u304F\u3002'
815
+ target: "\u5165\u529B\u6B04",
816
+ attr: '<input type="checkbox">',
817
+ meaning: "\u30CD\u30A4\u30C6\u30A3\u30D6\u306E checkbox \u30ED\u30FC\u30EB\u30FB\u72B6\u614B\u30FB\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u304C\u3059\u3079\u3066\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
995
818
  },
996
819
  {
997
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
998
- attr: 'aria-labelledby="\u898B\u51FA\u3057\u306Eid" \u307E\u305F\u306F aria-label',
999
- meaning: "\u30C0\u30A4\u30A2\u30ED\u30B0\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u4E2D\u306E\u898B\u51FA\u3057\u3092\u6307\u3059\u306E\u304C\u5B9A\u756A\uFF09\u3002"
820
+ target: "\u30E9\u30D9\u30EB",
821
+ attr: "<label>\uFF08input \u3092\u5185\u5305 or for \u3067\u95A2\u9023\u4ED8\u3051\uFF09",
822
+ meaning: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u306E\u300C\u540D\u524D\u300D\u306B\u306A\u308B\u3002\u30E9\u30D9\u30EB\u306E\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u30C8\u30B0\u30EB\u3067\u304D\u308B\u3002"
1000
823
  },
1001
824
  {
1002
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1003
- attr: "aria-describedby\uFF08\u4EFB\u610F\uFF09",
1004
- meaning: "\u88DC\u8DB3\u306E\u8AAC\u660E\u6587\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002"
825
+ target: "\u89AA\uFF08\u3059\u3079\u3066\u9078\u629E\uFF09",
826
+ attr: "indeterminate = true\uFF08JS \u30D7\u30ED\u30D1\u30C6\u30A3\uFF09",
827
+ meaning: '\u4E00\u90E8\u3060\u3051\u9078\u629E\u306E\u4E2D\u9593\u72B6\u614B\u3002aria-checked="mixed" \u3068\u3057\u3066\u81EA\u52D5\u3067\u4F1D\u308F\u308B\u3002'
1005
828
  },
1006
829
  {
1007
- target: "\u80CC\u9762\u306E\u30B3\u30F3\u30C6\u30F3\u30C4",
1008
- attr: "\uFF08\u81EA\u52D5\uFF09inert \u76F8\u5F53",
1009
- meaning: "showModal() \u306A\u3089\u80CC\u9762\u304C\u81EA\u52D5\u3067\u64CD\u4F5C\u4E0D\u53EF\u30FB\u8AAD\u307F\u4E0A\u3052\u5BFE\u8C61\u5916\u306B\u306A\u308B\u3002\u624B\u52D5\u306A\u3089 inert \u3092\u4ED8\u3051\u308B\u3002"
830
+ target: "\u30B0\u30EB\u30FC\u30D7",
831
+ attr: "<fieldset> + <legend>",
832
+ meaning: "\u95A2\u9023\u3059\u308B\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u307E\u3068\u3081\u3001\u30B0\u30EB\u30FC\u30D7\u540D\u3092\u4E0E\u3048\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
1010
833
  }
1011
834
  ],
1012
835
  checklist: [
1013
- "\u30CD\u30A4\u30C6\u30A3\u30D6 <dialog> \u3092 showModal() \u3067\u958B\u3044\u3066\u3044\u308B",
1014
- "\u30C0\u30A4\u30A2\u30ED\u30B0\u306B aria-labelledby\uFF08\u307E\u305F\u306F aria-label\uFF09\u3067\u540D\u524D\u304C\u3042\u308B",
1015
- "\u958B\u304F\u3068\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3078\u79FB\u308B",
1016
- "Tab \u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3060\u3051\u3092\u5FAA\u74B0\u3059\u308B\uFF08\u80CC\u9762\u306B\u6F0F\u308C\u306A\u3044\uFF09",
1017
- "Esc \u3067\u9589\u3058\u308B",
1018
- "\u9589\u3058\u308B\u3068\u958B\u3044\u305F\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u623B\u308B",
1019
- "\u80CC\u9762\u304C inert\uFF08\u64CD\u4F5C\u30FB\u8AAD\u307F\u4E0A\u3052\u4E0D\u53EF\uFF09\u306B\u306A\u3063\u3066\u3044\u308B",
1020
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
836
+ '\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u306F <input type="checkbox"> \u3067\u3042\u308B',
837
+ "<label> \u3068\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B\uFF08\u5185\u5305 or for/id\uFF09",
838
+ "Space \u3067\u30C8\u30B0\u30EB\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
839
+ "\u300C\u3059\u3079\u3066\u9078\u629E\u300D\u306E\u4E00\u90E8\u9078\u629E\u306F indeterminate = true \u3067\u8868\u3059",
840
+ "\u89AA \u2194 \u5B50\u306E\u72B6\u614B\u304C change \u3067\u5E38\u306B\u540C\u671F\u3057\u3066\u3044\u308B",
841
+ "\u95A2\u9023\u30B0\u30EB\u30FC\u30D7\u306F <fieldset> + <legend> \u3067\u307E\u3068\u3081\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09"
1021
842
  ],
1022
843
  antipatterns: [
1023
844
  {
1024
- title: "Tab \u304C\u80CC\u9762\u306B\u6F0F\u308C\u308B",
1025
- why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u30C8\u30E9\u30C3\u30D7\u304C\u7121\u304F\u3001\u898B\u3048\u306A\u3044\u8981\u7D20\u306B\u79FB\u52D5\u3067\u304D\u3066\u3057\u307E\u3046\u3002"
1026
- },
1027
- {
1028
- title: "Esc \u3067\u9589\u3058\u306A\u3044",
1029
- why: "\u30AD\u30FC\u51E6\u7406\u3092\u81EA\u5206\u3067\u66F8\u3044\u3066\u3044\u306A\u3044\u3002"
845
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
846
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001Space \u3067\u306E\u30C8\u30B0\u30EB\u3082\u52B9\u304B\u306A\u3044\u3002"
1030
847
  },
1031
848
  {
1032
- title: "\u80CC\u9762\u304C inert \u3067\u306A\u3044",
1033
- why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u3067\u80CC\u9762\u307E\u3067\u8AAD\u3081\u3066\u3057\u307E\u3046\u3002"
849
+ title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
850
+ why: "\u300C\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u300D\u3060\u3068\u8A8D\u8B58\u3055\u308C\u305A\u3001\u30AA\u30F3/\u30AA\u30D5\u306E\u6982\u5FF5\u3082\u5B58\u5728\u3057\u306A\u3044\u3002"
1034
851
  },
1035
852
  {
1036
- title: "\u9589\u3058\u308B\u306E\u304C <span>",
1037
- why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u306F\u9589\u3058\u3089\u308C\u306A\u3044\u3002"
853
+ title: "\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
854
+ why: "\u30AA\u30F3/\u30AA\u30D5\uFF08\u3084\u4E2D\u9593\u72B6\u614B\uFF09\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u305A\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
1038
855
  },
1039
856
  {
1040
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u79FB\u52D5\uFF0F\u5FA9\u5E30\u304C\u7121\u3044",
1041
- why: "\u958B\u3044\u3066\u3082\u30C0\u30A4\u30A2\u30ED\u30B0\u306B\u5165\u3089\u305A\u3001\u9589\u3058\u3066\u3082\u5143\u3078\u623B\u3089\u306A\u3044\u3002"
857
+ title: "\u30E9\u30D9\u30EB\u672A\u95A2\u9023",
858
+ why: "\u6587\u5B57\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u3082\u5207\u308A\u66FF\u308F\u3089\u305A\u3001\u4F55\u306E\u30C1\u30A7\u30C3\u30AF\u304B\u3068\u3044\u3046\u540D\u524D\u3082\u7D50\u3073\u3064\u304B\u306A\u3044\u3002"
1042
859
  }
1043
860
  ],
1044
861
  notes: [
1045
- '<dialog aria-labelledby="title"> \u306E\u3088\u3046\u306B\u4E2D\u306E\u898B\u51FA\u3057\u306E id \u3092\u6307\u3057\u3066\u304A\u304F\u3068\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u300C\u8868\u793A\u8A2D\u5B9A, \u30C0\u30A4\u30A2\u30ED\u30B0\u300D\u3068\u8AAD\u307F\u4E0A\u3052\u3066\u304F\u308C\u308B\u3002'
862
+ 'Space \u3067\u306E\u5207\u308A\u66FF\u3048\u306F <input type="checkbox"> \u3092\u4F7F\u3046\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\u3002\u81EA\u5206\u3067\u30AD\u30FC\u51E6\u7406\u3092\u66F8\u304F\u5FC5\u8981\u306F\u3042\u308A\u307E\u305B\u3093\u3002',
863
+ "indeterminate \u306F HTML \u5C5E\u6027\u3067\u306F\u306A\u304F JavaScript \u306E\u30D7\u30ED\u30D1\u30C6\u30A3\u3067\u3059\uFF08el.indeterminate = true\uFF09\u3002\u9001\u4FE1\u5024\u306E\u6271\u3044\u306B\u6CE8\u610F\u3057\u307E\u3059\u3002"
1046
864
  ]
1047
865
  };
1048
- var alertdialog = {
1049
- slug: "alertdialog",
866
+ var combobox = {
867
+ slug: "combobox",
1050
868
  keyboard: [
1051
869
  {
1052
- keys: "Esc",
1053
- action: "\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u9589\u3058\u308B\uFF08\uFF1D\u30AD\u30E3\u30F3\u30BB\u30EB\u6271\u3044\u3002showModal() \u306A\u3089\u6A19\u6E96\u5BFE\u5FDC\uFF09",
870
+ keys: "\u6587\u5B57\u5165\u529B",
871
+ action: "\u5019\u88DC\u3092\u7D5E\u308A\u8FBC\u307F\u3001\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u958B\u304F",
1054
872
  requirement: "required"
1055
873
  },
1056
874
  {
1057
- keys: "Tab / Shift+Tab",
1058
- action: "\u30DC\u30BF\u30F3\u9593\u3092\u5FAA\u74B0\u79FB\u52D5\uFF08\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u306B\u9589\u3058\u8FBC\u3081\u3089\u308C\u308B\uFF09",
875
+ keys: "\u2193",
876
+ action: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u958B\u304F / \u6B21\u306E\u5019\u88DC\u3078\u30CF\u30A4\u30E9\u30A4\u30C8\u79FB\u52D5",
1059
877
  requirement: "required"
1060
878
  },
1061
879
  {
1062
- keys: "Enter / Space",
1063
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u5B9F\u884C",
880
+ keys: "\u2191",
881
+ action: "\u524D\u306E\u5019\u88DC\u3078\u30CF\u30A4\u30E9\u30A4\u30C8\u79FB\u52D5",
1064
882
  requirement: "required"
1065
883
  },
1066
884
  {
1067
- keys: "\uFF08\u958B\u3044\u305F\u76F4\u5F8C\uFF09",
1068
- action: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5B89\u5168\u5074\uFF08\u30AD\u30E3\u30F3\u30BB\u30EB\uFF09\u306E\u30DC\u30BF\u30F3\u306B\u7F6E\u304F",
885
+ keys: "Enter",
886
+ action: "\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306E\u5019\u88DC\u3092\u78BA\u5B9A\u3057\u3066\u9589\u3058\u308B",
887
+ requirement: "required"
888
+ },
889
+ {
890
+ keys: "Esc",
891
+ action: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u9589\u3058\u308B\uFF08\u958B\u3044\u3066\u3044\u306A\u3051\u308C\u3070\u5165\u529B\u3092\u30AF\u30EA\u30A2\uFF09",
1069
892
  requirement: "required"
893
+ },
894
+ {
895
+ keys: "Home / End",
896
+ action: "\u5165\u529B\u6B04\u5185\u306E\u30AB\u30FC\u30BD\u30EB\u79FB\u52D5\uFF08\u30C6\u30AD\u30B9\u30C8\u64CD\u4F5C\u306F\u305D\u306E\u307E\u307E\uFF09",
897
+ requirement: "optional"
1070
898
  }
1071
899
  ],
1072
900
  aria: [
1073
901
  {
1074
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1075
- attr: 'role="alertdialog"',
1076
- meaning: "\u300C\u91CD\u8981\u306A\u78BA\u8A8D\u30FB\u8B66\u544A\u306E\u30C0\u30A4\u30A2\u30ED\u30B0\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
902
+ target: "\u5165\u529B\u6B04",
903
+ attr: 'role="combobox"',
904
+ meaning: "\u30C6\u30AD\u30B9\u30C8\u5165\u529B\uFF0B\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u6301\u3064\u8907\u5408\u30A6\u30A3\u30B8\u30A7\u30C3\u30C8\u3060\u3068\u793A\u3059\u3002"
1077
905
  },
1078
906
  {
1079
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1080
- attr: 'aria-modal="true"',
1081
- meaning: "\u80CC\u9762\u304C\u64CD\u4F5C\u4E0D\u53EF\u306E\u30E2\u30FC\u30C0\u30EB\u3067\u3042\u308B\u3053\u3068\u3092\u660E\u793A\uFF08role \u3092\u4E0A\u66F8\u304D\u3057\u305F\u305F\u3081\u660E\u793A\u3059\u308B\uFF09\u3002"
907
+ target: "\u5165\u529B\u6B04",
908
+ attr: 'aria-expanded="true | false"',
909
+ meaning: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1082
910
  },
1083
911
  {
1084
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1085
- attr: 'aria-labelledby="\u30BF\u30A4\u30C8\u30EB\u306Eid"',
1086
- meaning: "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u540D\u524D\uFF08\u8CEA\u554F\u6587\uFF09\u3092\u6307\u3059\u3002"
912
+ target: "\u5165\u529B\u6B04",
913
+ attr: 'aria-controls="\u30EA\u30B9\u30C8\u306Eid"',
914
+ meaning: "\u3069\u306E\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\uFF08listbox\uFF09\u3092\u5236\u5FA1\u3059\u308B\u304B\u3092\u793A\u3059\u3002"
1087
915
  },
1088
916
  {
1089
- target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1090
- attr: 'aria-describedby="\u8AAC\u660E\u306Eid"',
1091
- meaning: "\u7D50\u679C\u306E\u91CD\u5927\u3055\u3092\u8AAC\u660E\u3059\u308B\u672C\u6587\u3092\u95A2\u9023\u4ED8\u3051\u3001\u958B\u3044\u305F\u77AC\u9593\u306B\u8AAD\u307F\u4E0A\u3052\u3055\u305B\u308B\u3002"
917
+ target: "\u5165\u529B\u6B04",
918
+ attr: 'aria-activedescendant="\u5019\u88DC\u306Eid"',
919
+ meaning: "\u3044\u307E\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306E option \u3092\u6307\u3059\u3002\u79FB\u52D5\u306E\u305F\u3073\u306B\u66F4\u65B0\u3001\u9589\u3058\u305F\u3089\u5916\u3059\u3002"
1092
920
  },
1093
921
  {
1094
- target: "\u30AD\u30E3\u30F3\u30BB\u30EB\u30DC\u30BF\u30F3",
1095
- attr: "autofocus",
1096
- meaning: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5B89\u5168\u5074\u306B\u7F6E\u304F\u3002"
922
+ target: "\u5165\u529B\u6B04",
923
+ attr: 'aria-autocomplete="list"',
924
+ meaning: "\u5165\u529B\u306B\u5FDC\u3058\u3066\u30EA\u30B9\u30C8\u3067\u88DC\u5B8C\u3055\u308C\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
925
+ },
926
+ {
927
+ target: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7",
928
+ attr: 'role="listbox" + \u540D\u524D',
929
+ meaning: "\u5019\u88DC\u306E\u96C6\u307E\u308A\u3002aria-labelledby \u7B49\u3067\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
930
+ },
931
+ {
932
+ target: "\u5404\u5019\u88DC",
933
+ attr: 'role="option" + \u4E00\u610F\u306E id + aria-selected',
934
+ meaning: '1\u3064\u306E\u5019\u88DC\u3002\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306F aria-selected="true"\u3002'
935
+ },
936
+ {
937
+ target: "\u30E9\u30A4\u30D6\u9818\u57DF",
938
+ attr: 'aria-live="polite"',
939
+ meaning: "\u300C\u25CB\u4EF6\u306E\u5019\u88DC\u300D\u306A\u3069\u4EF6\u6570\u306E\u5909\u5316\u3092\u8AAD\u307F\u4E0A\u3052\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
1097
940
  }
1098
941
  ],
1099
942
  checklist: [
1100
- "\u30CD\u30A4\u30C6\u30A3\u30D6 <dialog> + showModal() \u3092\u4F7F\u3063\u3066\u3044\u308B",
1101
- 'role="alertdialog" \u3068 aria-modal="true" \u3092\u4ED8\u3051\u3066\u3044\u308B',
1102
- "aria-labelledby \u3067\u8CEA\u554F\u6587\u3001aria-describedby \u3067\u7D50\u679C\u306E\u8AAC\u660E\u3092\u95A2\u9023\u4ED8\u3051\u3066\u3044\u308B",
1103
- "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5B89\u5168\u5074\uFF08\u30AD\u30E3\u30F3\u30BB\u30EB\uFF09\u306B\u7F6E\u3044\u3066\u3044\u308B",
1104
- "Tab \u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3092\u5FAA\u74B0\u3057\u3001\u80CC\u9762\u306B\u6F0F\u308C\u306A\u3044",
1105
- "Esc \u3067\u9589\u3058\u3089\u308C\u308B",
1106
- "\u9589\u3058\u308B\u3068\u958B\u3044\u305F\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u623B\u308B",
1107
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
943
+ '\u5165\u529B\u6B04\u306B role="combobox" + aria-expanded + aria-controls \u304C\u3042\u308B',
944
+ '\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u306F role="listbox" > role="option"\uFF08option \u306B\u4E00\u610F\u306E id\uFF09',
945
+ "\u30CF\u30A4\u30E9\u30A4\u30C8\u306F aria-activedescendant + aria-selected \u3067\u8868\u3057\u3001\u79FB\u52D5\u306E\u305F\u3073\u306B\u66F4\u65B0",
946
+ "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
947
+ "\u2193 \u3067\u5019\u88DC\u3078\u3001\u2191\u2193 \u3067\u79FB\u52D5\u3001Enter \u78BA\u5B9A\u3001Esc \u3067\u9589\u3058\u308B",
948
+ "\u5165\u529B\u3067\u5019\u88DC\u304C\u7D5E\u308A\u8FBC\u307E\u308C\u3001\u4EF6\u6570\u3092 aria-live \u3067\u8AAD\u307F\u4E0A\u3052\u308B\uFF08\u63A8\u5968\uFF09",
949
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5165\u529B\u6B04\u306B\u4FDD\u6301\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
1108
950
  ],
1109
951
  antipatterns: [
1110
952
  {
1111
- title: "\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044",
1112
- why: 'role="alertdialog" \u3082 aria-describedby \u3082\u7121\u304F\u3001\u4F55\u306E\u78BA\u8A8D\u304B\u4F1D\u308F\u3089\u306A\u3044\u3002'
1113
- },
1114
- {
1115
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u79FB\u3089\u306A\u3044",
1116
- why: "\u958B\u3044\u3066\u3082\u30DC\u30C3\u30AF\u30B9\u306B\u5165\u3089\u305A\u3001\u80CC\u9762\u306B Tab \u3067\u629C\u3051\u3066\u3057\u307E\u3046\u3002"
953
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u5019\u88DC\u3092\u9078\u3079\u306A\u3044",
954
+ why: "\u5019\u88DC\u304C div \u3067\u3001\u77E2\u5370\u30AD\u30FC\u3084\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u52B9\u304B\u306A\u3044\u3002"
1117
955
  },
1118
- {
1119
- title: "Esc \u3067\u9589\u3058\u306A\u3044",
1120
- why: "\u5B89\u5168\u306A\u96E2\u8131\u624B\u6BB5\u304C\u7121\u3044\u3002"
956
+ {
957
+ title: "\u30ED\u30FC\u30EB\u30FB\u72B6\u614B\u304C\u7121\u3044",
958
+ why: 'role="combobox" / aria-expanded / aria-controls \u304C\u306A\u304F\u3001\u958B\u9589\u3082\u95A2\u4FC2\u3082\u4F1D\u308F\u3089\u306A\u3044\u3002'
1121
959
  },
1122
960
  {
1123
- title: "\u9078\u629E\u80A2\u304C <span>",
1124
- why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u300C\u306F\u3044/\u3044\u3044\u3048\u300D\u3092\u9078\u3079\u306A\u3044\u3002"
961
+ title: "\u30CF\u30A4\u30E9\u30A4\u30C8\u304C\u4F1D\u308F\u3089\u306A\u3044",
962
+ why: "aria-activedescendant / aria-selected \u304C\u306A\u304F\u3001\u3069\u308C\u3092\u6307\u3057\u3066\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
1125
963
  },
1126
964
  {
1127
- title: "\u5371\u967A\u306A\u64CD\u4F5C\u306E\u9632\u5FA1\u304C\u7121\u3044",
1128
- why: "\u521D\u671F\u30D5\u30A9\u30FC\u30AB\u30B9\u3084\u5B89\u5168\u5074\u306E\u914D\u616E\u304C\u306A\u3044\u3002"
965
+ title: "\u4EF6\u6570\u304C\u4F1D\u308F\u3089\u306A\u3044",
966
+ why: "aria-live \u304C\u306A\u304F\u3001\u300C\u25CB\u4EF6\u306E\u5019\u88DC\u300D\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
1129
967
  }
1130
968
  ],
1131
969
  notes: [
1132
- 'role="alertdialog" \u3092\u4ED8\u3051\u308B\u3068 <dialog> \u65E2\u5B9A\u306E role="dialog" \u3092\u4E0A\u66F8\u304D\u3059\u308B\u305F\u3081\u3001aria-modal="true" \u3082\u5408\u308F\u305B\u3066\u660E\u793A\u3057\u3066\u304A\u304F\u306E\u304C\u5B89\u5168\u3002'
970
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5165\u529B\u6B04\u306B\u7F6E\u3044\u305F\u307E\u307E\u52D5\u304B\u3057\u307E\u305B\u3093\u3002aria-activedescendant \u3067\u300C\u3044\u307E\u3069\u306E\u5019\u88DC\u3092\u30CF\u30A4\u30E9\u30A4\u30C8\u3057\u3066\u3044\u308B\u304B\u300D\u3060\u3051\u3092\u4F1D\u3048\u307E\u3059\u3002\u3053\u3046\u3059\u308B\u3068\u3001\u5165\u529B\u3092\u7D9A\u3051\u306A\u304C\u3089\u5019\u88DC\u3092\u9078\u3079\u307E\u3059\u3002"
1133
971
  ]
1134
972
  };
1135
- var breadcrumb = {
1136
- slug: "breadcrumb",
973
+ var dialogModal = {
974
+ slug: "dialog-modal",
1137
975
  keyboard: [
976
+ {
977
+ keys: "Esc",
978
+ action: "\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u9589\u3058\u308B\uFF08showModal() \u306A\u3089\u6A19\u6E96\u3067\u5BFE\u5FDC\uFF09",
979
+ requirement: "required"
980
+ },
1138
981
  {
1139
982
  keys: "Tab / Shift+Tab",
1140
- action: "\u524D\u5F8C\u306E\u30EA\u30F3\u30AF\u3078\u79FB\u52D5\uFF08\u666E\u901A\u306E\u30EA\u30F3\u30AF\u3068\u540C\u3058\uFF09",
983
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3060\u3051\u3092\u5FAA\u74B0\u3059\u308B\uFF08\u5916\u306B\u6F0F\u308C\u306A\u3044\uFF09",
1141
984
  requirement: "required"
1142
985
  },
1143
986
  {
1144
- keys: "Enter",
1145
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30EA\u30F3\u30AF\u5148\u3078\u79FB\u52D5",
987
+ keys: "Enter / Space",
988
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u5B9F\u884C",
1146
989
  requirement: "required"
1147
990
  }
1148
991
  ],
1149
992
  aria: [
1150
993
  {
1151
- target: "\u5916\u5074\u306E\u30B3\u30F3\u30C6\u30CA",
1152
- attr: '<nav aria-label="\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8">',
1153
- meaning: "\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306E\u30E9\u30F3\u30C9\u30DE\u30FC\u30AF\u306B\u3057\u3001\u540D\u524D\u3067\u533A\u5225\u3059\u308B\u3002"
994
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
995
+ attr: "<dialog> \u8981\u7D20",
996
+ meaning: '\u6697\u9ED9\u306E role="dialog" \u3092\u6301\u3064\u3002showModal() \u3067\u30E2\u30FC\u30C0\u30EB\u3068\u3057\u3066\u958B\u304F\u3002'
1154
997
  },
1155
998
  {
1156
- target: "\u30EA\u30F3\u30AF\u306E\u4E26\u3073",
1157
- attr: "<ol> > <li>",
1158
- meaning: "\u9806\u5E8F\u306E\u3042\u308B\u30EA\u30B9\u30C8\u306B\u3057\u3066\u3001\u968E\u5C64\u306E\u6570\u3068\u9806\u756A\u3092\u4F1D\u3048\u308B\u3002"
999
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1000
+ attr: 'aria-labelledby="\u898B\u51FA\u3057\u306Eid" \u307E\u305F\u306F aria-label',
1001
+ meaning: "\u30C0\u30A4\u30A2\u30ED\u30B0\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u4E2D\u306E\u898B\u51FA\u3057\u3092\u6307\u3059\u306E\u304C\u5B9A\u756A\uFF09\u3002"
1159
1002
  },
1160
1003
  {
1161
- target: "\u73FE\u5728\u5730\u306E\u9805\u76EE",
1162
- attr: 'aria-current="page"',
1163
- meaning: "\u300C\u73FE\u5728\u306E\u30DA\u30FC\u30B8\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002\u30EA\u30F3\u30AF\u306B\u306F\u3057\u306A\u3044\u3002"
1004
+ target: "\u30C0\u30A4\u30A2\u30ED\u30B0\u672C\u4F53",
1005
+ attr: "aria-describedby\uFF08\u4EFB\u610F\uFF09",
1006
+ meaning: "\u88DC\u8DB3\u306E\u8AAC\u660E\u6587\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002"
1164
1007
  },
1165
1008
  {
1166
- target: "\u533A\u5207\u308A\u6587\u5B57",
1167
- attr: "\uFF08CSS \u306E ::before\uFF09",
1168
- meaning: "\u300C/\u300D\u300C>\u300D\u306F\u88C5\u98FE\u3002\u30C6\u30AD\u30B9\u30C8\u306B\u305B\u305A\u64EC\u4F3C\u8981\u7D20\u3067\u63CF\u304D\u3001\u8AAD\u307F\u4E0A\u3052\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1009
+ target: "\u80CC\u9762\u306E\u30B3\u30F3\u30C6\u30F3\u30C4",
1010
+ attr: "\uFF08\u81EA\u52D5\uFF09inert \u76F8\u5F53",
1011
+ meaning: "showModal() \u306A\u3089\u80CC\u9762\u304C\u81EA\u52D5\u3067\u64CD\u4F5C\u4E0D\u53EF\u30FB\u8AAD\u307F\u4E0A\u3052\u5BFE\u8C61\u5916\u306B\u306A\u308B\u3002\u624B\u52D5\u306A\u3089 inert \u3092\u4ED8\u3051\u308B\u3002"
1169
1012
  }
1170
1013
  ],
1171
1014
  checklist: [
1172
- '\u5916\u5074\u3092 <nav aria-label="\u2026"> \u3067\u56F2\u3093\u3067\u3044\u308B',
1173
- "\u4E2D\u8EAB\u306F <ol> > <li> \u306E\u9806\u5E8F\u4ED8\u304D\u30EA\u30B9\u30C8",
1174
- "\u5404\u968E\u5C64\u306F <a href>\uFF08\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u79FB\u52D5\u3067\u304D\u308B\uFF09",
1175
- '\u73FE\u5728\u5730\u306F aria-current="page" \u3092\u4ED8\u3051\u3001\u30EA\u30F3\u30AF\u306B\u3057\u3066\u3044\u306A\u3044',
1176
- "\u533A\u5207\u308A\u6587\u5B57\u306F CSS \u306E\u64EC\u4F3C\u8981\u7D20\u3067\u63CF\u304D\u3001\u30C6\u30AD\u30B9\u30C8\u306B\u3057\u3066\u3044\u306A\u3044",
1015
+ "\u30CD\u30A4\u30C6\u30A3\u30D6 <dialog> \u3092 showModal() \u3067\u958B\u3044\u3066\u3044\u308B",
1016
+ "\u30C0\u30A4\u30A2\u30ED\u30B0\u306B aria-labelledby\uFF08\u307E\u305F\u306F aria-label\uFF09\u3067\u540D\u524D\u304C\u3042\u308B",
1017
+ "\u958B\u304F\u3068\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3078\u79FB\u308B",
1018
+ "Tab \u304C\u30C0\u30A4\u30A2\u30ED\u30B0\u5185\u3060\u3051\u3092\u5FAA\u74B0\u3059\u308B\uFF08\u80CC\u9762\u306B\u6F0F\u308C\u306A\u3044\uFF09",
1019
+ "Esc \u3067\u9589\u3058\u308B",
1020
+ "\u9589\u3058\u308B\u3068\u958B\u3044\u305F\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u623B\u308B",
1021
+ "\u80CC\u9762\u304C inert\uFF08\u64CD\u4F5C\u30FB\u8AAD\u307F\u4E0A\u3052\u4E0D\u53EF\uFF09\u306B\u306A\u3063\u3066\u3044\u308B",
1177
1022
  "\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
1178
1023
  ],
1179
1024
  antipatterns: [
1180
1025
  {
1181
- title: "\u30E9\u30F3\u30C9\u30DE\u30FC\u30AF\u304C\u7121\u3044",
1182
- why: "<nav> \u3067\u306A\u3044\u306E\u3067\u3001\u30D1\u30F3\u304F\u305A\u3078\u4E00\u767A\u3067\u79FB\u52D5\u3067\u304D\u306A\u3044\u3002"
1026
+ title: "Tab \u304C\u80CC\u9762\u306B\u6F0F\u308C\u308B",
1027
+ why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u30C8\u30E9\u30C3\u30D7\u304C\u7121\u304F\u3001\u898B\u3048\u306A\u3044\u8981\u7D20\u306B\u79FB\u52D5\u3067\u304D\u3066\u3057\u307E\u3046\u3002"
1183
1028
  },
1184
1029
  {
1185
- title: "\u30EA\u30B9\u30C8\u69CB\u9020\u304C\u7121\u3044",
1186
- why: "<ol>/<li> \u3067\u306A\u3044\u306E\u3067\u300C\u4F55\u9805\u76EE\u3042\u308B\u304B\u300D\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
1030
+ title: "Esc \u3067\u9589\u3058\u306A\u3044",
1031
+ why: "\u30AD\u30FC\u51E6\u7406\u3092\u81EA\u5206\u3067\u66F8\u3044\u3066\u3044\u306A\u3044\u3002"
1187
1032
  },
1188
1033
  {
1189
- title: "\u73FE\u5728\u5730\u304C\u4F1D\u308F\u3089\u306A\u3044",
1190
- why: 'aria-current="page" \u304C\u7121\u304F\u3001\u3044\u307E\u3069\u3053\u306B\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002'
1034
+ title: "\u80CC\u9762\u304C inert \u3067\u306A\u3044",
1035
+ why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u3067\u80CC\u9762\u307E\u3067\u8AAD\u3081\u3066\u3057\u307E\u3046\u3002"
1191
1036
  },
1192
1037
  {
1193
- title: "\u533A\u5207\u308A\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B",
1194
- why: "\u30C6\u30AD\u30B9\u30C8\u306E\u300C>\u300D\u304C\u4E00\u3064\u305A\u3064\u8AAD\u307E\u308C\u3001\u8033\u969C\u308A\u306B\u306A\u308B\u3002"
1038
+ title: "\u9589\u3058\u308B\u306E\u304C <span>",
1039
+ why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u306F\u9589\u3058\u3089\u308C\u306A\u3044\u3002"
1040
+ },
1041
+ {
1042
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u79FB\u52D5\uFF0F\u5FA9\u5E30\u304C\u7121\u3044",
1043
+ why: "\u958B\u3044\u3066\u3082\u30C0\u30A4\u30A2\u30ED\u30B0\u306B\u5165\u3089\u305A\u3001\u9589\u3058\u3066\u3082\u5143\u3078\u623B\u3089\u306A\u3044\u3002"
1195
1044
  }
1196
1045
  ],
1197
1046
  notes: [
1198
- "\u30D1\u30F3\u304F\u305A\u306F\u305F\u3060\u306E\u30EA\u30F3\u30AF\u306E\u4E26\u3073\u3067\u3059\u3002<a href> \u3092\u4F7F\u3048\u3070\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306F\u81EA\u52D5\u3067\u5F97\u3089\u308C\u307E\u3059\u3002"
1047
+ '<dialog aria-labelledby="title"> \u306E\u3088\u3046\u306B\u4E2D\u306E\u898B\u51FA\u3057\u306E id \u3092\u6307\u3057\u3066\u304A\u304F\u3068\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u300C\u8868\u793A\u8A2D\u5B9A, \u30C0\u30A4\u30A2\u30ED\u30B0\u300D\u3068\u8AAD\u307F\u4E0A\u3052\u3066\u304F\u308C\u308B\u3002'
1199
1048
  ]
1200
1049
  };
1201
- var menuMenubar = {
1202
- slug: "menu-menubar",
1050
+ var disclosure = {
1051
+ slug: "disclosure",
1203
1052
  keyboard: [
1204
1053
  {
1205
- keys: "Tab",
1206
- action: "\u30E1\u30CB\u30E5\u30FC\u30D0\u30FC\u306B\u5165\u308B\uFF0F\u51FA\u308B\uFF08\u30D0\u30FC\u5168\u4F53\u30671\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
1207
- requirement: "required"
1208
- },
1209
- {
1210
- keys: "\u2190 / \u2192\uFF08\u30D0\u30FC\u4E0A\uFF09",
1211
- action: "\u524D / \u6B21\u306E\u30E1\u30CB\u30E5\u30FC\u3078\u79FB\u52D5",
1212
- requirement: "required"
1213
- },
1214
- {
1215
- keys: "\u2193 / Enter / Space\uFF08\u30D0\u30FC\u4E0A\uFF09",
1216
- action: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078",
1217
- requirement: "required"
1218
- },
1219
- {
1220
- keys: "\u2191 / \u2193\uFF08\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1221
- action: "\u524D / \u6B21\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1222
- requirement: "required"
1223
- },
1224
- {
1225
- keys: "\u2190 / \u2192\uFF08\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1226
- action: "\u73FE\u5728\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3001\u96A3\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F",
1227
- requirement: "recommended"
1228
- },
1229
- {
1230
- keys: "Home / End",
1231
- action: "\u6700\u521D / \u6700\u5F8C\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1232
- requirement: "optional"
1233
- },
1234
- {
1235
- keys: "Enter / Space\uFF08\u9805\u76EE\u4E0A\uFF09",
1236
- action: "\u30B3\u30DE\u30F3\u30C9\u3092\u5B9F\u884C\u3057\u3066\u9589\u3058\u308B",
1054
+ keys: "Enter / Space",
1055
+ action: "\u9818\u57DF\u3092\u958B\u304F / \u9589\u3058\u308B",
1237
1056
  requirement: "required"
1238
1057
  },
1239
1058
  {
1240
- keys: "Esc",
1241
- action: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3001\u89AA\u306E\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3078\u623B\u308B",
1059
+ keys: "Tab",
1060
+ action: "\u6B21 / \u524D\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\u3078\u79FB\u52D5",
1242
1061
  requirement: "required"
1243
1062
  }
1244
1063
  ],
1245
1064
  aria: [
1246
1065
  {
1247
- target: "\u30D0\u30FC\u306E\u7BB1",
1248
- attr: 'role="menubar" + aria-label',
1249
- meaning: "\u6C34\u5E73\u306E\u30E1\u30CB\u30E5\u30FC\u30D0\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\u3002"
1250
- },
1251
- {
1252
- target: "\u30D0\u30FC\u306E\u5404\u9805\u76EE",
1253
- attr: 'role="menuitem" + aria-haspopup="menu"',
1254
- meaning: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1255
- },
1256
- {
1257
- target: "\u30D0\u30FC\u306E\u5404\u9805\u76EE",
1258
- attr: 'aria-expanded + tabindex="0 | -1"',
1259
- meaning: "\u958B\u9589\u72B6\u614B\u3068 roving tabindex\uFF081\u3064\u3060\u3051 0\uFF09\u3002"
1066
+ target: "\u30C8\u30EA\u30AC\u30FC",
1067
+ attr: '<button type="button">',
1068
+ meaning: "\u62BC\u305B\u308B\u8981\u7D20\u306B\u3059\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u30FBEnter/Space\u30FB\u300C\u30DC\u30BF\u30F3\u300D\u30ED\u30FC\u30EB\u304C\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
1260
1069
  },
1261
1070
  {
1262
- target: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1263
- attr: 'role="menu" + aria-label',
1264
- meaning: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\u3002"
1071
+ target: "\u30C8\u30EA\u30AC\u30FC",
1072
+ attr: 'aria-expanded="true | false"',
1073
+ meaning: "\u9818\u57DF\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u72B6\u614B\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1265
1074
  },
1266
1075
  {
1267
- target: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u306E\u9805\u76EE",
1268
- attr: 'role="menuitem" + tabindex="-1"',
1269
- meaning: "\u30B3\u30DE\u30F3\u30C9\u9805\u76EE\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u306F JS \u3067\u7BA1\u7406\uFF08roving\uFF09\u3002"
1076
+ target: "\u30C8\u30EA\u30AC\u30FC",
1077
+ attr: 'aria-controls="\u9818\u57DF\u306Eid"',
1078
+ meaning: "\u3069\u306E\u9818\u57DF\u3092\u5236\u5FA1\u3059\u308B\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
1270
1079
  },
1271
1080
  {
1272
- target: "\u9589\u3058\u305F\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1081
+ target: "\u9589\u3058\u3066\u3044\u308B\u9818\u57DF",
1273
1082
  attr: "hidden",
1274
- meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1083
+ meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F DOM \u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1275
1084
  }
1276
1085
  ],
1277
1086
  checklist: [
1278
- "\u7528\u9014\u304C\u30A2\u30D7\u30EA\u306E\u30B3\u30DE\u30F3\u30C9\u3067\u3042\u308B\u3053\u3068\u3092\u78BA\u8A8D\u3057\u305F\uFF08\u30B5\u30A4\u30C8\u30CA\u30D3\u306B\u306F\u4F7F\u308F\u306A\u3044\uFF09",
1279
- '\u30D0\u30FC\u306F role="menubar" + aria-label\u3001\u9805\u76EE\u306F role="menuitem"',
1280
- '\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u6301\u3064\u9805\u76EE\u306B aria-haspopup="menu" + aria-expanded',
1281
- "\u30D0\u30FC\u306F roving tabindex \u30671\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3001\u2190 \u2192 \u3067\u79FB\u52D5",
1282
- '\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u306F role="menu"\u3001\u9805\u76EE\u306F tabindex="-1"',
1283
- "\u2193/Enter \u3067\u958B\u304D\u5148\u982D\u3078\u3001\u2191\u2193 \u3067\u79FB\u52D5\u3001Home/End \u3067\u7AEF\u3078",
1284
- "Esc \u3067\u9589\u3058\u3066\u89AA\u9805\u76EE\u3078\u623B\u3059\u3001\u2190 \u2192 \u3067\u96A3\u306E\u30E1\u30CB\u30E5\u30FC\u3078\u79FB\u308C\u308B",
1285
- "hover \u4F9D\u5B58\u306B\u305B\u305A\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1087
+ '\u30C8\u30EA\u30AC\u30FC\u306F <button type="button"> \u3067\u3042\u308B',
1088
+ "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1089
+ "aria-controls \u3067\u9818\u57DF\u306E id \u3092\u6307\u3057\u3066\u3044\u308B",
1090
+ "\u9589\u3058\u3066\u3044\u308B\u9818\u57DF\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
1091
+ "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u958B\u9589\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
1092
+ "\uFF08\u4EFB\u610F\uFF09\u30DC\u30BF\u30F3\u306E\u30E9\u30D9\u30EB\u304C\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5207\u308A\u66FF\u308F\u308B"
1286
1093
  ],
1287
1094
  antipatterns: [
1288
1095
  {
1289
- title: '\u30B5\u30A4\u30C8\u30CA\u30D3\u306B role="menubar" \u3092\u4F7F\u3046',
1290
- why: "\u30DA\u30FC\u30B8\u79FB\u52D5\u306E\u30EA\u30F3\u30AF\u96C6\u306B menubar/menu \u3092\u4ED8\u3051\u308B\u3068\u3001\u652F\u63F4\u6280\u8853\u306E\u6848\u5185\uFF08\u77E2\u5370\u3067\u64CD\u4F5C\u3059\u308B\u30B3\u30DE\u30F3\u30C9\uFF09\u3068\u5B9F\u4F53\uFF08\u30EA\u30F3\u30AF\uFF09\u304C\u98DF\u3044\u9055\u3044\u5229\u7528\u8005\u304C\u6DF7\u4E71\u3059\u308B\u3002"
1096
+ title: "div + onclick \u3067\u30C8\u30EA\u30AC\u30FC\u3092\u4F5C\u308B",
1097
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u4E00\u5207\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
1291
1098
  },
1292
1099
  {
1293
- title: "hover \u4F9D\u5B58\u306E\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1294
- why: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u304C\u30DE\u30A6\u30B9\u3067\u3057\u304B\u958B\u304B\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u30BF\u30C3\u30C1\u74B0\u5883\u3067\u7834\u7DBB\u3059\u308B\u3002"
1100
+ title: "\u5F79\u5272\u3092\u4F1D\u3048\u306A\u3044",
1101
+ why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u300D\u306B\u805E\u3053\u3048\u3001\u62BC\u305B\u308B\u3068\u5206\u304B\u3089\u306A\u3044\u3002"
1295
1102
  },
1296
1103
  {
1297
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306E\u5B9F\u88C5\u306A\u3057",
1298
- why: "\u2190\u2192/\u2191\u2193/Esc \u3082 roving tabindex \u3082\u306A\u304F\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
1104
+ title: "\u72B6\u614B\u3092\u4F1D\u3048\u306A\u3044",
1105
+ why: "aria-expanded \u304C\u306A\u304F\u3001\u958B/\u9589\u304C\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
1106
+ },
1107
+ {
1108
+ title: "display:none \u306E\u30A4\u30F3\u30E9\u30A4\u30F3\u30B9\u30BF\u30A4\u30EB\u983C\u307F\u306B\u3059\u308B",
1109
+ why: "hidden \u5C5E\u6027\u3084\u72B6\u614B\u7BA1\u7406\u304C\u7121\u304F\u3001\u652F\u63F4\u6280\u8853\u306B\u96A0\u308C\u3066\u3044\u308B\u304B\u3069\u3046\u304B\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
1299
1110
  }
1300
1111
  ],
1301
1112
  notes: [
1302
- '\u30B5\u30A4\u30C8\u5185\u30EA\u30F3\u30AF\u306E\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306B role="menubar" \u3092\u4F7F\u3046\u306E\u304C\u6700\u3082\u3088\u304F\u3042\u308B\u8AA4\u308A\u3002\u30DA\u30FC\u30B8\u3078\u79FB\u52D5\u3059\u308B\u300C\u30EA\u30F3\u30AF\u96C6\u300D\u306F <nav> + <ul> + <a> \u3067\u4F5C\u308B\u3002'
1113
+ "Enter / Space \u3067\u306E\u958B\u9589\u306F\u3001\u30C8\u30EA\u30AC\u30FC\u3092 <button> \u306B\u3059\u308B\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\uFF08\u81EA\u524D\u306E\u30AD\u30FC\u51E6\u7406\u306F\u4E0D\u8981\uFF09\u3002",
1114
+ "\u30DC\u30BF\u30F3\u306E\u30E9\u30D9\u30EB\u3092\u300C\u3082\u3063\u3068\u898B\u308B\u300D\u21C4\u300C\u9589\u3058\u308B\u300D\u306E\u3088\u3046\u306B\u5207\u308A\u66FF\u3048\u308B\u3068\u3001\u6674\u773C\u306E\u30E6\u30FC\u30B6\u30FC\u306B\u3082\u6B21\u306E\u52D5\u4F5C\u304C\u4F1D\u308F\u3063\u3066\u89AA\u5207\u3067\u3059\u3002"
1303
1115
  ]
1304
1116
  };
1305
- var menuButton = {
1306
- slug: "menu-button",
1117
+ var feed = {
1118
+ slug: "feed",
1307
1119
  keyboard: [
1308
1120
  {
1309
- keys: "Enter / Space / \u2193\uFF08\u30DC\u30BF\u30F3\u4E0A\uFF09",
1310
- action: "\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9",
1121
+ keys: "PageDown",
1122
+ action: "\u6B21\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1311
1123
  requirement: "required"
1312
1124
  },
1313
1125
  {
1314
- keys: "\u2191\uFF08\u30DC\u30BF\u30F3\u4E0A\uFF09",
1315
- action: "\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u5F8C\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9",
1316
- requirement: "optional"
1126
+ keys: "PageUp",
1127
+ action: "\u524D\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1128
+ requirement: "required"
1317
1129
  },
1318
1130
  {
1319
- keys: "\u2191 / \u2193\uFF08\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1320
- action: "\u524D / \u6B21\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1131
+ keys: "Tab",
1132
+ action: "\u8A18\u4E8B\u5185\u306E\u30EA\u30F3\u30AF\u306A\u3069\u3001\u6B21\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\u3078\u79FB\u52D5",
1321
1133
  requirement: "required"
1322
1134
  },
1323
1135
  {
1324
1136
  keys: "Home / End",
1325
- action: "\u6700\u521D / \u6700\u5F8C\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1137
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1326
1138
  requirement: "recommended"
1327
- },
1328
- {
1329
- keys: "Enter / Space\uFF08\u9805\u76EE\u4E0A\uFF09",
1330
- action: "\u9805\u76EE\u3092\u5B9F\u884C\u3057\u3001\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3066\u30DC\u30BF\u30F3\u3078\u623B\u308B",
1331
- requirement: "required"
1332
- },
1333
- {
1334
- keys: "Esc",
1335
- action: "\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3066\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059",
1336
- requirement: "required"
1337
1139
  }
1338
1140
  ],
1339
1141
  aria: [
1340
1142
  {
1341
- target: "\u30C8\u30EA\u30AC\u30FC",
1342
- attr: '<button> + aria-haspopup="menu"',
1343
- meaning: "\u62BC\u3059\u3068\u30E1\u30CB\u30E5\u30FC\u304C\u958B\u304F\u30DC\u30BF\u30F3\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1143
+ target: "\u30B3\u30F3\u30C6\u30CA",
1144
+ attr: 'role="feed"',
1145
+ meaning: "\u52D5\u7684\u306B\u5897\u3048\u308B\u30B9\u30AF\u30ED\u30FC\u30EB\u53EF\u80FD\u306A\u8A18\u4E8B\u4E00\u89A7\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
1344
1146
  },
1345
1147
  {
1346
- target: "\u30C8\u30EA\u30AC\u30FC",
1347
- attr: 'aria-expanded="true | false"',
1348
- meaning: "\u30E1\u30CB\u30E5\u30FC\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1148
+ target: "\u30B3\u30F3\u30C6\u30CA",
1149
+ attr: 'aria-busy="true | false"',
1150
+ meaning: "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u4E2D\u306F true\u3002\u8AAD\u307F\u8FBC\u307F\u5B8C\u4E86\u5F8C\u306F\u5FC5\u305A false \u306B\u623B\u3059\u3002"
1349
1151
  },
1350
1152
  {
1351
- target: "\u30C8\u30EA\u30AC\u30FC",
1352
- attr: 'aria-controls="\u30E1\u30CB\u30E5\u30FC\u306Eid"',
1353
- meaning: "\u3069\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
1153
+ target: "\u30B3\u30F3\u30C6\u30CA",
1154
+ attr: "aria-label / aria-labelledby",
1155
+ meaning: "\u30D5\u30A3\u30FC\u30C9\u81EA\u4F53\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u300C\u65B0\u7740\u8A18\u4E8B\u300D\u306A\u3069\uFF09\u3002"
1354
1156
  },
1355
1157
  {
1356
- target: "\u30E1\u30CB\u30E5\u30FC\u306E\u7BB1",
1357
- attr: 'role="menu" + aria-labelledby',
1358
- meaning: "\u30E1\u30CB\u30E5\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u3001\u30C8\u30EA\u30AC\u30FC\u3092\u540D\u524D\u3068\u3057\u3066\u6301\u3064\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1158
+ target: "\u5404\u8A18\u4E8B",
1159
+ attr: 'role="article" + tabindex="0"',
1160
+ meaning: "1\u4EF6\u306E\u8A18\u4E8B\u3068\u3057\u3066\u8A8D\u8B58\u3055\u305B\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306B\u3059\u308B\u3002"
1359
1161
  },
1360
1162
  {
1361
- target: "\u5404\u9805\u76EE",
1362
- attr: 'role="menuitem" + tabindex="-1"',
1363
- meaning: "\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u306F JS \u3067\u7BA1\u7406\uFF08roving\uFF09\u3002"
1163
+ target: "\u5404\u8A18\u4E8B",
1164
+ attr: 'aria-labelledby="\u30BF\u30A4\u30C8\u30EB\u306Eid"',
1165
+ meaning: "\u8A18\u4E8B\u306E\u540D\u524D\uFF08\u898B\u51FA\u3057\uFF09\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u6642\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002"
1364
1166
  },
1365
- {
1366
- target: "\u9589\u3058\u305F\u30E1\u30CB\u30E5\u30FC",
1367
- attr: "hidden",
1368
- meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1167
+ {
1168
+ target: "\u5404\u8A18\u4E8B",
1169
+ attr: "aria-posinset + aria-setsize",
1170
+ meaning: "\u300C\u5168\u25CB\u4EF6\u4E2D\u306E\u25B3\u756A\u76EE\u300D\u3092\u793A\u3059\u3002\u4EF6\u6570\u304C\u5897\u3048\u305F\u3089\u5168\u8A18\u4E8B\u3067\u66F4\u65B0\u3059\u308B\u3002"
1369
1171
  }
1370
1172
  ],
1371
1173
  checklist: [
1372
- '\u30C8\u30EA\u30AC\u30FC\u306F <button> \u3067 aria-haspopup="menu" + aria-expanded + aria-controls',
1373
- '\u30E1\u30CB\u30E5\u30FC\u306F role="menu"\u3001\u9805\u76EE\u306F role="menuitem" + tabindex="-1"',
1374
- "\u30AF\u30EA\u30C3\u30AF / Enter / Space / \u2193 \u3067\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B",
1375
- "\u30E1\u30CB\u30E5\u30FC\u5185\u306F \u2191\u2193 \u3067\u79FB\u52D5\u3001Home/End \u3067\u7AEF\u3078",
1376
- "Enter/Space \u3067\u9805\u76EE\u3092\u5B9F\u884C\u3057\u3001\u9589\u3058\u3066\u30C8\u30EA\u30AC\u30FC\u3078\u623B\u308B",
1377
- "Esc \u3067\u9589\u3058\u3066\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059",
1378
- "\u30E1\u30CB\u30E5\u30FC\u306E\u5916\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u305F\u3089\u9589\u3058\u308B",
1379
- "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1174
+ '\u30B3\u30F3\u30C6\u30CA\u304C role="feed" \u3067\u3001aria-label \u7B49\u3067\u540D\u524D\u304C\u4ED8\u3044\u3066\u3044\u308B',
1175
+ '\u5404\u8A18\u4E8B\u304C role="article" + tabindex="0" \u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u308B',
1176
+ "\u5404\u8A18\u4E8B\u306B aria-labelledby \u3067\u898B\u51FA\u3057\u304C\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B",
1177
+ "aria-posinset / aria-setsize \u304C\u73FE\u5728\u306E\u4F4D\u7F6E\u30FB\u7DCF\u6570\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1178
+ '\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u4E2D\u306F aria-busy="true"\u3001\u5B8C\u4E86\u5F8C\u306B false \u3078\u623B\u308B',
1179
+ "PageDown / PageUp \u3067\u8A18\u4E8B\u9593\u3092\u79FB\u52D5\u3067\u304D\u308B\uFF08\u65E2\u5B9A\u30B9\u30AF\u30ED\u30FC\u30EB\u306F preventDefault\uFF09",
1180
+ "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u3082\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5931\u308F\u306A\u3044\uFF08\u65B0\u7740\u306E\u5148\u982D\u306A\u3069\u3078\u79FB\u3059\uFF09",
1181
+ "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u8AAD\u307F\u9032\u3081\u3089\u308C\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
1380
1182
  ],
1381
1183
  antipatterns: [
1382
1184
  {
1383
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u958B\u3051\u306A\u3044",
1384
- why: "div \u30C8\u30EA\u30AC\u30FC\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u53EF\u3002\u2193/Enter \u3082\u52B9\u304B\u306A\u3044\u3002"
1185
+ title: "\u4E00\u89A7\u306E\u69CB\u9020\u304C\u4F1D\u308F\u3089\u306A\u3044",
1186
+ why: 'role="feed" / role="article" \u304C\u7121\u304F\u3001\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u306E\u584A\u306B\u805E\u3053\u3048\u308B\u3002'
1385
1187
  },
1386
1188
  {
1387
- title: "hover \u4F9D\u5B58",
1388
- why: "\u30DE\u30A6\u30B9\u304C\u4F7F\u3048\u306A\u3044\u4EBA\u30FB\u30BF\u30C3\u30C1\u74B0\u5883\u3067\u7834\u7DBB\u3057\u3001\u30DE\u30A6\u30B9\u3092\u5916\u3059\u3068\u9589\u3058\u3066\u3057\u307E\u3046\u3002"
1189
+ title: "\u73FE\u5728\u5730\u304C\u5206\u304B\u3089\u306A\u3044",
1190
+ why: "aria-posinset / aria-setsize \u304C\u7121\u304F\u3001\u300C\u5168\u4F55\u4EF6\u306E\u4F55\u756A\u76EE\u304B\u300D\u3092\u6848\u5185\u3067\u304D\u306A\u3044\u3002"
1389
1191
  },
1390
1192
  {
1391
- title: "\u5F79\u5272\u3068\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
1392
- why: 'aria-haspopup/aria-expanded/role="menu" \u304C\u306A\u3044\u3002'
1193
+ title: "\u8AAD\u307F\u8FBC\u307F\u4E2D\u304C\u4F1D\u308F\u3089\u306A\u3044",
1194
+ why: "aria-busy \u304C\u7121\u304F\u3001\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u304C\u8D77\u304D\u3066\u3082\u652F\u63F4\u6280\u8853\u306B\u306F\u7121\u8A00\u306E\u307E\u307E\u3002"
1393
1195
  },
1394
1196
  {
1395
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u306A\u3044",
1396
- why: "Esc \u3067\u9589\u3058\u3089\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u3069\u3053\u306B\u3044\u308B\u304B\u898B\u5931\u3046\u3002"
1197
+ title: "\u8A18\u4E8B\u9593\u3092\u79FB\u52D5\u3067\u304D\u306A\u3044",
1198
+ why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001PageDown / PageUp \u3067\u306E\u8A18\u4E8B\u30B8\u30E3\u30F3\u30D7\u3082\u4E0D\u53EF\u3002"
1199
+ },
1200
+ {
1201
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u8FF7\u5B50\u306B\u306A\u308B",
1202
+ why: "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u7121\u304F\u3001\u73FE\u5728\u5730\u3092\u898B\u5931\u3046\u3002"
1397
1203
  }
1398
1204
  ],
1399
1205
  notes: [
1400
- "\u958B\u3044\u305F\u3089\u6700\u521D\u306E\u9805\u76EE\u3078\u3001Esc \u3067\u9589\u3058\u305F\u3089\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059\u3053\u3068\u3067\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u300C\u4ECA\u3069\u3053\u306B\u3044\u308B\u304B\u300D\u3092\u898B\u5931\u308F\u306A\u3044\u3002"
1206
+ "\u8A18\u4E8B\u9593\u306E\u79FB\u52D5\u306B PageDown / PageUp \u3092\u4F7F\u3046\u306E\u306F\u3001Tab \u3092\u8A18\u4E8B\u5185\u306E\u30EA\u30F3\u30AF\u79FB\u52D5\u306E\u305F\u3081\u306B\u7A7A\u3051\u3066\u304A\u304F\u305F\u3081\u3002\u30CF\u30F3\u30C9\u30E9\u5185\u3067 preventDefault() \u3067\u30D6\u30E9\u30A6\u30B6\u65E2\u5B9A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3092\u6B62\u3081\u308B\u3002",
1207
+ "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u306F\u65B0\u3057\u304F\u8FFD\u52A0\u3057\u305F\u8A18\u4E8B\u306E\u5148\u982D\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3059\u3002aria-setsize \u3082\u5168\u8A18\u4E8B\u3067\u65B0\u3057\u3044\u7DCF\u6570\u306B\u66F4\u65B0\u3059\u308B\u3002"
1401
1208
  ]
1402
1209
  };
1403
- var link = {
1404
- slug: "link",
1210
+ var grid = {
1211
+ slug: "grid",
1405
1212
  keyboard: [
1406
1213
  {
1407
1214
  keys: "Tab",
1408
- action: "\u6B21 / \u524D\u306E\u30EA\u30F3\u30AF\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1215
+ action: "\u30B0\u30EA\u30C3\u30C9\u5168\u4F53\u306B\u51FA\u5165\u308A\u3059\u308B\uFF08\u4E2D\u306F1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
1409
1216
  requirement: "required"
1410
1217
  },
1411
1218
  {
1412
- keys: "Enter",
1413
- action: "\u30EA\u30F3\u30AF\u5148\u3078\u79FB\u52D5\u3059\u308B",
1219
+ keys: "\u2192 / \u2190",
1220
+ action: "\u53F3 / \u5DE6\u306E\u30BB\u30EB\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1221
+ requirement: "required"
1222
+ },
1223
+ {
1224
+ keys: "\u2193 / \u2191",
1225
+ action: "\u4E0B / \u4E0A\u306E\u30BB\u30EB\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1226
+ requirement: "required"
1227
+ },
1228
+ {
1229
+ keys: "Home / End",
1230
+ action: "\u305D\u306E\u884C\u306E\u5148\u982D / \u672B\u5C3E\u306E\u30BB\u30EB\u3078",
1414
1231
  requirement: "required"
1232
+ },
1233
+ {
1234
+ keys: "Ctrl+Home / Ctrl+End",
1235
+ action: "\u30B0\u30EA\u30C3\u30C9\u306E\u5148\u982D / \u672B\u5C3E\u306E\u30BB\u30EB\u3078",
1236
+ requirement: "recommended"
1415
1237
  }
1416
1238
  ],
1417
1239
  aria: [
1418
1240
  {
1419
- target: "\u30EA\u30F3\u30AF\uFF08\u63A8\u5968\uFF09",
1420
- attr: '<a href="...">',
1421
- meaning: "\u300C\u30EA\u30F3\u30AF\u300D\u30ED\u30FC\u30EB\u30FB\u30D5\u30A9\u30FC\u30AB\u30B9\u30FBEnter \u6D3B\u6027\u5316\u304C\u3059\u3079\u3066\u81EA\u52D5\u3002ARIA \u306F\u57FA\u672C\u4E0D\u8981\u3002"
1241
+ target: "\u5916\u67A0",
1242
+ attr: 'role="grid"',
1243
+ meaning: "\u5BFE\u8A71\u7684\u306A\u30B0\u30EA\u30C3\u30C9\u3067\u3042\u308B\u3053\u3068\u3092\u5BA3\u8A00\u3059\u308B\u3002"
1422
1244
  },
1423
1245
  {
1424
- target: "\u65B0\u898F\u30BF\u30D6\u3067\u958B\u304F",
1425
- attr: 'target="_blank" + rel="noopener noreferrer"',
1426
- meaning: "\u5225\u30BF\u30D6\u3067\u958B\u304F\u3002rel \u3067\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3\u4E0A\u306E\u554F\u984C\u3092\u9632\u3050\u3002\u30EA\u30F3\u30AF\u6587\u8A00\u3067\u300C\u65B0\u3057\u3044\u30BF\u30D6\u300D\u3068\u660E\u793A\u3059\u308B\u3002"
1246
+ target: "\u5916\u67A0",
1247
+ attr: "aria-label / aria-labelledby",
1248
+ meaning: "\u30B0\u30EA\u30C3\u30C9\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u4F55\u306E\u8868\u304B\u3092\u4F1D\u3048\u308B\uFF09\u3002"
1427
1249
  },
1428
1250
  {
1429
- target: "span \u7B49\u3067\u4EE3\u7528\u3059\u308B\u5834\u5408\u306E\u307F",
1430
- attr: 'role="link" + tabindex="0" + \u30AD\u30FC\u51E6\u7406',
1431
- meaning: "\u672C\u6765\u4E0D\u8981\u3002<a> \u306A\u3089\u4F55\u3082\u8DB3\u3055\u306A\u304F\u3066\u3088\u3044\u306E\u3067\u4F7F\u308F\u306A\u3044\u306E\u304C\u6B63\u89E3\u3002"
1251
+ target: "\u5404\u884C",
1252
+ attr: 'role="row"',
1253
+ meaning: "\u884C\u306E\u307E\u3068\u307E\u308A\u3092\u793A\u3059\u3002"
1432
1254
  },
1433
1255
  {
1434
- target: "\u30A2\u30A4\u30B3\u30F3\u306E\u307F\u306E\u30EA\u30F3\u30AF",
1435
- attr: 'aria-label="..."',
1436
- meaning: "\u6587\u5B57\u304C\u7121\u3044\u30EA\u30F3\u30AF\u306B\u3001\u884C\u304D\u5148\u306E\u5206\u304B\u308B\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
1256
+ target: "\u898B\u51FA\u3057\u30BB\u30EB",
1257
+ attr: 'role="columnheader"',
1258
+ meaning: "\u5217\u306E\u898B\u51FA\u3057\u3002\u5404\u5217\u306E\u30BB\u30EB\u3068\u95A2\u9023\u4ED8\u3051\u3066\u8AAD\u307E\u308C\u308B\u3002"
1259
+ },
1260
+ {
1261
+ target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
1262
+ attr: 'role="gridcell"',
1263
+ meaning: "1\u30641\u3064\u306E\u30BB\u30EB\u3002"
1264
+ },
1265
+ {
1266
+ target: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B\u30BB\u30EB",
1267
+ attr: 'tabindex="0"\uFF081\u3064\u3060\u3051\uFF09/ "-1"\uFF08\u6B8B\u308A\u5168\u90E8\uFF09',
1268
+ meaning: "\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex\u3002\u30B0\u30EA\u30C3\u30C9\u30921\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u306B\u3057\u3001\u79FB\u52D5\u6642\u306B\u4ED8\u3051\u66FF\u3048\u308B\u3002"
1437
1269
  }
1438
1270
  ],
1439
1271
  checklist: [
1440
- '\u79FB\u52D5\u306E\u90E8\u54C1\u306F <a href="..."> \u3092\u4F7F\u3063\u3066\u3044\u308B',
1441
- "\u30EA\u30F3\u30AF\u6587\u8A00\u3060\u3051\u3067\u884C\u304D\u5148\u304C\u5206\u304B\u308B\uFF08\u300C\u3053\u3061\u3089\u300D\u3092\u907F\u3051\u308B\uFF09",
1442
- '\u65B0\u3057\u3044\u30BF\u30D6\u3067\u958B\u304F\u3068\u304D\u306F\u6587\u8A00\u3067\u660E\u793A\u3057 rel="noopener noreferrer" \u3092\u4ED8\u3051\u308B',
1443
- "\u30A2\u30A4\u30B3\u30F3\u306E\u307F\u306E\u30EA\u30F3\u30AF\u306B\u306F aria-label \u3092\u4ED8\u3051\u3066\u3044\u308B",
1444
- "Tab \u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
1445
- "\u300C\u64CD\u4F5C\u306E\u5B9F\u884C\u300D\u306B\u306F\u30EA\u30F3\u30AF\u3067\u306F\u306A\u304F <button> \u3092\u4F7F\u3063\u3066\u3044\u308B"
1272
+ '\u5916\u67A0\u306B role="grid" \u3068\u540D\u524D\uFF08aria-label / aria-labelledby\uFF09\u304C\u3042\u308B',
1273
+ '\u884C\u306F role="row"\u3001\u898B\u51FA\u3057\u306F role="columnheader"\u3001\u30BB\u30EB\u306F role="gridcell"',
1274
+ '\u5E38\u306B1\u3064\u306E\u30BB\u30EB\u3060\u3051 tabindex="0"\u3001\u6B8B\u308A\u306F "-1"\uFF08\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex\uFF09',
1275
+ "\u77E2\u5370\u30AD\u30FC\u3067\u30BB\u30EB\u79FB\u52D5\u3067\u304D\u3001Home/End \u3067\u884C\u306E\u7AEF\u3078\u79FB\u52D5\u3067\u304D\u308B",
1276
+ "\uFF08\u63A8\u5968\uFF09Ctrl+Home/End \u3067\u30B0\u30EA\u30C3\u30C9\u306E\u7AEF\u3078\u79FB\u52D5\u3067\u304D\u308B",
1277
+ "Tab \u306F\u30BB\u30EB\u79FB\u52D5\u3067\u306F\u306A\u304F\u300C\u30B0\u30EA\u30C3\u30C9\u306E\u5916\u3078\u51FA\u308B\u300D\u30AD\u30FC\u306B\u306A\u3063\u3066\u3044\u308B",
1278
+ "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
1446
1279
  ],
1447
1280
  antipatterns: [
1448
1281
  {
1449
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u306A\u3044",
1450
- why: "span \u306F Tab \u306E\u5BFE\u8C61\u5916\u3067\u3001\u30EA\u30F3\u30AF\u3068\u3057\u3066\u5230\u9054\u3067\u304D\u306A\u3044\u3002"
1282
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
1283
+ why: "\u30BB\u30EB\u306B tabindex \u3082\u30AD\u30FC\u51E6\u7406\u3082\u7121\u304F\u3001\u77E2\u5370\u3067\u52D5\u3051\u306A\u3044\u3002"
1451
1284
  },
1452
1285
  {
1453
- title: "\u30EA\u30F3\u30AF\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044",
1454
- why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u30EA\u30F3\u30AF\u4E00\u89A7\u306B\u51FA\u3066\u3053\u306A\u3044\u3002"
1286
+ title: "\u30B0\u30EA\u30C3\u30C9\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044",
1287
+ why: 'role="grid" \u304C\u7121\u304F\u3001\u652F\u63F4\u6280\u8853\u306B\u306F\u300C\u305F\u3060\u306E\u8868\u300D\u306B\u805E\u3053\u3048\u308B\u3002'
1455
1288
  },
1456
1289
  {
1457
- title: "\u53F3\u30AF\u30EA\u30C3\u30AF / \u65B0\u3057\u3044\u30BF\u30D6 / \u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u304C\u3067\u304D\u306A\u3044",
1458
- why: "href \u304C\u7121\u3044\u305F\u3081\u30D6\u30E9\u30A6\u30B6\u6A19\u6E96\u306E\u4FBF\u5229\u6A5F\u80FD\u304C\u5168\u6EC5\u3059\u308B\u3002"
1290
+ title: "1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u306B\u306A\u3063\u3066\u3044\u306A\u3044",
1291
+ why: "\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex \u306E\u8A2D\u8A08\u304C\u7121\u3044\u3002"
1459
1292
  },
1460
1293
  {
1461
- title: "\u64CD\u4F5C\u306E\u5B9F\u884C\u306B\u30EA\u30F3\u30AF\u3092\u4F7F\u3046",
1462
- why: "\u79FB\u52D5=<a href>\u3001\u64CD\u4F5C=<button> \u3068\u5F79\u5272\u3067\u9078\u3070\u306A\u3044\u3068\u5229\u7528\u8005\u304C\u6DF7\u4E71\u3059\u308B\u3002"
1294
+ title: "\u73FE\u5728\u4F4D\u7F6E\u304C\u4F1D\u308F\u3089\u306A\u3044",
1295
+ why: "\u4F55\u884C\u76EE\u30FB\u4F55\u5217\u76EE\u306B\u3044\u308B\u306E\u304B\u3001\u9078\u629E\u72B6\u614B\u3082\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
1463
1296
  }
1464
1297
  ],
1465
1298
  notes: [
1466
- "\u30EA\u30F3\u30AF\u306F Enter \u3067\u306E\u307F\u6D3B\u6027\u5316\u3057\u3001Space \u3067\u306F\u79FB\u52D5\u3057\u307E\u305B\u3093\uFF08\u3053\u308C\u304C\u6B63\u3057\u3044\u6319\u52D5\u3067\u3059\uFF09\u3002<a href> \u3092\u4F7F\u3048\u3070\u3001\u3053\u306E\u52D5\u4F5C\u306F\u30B3\u30FC\u30C9\u3092\u66F8\u304B\u305A\u306B\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\u3002"
1299
+ "Tab \u306F\u30B0\u30EA\u30C3\u30C9\u306E\u5916\u3078\u51FA\u308B\u305F\u3081\u306E\u30AD\u30FC\u306B\u3057\u3001\u30BB\u30EB\u79FB\u52D5\u306F\u77E2\u5370\u30AD\u30FC\u306B\u4EFB\u305B\u308B\u3002\u30CD\u30A4\u30C6\u30A3\u30D6\u306A <table> \u3068\u306E\u5927\u304D\u306A\u9055\u3044\u3002",
1300
+ "\u30BB\u30EB\u5185\u306B\u30DC\u30BF\u30F3/\u30EA\u30F3\u30AF\u3092\u7F6E\u304F\u5834\u5408\u306F Enter \u3084 F2 \u3067\u300C\u30BB\u30EB\u5185\u64CD\u4F5C\u30E2\u30FC\u30C9\u300D\u306B\u5165\u308B\u62E1\u5F35\u3092\u691C\u8A0E\u3059\u308B\u3002\u307E\u305A 1\u30BB\u30EB\uFF1D1\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u57FA\u672C\u5F62\u3092\u78BA\u5B9F\u306B\u52D5\u304B\u3059\u3053\u3068\u304C\u5148\u6C7A\u3002"
1467
1301
  ]
1468
1302
  };
1469
1303
  var landmarks = {
@@ -1543,472 +1377,494 @@ var landmarks = {
1543
1377
  "\u30E9\u30F3\u30C9\u30DE\u30FC\u30AF\u81EA\u4F53\u306B\u7279\u5225\u306A\u30AD\u30FC\u64CD\u4F5C\u3092\u5B9F\u88C5\u3059\u308B\u5FC5\u8981\u306F\u3042\u308A\u307E\u305B\u3093\u3002\u6B63\u3057\u3044\u8981\u7D20\u3092\u4F7F\u3046\u3060\u3051\u3067\u3001\u652F\u63F4\u6280\u8853\u5074\u306E\u79FB\u52D5\u6A5F\u80FD\u304C\u81EA\u52D5\u7684\u306B\u52B9\u304D\u307E\u3059\u3002"
1544
1378
  ]
1545
1379
  };
1546
- var button = {
1547
- slug: "button",
1380
+ var link = {
1381
+ slug: "link",
1548
1382
  keyboard: [
1549
1383
  {
1550
1384
  keys: "Tab",
1551
- action: "\u6B21 / \u524D\u306E\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5\uFF08\u7121\u52B9\u306A\u30DC\u30BF\u30F3\u306F\u98DB\u3070\u3055\u308C\u308B\uFF09",
1385
+ action: "\u6B21 / \u524D\u306E\u30EA\u30F3\u30AF\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1552
1386
  requirement: "required"
1553
1387
  },
1554
1388
  {
1555
1389
  keys: "Enter",
1556
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3059",
1557
- requirement: "required"
1558
- },
1559
- {
1560
- keys: "Space",
1561
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3059",
1390
+ action: "\u30EA\u30F3\u30AF\u5148\u3078\u79FB\u52D5\u3059\u308B",
1562
1391
  requirement: "required"
1563
1392
  }
1564
1393
  ],
1565
1394
  aria: [
1566
1395
  {
1567
- target: "\u30DC\u30BF\u30F3\uFF08\u63A8\u5968\uFF09",
1568
- attr: '<button type="button">',
1569
- meaning: "\u30ED\u30FC\u30EB\u30FB\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30AD\u30FC\u64CD\u4F5C\u304C\u3059\u3079\u3066\u81EA\u52D5\u3002ARIA \u306F\u57FA\u672C\u4E0D\u8981\u3002"
1396
+ target: "\u30EA\u30F3\u30AF\uFF08\u63A8\u5968\uFF09",
1397
+ attr: '<a href="...">',
1398
+ meaning: "\u300C\u30EA\u30F3\u30AF\u300D\u30ED\u30FC\u30EB\u30FB\u30D5\u30A9\u30FC\u30AB\u30B9\u30FBEnter \u6D3B\u6027\u5316\u304C\u3059\u3079\u3066\u81EA\u52D5\u3002ARIA \u306F\u57FA\u672C\u4E0D\u8981\u3002"
1570
1399
  },
1571
1400
  {
1572
- target: "\u30D5\u30A9\u30FC\u30E0\u9001\u4FE1",
1573
- attr: 'type="submit" / type="button"',
1574
- meaning: '\u610F\u56F3\u3057\u306A\u3044\u9001\u4FE1\u3092\u907F\u3051\u308B\u305F\u3081\u3001\u9001\u4FE1\u3067\u306A\u3044\u30DC\u30BF\u30F3\u306B\u306F type="button" \u3092\u4ED8\u3051\u308B\u3002'
1401
+ target: "\u65B0\u898F\u30BF\u30D6\u3067\u958B\u304F",
1402
+ attr: 'target="_blank" + rel="noopener noreferrer"',
1403
+ meaning: "\u5225\u30BF\u30D6\u3067\u958B\u304F\u3002rel \u3067\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3\u4E0A\u306E\u554F\u984C\u3092\u9632\u3050\u3002\u30EA\u30F3\u30AF\u6587\u8A00\u3067\u300C\u65B0\u3057\u3044\u30BF\u30D6\u300D\u3068\u660E\u793A\u3059\u308B\u3002"
1575
1404
  },
1576
1405
  {
1577
- target: "\u7121\u52B9\u5316",
1578
- attr: "disabled",
1579
- meaning: "\u64CD\u4F5C\u4E0D\u53EF\u306B\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304B\u3089\u3082\u5916\u3059\u3002\u652F\u63F4\u6280\u8853\u306B\u3082\u4F1D\u308F\u308B\u3002"
1406
+ target: "span \u7B49\u3067\u4EE3\u7528\u3059\u308B\u5834\u5408\u306E\u307F",
1407
+ attr: 'role="link" + tabindex="0" + \u30AD\u30FC\u51E6\u7406',
1408
+ meaning: "\u672C\u6765\u4E0D\u8981\u3002<a> \u306A\u3089\u4F55\u3082\u8DB3\u3055\u306A\u304F\u3066\u3088\u3044\u306E\u3067\u4F7F\u308F\u306A\u3044\u306E\u304C\u6B63\u89E3\u3002"
1580
1409
  },
1581
1410
  {
1582
- target: "div \u3067\u4EE3\u7528\u3059\u308B\u5834\u5408\u306E\u307F",
1583
- attr: 'role="button" + tabindex="0"',
1584
- meaning: "\u300C\u30DC\u30BF\u30F3\u300D\u3068\u8A8D\u8B58\u3055\u305B\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306B\u3059\u308B\u3002\u3055\u3089\u306B\u30AD\u30FC\u51E6\u7406\u306E\u81EA\u4F5C\u304C\u5FC5\u9808\u3002"
1411
+ target: "\u30A2\u30A4\u30B3\u30F3\u306E\u307F\u306E\u30EA\u30F3\u30AF",
1412
+ attr: 'aria-label="..."',
1413
+ meaning: "\u6587\u5B57\u304C\u7121\u3044\u30EA\u30F3\u30AF\u306B\u3001\u884C\u304D\u5148\u306E\u5206\u304B\u308B\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
1585
1414
  }
1586
1415
  ],
1587
1416
  checklist: [
1588
- "\u64CD\u4F5C\uFF08\u5B9F\u884C\uFF09\u306E\u90E8\u54C1\u306F <button> \u3092\u4F7F\u3063\u3066\u3044\u308B",
1589
- '\u9001\u4FE1\u3067\u306A\u3044\u30DC\u30BF\u30F3\u306B\u306F type="button" \u3092\u4ED8\u3051\u3066\u3044\u308B',
1590
- "\u30DE\u30A6\u30B9\u30FBEnter\u30FBSpace \u306E\u3059\u3079\u3066\u3067\u52D5\u304F",
1591
- "\u7121\u52B9\u306B\u3057\u305F\u3044\u3068\u304D\u306F disabled \u3092\u4F7F\u3063\u3066\u3044\u308B",
1592
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
1593
- '\uFF08div \u4EE3\u7528\u6642\u306E\u307F\uFF09role="button"\u30FBtabindex="0"\u30FB\u30AD\u30FC\u51E6\u7406\u3092\u3059\u3079\u3066\u8DB3\u3057\u3066\u3044\u308B'
1417
+ '\u79FB\u52D5\u306E\u90E8\u54C1\u306F <a href="..."> \u3092\u4F7F\u3063\u3066\u3044\u308B',
1418
+ "\u30EA\u30F3\u30AF\u6587\u8A00\u3060\u3051\u3067\u884C\u304D\u5148\u304C\u5206\u304B\u308B\uFF08\u300C\u3053\u3061\u3089\u300D\u3092\u907F\u3051\u308B\uFF09",
1419
+ '\u65B0\u3057\u3044\u30BF\u30D6\u3067\u958B\u304F\u3068\u304D\u306F\u6587\u8A00\u3067\u660E\u793A\u3057 rel="noopener noreferrer" \u3092\u4ED8\u3051\u308B',
1420
+ "\u30A2\u30A4\u30B3\u30F3\u306E\u307F\u306E\u30EA\u30F3\u30AF\u306B\u306F aria-label \u3092\u4ED8\u3051\u3066\u3044\u308B",
1421
+ "Tab \u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
1422
+ "\u300C\u64CD\u4F5C\u306E\u5B9F\u884C\u300D\u306B\u306F\u30EA\u30F3\u30AF\u3067\u306F\u306A\u304F <button> \u3092\u4F7F\u3063\u3066\u3044\u308B"
1594
1423
  ],
1595
1424
  antipatterns: [
1596
1425
  {
1597
1426
  title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u306A\u3044",
1598
- why: "div \u306F Tab \u306E\u5BFE\u8C61\u5916\u3002\u305D\u3082\u305D\u3082\u5230\u9054\u3067\u304D\u306A\u3044\u3002"
1427
+ why: "span \u306F Tab \u306E\u5BFE\u8C61\u5916\u3067\u3001\u30EA\u30F3\u30AF\u3068\u3057\u3066\u5230\u9054\u3067\u304D\u306A\u3044\u3002"
1599
1428
  },
1600
1429
  {
1601
- title: "Space / Enter \u3067\u52D5\u304B\u306A\u3044",
1602
- why: "div \u306B\u306F\u30AD\u30FC\u51E6\u7406\u304C\u306A\u304F\u3001\u81EA\u5206\u3067\u66F8\u304B\u306A\u3051\u308C\u3070\u53CD\u5FDC\u3057\u306A\u3044\u3002"
1430
+ title: "\u30EA\u30F3\u30AF\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044",
1431
+ why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u30EA\u30F3\u30AF\u4E00\u89A7\u306B\u51FA\u3066\u3053\u306A\u3044\u3002"
1603
1432
  },
1604
1433
  {
1605
- title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
1606
- why: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u300C\u30DC\u30BF\u30F3\u300D\u3068\u8A8D\u8B58\u3055\u308C\u305A\u3001\u62BC\u305B\u308B\u3053\u3068\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
1434
+ title: "\u53F3\u30AF\u30EA\u30C3\u30AF / \u65B0\u3057\u3044\u30BF\u30D6 / \u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u304C\u3067\u304D\u306A\u3044",
1435
+ why: "href \u304C\u7121\u3044\u305F\u3081\u30D6\u30E9\u30A6\u30B6\u6A19\u6E96\u306E\u4FBF\u5229\u6A5F\u80FD\u304C\u5168\u6EC5\u3059\u308B\u3002"
1607
1436
  },
1608
1437
  {
1609
- title: "\u7121\u52B9\u5316\u3067\u304D\u306A\u3044",
1610
- why: "div \u306B\u306F disabled \u306E\u6982\u5FF5\u304C\u306A\u304F\u3001\u62BC\u305B\u306A\u3044\u72B6\u614B\u3092\u652F\u63F4\u6280\u8853\u306B\u4F1D\u3048\u3089\u308C\u306A\u3044\u3002"
1438
+ title: "\u64CD\u4F5C\u306E\u5B9F\u884C\u306B\u30EA\u30F3\u30AF\u3092\u4F7F\u3046",
1439
+ why: "\u79FB\u52D5=<a href>\u3001\u64CD\u4F5C=<button> \u3068\u5F79\u5272\u3067\u9078\u3070\u306A\u3044\u3068\u5229\u7528\u8005\u304C\u6DF7\u4E71\u3059\u308B\u3002"
1611
1440
  }
1612
1441
  ],
1613
1442
  notes: [
1614
- "<button> \u306A\u3089\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\uFF08Tab / Enter / Space\uFF09\u3068\u652F\u63F4\u6280\u8853\u3078\u306E\u901A\u77E5\u304C\u30B3\u30FC\u30C9\u3092\u66F8\u304B\u305A\u306B\u52D5\u304D\u307E\u3059\u3002",
1615
- "\u305D\u306E\u5834\u3067\u4F55\u304B\u3092\u5B9F\u884C\u3059\u308B\u306A\u3089 <button>\u3001\u5225\u306E\u5834\u6240\u3078\u79FB\u52D5\u3059\u308B\u306A\u3089 <a href> \u3068\u5F79\u5272\u3067\u9078\u3073\u307E\u3057\u3087\u3046\u3002"
1443
+ "\u30EA\u30F3\u30AF\u306F Enter \u3067\u306E\u307F\u6D3B\u6027\u5316\u3057\u3001Space \u3067\u306F\u79FB\u52D5\u3057\u307E\u305B\u3093\uFF08\u3053\u308C\u304C\u6B63\u3057\u3044\u6319\u52D5\u3067\u3059\uFF09\u3002<a href> \u3092\u4F7F\u3048\u3070\u3001\u3053\u306E\u52D5\u4F5C\u306F\u30B3\u30FC\u30C9\u3092\u66F8\u304B\u305A\u306B\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\u3002"
1616
1444
  ]
1617
1445
  };
1618
- var checkbox = {
1619
- slug: "checkbox",
1446
+ var listbox = {
1447
+ slug: "listbox",
1620
1448
  keyboard: [
1621
1449
  {
1622
1450
  keys: "Tab",
1623
- action: "\u6B21\u306E\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1451
+ action: "\u30EA\u30B9\u30C8\u30DC\u30C3\u30AF\u30B9\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5F53\u3066\u308B / \u5916\u3059",
1624
1452
  requirement: "required"
1625
1453
  },
1626
1454
  {
1627
- keys: "Space",
1628
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u30AA\u30F3/\u30AA\u30D5",
1455
+ keys: "\u2193 / \u2191",
1456
+ action: "\u6B21 / \u524D\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\uFF08\u79FB\u52D5\u306B\u5408\u308F\u305B\u3066\u9078\u629E\u3092\u66F4\u65B0\uFF09",
1629
1457
  requirement: "required"
1458
+ },
1459
+ {
1460
+ keys: "Home / End",
1461
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5",
1462
+ requirement: "recommended"
1630
1463
  }
1631
1464
  ],
1632
1465
  aria: [
1633
1466
  {
1634
- target: "\u5165\u529B\u6B04",
1635
- attr: '<input type="checkbox">',
1636
- meaning: "\u30CD\u30A4\u30C6\u30A3\u30D6\u306E checkbox \u30ED\u30FC\u30EB\u30FB\u72B6\u614B\u30FB\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u304C\u3059\u3079\u3066\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
1467
+ target: "\u30B3\u30F3\u30C6\u30CA",
1468
+ attr: 'role="listbox"',
1469
+ meaning: "\u300C\u9078\u3079\u308B\u9805\u76EE\u306E\u96C6\u307E\u308A\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
1637
1470
  },
1638
1471
  {
1639
- target: "\u30E9\u30D9\u30EB",
1640
- attr: "<label>\uFF08input \u3092\u5185\u5305 or for \u3067\u95A2\u9023\u4ED8\u3051\uFF09",
1641
- meaning: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u306E\u300C\u540D\u524D\u300D\u306B\u306A\u308B\u3002\u30E9\u30D9\u30EB\u306E\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u30C8\u30B0\u30EB\u3067\u304D\u308B\u3002"
1472
+ target: "\u30B3\u30F3\u30C6\u30CA",
1473
+ attr: "aria-labelledby\uFF08\u307E\u305F\u306F aria-label\uFF09",
1474
+ meaning: "\u30EA\u30B9\u30C8\u30DC\u30C3\u30AF\u30B9\u306E\u540D\u524D\u3092\u4E0E\u3048\u308B\u3002"
1642
1475
  },
1643
1476
  {
1644
- target: "\u89AA\uFF08\u3059\u3079\u3066\u9078\u629E\uFF09",
1645
- attr: "indeterminate = true\uFF08JS \u30D7\u30ED\u30D1\u30C6\u30A3\uFF09",
1646
- meaning: '\u4E00\u90E8\u3060\u3051\u9078\u629E\u306E\u4E2D\u9593\u72B6\u614B\u3002aria-checked="mixed" \u3068\u3057\u3066\u81EA\u52D5\u3067\u4F1D\u308F\u308B\u3002'
1477
+ target: "\u30B3\u30F3\u30C6\u30CA",
1478
+ attr: 'tabindex="0" + aria-activedescendant',
1479
+ meaning: "\u30EA\u30B9\u30C8\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u7F6E\u304D\u3001\u73FE\u5728\u4F4D\u7F6E\u306E option id \u3092\u6307\u3059\uFF08activedescendant \u65B9\u5F0F\uFF09\u3002"
1647
1480
  },
1648
1481
  {
1649
- target: "\u30B0\u30EB\u30FC\u30D7",
1650
- attr: "<fieldset> + <legend>",
1651
- meaning: "\u95A2\u9023\u3059\u308B\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u307E\u3068\u3081\u3001\u30B0\u30EB\u30FC\u30D7\u540D\u3092\u4E0E\u3048\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
1482
+ target: "\u5404\u9805\u76EE",
1483
+ attr: 'role="option" + \u4E00\u610F\u306E id',
1484
+ meaning: "1\u3064\u306E\u9078\u629E\u80A2\u3002id \u306F aria-activedescendant \u304B\u3089\u53C2\u7167\u3055\u308C\u308B\u3002"
1485
+ },
1486
+ {
1487
+ target: "\u5404\u9805\u76EE",
1488
+ attr: 'aria-selected="true | false"',
1489
+ meaning: "\u9078\u629E\u72B6\u614B\u3002\u9078\u629E\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1652
1490
  }
1653
1491
  ],
1654
1492
  checklist: [
1655
- '\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u306F <input type="checkbox"> \u3067\u3042\u308B',
1656
- "<label> \u3068\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B\uFF08\u5185\u5305 or for/id\uFF09",
1657
- "Space \u3067\u30C8\u30B0\u30EB\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
1658
- "\u300C\u3059\u3079\u3066\u9078\u629E\u300D\u306E\u4E00\u90E8\u9078\u629E\u306F indeterminate = true \u3067\u8868\u3059",
1659
- "\u89AA \u2194 \u5B50\u306E\u72B6\u614B\u304C change \u3067\u5E38\u306B\u540C\u671F\u3057\u3066\u3044\u308B",
1660
- "\u95A2\u9023\u30B0\u30EB\u30FC\u30D7\u306F <fieldset> + <legend> \u3067\u307E\u3068\u3081\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09"
1493
+ '\u30B3\u30F3\u30C6\u30CA\u306B role="listbox" \u3068\u540D\u524D\uFF08aria-labelledby \u7B49\uFF09\u304C\u3042\u308B',
1494
+ '\u5404\u9805\u76EE\u306F role="option" + \u4E00\u610F\u306E id \u3092\u6301\u3064',
1495
+ "aria-selected \u304C\u9078\u629E\u72B6\u614B\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1496
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u3042\u308B\uFF08aria-activedescendant \u307E\u305F\u306F\u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\uFF09",
1497
+ "\u2191\u2193 \u3067\u79FB\u52D5\u3067\u304D\u3001Home / End \u3082\u4F7F\u3048\u308B\uFF08\u63A8\u5968\uFF09",
1498
+ "\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u9078\u629E\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1661
1499
  ],
1662
1500
  antipatterns: [
1663
1501
  {
1664
1502
  title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
1665
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001Space \u3067\u306E\u30C8\u30B0\u30EB\u3082\u52B9\u304B\u306A\u3044\u3002"
1503
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3082\u52B9\u304B\u306A\u3044\u3002"
1666
1504
  },
1667
1505
  {
1668
1506
  title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
1669
- why: "\u300C\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u300D\u3060\u3068\u8A8D\u8B58\u3055\u308C\u305A\u3001\u30AA\u30F3/\u30AA\u30D5\u306E\u6982\u5FF5\u3082\u5B58\u5728\u3057\u306A\u3044\u3002"
1507
+ why: 'role="listbox"/role="option" \u304C\u306A\u304F\u300C\u9078\u3079\u308B\u4E00\u89A7\u300D\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
1670
1508
  },
1671
1509
  {
1672
- title: "\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
1673
- why: "\u30AA\u30F3/\u30AA\u30D5\uFF08\u3084\u4E2D\u9593\u72B6\u614B\uFF09\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u305A\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
1510
+ title: "\u9078\u629E\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
1511
+ why: "aria-selected \u304C\u306A\u304F\u3001\u3069\u308C\u304C\u9078\u3070\u308C\u3066\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
1674
1512
  },
1675
1513
  {
1676
- title: "\u30E9\u30D9\u30EB\u672A\u95A2\u9023",
1677
- why: "\u6587\u5B57\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u3082\u5207\u308A\u66FF\u308F\u3089\u305A\u3001\u4F55\u306E\u30C1\u30A7\u30C3\u30AF\u304B\u3068\u3044\u3046\u540D\u524D\u3082\u7D50\u3073\u3064\u304B\u306A\u3044\u3002"
1514
+ title: "\u540D\u524D\u3082\u4F4D\u7F6E\u3082\u306A\u3044",
1515
+ why: "\u30B0\u30EB\u30FC\u30D7\u540D\u3084\u300C\u4F55\u500B\u4E2D\u4F55\u500B\u76EE\u300D\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
1678
1516
  }
1679
1517
  ],
1680
1518
  notes: [
1681
- 'Space \u3067\u306E\u5207\u308A\u66FF\u3048\u306F <input type="checkbox"> \u3092\u4F7F\u3046\u3060\u3051\u3067\u81EA\u52D5\u7684\u306B\u5F97\u3089\u308C\u307E\u3059\u3002\u81EA\u5206\u3067\u30AD\u30FC\u51E6\u7406\u3092\u66F8\u304F\u5FC5\u8981\u306F\u3042\u308A\u307E\u305B\u3093\u3002',
1682
- "indeterminate \u306F HTML \u5C5E\u6027\u3067\u306F\u306A\u304F JavaScript \u306E\u30D7\u30ED\u30D1\u30C6\u30A3\u3067\u3059\uFF08el.indeterminate = true\uFF09\u3002\u9001\u4FE1\u5024\u306E\u6271\u3044\u306B\u6CE8\u610F\u3057\u307E\u3059\u3002"
1519
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30EA\u30B9\u30C8\uFF08ul\uFF09\u306B\u7F6E\u3044\u305F\u307E\u307E\u3001\u300C\u3044\u307E\u3069\u306E option \u3092\u6307\u3057\u3066\u3044\u308B\u304B\u300D\u3060\u3051\u3092 aria-activedescendant \u5C5E\u6027\u3067\u4F1D\u3048\u308B\u65B9\u5F0F\uFF08activedescendant \u65B9\u5F0F\uFF09\u3068\u3001\u5404 option \u306B tabindex \u3092\u914D\u308B\u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\u65B9\u5F0F\u306E2\u901A\u308A\u3067\u5B9F\u88C5\u3067\u304D\u308B\u3002"
1683
1520
  ]
1684
1521
  };
1685
- var radioGroup = {
1686
- slug: "radio-group",
1522
+ var menuButton = {
1523
+ slug: "menu-button",
1687
1524
  keyboard: [
1688
1525
  {
1689
- keys: "Tab",
1690
- action: "\u30B0\u30EB\u30FC\u30D7\u306B\u5165\u308B / \u30B0\u30EB\u30FC\u30D7\u304B\u3089\u51FA\u308B\uFF08\u9078\u629E\u4E2D\u306E\u9805\u76EE\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\uFF09",
1526
+ keys: "Enter / Space / \u2193\uFF08\u30DC\u30BF\u30F3\u4E0A\uFF09",
1527
+ action: "\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9",
1691
1528
  requirement: "required"
1692
1529
  },
1693
1530
  {
1694
- keys: "\u2193 / \u2192",
1695
- action: "\u6B21\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\u3057\u3066\u9078\u629E\u3059\u308B",
1531
+ keys: "\u2191\uFF08\u30DC\u30BF\u30F3\u4E0A\uFF09",
1532
+ action: "\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u5F8C\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9",
1533
+ requirement: "optional"
1534
+ },
1535
+ {
1536
+ keys: "\u2191 / \u2193\uFF08\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1537
+ action: "\u524D / \u6B21\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1696
1538
  requirement: "required"
1697
1539
  },
1698
1540
  {
1699
- keys: "\u2191 / \u2190",
1700
- action: "\u524D\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\u3057\u3066\u9078\u629E\u3059\u308B",
1541
+ keys: "Home / End",
1542
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1543
+ requirement: "recommended"
1544
+ },
1545
+ {
1546
+ keys: "Enter / Space\uFF08\u9805\u76EE\u4E0A\uFF09",
1547
+ action: "\u9805\u76EE\u3092\u5B9F\u884C\u3057\u3001\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3066\u30DC\u30BF\u30F3\u3078\u623B\u308B",
1701
1548
  requirement: "required"
1702
1549
  },
1703
1550
  {
1704
- keys: "Space",
1705
- action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u9078\u629E\u80A2\u3092\u9078\u629E\u3059\u308B",
1551
+ keys: "Esc",
1552
+ action: "\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3066\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059",
1706
1553
  requirement: "required"
1707
1554
  }
1708
1555
  ],
1709
1556
  aria: [
1710
1557
  {
1711
- target: "\u5404\u9078\u629E\u80A2",
1712
- attr: '<input type="radio"> + \u540C\u3058 name',
1713
- meaning: "radio \u30ED\u30FC\u30EB\u30FB\u300C1\u3064\u3060\u3051\u9078\u629E\u300D\u30FB\u77E2\u5370\u30AD\u30FC\u64CD\u4F5C\u304C\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
1558
+ target: "\u30C8\u30EA\u30AC\u30FC",
1559
+ attr: '<button> + aria-haspopup="menu"',
1560
+ meaning: "\u62BC\u3059\u3068\u30E1\u30CB\u30E5\u30FC\u304C\u958B\u304F\u30DC\u30BF\u30F3\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1714
1561
  },
1715
1562
  {
1716
- target: "\u30E9\u30D9\u30EB",
1717
- attr: "<label>",
1718
- meaning: "\u5404\u9078\u629E\u80A2\u306E\u540D\u524D\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u9078\u629E\u3067\u304D\u308B\u3002"
1563
+ target: "\u30C8\u30EA\u30AC\u30FC",
1564
+ attr: 'aria-expanded="true | false"',
1565
+ meaning: "\u30E1\u30CB\u30E5\u30FC\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1719
1566
  },
1720
1567
  {
1721
- target: "\u30B0\u30EB\u30FC\u30D7",
1722
- attr: "<fieldset> + <legend>",
1723
- meaning: "\u9078\u629E\u80A2\u3092\u307E\u3068\u3081\u3001\u30B0\u30EB\u30FC\u30D7\u540D\uFF08\u8CEA\u554F\u6587\uFF09\u3092\u4E0E\u3048\u308B\u3002"
1568
+ target: "\u30C8\u30EA\u30AC\u30FC",
1569
+ attr: 'aria-controls="\u30E1\u30CB\u30E5\u30FC\u306Eid"',
1570
+ meaning: "\u3069\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F\u30DC\u30BF\u30F3\u304B\u3092\u793A\u3059\u3002"
1571
+ },
1572
+ {
1573
+ target: "\u30E1\u30CB\u30E5\u30FC\u306E\u7BB1",
1574
+ attr: 'role="menu" + aria-labelledby',
1575
+ meaning: "\u30E1\u30CB\u30E5\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u3001\u30C8\u30EA\u30AC\u30FC\u3092\u540D\u524D\u3068\u3057\u3066\u6301\u3064\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1576
+ },
1577
+ {
1578
+ target: "\u5404\u9805\u76EE",
1579
+ attr: 'role="menuitem" + tabindex="-1"',
1580
+ meaning: "\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u306F JS \u3067\u7BA1\u7406\uFF08roving\uFF09\u3002"
1581
+ },
1582
+ {
1583
+ target: "\u9589\u3058\u305F\u30E1\u30CB\u30E5\u30FC",
1584
+ attr: "hidden",
1585
+ meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1724
1586
  }
1725
1587
  ],
1726
1588
  checklist: [
1727
- '\u5404\u9078\u629E\u80A2\u306F <input type="radio"> \u3067\u3042\u308B',
1728
- "\u30B0\u30EB\u30FC\u30D7\u5185\u306E\u30E9\u30B8\u30AA\u306F\u540C\u3058 name \u3092\u5171\u6709\u3057\u3066\u3044\u308B",
1729
- "<label> \u3068\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B\uFF08\u5185\u5305 or for/id\uFF09",
1730
- "<fieldset> + <legend> \u3067\u30B0\u30EB\u30FC\u30D7\u540D\u3092\u4E0E\u3048\u3066\u3044\u308B",
1731
- "Tab \u3067\u30B0\u30EB\u30FC\u30D7\u306B\u5165\u308A\u3001\u77E2\u5370\u30AD\u30FC\u3067\u79FB\u52D5\uFF06\u9078\u629E\u3067\u304D\u308B",
1732
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
1733
- '\u81EA\u4F5C\u3059\u308B\u5834\u5408\u306E\u307F role="radiogroup" / role="radio" / aria-checked / \u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\u3092\u5B9F\u88C5'
1589
+ '\u30C8\u30EA\u30AC\u30FC\u306F <button> \u3067 aria-haspopup="menu" + aria-expanded + aria-controls',
1590
+ '\u30E1\u30CB\u30E5\u30FC\u306F role="menu"\u3001\u9805\u76EE\u306F role="menuitem" + tabindex="-1"',
1591
+ "\u30AF\u30EA\u30C3\u30AF / Enter / Space / \u2193 \u3067\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B",
1592
+ "\u30E1\u30CB\u30E5\u30FC\u5185\u306F \u2191\u2193 \u3067\u79FB\u52D5\u3001Home/End \u3067\u7AEF\u3078",
1593
+ "Enter/Space \u3067\u9805\u76EE\u3092\u5B9F\u884C\u3057\u3001\u9589\u3058\u3066\u30C8\u30EA\u30AC\u30FC\u3078\u623B\u308B",
1594
+ "Esc \u3067\u9589\u3058\u3066\u30C8\u30EA\u30AC\u30FC\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059",
1595
+ "\u30E1\u30CB\u30E5\u30FC\u306E\u5916\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u305F\u3089\u9589\u3058\u308B",
1596
+ "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1734
1597
  ],
1735
1598
  antipatterns: [
1736
1599
  {
1737
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
1738
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3082\u52B9\u304B\u306A\u3044\u3002"
1600
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u958B\u3051\u306A\u3044",
1601
+ why: "div \u30C8\u30EA\u30AC\u30FC\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u53EF\u3002\u2193/Enter \u3082\u52B9\u304B\u306A\u3044\u3002"
1739
1602
  },
1740
1603
  {
1741
- title: "\u30B0\u30EB\u30FC\u30D7\u3060\u3068\u4F1D\u308F\u3089\u306A\u3044",
1742
- why: 'role="radiogroup" \u3082 <fieldset> \u3082\u306A\u304F\u3001\u9078\u629E\u80A2\u306E\u96C6\u307E\u308A\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
1604
+ title: "hover \u4F9D\u5B58",
1605
+ why: "\u30DE\u30A6\u30B9\u304C\u4F7F\u3048\u306A\u3044\u4EBA\u30FB\u30BF\u30C3\u30C1\u74B0\u5883\u3067\u7834\u7DBB\u3057\u3001\u30DE\u30A6\u30B9\u3092\u5916\u3059\u3068\u9589\u3058\u3066\u3057\u307E\u3046\u3002"
1743
1606
  },
1744
1607
  {
1745
- title: "\u300C1\u3064\u3060\u3051\u9078\u629E\u300D\u304C\u4F1D\u308F\u3089\u306A\u3044",
1746
- why: 'role="radio" / aria-checked \u304C\u306A\u304F\u3001\u72B6\u614B\u3082\u4F4D\u7F6E\u3082\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002'
1608
+ title: "\u5F79\u5272\u3068\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
1609
+ why: 'aria-haspopup/aria-expanded/role="menu" \u304C\u306A\u3044\u3002'
1747
1610
  },
1748
1611
  {
1749
- title: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u30E9\u30B8\u30AA\u4EE3\u308F\u308A\u306B\u4F7F\u3046",
1750
- why: "\u8907\u6570\u9078\u3079\u3066\u3057\u307E\u3044\u3001\u300C1\u3064\u3060\u3051\u300D\u3068\u3044\u3046\u610F\u5473\u304C\u9006\u306B\u306A\u308B\u3002"
1612
+ title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u306A\u3044",
1613
+ why: "Esc \u3067\u9589\u3058\u3089\u308C\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u3069\u3053\u306B\u3044\u308B\u304B\u898B\u5931\u3046\u3002"
1751
1614
  }
1752
1615
  ],
1753
1616
  notes: [
1754
- "\u30E9\u30B8\u30AA\u30B0\u30EB\u30FC\u30D7\u3067\u306F Tab \u306F\u30B0\u30EB\u30FC\u30D7\u5168\u4F53\u30671\u56DE\u3060\u3051\u6B62\u307E\u308A\u307E\u3059\uFF08\u9078\u629E\u80A2\u3054\u3068\u306B\u306F\u6B62\u307E\u3089\u306A\u3044\uFF09\u3002\u30B0\u30EB\u30FC\u30D7\u5185\u306E\u79FB\u52D5\u306F\u77E2\u5370\u30AD\u30FC\u306E\u5F79\u5272\u3067\u3059\u3002",
1755
- '<input type="radio"> \u3092\u540C\u3058 name \u3067\u307E\u3068\u3081\u308B\u3060\u3051\u3067\u3001\u77E2\u5370\u30AD\u30FC\u79FB\u52D5\u30FB1\u3064\u3060\u3051\u9078\u629E\u30FBTab \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u3059\u3079\u3066\u81EA\u52D5\u3067\u5F97\u3089\u308C\u307E\u3059\u3002'
1617
+ "\u958B\u3044\u305F\u3089\u6700\u521D\u306E\u9805\u76EE\u3078\u3001Esc \u3067\u9589\u3058\u305F\u3089\u30DC\u30BF\u30F3\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u623B\u3059\u3053\u3068\u3067\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u300C\u4ECA\u3069\u3053\u306B\u3044\u308B\u304B\u300D\u3092\u898B\u5931\u308F\u306A\u3044\u3002"
1756
1618
  ]
1757
1619
  };
1758
- var switchPattern = {
1759
- slug: "switch",
1620
+ var menuMenubar = {
1621
+ slug: "menu-menubar",
1760
1622
  keyboard: [
1761
1623
  {
1762
1624
  keys: "Tab",
1763
- action: "\u6B21 / \u524D\u306E\u30B9\u30A4\u30C3\u30C1\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
1625
+ action: "\u30E1\u30CB\u30E5\u30FC\u30D0\u30FC\u306B\u5165\u308B\uFF0F\u51FA\u308B\uFF08\u30D0\u30FC\u5168\u4F53\u30671\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
1764
1626
  requirement: "required"
1765
1627
  },
1766
1628
  {
1767
- keys: "Space",
1768
- action: "\u30AA\u30F3 / \u30AA\u30D5\u3092\u5207\u308A\u66FF\u3048\u308B",
1629
+ keys: "\u2190 / \u2192\uFF08\u30D0\u30FC\u4E0A\uFF09",
1630
+ action: "\u524D / \u6B21\u306E\u30E1\u30CB\u30E5\u30FC\u3078\u79FB\u52D5",
1769
1631
  requirement: "required"
1770
1632
  },
1771
1633
  {
1772
- keys: "Enter",
1773
- action: "\u30AA\u30F3 / \u30AA\u30D5\u3092\u5207\u308A\u66FF\u3048\u308B",
1634
+ keys: "\u2193 / Enter / Space\uFF08\u30D0\u30FC\u4E0A\uFF09",
1635
+ action: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304D\u3001\u6700\u521D\u306E\u9805\u76EE\u3078",
1774
1636
  requirement: "required"
1775
- }
1776
- ],
1777
- aria: [
1778
- {
1779
- target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
1780
- attr: '<button> + role="switch"',
1781
- meaning: "\u300C\u30B9\u30A4\u30C3\u30C1\u300D\u3068\u3057\u3066\u8A8D\u8B58\u3055\u305B\u308B\u3002\u30D9\u30FC\u30B9\u304C button \u306A\u306E\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30AD\u30FC\u64CD\u4F5C\u304C\u81EA\u52D5\u3002"
1782
- },
1783
- {
1784
- target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
1785
- attr: 'aria-checked="true | false"',
1786
- meaning: "\u30AA\u30F3 / \u30AA\u30D5\u306E\u72B6\u614B\u3002\u5207\u308A\u66FF\u3048\u308B\u305F\u3073\u306B\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1787
1637
  },
1788
1638
  {
1789
- target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
1790
- attr: "aria-labelledby \u307E\u305F\u306F aria-label",
1791
- meaning: "\u300C\u4F55\u306E\u300D\u30B9\u30A4\u30C3\u30C1\u304B\u3068\u3044\u3046\u540D\u524D\u3092\u4E0E\u3048\u308B\u3002"
1639
+ keys: "\u2191 / \u2193\uFF08\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1640
+ action: "\u524D / \u6B21\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1641
+ requirement: "required"
1792
1642
  },
1793
1643
  {
1794
- target: "\u98FE\u308A\u306E\u4E38\uFF08thumb\uFF09",
1795
- attr: 'aria-hidden="true"',
1796
- meaning: "\u898B\u305F\u76EE\u3060\u3051\u306E\u8981\u7D20\u3092\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u9664\u5916\u3059\u308B\u3002"
1797
- }
1798
- ],
1799
- checklist: [
1800
- '\u30B9\u30A4\u30C3\u30C1\u672C\u4F53\u306F <button> \u30D9\u30FC\u30B9\uFF08\u307E\u305F\u306F <input type="checkbox">\uFF09',
1801
- 'role="switch" \u304C\u4ED8\u3044\u3066\u3044\u308B\uFF08button \u30D9\u30FC\u30B9\u306E\u5834\u5408\uFF09',
1802
- "aria-checked \u304C\u30AA\u30F3/\u30AA\u30D5\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1803
- "aria-labelledby / aria-label \u3067\u540D\u524D\u3092\u4E0E\u3048\u3066\u3044\u308B",
1804
- '\u98FE\u308A\u306E\u3064\u307E\u307F\u306F aria-hidden="true"',
1805
- "Enter / Space \u3067\u5207\u308A\u66FF\u3048\u3089\u308C\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
1806
- "\u72B6\u614B\u3092\u8272\u3060\u3051\u3067\u306A\u304F\u4F4D\u7F6E\u30FB\u30E9\u30D9\u30EB\u3067\u3082\u533A\u5225\u3067\u304D\u308B"
1807
- ],
1808
- antipatterns: [
1809
- {
1810
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
1811
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u5207\u308A\u66FF\u3048\u3089\u308C\u306A\u3044\u3002"
1644
+ keys: "\u2190 / \u2192\uFF08\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u5185\uFF09",
1645
+ action: "\u73FE\u5728\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3001\u96A3\u306E\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F",
1646
+ requirement: "recommended"
1812
1647
  },
1813
1648
  {
1814
- title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
1815
- why: 'role="switch" \u304C\u7121\u304F\u300C\u30B9\u30A4\u30C3\u30C1\u300D\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
1649
+ keys: "Home / End",
1650
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\u9805\u76EE\u3078\u79FB\u52D5",
1651
+ requirement: "optional"
1816
1652
  },
1817
1653
  {
1818
- title: "\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
1819
- why: "aria-checked \u304C\u7121\u304F\u3001\u30AA\u30F3/\u30AA\u30D5\u304C\u652F\u63F4\u6280\u8853\u306B\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
1654
+ keys: "Enter / Space\uFF08\u9805\u76EE\u4E0A\uFF09",
1655
+ action: "\u30B3\u30DE\u30F3\u30C9\u3092\u5B9F\u884C\u3057\u3066\u9589\u3058\u308B",
1656
+ requirement: "required"
1820
1657
  },
1821
1658
  {
1822
- title: "\u540D\u524D\u304C\u7121\u3044",
1823
- why: "\u4F55\u306E\u30B9\u30A4\u30C3\u30C1\u304B\u304C aria-labelledby / aria-label \u3067\u95A2\u9023\u4ED8\u3051\u3089\u308C\u3066\u3044\u306A\u3044\u3002"
1659
+ keys: "Esc",
1660
+ action: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u3001\u89AA\u306E\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3078\u623B\u308B",
1661
+ requirement: "required"
1824
1662
  }
1825
1663
  ],
1826
- notes: [
1827
- "<button> \u3092\u30D9\u30FC\u30B9\u306B\u3059\u308B\u3068 Enter \u3068 Space \u306E\u4E21\u65B9\u304C\u81EA\u52D5\u3067\u52B9\u304D\u307E\u3059\u3002click \u30CF\u30F3\u30C9\u30E9\u3067 aria-checked \u3092\u53CD\u8EE2\u3059\u308B\u3060\u3051\u3067\u3059\u3002",
1828
- "\u72B6\u614B\u3092\u8272\u3060\u3051\u3067\u793A\u3059\u306E\u3082\u907F\u3051\u307E\u3057\u3087\u3046\u3002\u3064\u307E\u307F\u306E\u4F4D\u7F6E\u3084 ON/OFF \u306E\u30E9\u30D9\u30EB\u306A\u3069\u3001\u8272\u4EE5\u5916\u306E\u624B\u304C\u304B\u308A\u3082\u4F75\u7528\u3057\u307E\u3059\u3002"
1829
- ]
1830
- };
1831
- var combobox = {
1832
- slug: "combobox",
1833
- keyboard: [
1664
+ aria: [
1834
1665
  {
1835
- keys: "\u6587\u5B57\u5165\u529B",
1836
- action: "\u5019\u88DC\u3092\u7D5E\u308A\u8FBC\u307F\u3001\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u958B\u304F",
1837
- requirement: "required"
1666
+ target: "\u30D0\u30FC\u306E\u7BB1",
1667
+ attr: 'role="menubar" + aria-label',
1668
+ meaning: "\u6C34\u5E73\u306E\u30E1\u30CB\u30E5\u30FC\u30D0\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\u3002"
1838
1669
  },
1839
1670
  {
1840
- keys: "\u2193",
1841
- action: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u958B\u304F / \u6B21\u306E\u5019\u88DC\u3078\u30CF\u30A4\u30E9\u30A4\u30C8\u79FB\u52D5",
1842
- requirement: "required"
1671
+ target: "\u30D0\u30FC\u306E\u5404\u9805\u76EE",
1672
+ attr: 'role="menuitem" + aria-haspopup="menu"',
1673
+ meaning: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u958B\u304F\u30E1\u30CB\u30E5\u30FC\u9805\u76EE\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002"
1843
1674
  },
1844
1675
  {
1845
- keys: "\u2191",
1846
- action: "\u524D\u306E\u5019\u88DC\u3078\u30CF\u30A4\u30E9\u30A4\u30C8\u79FB\u52D5",
1847
- requirement: "required"
1676
+ target: "\u30D0\u30FC\u306E\u5404\u9805\u76EE",
1677
+ attr: 'aria-expanded + tabindex="0 | -1"',
1678
+ meaning: "\u958B\u9589\u72B6\u614B\u3068 roving tabindex\uFF081\u3064\u3060\u3051 0\uFF09\u3002"
1848
1679
  },
1849
1680
  {
1850
- keys: "Enter",
1851
- action: "\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306E\u5019\u88DC\u3092\u78BA\u5B9A\u3057\u3066\u9589\u3058\u308B",
1852
- requirement: "required"
1681
+ target: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1682
+ attr: 'role="menu" + aria-label',
1683
+ meaning: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\u3002"
1853
1684
  },
1854
1685
  {
1855
- keys: "Esc",
1856
- action: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u9589\u3058\u308B\uFF08\u958B\u3044\u3066\u3044\u306A\u3051\u308C\u3070\u5165\u529B\u3092\u30AF\u30EA\u30A2\uFF09",
1857
- requirement: "required"
1686
+ target: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u306E\u9805\u76EE",
1687
+ attr: 'role="menuitem" + tabindex="-1"',
1688
+ meaning: "\u30B3\u30DE\u30F3\u30C9\u9805\u76EE\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u306F JS \u3067\u7BA1\u7406\uFF08roving\uFF09\u3002"
1858
1689
  },
1859
1690
  {
1860
- keys: "Home / End",
1861
- action: "\u5165\u529B\u6B04\u5185\u306E\u30AB\u30FC\u30BD\u30EB\u79FB\u52D5\uFF08\u30C6\u30AD\u30B9\u30C8\u64CD\u4F5C\u306F\u305D\u306E\u307E\u307E\uFF09",
1862
- requirement: "optional"
1691
+ target: "\u9589\u3058\u305F\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1692
+ attr: "hidden",
1693
+ meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
1863
1694
  }
1864
1695
  ],
1865
- aria: [
1696
+ checklist: [
1697
+ "\u7528\u9014\u304C\u30A2\u30D7\u30EA\u306E\u30B3\u30DE\u30F3\u30C9\u3067\u3042\u308B\u3053\u3068\u3092\u78BA\u8A8D\u3057\u305F\uFF08\u30B5\u30A4\u30C8\u30CA\u30D3\u306B\u306F\u4F7F\u308F\u306A\u3044\uFF09",
1698
+ '\u30D0\u30FC\u306F role="menubar" + aria-label\u3001\u9805\u76EE\u306F role="menuitem"',
1699
+ '\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u3092\u6301\u3064\u9805\u76EE\u306B aria-haspopup="menu" + aria-expanded',
1700
+ "\u30D0\u30FC\u306F roving tabindex \u30671\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3001\u2190 \u2192 \u3067\u79FB\u52D5",
1701
+ '\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u306F role="menu"\u3001\u9805\u76EE\u306F tabindex="-1"',
1702
+ "\u2193/Enter \u3067\u958B\u304D\u5148\u982D\u3078\u3001\u2191\u2193 \u3067\u79FB\u52D5\u3001Home/End \u3067\u7AEF\u3078",
1703
+ "Esc \u3067\u9589\u3058\u3066\u89AA\u9805\u76EE\u3078\u623B\u3059\u3001\u2190 \u2192 \u3067\u96A3\u306E\u30E1\u30CB\u30E5\u30FC\u3078\u79FB\u308C\u308B",
1704
+ "hover \u4F9D\u5B58\u306B\u305B\u305A\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1705
+ ],
1706
+ antipatterns: [
1866
1707
  {
1867
- target: "\u5165\u529B\u6B04",
1868
- attr: 'role="combobox"',
1869
- meaning: "\u30C6\u30AD\u30B9\u30C8\u5165\u529B\uFF0B\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u3092\u6301\u3064\u8907\u5408\u30A6\u30A3\u30B8\u30A7\u30C3\u30C8\u3060\u3068\u793A\u3059\u3002"
1708
+ title: '\u30B5\u30A4\u30C8\u30CA\u30D3\u306B role="menubar" \u3092\u4F7F\u3046',
1709
+ why: "\u30DA\u30FC\u30B8\u79FB\u52D5\u306E\u30EA\u30F3\u30AF\u96C6\u306B menubar/menu \u3092\u4ED8\u3051\u308B\u3068\u3001\u652F\u63F4\u6280\u8853\u306E\u6848\u5185\uFF08\u77E2\u5370\u3067\u64CD\u4F5C\u3059\u308B\u30B3\u30DE\u30F3\u30C9\uFF09\u3068\u5B9F\u4F53\uFF08\u30EA\u30F3\u30AF\uFF09\u304C\u98DF\u3044\u9055\u3044\u5229\u7528\u8005\u304C\u6DF7\u4E71\u3059\u308B\u3002"
1710
+ },
1711
+ {
1712
+ title: "hover \u4F9D\u5B58\u306E\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC",
1713
+ why: "\u30B5\u30D6\u30E1\u30CB\u30E5\u30FC\u304C\u30DE\u30A6\u30B9\u3067\u3057\u304B\u958B\u304B\u305A\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u30BF\u30C3\u30C1\u74B0\u5883\u3067\u7834\u7DBB\u3059\u308B\u3002"
1870
1714
  },
1871
1715
  {
1872
- target: "\u5165\u529B\u6B04",
1873
- attr: 'aria-expanded="true | false"',
1874
- meaning: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1716
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306E\u5B9F\u88C5\u306A\u3057",
1717
+ why: "\u2190\u2192/\u2191\u2193/Esc \u3082 roving tabindex \u3082\u306A\u304F\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
1718
+ }
1719
+ ],
1720
+ notes: [
1721
+ '\u30B5\u30A4\u30C8\u5185\u30EA\u30F3\u30AF\u306E\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306B role="menubar" \u3092\u4F7F\u3046\u306E\u304C\u6700\u3082\u3088\u304F\u3042\u308B\u8AA4\u308A\u3002\u30DA\u30FC\u30B8\u3078\u79FB\u52D5\u3059\u308B\u300C\u30EA\u30F3\u30AF\u96C6\u300D\u306F <nav> + <ul> + <a> \u3067\u4F5C\u308B\u3002'
1722
+ ]
1723
+ };
1724
+ var meter = {
1725
+ slug: "meter",
1726
+ // 表示専用(非インタラクティブ)なのでキーボード操作なし。
1727
+ keyboard: [],
1728
+ aria: [
1729
+ {
1730
+ target: "\u30CD\u30A4\u30C6\u30A3\u30D6 meter",
1731
+ attr: "<meter min max value> + <label for>",
1732
+ meaning: "role\u30FB\u5024\u30FB\u7BC4\u56F2\u306F\u81EA\u52D5\u3002label \u3067\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
1875
1733
  },
1876
1734
  {
1877
- target: "\u5165\u529B\u6B04",
1878
- attr: 'aria-controls="\u30EA\u30B9\u30C8\u306Eid"',
1879
- meaning: "\u3069\u306E\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\uFF08listbox\uFF09\u3092\u5236\u5FA1\u3059\u308B\u304B\u3092\u793A\u3059\u3002"
1735
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1736
+ attr: 'role="meter"',
1737
+ meaning: "\u300C\u8A08\u6E2C\u5024\u306E\u8868\u793A\u3067\u3042\u308B\u300D\u3068\u652F\u63F4\u6280\u8853\u3078\u4F1D\u3048\u308B\u3002"
1880
1738
  },
1881
1739
  {
1882
- target: "\u5165\u529B\u6B04",
1883
- attr: 'aria-activedescendant="\u5019\u88DC\u306Eid"',
1884
- meaning: "\u3044\u307E\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306E option \u3092\u6307\u3059\u3002\u79FB\u52D5\u306E\u305F\u3073\u306B\u66F4\u65B0\u3001\u9589\u3058\u305F\u3089\u5916\u3059\u3002"
1740
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1741
+ attr: "aria-valuemin / aria-valuemax",
1742
+ meaning: "\u7BC4\u56F2\uFF08\u6700\u5C0F\u30FB\u6700\u5927\uFF09\u3002\u65E2\u77E5\u306E\u7BC4\u56F2\u3067\u3042\u308B\u3053\u3068\u304C meter \u306E\u524D\u63D0\u3002"
1885
1743
  },
1886
1744
  {
1887
- target: "\u5165\u529B\u6B04",
1888
- attr: 'aria-autocomplete="list"',
1889
- meaning: "\u5165\u529B\u306B\u5FDC\u3058\u3066\u30EA\u30B9\u30C8\u3067\u88DC\u5B8C\u3055\u308C\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
1745
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1746
+ attr: "aria-valuenow",
1747
+ meaning: "\u73FE\u5728\u5024\u3002\u5024\u304C\u5909\u308F\u3063\u305F\u3089\u66F4\u65B0\u3059\u308B\uFF08\u30E6\u30FC\u30B6\u30FC\u64CD\u4F5C\u3067\u306F\u306A\u304F\u30D7\u30ED\u30B0\u30E9\u30E0\u304B\u3089\uFF09\u3002"
1890
1748
  },
1891
1749
  {
1892
- target: "\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7",
1893
- attr: 'role="listbox" + \u540D\u524D',
1894
- meaning: "\u5019\u88DC\u306E\u96C6\u307E\u308A\u3002aria-labelledby \u7B49\u3067\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
1750
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1751
+ attr: "aria-valuetext",
1752
+ meaning: "\u300C72%\u300D\u300C\u6B8B\u308A 28%\u300D\u306A\u3069\u4EBA\u306B\u308F\u304B\u308B\u8868\u73FE\u3092\u88DC\u3046\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
1895
1753
  },
1896
1754
  {
1897
- target: "\u5404\u5019\u88DC",
1898
- attr: 'role="option" + \u4E00\u610F\u306E id + aria-selected',
1899
- meaning: '1\u3064\u306E\u5019\u88DC\u3002\u30CF\u30A4\u30E9\u30A4\u30C8\u4E2D\u306F aria-selected="true"\u3002'
1755
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1756
+ attr: "aria-label / aria-labelledby",
1757
+ meaning: "\u4F55\u306E\u30E1\u30FC\u30BF\u30FC\u304B\uFF08\u300C\u30C7\u30A3\u30B9\u30AF\u4F7F\u7528\u7387\u300D\uFF09\u306E\u540D\u524D\u3002"
1900
1758
  },
1901
1759
  {
1902
- target: "\u30E9\u30A4\u30D6\u9818\u57DF",
1903
- attr: 'aria-live="polite"',
1904
- meaning: "\u300C\u25CB\u4EF6\u306E\u5019\u88DC\u300D\u306A\u3069\u4EF6\u6570\u306E\u5909\u5316\u3092\u8AAD\u307F\u4E0A\u3052\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
1760
+ target: "\u81EA\u4F5C\u306E\u672C\u4F53",
1761
+ attr: "tabindex \u306A\u3057",
1762
+ meaning: '\u8868\u793A\u5C02\u7528\u306A\u306E\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u8981\u3002role="slider" \u3068\u3082\u6DF7\u540C\u3057\u306A\u3044\u3002'
1905
1763
  }
1906
1764
  ],
1907
1765
  checklist: [
1908
- '\u5165\u529B\u6B04\u306B role="combobox" + aria-expanded + aria-controls \u304C\u3042\u308B',
1909
- '\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u306F role="listbox" > role="option"\uFF08option \u306B\u4E00\u610F\u306E id\uFF09',
1910
- "\u30CF\u30A4\u30E9\u30A4\u30C8\u306F aria-activedescendant + aria-selected \u3067\u8868\u3057\u3001\u79FB\u52D5\u306E\u305F\u3073\u306B\u66F4\u65B0",
1911
- "aria-expanded \u304C\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1912
- "\u2193 \u3067\u5019\u88DC\u3078\u3001\u2191\u2193 \u3067\u79FB\u52D5\u3001Enter \u78BA\u5B9A\u3001Esc \u3067\u9589\u3058\u308B",
1913
- "\u5165\u529B\u3067\u5019\u88DC\u304C\u7D5E\u308A\u8FBC\u307E\u308C\u3001\u4EF6\u6570\u3092 aria-live \u3067\u8AAD\u307F\u4E0A\u3052\u308B\uFF08\u63A8\u5968\uFF09",
1914
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5165\u529B\u6B04\u306B\u4FDD\u6301\u3057\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044"
1766
+ "\u300C\u9032\u6357\u300D\u3067\u306F\u306A\u304F\u300C\u65E2\u77E5\u306E\u7BC4\u56F2\u306E\u73FE\u5728\u91CF\u300D\u3060\u3068\u78BA\u8A8D\u3057\u305F\uFF08progressbar \u3068\u53D6\u308A\u9055\u3048\u3066\u3044\u306A\u3044\uFF09",
1767
+ "\u307E\u305A\u30CD\u30A4\u30C6\u30A3\u30D6 <meter> \u3092\u691C\u8A0E\u3057\u305F\uFF08\u6700\u512A\u5148\uFF09",
1768
+ "\u30E1\u30FC\u30BF\u30FC\u306B\u540D\u524D\u304C\u3042\u308B\uFF08<label for> \u307E\u305F\u306F aria-label(ledby)\uFF09",
1769
+ '\u81EA\u4F5C\u6642\u306F role="meter" + aria-valuemin/max/now \u304C\u3042\u308B',
1770
+ "\u5024\u304C\u5909\u308F\u3063\u305F\u3089 aria-valuenow\uFF08\u3068 aria-valuetext\uFF09\u3092\u66F4\u65B0\u3057\u3066\u3044\u308B",
1771
+ "\u8868\u793A\u5C02\u7528\u306A\u306E\u3067 tabindex \u3092\u4ED8\u3051\u3066\u3044\u306A\u3044\uFF08\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306F\u7121\u3044\uFF09",
1772
+ "\u72B6\u614B\u3092\u8272\u3060\u3051\u306B\u983C\u3089\u305A\u3001\u6570\u5024\u3084\u30C6\u30AD\u30B9\u30C8\u3067\u3082\u4F1D\u3048\u3066\u3044\u308B"
1915
1773
  ],
1916
1774
  antipatterns: [
1917
1775
  {
1918
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u5019\u88DC\u3092\u9078\u3079\u306A\u3044",
1919
- why: "\u5019\u88DC\u304C div \u3067\u3001\u77E2\u5370\u30AD\u30FC\u3084\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u52B9\u304B\u306A\u3044\u3002"
1776
+ title: "\u5F79\u5272\u304C\u7121\u3044",
1777
+ why: 'role="meter" \u3082 <meter> \u3082\u7121\u304F\u3001\u8A08\u6E2C\u5024\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
1920
1778
  },
1921
1779
  {
1922
- title: "\u30ED\u30FC\u30EB\u30FB\u72B6\u614B\u304C\u7121\u3044",
1923
- why: 'role="combobox" / aria-expanded / aria-controls \u304C\u306A\u304F\u3001\u958B\u9589\u3082\u95A2\u4FC2\u3082\u4F1D\u308F\u3089\u306A\u3044\u3002'
1780
+ title: "\u5024\u30FB\u7BC4\u56F2\u304C\u4F1D\u308F\u3089\u306A\u3044",
1781
+ why: "aria-valuenow / valuemin / valuemax \u304C\u7121\u304F\u300C72%\u300D\u304C\u8AAD\u307E\u308C\u306A\u3044\u3002"
1924
1782
  },
1925
1783
  {
1926
- title: "\u30CF\u30A4\u30E9\u30A4\u30C8\u304C\u4F1D\u308F\u3089\u306A\u3044",
1927
- why: "aria-activedescendant / aria-selected \u304C\u306A\u304F\u3001\u3069\u308C\u3092\u6307\u3057\u3066\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
1784
+ title: "\u540D\u524D\u304C\u7D50\u3073\u3064\u3044\u3066\u3044\u306A\u3044",
1785
+ why: "\u30D0\u30FC\u3068\u300C\u30C7\u30A3\u30B9\u30AF\u4F7F\u7528\u7387\u300D\u304C\u95A2\u9023\u4ED8\u3051\u3089\u308C\u3066\u3044\u306A\u3044\u3002"
1928
1786
  },
1929
1787
  {
1930
- title: "\u4EF6\u6570\u304C\u4F1D\u308F\u3089\u306A\u3044",
1931
- why: "aria-live \u304C\u306A\u304F\u3001\u300C\u25CB\u4EF6\u306E\u5019\u88DC\u300D\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
1788
+ title: "\u8272\u3060\u3051\u306B\u4F9D\u5B58",
1789
+ why: "\u6570\u5024\u3084\u30C6\u30AD\u30B9\u30C8\u306E\u4F75\u8A18\u304C\u7121\u304F\u3001\u8272\u304C\u898B\u3048\u306A\u3044\u4EBA\u306B\u4F1D\u308F\u3089\u306A\u3044\u3002"
1932
1790
  }
1933
1791
  ],
1934
1792
  notes: [
1935
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u5165\u529B\u6B04\u306B\u7F6E\u3044\u305F\u307E\u307E\u52D5\u304B\u3057\u307E\u305B\u3093\u3002aria-activedescendant \u3067\u300C\u3044\u307E\u3069\u306E\u5019\u88DC\u3092\u30CF\u30A4\u30E9\u30A4\u30C8\u3057\u3066\u3044\u308B\u304B\u300D\u3060\u3051\u3092\u4F1D\u3048\u307E\u3059\u3002\u3053\u3046\u3059\u308B\u3068\u3001\u5165\u529B\u3092\u7D9A\u3051\u306A\u304C\u3089\u5019\u88DC\u3092\u9078\u3079\u307E\u3059\u3002"
1793
+ "\u30E1\u30FC\u30BF\u30FC\u306F\u8868\u793A\u5C02\u7528\u30FB\u975E\u30A4\u30F3\u30BF\u30E9\u30AF\u30C6\u30A3\u30D6\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u3082 tabindex \u3082\u4E0D\u8981\u3067\u3001\u5024\u304C\u5909\u308F\u3063\u305F\u3089 aria-valuenow \u3068 aria-valuetext \u3092\u66F4\u65B0\u3059\u308B\u3060\u3051\u3067\u3088\u3044\u3002",
1794
+ "progressbar \u3068\u306E\u4F7F\u3044\u5206\u3051\uFF1Ameter \u306F\u300C\u65E2\u77E5\u306E\u7BC4\u56F2\u306E\u73FE\u5728\u91CF\uFF08\u4F8B\uFF1A\u30C7\u30A3\u30B9\u30AF 72%\uFF09\u300D\u3001progressbar \u306F\u300C\u5B8C\u4E86\u306B\u5411\u304B\u3063\u3066\u9032\u3080\u9032\u6357\uFF08\u4F8B\uFF1A\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9\u4E2D\uFF09\u300D\u3002"
1936
1795
  ]
1937
1796
  };
1938
- var listbox = {
1939
- slug: "listbox",
1797
+ var radioGroup = {
1798
+ slug: "radio-group",
1940
1799
  keyboard: [
1941
1800
  {
1942
1801
  keys: "Tab",
1943
- action: "\u30EA\u30B9\u30C8\u30DC\u30C3\u30AF\u30B9\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5F53\u3066\u308B / \u5916\u3059",
1802
+ action: "\u30B0\u30EB\u30FC\u30D7\u306B\u5165\u308B / \u30B0\u30EB\u30FC\u30D7\u304B\u3089\u51FA\u308B\uFF08\u9078\u629E\u4E2D\u306E\u9805\u76EE\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\uFF09",
1944
1803
  requirement: "required"
1945
1804
  },
1946
1805
  {
1947
- keys: "\u2193 / \u2191",
1948
- action: "\u6B21 / \u524D\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\uFF08\u79FB\u52D5\u306B\u5408\u308F\u305B\u3066\u9078\u629E\u3092\u66F4\u65B0\uFF09",
1806
+ keys: "\u2193 / \u2192",
1807
+ action: "\u6B21\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\u3057\u3066\u9078\u629E\u3059\u308B",
1949
1808
  requirement: "required"
1950
1809
  },
1951
1810
  {
1952
- keys: "Home / End",
1953
- action: "\u6700\u521D / \u6700\u5F8C\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5",
1954
- requirement: "recommended"
1811
+ keys: "\u2191 / \u2190",
1812
+ action: "\u524D\u306E\u9078\u629E\u80A2\u3078\u79FB\u52D5\u3057\u3066\u9078\u629E\u3059\u308B",
1813
+ requirement: "required"
1814
+ },
1815
+ {
1816
+ keys: "Space",
1817
+ action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u9078\u629E\u80A2\u3092\u9078\u629E\u3059\u308B",
1818
+ requirement: "required"
1955
1819
  }
1956
1820
  ],
1957
1821
  aria: [
1958
1822
  {
1959
- target: "\u30B3\u30F3\u30C6\u30CA",
1960
- attr: 'role="listbox"',
1961
- meaning: "\u300C\u9078\u3079\u308B\u9805\u76EE\u306E\u96C6\u307E\u308A\u300D\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
1962
- },
1963
- {
1964
- target: "\u30B3\u30F3\u30C6\u30CA",
1965
- attr: "aria-labelledby\uFF08\u307E\u305F\u306F aria-label\uFF09",
1966
- meaning: "\u30EA\u30B9\u30C8\u30DC\u30C3\u30AF\u30B9\u306E\u540D\u524D\u3092\u4E0E\u3048\u308B\u3002"
1967
- },
1968
- {
1969
- target: "\u30B3\u30F3\u30C6\u30CA",
1970
- attr: 'tabindex="0" + aria-activedescendant',
1971
- meaning: "\u30EA\u30B9\u30C8\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u7F6E\u304D\u3001\u73FE\u5728\u4F4D\u7F6E\u306E option id \u3092\u6307\u3059\uFF08activedescendant \u65B9\u5F0F\uFF09\u3002"
1823
+ target: "\u5404\u9078\u629E\u80A2",
1824
+ attr: '<input type="radio"> + \u540C\u3058 name',
1825
+ meaning: "radio \u30ED\u30FC\u30EB\u30FB\u300C1\u3064\u3060\u3051\u9078\u629E\u300D\u30FB\u77E2\u5370\u30AD\u30FC\u64CD\u4F5C\u304C\u81EA\u52D5\u3067\u4ED8\u304F\u3002"
1972
1826
  },
1973
1827
  {
1974
- target: "\u5404\u9805\u76EE",
1975
- attr: 'role="option" + \u4E00\u610F\u306E id',
1976
- meaning: "1\u3064\u306E\u9078\u629E\u80A2\u3002id \u306F aria-activedescendant \u304B\u3089\u53C2\u7167\u3055\u308C\u308B\u3002"
1828
+ target: "\u30E9\u30D9\u30EB",
1829
+ attr: "<label>",
1830
+ meaning: "\u5404\u9078\u629E\u80A2\u306E\u540D\u524D\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u9078\u629E\u3067\u304D\u308B\u3002"
1977
1831
  },
1978
1832
  {
1979
- target: "\u5404\u9805\u76EE",
1980
- attr: 'aria-selected="true | false"',
1981
- meaning: "\u9078\u629E\u72B6\u614B\u3002\u9078\u629E\u306E\u5909\u5316\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
1833
+ target: "\u30B0\u30EB\u30FC\u30D7",
1834
+ attr: "<fieldset> + <legend>",
1835
+ meaning: "\u9078\u629E\u80A2\u3092\u307E\u3068\u3081\u3001\u30B0\u30EB\u30FC\u30D7\u540D\uFF08\u8CEA\u554F\u6587\uFF09\u3092\u4E0E\u3048\u308B\u3002"
1982
1836
  }
1983
1837
  ],
1984
1838
  checklist: [
1985
- '\u30B3\u30F3\u30C6\u30CA\u306B role="listbox" \u3068\u540D\u524D\uFF08aria-labelledby \u7B49\uFF09\u304C\u3042\u308B',
1986
- '\u5404\u9805\u76EE\u306F role="option" + \u4E00\u610F\u306E id \u3092\u6301\u3064',
1987
- "aria-selected \u304C\u9078\u629E\u72B6\u614B\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
1988
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u3042\u308B\uFF08aria-activedescendant \u307E\u305F\u306F\u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\uFF09",
1989
- "\u2191\u2193 \u3067\u79FB\u52D5\u3067\u304D\u3001Home / End \u3082\u4F7F\u3048\u308B\uFF08\u63A8\u5968\uFF09",
1990
- "\u30AF\u30EA\u30C3\u30AF\u3067\u3082\u9078\u629E\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B"
1839
+ '\u5404\u9078\u629E\u80A2\u306F <input type="radio"> \u3067\u3042\u308B',
1840
+ "\u30B0\u30EB\u30FC\u30D7\u5185\u306E\u30E9\u30B8\u30AA\u306F\u540C\u3058 name \u3092\u5171\u6709\u3057\u3066\u3044\u308B",
1841
+ "<label> \u3068\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B\uFF08\u5185\u5305 or for/id\uFF09",
1842
+ "<fieldset> + <legend> \u3067\u30B0\u30EB\u30FC\u30D7\u540D\u3092\u4E0E\u3048\u3066\u3044\u308B",
1843
+ "Tab \u3067\u30B0\u30EB\u30FC\u30D7\u306B\u5165\u308A\u3001\u77E2\u5370\u30AD\u30FC\u3067\u79FB\u52D5\uFF06\u9078\u629E\u3067\u304D\u308B",
1844
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09",
1845
+ '\u81EA\u4F5C\u3059\u308B\u5834\u5408\u306E\u307F role="radiogroup" / role="radio" / aria-checked / \u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\u3092\u5B9F\u88C5'
1991
1846
  ],
1992
1847
  antipatterns: [
1993
1848
  {
1994
1849
  title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
1995
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3082\u52B9\u304B\u306A\u3044\u3002"
1850
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3082\u52B9\u304B\u306A\u3044\u3002"
1996
1851
  },
1997
1852
  {
1998
- title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
1999
- why: 'role="listbox"/role="option" \u304C\u306A\u304F\u300C\u9078\u3079\u308B\u4E00\u89A7\u300D\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
1853
+ title: "\u30B0\u30EB\u30FC\u30D7\u3060\u3068\u4F1D\u308F\u3089\u306A\u3044",
1854
+ why: 'role="radiogroup" \u3082 <fieldset> \u3082\u306A\u304F\u3001\u9078\u629E\u80A2\u306E\u96C6\u307E\u308A\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
2000
1855
  },
2001
1856
  {
2002
- title: "\u9078\u629E\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
2003
- why: "aria-selected \u304C\u306A\u304F\u3001\u3069\u308C\u304C\u9078\u3070\u308C\u3066\u3044\u308B\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
1857
+ title: "\u300C1\u3064\u3060\u3051\u9078\u629E\u300D\u304C\u4F1D\u308F\u3089\u306A\u3044",
1858
+ why: 'role="radio" / aria-checked \u304C\u306A\u304F\u3001\u72B6\u614B\u3082\u4F4D\u7F6E\u3082\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002'
2004
1859
  },
2005
1860
  {
2006
- title: "\u540D\u524D\u3082\u4F4D\u7F6E\u3082\u306A\u3044",
2007
- why: "\u30B0\u30EB\u30FC\u30D7\u540D\u3084\u300C\u4F55\u500B\u4E2D\u4F55\u500B\u76EE\u300D\u304C\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
1861
+ title: "\u30C1\u30A7\u30C3\u30AF\u30DC\u30C3\u30AF\u30B9\u3092\u30E9\u30B8\u30AA\u4EE3\u308F\u308A\u306B\u4F7F\u3046",
1862
+ why: "\u8907\u6570\u9078\u3079\u3066\u3057\u307E\u3044\u3001\u300C1\u3064\u3060\u3051\u300D\u3068\u3044\u3046\u610F\u5473\u304C\u9006\u306B\u306A\u308B\u3002"
2008
1863
  }
2009
1864
  ],
2010
1865
  notes: [
2011
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30EA\u30B9\u30C8\uFF08ul\uFF09\u306B\u7F6E\u3044\u305F\u307E\u307E\u3001\u300C\u3044\u307E\u3069\u306E option \u3092\u6307\u3057\u3066\u3044\u308B\u304B\u300D\u3060\u3051\u3092 aria-activedescendant \u5C5E\u6027\u3067\u4F1D\u3048\u308B\u65B9\u5F0F\uFF08activedescendant \u65B9\u5F0F\uFF09\u3068\u3001\u5404 option \u306B tabindex \u3092\u914D\u308B\u30ED\u30FC\u30D3\u30F3\u30B0\u30BF\u30D6\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9\u65B9\u5F0F\u306E2\u901A\u308A\u3067\u5B9F\u88C5\u3067\u304D\u308B\u3002"
1866
+ "\u30E9\u30B8\u30AA\u30B0\u30EB\u30FC\u30D7\u3067\u306F Tab \u306F\u30B0\u30EB\u30FC\u30D7\u5168\u4F53\u30671\u56DE\u3060\u3051\u6B62\u307E\u308A\u307E\u3059\uFF08\u9078\u629E\u80A2\u3054\u3068\u306B\u306F\u6B62\u307E\u3089\u306A\u3044\uFF09\u3002\u30B0\u30EB\u30FC\u30D7\u5185\u306E\u79FB\u52D5\u306F\u77E2\u5370\u30AD\u30FC\u306E\u5F79\u5272\u3067\u3059\u3002",
1867
+ '<input type="radio"> \u3092\u540C\u3058 name \u3067\u307E\u3068\u3081\u308B\u3060\u3051\u3067\u3001\u77E2\u5370\u30AD\u30FC\u79FB\u52D5\u30FB1\u3064\u3060\u3051\u9078\u629E\u30FBTab \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u3059\u3079\u3066\u81EA\u52D5\u3067\u5F97\u3089\u308C\u307E\u3059\u3002'
2012
1868
  ]
2013
1869
  };
2014
1870
  var slider = {
@@ -2300,77 +2156,144 @@ var spinbutton = {
2300
2156
  '<input type="number"> \u3092\u4F7F\u3048\u3070\u3001\u2191\u2193 \u3067\u306E\u5897\u6E1B\u30FB\u76F4\u63A5\u5165\u529B\u30FB\u8AAD\u307F\u4E0A\u3052\u306F\u3059\u3079\u3066\u30D6\u30E9\u30A6\u30B6\u304C\u81EA\u52D5\u3067\u63D0\u4F9B\u3059\u308B\u3002'
2301
2157
  ]
2302
2158
  };
2303
- var meter = {
2304
- slug: "meter",
2305
- // 表示専用(非インタラクティブ)なのでキーボード操作なし。
2306
- keyboard: [],
2159
+ var switchPattern = {
2160
+ slug: "switch",
2161
+ keyboard: [
2162
+ {
2163
+ keys: "Tab",
2164
+ action: "\u6B21 / \u524D\u306E\u30B9\u30A4\u30C3\u30C1\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2165
+ requirement: "required"
2166
+ },
2167
+ {
2168
+ keys: "Space",
2169
+ action: "\u30AA\u30F3 / \u30AA\u30D5\u3092\u5207\u308A\u66FF\u3048\u308B",
2170
+ requirement: "required"
2171
+ },
2172
+ {
2173
+ keys: "Enter",
2174
+ action: "\u30AA\u30F3 / \u30AA\u30D5\u3092\u5207\u308A\u66FF\u3048\u308B",
2175
+ requirement: "required"
2176
+ }
2177
+ ],
2307
2178
  aria: [
2308
2179
  {
2309
- target: "\u30CD\u30A4\u30C6\u30A3\u30D6 meter",
2310
- attr: "<meter min max value> + <label for>",
2311
- meaning: "role\u30FB\u5024\u30FB\u7BC4\u56F2\u306F\u81EA\u52D5\u3002label \u3067\u540D\u524D\u3092\u4ED8\u3051\u308B\u3002"
2180
+ target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
2181
+ attr: '<button> + role="switch"',
2182
+ meaning: "\u300C\u30B9\u30A4\u30C3\u30C1\u300D\u3068\u3057\u3066\u8A8D\u8B58\u3055\u305B\u308B\u3002\u30D9\u30FC\u30B9\u304C button \u306A\u306E\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30AD\u30FC\u64CD\u4F5C\u304C\u81EA\u52D5\u3002"
2312
2183
  },
2313
2184
  {
2314
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2315
- attr: 'role="meter"',
2316
- meaning: "\u300C\u8A08\u6E2C\u5024\u306E\u8868\u793A\u3067\u3042\u308B\u300D\u3068\u652F\u63F4\u6280\u8853\u3078\u4F1D\u3048\u308B\u3002"
2185
+ target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
2186
+ attr: 'aria-checked="true | false"',
2187
+ meaning: "\u30AA\u30F3 / \u30AA\u30D5\u306E\u72B6\u614B\u3002\u5207\u308A\u66FF\u3048\u308B\u305F\u3073\u306B\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
2317
2188
  },
2318
2189
  {
2319
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2320
- attr: "aria-valuemin / aria-valuemax",
2321
- meaning: "\u7BC4\u56F2\uFF08\u6700\u5C0F\u30FB\u6700\u5927\uFF09\u3002\u65E2\u77E5\u306E\u7BC4\u56F2\u3067\u3042\u308B\u3053\u3068\u304C meter \u306E\u524D\u63D0\u3002"
2190
+ target: "\u30B9\u30A4\u30C3\u30C1\u672C\u4F53",
2191
+ attr: "aria-labelledby \u307E\u305F\u306F aria-label",
2192
+ meaning: "\u300C\u4F55\u306E\u300D\u30B9\u30A4\u30C3\u30C1\u304B\u3068\u3044\u3046\u540D\u524D\u3092\u4E0E\u3048\u308B\u3002"
2322
2193
  },
2323
2194
  {
2324
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2325
- attr: "aria-valuenow",
2326
- meaning: "\u73FE\u5728\u5024\u3002\u5024\u304C\u5909\u308F\u3063\u305F\u3089\u66F4\u65B0\u3059\u308B\uFF08\u30E6\u30FC\u30B6\u30FC\u64CD\u4F5C\u3067\u306F\u306A\u304F\u30D7\u30ED\u30B0\u30E9\u30E0\u304B\u3089\uFF09\u3002"
2195
+ target: "\u98FE\u308A\u306E\u4E38\uFF08thumb\uFF09",
2196
+ attr: 'aria-hidden="true"',
2197
+ meaning: "\u898B\u305F\u76EE\u3060\u3051\u306E\u8981\u7D20\u3092\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u9664\u5916\u3059\u308B\u3002"
2198
+ }
2199
+ ],
2200
+ checklist: [
2201
+ '\u30B9\u30A4\u30C3\u30C1\u672C\u4F53\u306F <button> \u30D9\u30FC\u30B9\uFF08\u307E\u305F\u306F <input type="checkbox">\uFF09',
2202
+ 'role="switch" \u304C\u4ED8\u3044\u3066\u3044\u308B\uFF08button \u30D9\u30FC\u30B9\u306E\u5834\u5408\uFF09',
2203
+ "aria-checked \u304C\u30AA\u30F3/\u30AA\u30D5\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
2204
+ "aria-labelledby / aria-label \u3067\u540D\u524D\u3092\u4E0E\u3048\u3066\u3044\u308B",
2205
+ '\u98FE\u308A\u306E\u3064\u307E\u307F\u306F aria-hidden="true"',
2206
+ "Enter / Space \u3067\u5207\u308A\u66FF\u3048\u3089\u308C\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B",
2207
+ "\u72B6\u614B\u3092\u8272\u3060\u3051\u3067\u306A\u304F\u4F4D\u7F6E\u30FB\u30E9\u30D9\u30EB\u3067\u3082\u533A\u5225\u3067\u304D\u308B"
2208
+ ],
2209
+ antipatterns: [
2210
+ {
2211
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
2212
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u5207\u308A\u66FF\u3048\u3089\u308C\u306A\u3044\u3002"
2213
+ },
2214
+ {
2215
+ title: "\u5F79\u5272\u304C\u4F1D\u308F\u3089\u306A\u3044",
2216
+ why: 'role="switch" \u304C\u7121\u304F\u300C\u30B9\u30A4\u30C3\u30C1\u300D\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
2217
+ },
2218
+ {
2219
+ title: "\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
2220
+ why: "aria-checked \u304C\u7121\u304F\u3001\u30AA\u30F3/\u30AA\u30D5\u304C\u652F\u63F4\u6280\u8853\u306B\u5224\u5225\u3067\u304D\u306A\u3044\u3002"
2221
+ },
2222
+ {
2223
+ title: "\u540D\u524D\u304C\u7121\u3044",
2224
+ why: "\u4F55\u306E\u30B9\u30A4\u30C3\u30C1\u304B\u304C aria-labelledby / aria-label \u3067\u95A2\u9023\u4ED8\u3051\u3089\u308C\u3066\u3044\u306A\u3044\u3002"
2225
+ }
2226
+ ],
2227
+ notes: [
2228
+ "<button> \u3092\u30D9\u30FC\u30B9\u306B\u3059\u308B\u3068 Enter \u3068 Space \u306E\u4E21\u65B9\u304C\u81EA\u52D5\u3067\u52B9\u304D\u307E\u3059\u3002click \u30CF\u30F3\u30C9\u30E9\u3067 aria-checked \u3092\u53CD\u8EE2\u3059\u308B\u3060\u3051\u3067\u3059\u3002",
2229
+ "\u72B6\u614B\u3092\u8272\u3060\u3051\u3067\u793A\u3059\u306E\u3082\u907F\u3051\u307E\u3057\u3087\u3046\u3002\u3064\u307E\u307F\u306E\u4F4D\u7F6E\u3084 ON/OFF \u306E\u30E9\u30D9\u30EB\u306A\u3069\u3001\u8272\u4EE5\u5916\u306E\u624B\u304C\u304B\u308A\u3082\u4F75\u7528\u3057\u307E\u3059\u3002"
2230
+ ]
2231
+ };
2232
+ var table = {
2233
+ slug: "table",
2234
+ keyboard: [],
2235
+ aria: [
2236
+ {
2237
+ target: "\u8868\u5168\u4F53",
2238
+ attr: "<table>",
2239
+ meaning: '\u8868\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002role="table" \u7B49\u306F\u81EA\u52D5\u3067\u4ED8\u304F\u306E\u3067\u66F8\u304B\u306A\u3044\u3002'
2240
+ },
2241
+ {
2242
+ target: "\u8868\u306E\u898B\u51FA\u3057",
2243
+ attr: "<caption>",
2244
+ meaning: "\u8868\u306B\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u3092\u4ED8\u3051\u308B\u3002\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u300C\u301C\u306E\u8868\u300D\u3068\u8AAD\u307F\u3001\u8868\u4E00\u89A7\u3067\u3082\u8B58\u5225\u3067\u304D\u308B\u3002"
2245
+ },
2246
+ {
2247
+ target: "\u5217\u306E\u898B\u51FA\u3057\u30BB\u30EB",
2248
+ attr: '<th scope="col">',
2249
+ meaning: "\u305D\u306E\u5217\u306B\u5C5E\u3059\u308B\u30BB\u30EB\u306E\u898B\u51FA\u3057\u3060\u3068\u793A\u3059\u3002\u540C\u3058\u5217\u306E\u30BB\u30EB\u306B\u95A2\u9023\u4ED8\u3051\u3089\u308C\u308B\u3002"
2327
2250
  },
2328
2251
  {
2329
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2330
- attr: "aria-valuetext",
2331
- meaning: "\u300C72%\u300D\u300C\u6B8B\u308A 28%\u300D\u306A\u3069\u4EBA\u306B\u308F\u304B\u308B\u8868\u73FE\u3092\u88DC\u3046\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
2252
+ target: "\u884C\u306E\u898B\u51FA\u3057\u30BB\u30EB",
2253
+ attr: '<th scope="row">',
2254
+ meaning: "\u305D\u306E\u884C\u306B\u5C5E\u3059\u308B\u30BB\u30EB\u306E\u898B\u51FA\u3057\u3060\u3068\u793A\u3059\u3002\u540C\u3058\u884C\u306E\u30BB\u30EB\u306B\u95A2\u9023\u4ED8\u3051\u3089\u308C\u308B\u3002"
2332
2255
  },
2333
2256
  {
2334
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2335
- attr: "aria-label / aria-labelledby",
2336
- meaning: "\u4F55\u306E\u30E1\u30FC\u30BF\u30FC\u304B\uFF08\u300C\u30C7\u30A3\u30B9\u30AF\u4F7F\u7528\u7387\u300D\uFF09\u306E\u540D\u524D\u3002"
2257
+ target: "\u898B\u51FA\u3057 / \u672C\u4F53",
2258
+ attr: "<thead> / <tbody>",
2259
+ meaning: "\u898B\u51FA\u3057\u884C\u3068\u30C7\u30FC\u30BF\u884C\u3092\u69CB\u9020\u7684\u306B\u533A\u5225\u3059\u308B\u3002"
2337
2260
  },
2338
2261
  {
2339
- target: "\u81EA\u4F5C\u306E\u672C\u4F53",
2340
- attr: "tabindex \u306A\u3057",
2341
- meaning: '\u8868\u793A\u5C02\u7528\u306A\u306E\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u8981\u3002role="slider" \u3068\u3082\u6DF7\u540C\u3057\u306A\u3044\u3002'
2262
+ target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
2263
+ attr: "<td>",
2264
+ meaning: "\u5B9F\u30C7\u30FC\u30BF\u306E\u5024\u3002<th> \u3068\u66F8\u304D\u5206\u3051\u308B\u3053\u3068\u304C\u95A2\u9023\u4ED8\u3051\u306E\u524D\u63D0\u3002"
2342
2265
  }
2343
2266
  ],
2344
2267
  checklist: [
2345
- "\u300C\u9032\u6357\u300D\u3067\u306F\u306A\u304F\u300C\u65E2\u77E5\u306E\u7BC4\u56F2\u306E\u73FE\u5728\u91CF\u300D\u3060\u3068\u78BA\u8A8D\u3057\u305F\uFF08progressbar \u3068\u53D6\u308A\u9055\u3048\u3066\u3044\u306A\u3044\uFF09",
2346
- "\u307E\u305A\u30CD\u30A4\u30C6\u30A3\u30D6 <meter> \u3092\u691C\u8A0E\u3057\u305F\uFF08\u6700\u512A\u5148\uFF09",
2347
- "\u30E1\u30FC\u30BF\u30FC\u306B\u540D\u524D\u304C\u3042\u308B\uFF08<label for> \u307E\u305F\u306F aria-label(ledby)\uFF09",
2348
- '\u81EA\u4F5C\u6642\u306F role="meter" + aria-valuemin/max/now \u304C\u3042\u308B',
2349
- "\u5024\u304C\u5909\u308F\u3063\u305F\u3089 aria-valuenow\uFF08\u3068 aria-valuetext\uFF09\u3092\u66F4\u65B0\u3057\u3066\u3044\u308B",
2350
- "\u8868\u793A\u5C02\u7528\u306A\u306E\u3067 tabindex \u3092\u4ED8\u3051\u3066\u3044\u306A\u3044\uFF08\u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u306F\u7121\u3044\uFF09",
2351
- "\u72B6\u614B\u3092\u8272\u3060\u3051\u306B\u983C\u3089\u305A\u3001\u6570\u5024\u3084\u30C6\u30AD\u30B9\u30C8\u3067\u3082\u4F1D\u3048\u3066\u3044\u308B"
2268
+ "\u30C7\u30FC\u30BF\u306E\u8868\u306F\u30CD\u30A4\u30C6\u30A3\u30D6\u306E <table> \u3067\u7D44\u3093\u3067\u3044\u308B\uFF08<div> \u306E\u683C\u5B50\u3067\u306F\u306A\u3044\uFF09",
2269
+ "<caption> \u3067\u8868\u306B\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u3092\u4ED8\u3051\u3066\u3044\u308B",
2270
+ '\u5217\u306E\u898B\u51FA\u3057\u30BB\u30EB\u306F <th scope="col"> \u3067\u3042\u308B',
2271
+ '\u884C\u306E\u898B\u51FA\u3057\u30BB\u30EB\u306F <th scope="row"> \u3067\u3042\u308B',
2272
+ "\u898B\u51FA\u3057\u884C\u306F <thead>\u3001\u30C7\u30FC\u30BF\u884C\u306F <tbody> \u3067\u69CB\u9020\u5316\u3057\u3066\u3044\u308B",
2273
+ "\u30EC\u30A4\u30A2\u30A6\u30C8\u76EE\u7684\u3067\u306F <table> \u3092\u4F7F\u3063\u3066\u3044\u306A\u3044\uFF08\u8868\u306F\u300C\u30C7\u30FC\u30BF\u300D\u306E\u3068\u304D\u3060\u3051\uFF09",
2274
+ "\u5BFE\u8A71\u7684\u306B\u30BB\u30EB\u9593\u3092\u64CD\u4F5C\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u306A\u3089\u3001\u3053\u308C\u3067\u306F\u306A\u304F grid \u30D1\u30BF\u30FC\u30F3\u3092\u4F7F\u3046"
2352
2275
  ],
2353
2276
  antipatterns: [
2354
2277
  {
2355
- title: "\u5F79\u5272\u304C\u7121\u3044",
2356
- why: 'role="meter" \u3082 <meter> \u3082\u7121\u304F\u3001\u8A08\u6E2C\u5024\u3060\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044\u3002'
2278
+ title: "\u898B\u51FA\u3057\u3068\u30BB\u30EB\u304C\u95A2\u9023\u4ED8\u304B\u306A\u3044",
2279
+ why: "<th>/scope \u304C\u7121\u3044\u306E\u3067\u3001\u300C120\u300D\u304C\u3069\u306E\u5E97\u8217\u30FB\u3069\u306E\u56DB\u534A\u671F\u304B\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
2357
2280
  },
2358
2281
  {
2359
- title: "\u5024\u30FB\u7BC4\u56F2\u304C\u4F1D\u308F\u3089\u306A\u3044",
2360
- why: "aria-valuenow / valuemin / valuemax \u304C\u7121\u304F\u300C72%\u300D\u304C\u8AAD\u307E\u308C\u306A\u3044\u3002"
2282
+ title: "\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u304C\u7121\u3044",
2283
+ why: "<caption> \u304C\u7121\u304F\u3001\u4F55\u306E\u8868\u304B\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
2361
2284
  },
2362
2285
  {
2363
- title: "\u540D\u524D\u304C\u7D50\u3073\u3064\u3044\u3066\u3044\u306A\u3044",
2364
- why: "\u30D0\u30FC\u3068\u300C\u30C7\u30A3\u30B9\u30AF\u4F7F\u7528\u7387\u300D\u304C\u95A2\u9023\u4ED8\u3051\u3089\u308C\u3066\u3044\u306A\u3044\u3002"
2286
+ title: "\u8868\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u52B9\u304B\u306A\u3044",
2287
+ why: "<table> \u3067\u306F\u306A\u3044\u306E\u3067\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u8868\u79FB\u52D5\u30B3\u30DE\u30F3\u30C9\u304C\u4F7F\u3048\u306A\u3044\u3002"
2365
2288
  },
2366
2289
  {
2367
- title: "\u8272\u3060\u3051\u306B\u4F9D\u5B58",
2368
- why: "\u6570\u5024\u3084\u30C6\u30AD\u30B9\u30C8\u306E\u4F75\u8A18\u304C\u7121\u304F\u3001\u8272\u304C\u898B\u3048\u306A\u3044\u4EBA\u306B\u4F1D\u308F\u3089\u306A\u3044\u3002"
2290
+ title: "\u305F\u3060\u306E\u6570\u5B57\u306E\u7F85\u5217\u306B\u805E\u3053\u3048\u308B",
2291
+ why: "\u69CB\u9020\u304C\u7121\u304F\u3001\u4E0A\u304B\u3089\u5E73\u5766\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3060\u3051\u3067\u610F\u5473\u3092\u518D\u69CB\u6210\u3067\u304D\u306A\u3044\u3002"
2369
2292
  }
2370
2293
  ],
2371
2294
  notes: [
2372
- "\u30E1\u30FC\u30BF\u30FC\u306F\u8868\u793A\u5C02\u7528\u30FB\u975E\u30A4\u30F3\u30BF\u30E9\u30AF\u30C6\u30A3\u30D6\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u3082 tabindex \u3082\u4E0D\u8981\u3067\u3001\u5024\u304C\u5909\u308F\u3063\u305F\u3089 aria-valuenow \u3068 aria-valuetext \u3092\u66F4\u65B0\u3059\u308B\u3060\u3051\u3067\u3088\u3044\u3002",
2373
- "progressbar \u3068\u306E\u4F7F\u3044\u5206\u3051\uFF1Ameter \u306F\u300C\u65E2\u77E5\u306E\u7BC4\u56F2\u306E\u73FE\u5728\u91CF\uFF08\u4F8B\uFF1A\u30C7\u30A3\u30B9\u30AF 72%\uFF09\u300D\u3001progressbar \u306F\u300C\u5B8C\u4E86\u306B\u5411\u304B\u3063\u3066\u9032\u3080\u9032\u6357\uFF08\u4F8B\uFF1A\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9\u4E2D\uFF09\u300D\u3002"
2295
+ "\u6B63\u3057\u3044 <table> \u30DE\u30FC\u30AF\u30A2\u30C3\u30D7\u3055\u3048\u3042\u308C\u3070\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u8868\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u81EA\u52D5\u7684\u306B\u4F7F\u3048\u308B\u3088\u3046\u306B\u306A\u308B\u3002\u5B9F\u88C5\u8005\u304C\u30AD\u30FC\u51E6\u7406\u3092\u66F8\u304F\u5FC5\u8981\u306F\u306A\u3044\u3002",
2296
+ "\u8907\u96D1\u306A\u8868\uFF08\u898B\u51FA\u3057\u304C\u8907\u6570\u6BB5\u306B\u306A\u308B\u7B49\uFF09\u3067\u306F\u3001<th id> \u3068 <td headers> \u3067\u660E\u793A\u7684\u306B\u3072\u3082\u4ED8\u3051\u3067\u304D\u308B\u3002\u307E\u305A\u306F\u30B7\u30F3\u30D7\u30EB\u306A\u8868\u3092 scope \u3067\u6B63\u3057\u304F\u66F8\u304F\u3053\u3068\u3092\u512A\u5148\u3059\u308B\u3002"
2374
2297
  ]
2375
2298
  };
2376
2299
  var tabs = {
@@ -2556,273 +2479,71 @@ var toolbar = {
2556
2479
  '\u30C4\u30FC\u30EB\u30D0\u30FC\u304B\u3089 Tab \u3067\u51FA\u308B\u3068\u3001\u6B21\u306B\u623B\u3063\u3066\u304D\u305F\u3068\u304D\u306F\u6700\u5F8C\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3066\u3044\u305F\u30DC\u30BF\u30F3\u306B\u623B\u308B\uFF08roving tabindex \u3067 tabindex="0" \u306E\u4F4D\u7F6E\u304C\u4FDD\u6301\u3055\u308C\u308B\u305F\u3081\uFF09\u3002'
2557
2480
  ]
2558
2481
  };
2559
- var table = {
2560
- slug: "table",
2561
- keyboard: [],
2562
- aria: [
2563
- {
2564
- target: "\u8868\u5168\u4F53",
2565
- attr: "<table>",
2566
- meaning: '\u8868\u3067\u3042\u308B\u3053\u3068\u3092\u4F1D\u3048\u308B\u3002role="table" \u7B49\u306F\u81EA\u52D5\u3067\u4ED8\u304F\u306E\u3067\u66F8\u304B\u306A\u3044\u3002'
2567
- },
2568
- {
2569
- target: "\u8868\u306E\u898B\u51FA\u3057",
2570
- attr: "<caption>",
2571
- meaning: "\u8868\u306B\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u3092\u4ED8\u3051\u308B\u3002\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u300C\u301C\u306E\u8868\u300D\u3068\u8AAD\u307F\u3001\u8868\u4E00\u89A7\u3067\u3082\u8B58\u5225\u3067\u304D\u308B\u3002"
2572
- },
2573
- {
2574
- target: "\u5217\u306E\u898B\u51FA\u3057\u30BB\u30EB",
2575
- attr: '<th scope="col">',
2576
- meaning: "\u305D\u306E\u5217\u306B\u5C5E\u3059\u308B\u30BB\u30EB\u306E\u898B\u51FA\u3057\u3060\u3068\u793A\u3059\u3002\u540C\u3058\u5217\u306E\u30BB\u30EB\u306B\u95A2\u9023\u4ED8\u3051\u3089\u308C\u308B\u3002"
2577
- },
2578
- {
2579
- target: "\u884C\u306E\u898B\u51FA\u3057\u30BB\u30EB",
2580
- attr: '<th scope="row">',
2581
- meaning: "\u305D\u306E\u884C\u306B\u5C5E\u3059\u308B\u30BB\u30EB\u306E\u898B\u51FA\u3057\u3060\u3068\u793A\u3059\u3002\u540C\u3058\u884C\u306E\u30BB\u30EB\u306B\u95A2\u9023\u4ED8\u3051\u3089\u308C\u308B\u3002"
2582
- },
2583
- {
2584
- target: "\u898B\u51FA\u3057 / \u672C\u4F53",
2585
- attr: "<thead> / <tbody>",
2586
- meaning: "\u898B\u51FA\u3057\u884C\u3068\u30C7\u30FC\u30BF\u884C\u3092\u69CB\u9020\u7684\u306B\u533A\u5225\u3059\u308B\u3002"
2587
- },
2588
- {
2589
- target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
2590
- attr: "<td>",
2591
- meaning: "\u5B9F\u30C7\u30FC\u30BF\u306E\u5024\u3002<th> \u3068\u66F8\u304D\u5206\u3051\u308B\u3053\u3068\u304C\u95A2\u9023\u4ED8\u3051\u306E\u524D\u63D0\u3002"
2592
- }
2593
- ],
2594
- checklist: [
2595
- "\u30C7\u30FC\u30BF\u306E\u8868\u306F\u30CD\u30A4\u30C6\u30A3\u30D6\u306E <table> \u3067\u7D44\u3093\u3067\u3044\u308B\uFF08<div> \u306E\u683C\u5B50\u3067\u306F\u306A\u3044\uFF09",
2596
- "<caption> \u3067\u8868\u306B\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u3092\u4ED8\u3051\u3066\u3044\u308B",
2597
- '\u5217\u306E\u898B\u51FA\u3057\u30BB\u30EB\u306F <th scope="col"> \u3067\u3042\u308B',
2598
- '\u884C\u306E\u898B\u51FA\u3057\u30BB\u30EB\u306F <th scope="row"> \u3067\u3042\u308B',
2599
- "\u898B\u51FA\u3057\u884C\u306F <thead>\u3001\u30C7\u30FC\u30BF\u884C\u306F <tbody> \u3067\u69CB\u9020\u5316\u3057\u3066\u3044\u308B",
2600
- "\u30EC\u30A4\u30A2\u30A6\u30C8\u76EE\u7684\u3067\u306F <table> \u3092\u4F7F\u3063\u3066\u3044\u306A\u3044\uFF08\u8868\u306F\u300C\u30C7\u30FC\u30BF\u300D\u306E\u3068\u304D\u3060\u3051\uFF09",
2601
- "\u5BFE\u8A71\u7684\u306B\u30BB\u30EB\u9593\u3092\u64CD\u4F5C\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u306A\u3089\u3001\u3053\u308C\u3067\u306F\u306A\u304F grid \u30D1\u30BF\u30FC\u30F3\u3092\u4F7F\u3046"
2602
- ],
2603
- antipatterns: [
2604
- {
2605
- title: "\u898B\u51FA\u3057\u3068\u30BB\u30EB\u304C\u95A2\u9023\u4ED8\u304B\u306A\u3044",
2606
- why: "<th>/scope \u304C\u7121\u3044\u306E\u3067\u3001\u300C120\u300D\u304C\u3069\u306E\u5E97\u8217\u30FB\u3069\u306E\u56DB\u534A\u671F\u304B\u304C\u4F1D\u308F\u3089\u306A\u3044\u3002"
2607
- },
2608
- {
2609
- title: "\u540D\u524D\uFF08\u30BF\u30A4\u30C8\u30EB\uFF09\u304C\u7121\u3044",
2610
- why: "<caption> \u304C\u7121\u304F\u3001\u4F55\u306E\u8868\u304B\u304C\u5206\u304B\u3089\u306A\u3044\u3002"
2611
- },
2612
- {
2613
- title: "\u8868\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u52B9\u304B\u306A\u3044",
2614
- why: "<table> \u3067\u306F\u306A\u3044\u306E\u3067\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u8868\u79FB\u52D5\u30B3\u30DE\u30F3\u30C9\u304C\u4F7F\u3048\u306A\u3044\u3002"
2615
- },
2616
- {
2617
- title: "\u305F\u3060\u306E\u6570\u5B57\u306E\u7F85\u5217\u306B\u805E\u3053\u3048\u308B",
2618
- why: "\u69CB\u9020\u304C\u7121\u304F\u3001\u4E0A\u304B\u3089\u5E73\u5766\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3060\u3051\u3067\u610F\u5473\u3092\u518D\u69CB\u6210\u3067\u304D\u306A\u3044\u3002"
2619
- }
2620
- ],
2621
- notes: [
2622
- "\u6B63\u3057\u3044 <table> \u30DE\u30FC\u30AF\u30A2\u30C3\u30D7\u3055\u3048\u3042\u308C\u3070\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306E\u8868\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u304C\u81EA\u52D5\u7684\u306B\u4F7F\u3048\u308B\u3088\u3046\u306B\u306A\u308B\u3002\u5B9F\u88C5\u8005\u304C\u30AD\u30FC\u51E6\u7406\u3092\u66F8\u304F\u5FC5\u8981\u306F\u306A\u3044\u3002",
2623
- "\u8907\u96D1\u306A\u8868\uFF08\u898B\u51FA\u3057\u304C\u8907\u6570\u6BB5\u306B\u306A\u308B\u7B49\uFF09\u3067\u306F\u3001<th id> \u3068 <td headers> \u3067\u660E\u793A\u7684\u306B\u3072\u3082\u4ED8\u3051\u3067\u304D\u308B\u3002\u307E\u305A\u306F\u30B7\u30F3\u30D7\u30EB\u306A\u8868\u3092 scope \u3067\u6B63\u3057\u304F\u66F8\u304F\u3053\u3068\u3092\u512A\u5148\u3059\u308B\u3002"
2624
- ]
2625
- };
2626
- var grid = {
2627
- slug: "grid",
2628
- keyboard: [
2629
- {
2630
- keys: "Tab",
2631
- action: "\u30B0\u30EA\u30C3\u30C9\u5168\u4F53\u306B\u51FA\u5165\u308A\u3059\u308B\uFF08\u4E2D\u306F1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
2632
- requirement: "required"
2633
- },
2634
- {
2635
- keys: "\u2192 / \u2190",
2636
- action: "\u53F3 / \u5DE6\u306E\u30BB\u30EB\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2637
- requirement: "required"
2638
- },
2639
- {
2640
- keys: "\u2193 / \u2191",
2641
- action: "\u4E0B / \u4E0A\u306E\u30BB\u30EB\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2642
- requirement: "required"
2643
- },
2644
- {
2645
- keys: "Home / End",
2646
- action: "\u305D\u306E\u884C\u306E\u5148\u982D / \u672B\u5C3E\u306E\u30BB\u30EB\u3078",
2647
- requirement: "required"
2648
- },
2649
- {
2650
- keys: "Ctrl+Home / Ctrl+End",
2651
- action: "\u30B0\u30EA\u30C3\u30C9\u306E\u5148\u982D / \u672B\u5C3E\u306E\u30BB\u30EB\u3078",
2652
- requirement: "recommended"
2653
- }
2654
- ],
2655
- aria: [
2656
- {
2657
- target: "\u5916\u67A0",
2658
- attr: 'role="grid"',
2659
- meaning: "\u5BFE\u8A71\u7684\u306A\u30B0\u30EA\u30C3\u30C9\u3067\u3042\u308B\u3053\u3068\u3092\u5BA3\u8A00\u3059\u308B\u3002"
2660
- },
2661
- {
2662
- target: "\u5916\u67A0",
2663
- attr: "aria-label / aria-labelledby",
2664
- meaning: "\u30B0\u30EA\u30C3\u30C9\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u4F55\u306E\u8868\u304B\u3092\u4F1D\u3048\u308B\uFF09\u3002"
2665
- },
2666
- {
2667
- target: "\u5404\u884C",
2668
- attr: 'role="row"',
2669
- meaning: "\u884C\u306E\u307E\u3068\u307E\u308A\u3092\u793A\u3059\u3002"
2670
- },
2671
- {
2672
- target: "\u898B\u51FA\u3057\u30BB\u30EB",
2673
- attr: 'role="columnheader"',
2674
- meaning: "\u5217\u306E\u898B\u51FA\u3057\u3002\u5404\u5217\u306E\u30BB\u30EB\u3068\u95A2\u9023\u4ED8\u3051\u3066\u8AAD\u307E\u308C\u308B\u3002"
2675
- },
2676
- {
2677
- target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
2678
- attr: 'role="gridcell"',
2679
- meaning: "1\u30641\u3064\u306E\u30BB\u30EB\u3002"
2680
- },
2681
- {
2682
- target: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B\u30BB\u30EB",
2683
- attr: 'tabindex="0"\uFF081\u3064\u3060\u3051\uFF09/ "-1"\uFF08\u6B8B\u308A\u5168\u90E8\uFF09',
2684
- meaning: "\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex\u3002\u30B0\u30EA\u30C3\u30C9\u30921\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u306B\u3057\u3001\u79FB\u52D5\u6642\u306B\u4ED8\u3051\u66FF\u3048\u308B\u3002"
2685
- }
2686
- ],
2687
- checklist: [
2688
- '\u5916\u67A0\u306B role="grid" \u3068\u540D\u524D\uFF08aria-label / aria-labelledby\uFF09\u304C\u3042\u308B',
2689
- '\u884C\u306F role="row"\u3001\u898B\u51FA\u3057\u306F role="columnheader"\u3001\u30BB\u30EB\u306F role="gridcell"',
2690
- '\u5E38\u306B1\u3064\u306E\u30BB\u30EB\u3060\u3051 tabindex="0"\u3001\u6B8B\u308A\u306F "-1"\uFF08\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex\uFF09',
2691
- "\u77E2\u5370\u30AD\u30FC\u3067\u30BB\u30EB\u79FB\u52D5\u3067\u304D\u3001Home/End \u3067\u884C\u306E\u7AEF\u3078\u79FB\u52D5\u3067\u304D\u308B",
2692
- "\uFF08\u63A8\u5968\uFF09Ctrl+Home/End \u3067\u30B0\u30EA\u30C3\u30C9\u306E\u7AEF\u3078\u79FB\u52D5\u3067\u304D\u308B",
2693
- "Tab \u306F\u30BB\u30EB\u79FB\u52D5\u3067\u306F\u306A\u304F\u300C\u30B0\u30EA\u30C3\u30C9\u306E\u5916\u3078\u51FA\u308B\u300D\u30AD\u30FC\u306B\u306A\u3063\u3066\u3044\u308B",
2694
- "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
2695
- ],
2696
- antipatterns: [
2697
- {
2698
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
2699
- why: "\u30BB\u30EB\u306B tabindex \u3082\u30AD\u30FC\u51E6\u7406\u3082\u7121\u304F\u3001\u77E2\u5370\u3067\u52D5\u3051\u306A\u3044\u3002"
2700
- },
2701
- {
2702
- title: "\u30B0\u30EA\u30C3\u30C9\u3068\u8A8D\u8B58\u3055\u308C\u306A\u3044",
2703
- why: 'role="grid" \u304C\u7121\u304F\u3001\u652F\u63F4\u6280\u8853\u306B\u306F\u300C\u305F\u3060\u306E\u8868\u300D\u306B\u805E\u3053\u3048\u308B\u3002'
2704
- },
2705
- {
2706
- title: "1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u306B\u306A\u3063\u3066\u3044\u306A\u3044",
2707
- why: "\u30ED\u30FC\u30DF\u30F3\u30B0 tabindex \u306E\u8A2D\u8A08\u304C\u7121\u3044\u3002"
2708
- },
2709
- {
2710
- title: "\u73FE\u5728\u4F4D\u7F6E\u304C\u4F1D\u308F\u3089\u306A\u3044",
2711
- why: "\u4F55\u884C\u76EE\u30FB\u4F55\u5217\u76EE\u306B\u3044\u308B\u306E\u304B\u3001\u9078\u629E\u72B6\u614B\u3082\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u306A\u3044\u3002"
2712
- }
2713
- ],
2714
- notes: [
2715
- "Tab \u306F\u30B0\u30EA\u30C3\u30C9\u306E\u5916\u3078\u51FA\u308B\u305F\u3081\u306E\u30AD\u30FC\u306B\u3057\u3001\u30BB\u30EB\u79FB\u52D5\u306F\u77E2\u5370\u30AD\u30FC\u306B\u4EFB\u305B\u308B\u3002\u30CD\u30A4\u30C6\u30A3\u30D6\u306A <table> \u3068\u306E\u5927\u304D\u306A\u9055\u3044\u3002",
2716
- "\u30BB\u30EB\u5185\u306B\u30DC\u30BF\u30F3/\u30EA\u30F3\u30AF\u3092\u7F6E\u304F\u5834\u5408\u306F Enter \u3084 F2 \u3067\u300C\u30BB\u30EB\u5185\u64CD\u4F5C\u30E2\u30FC\u30C9\u300D\u306B\u5165\u308B\u62E1\u5F35\u3092\u691C\u8A0E\u3059\u308B\u3002\u307E\u305A 1\u30BB\u30EB\uFF1D1\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u57FA\u672C\u5F62\u3092\u78BA\u5B9F\u306B\u52D5\u304B\u3059\u3053\u3068\u304C\u5148\u6C7A\u3002"
2717
- ]
2718
- };
2719
- var treegrid = {
2720
- slug: "treegrid",
2482
+ var tooltip = {
2483
+ slug: "tooltip",
2721
2484
  keyboard: [
2722
2485
  {
2723
2486
  keys: "Tab",
2724
- action: "\u30B0\u30EA\u30C3\u30C9\u5168\u4F53\u306B\u5165\u308B / \u51FA\u308B\uFF08\u4E2D\u306F1\u3064\u306E\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
2725
- requirement: "required"
2726
- },
2727
- {
2728
- keys: "\u2193 / \u2191",
2729
- action: "\u6B21 / \u524D\u306E\uFF08\u898B\u3048\u3066\u3044\u308B\uFF09\u884C\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2730
- requirement: "required"
2731
- },
2732
- {
2733
- keys: "\u2192",
2734
- action: "\u9589\u3058\u3066\u3044\u308B\u89AA\u884C\u3092\u5C55\u958B\u3059\u308B",
2735
- requirement: "required"
2736
- },
2737
- {
2738
- keys: "\u2190",
2739
- action: "\u958B\u3044\u3066\u3044\u308B\u89AA\u884C\u3092\u6298\u308A\u305F\u305F\u3080",
2487
+ action: "\u30C8\u30EA\u30AC\u30FC\u306B\u30D5\u30A9\u30FC\u30AB\u30B9 \u2192 \u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u304C\u8868\u793A\u3055\u308C\u308B",
2740
2488
  requirement: "required"
2741
2489
  },
2742
2490
  {
2743
- keys: "Home / End",
2744
- action: "\u6700\u521D / \u6700\u5F8C\u306E\uFF08\u898B\u3048\u3066\u3044\u308B\uFF09\u884C\u3078\u79FB\u52D5",
2745
- requirement: "recommended"
2746
- }
2747
- ],
2748
- aria: [
2749
- {
2750
- target: "\u5916\u67A0",
2751
- attr: 'role="treegrid" + aria-label',
2752
- meaning: "\u300C\u958B\u9589\u3067\u304D\u308B\u8868\u300D\u3060\u3068\u4F1D\u3048\u308B\u3002\u540D\u524D\uFF08\u30E9\u30D9\u30EB\uFF09\u3082\u4ED8\u3051\u308B\u3002"
2753
- },
2754
- {
2755
- target: "\u5404\u884C",
2756
- attr: 'role="row"',
2757
- meaning: "\u8868\u306E1\u884C\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
2758
- },
2759
- {
2760
- target: "\u898B\u51FA\u3057\u30BB\u30EB",
2761
- attr: 'role="columnheader"',
2762
- meaning: "\u5217\u306E\u898B\u51FA\u3057\u3002\u5404\u30BB\u30EB\u304C\u3069\u306E\u5217\u306E\u5024\u304B\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002"
2763
- },
2764
- {
2765
- target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
2766
- attr: 'role="gridcell"',
2767
- meaning: "\u884C\u306E\u4E2D\u306E1\u3064\u306E\u30BB\u30EB\u3002"
2768
- },
2491
+ keys: "Esc",
2492
+ action: "\u8868\u793A\u4E2D\u306E\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u9589\u3058\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30C8\u30EA\u30AC\u30FC\u306B\u6B8B\u3059\uFF09",
2493
+ requirement: "required"
2494
+ }
2495
+ ],
2496
+ aria: [
2769
2497
  {
2770
- target: "\u5C55\u958B\u3067\u304D\u308B\u89AA\u884C",
2771
- attr: 'aria-expanded="true | false"',
2772
- meaning: "\u305D\u306E\u884C\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
2498
+ target: "\u30C8\u30EA\u30AC\u30FC",
2499
+ attr: 'aria-describedby="\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u306Eid"',
2500
+ meaning: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u300C\u8AAC\u660E\u300D\u3068\u3057\u3066\u95A2\u9023\u4ED8\u3051\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u6642\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002"
2773
2501
  },
2774
2502
  {
2775
- target: "\u5404\u884C",
2776
- attr: "aria-level / aria-posinset / aria-setsize",
2777
- meaning: "\u968E\u5C64\u306E\u6DF1\u3055\u3068\u3001\u540C\u968E\u5C64\u3067\u306E\u4F4D\u7F6E\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
2503
+ target: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53",
2504
+ attr: 'role="tooltip"',
2505
+ meaning: "\u3053\u308C\u304C\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
2778
2506
  },
2779
2507
  {
2780
- target: "\u884C\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\uFF09",
2781
- attr: 'tabindex="0 | -1"',
2782
- meaning: "roving tabindex\u3002\u4ECA\u3044\u308B\u884C\u3060\u3051 0\u3001\u307B\u304B\u306F -1\u3002"
2508
+ target: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53",
2509
+ attr: "hidden\uFF08\u975E\u8868\u793A\u6642\uFF09",
2510
+ meaning: "\u51FA\u3066\u3044\u306A\u3044\u9593\u306F\u8AAD\u307F\u4E0A\u3052\u30FB\u8868\u793A\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
2783
2511
  },
2784
2512
  {
2785
- target: "\u9589\u3058\u3066\u3044\u308B\u5B50\u884C",
2786
- attr: "hidden",
2787
- meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306FDOM\u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
2513
+ target: "\u30C8\u30EA\u30AC\u30FC",
2514
+ attr: "\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306A\u8981\u7D20\uFF08<button> \u7B49\uFF09",
2515
+ meaning: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u3082\u5230\u9054\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002<div> \u7B49\u306B\u3057\u306A\u3044\u3002"
2788
2516
  }
2789
2517
  ],
2790
2518
  checklist: [
2791
- '\u5916\u67A0\u306B role="treegrid" \u3068 aria-label\uFF08\u540D\u524D\uFF09\u304C\u4ED8\u3044\u3066\u3044\u308B',
2792
- '\u884C\u306F role="row"\u3001\u30BB\u30EB\u306F role="gridcell" / role="columnheader"',
2793
- "\u5C55\u958B\u3067\u304D\u308B\u89AA\u884C\u306B aria-expanded \u304C\u3042\u308A\u3001\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
2794
- "\u9589\u3058\u3066\u3044\u308B\u5B50\u884C\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
2795
- "\u30B0\u30EA\u30C3\u30C9\u5185\u306F1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3067\u3001\u2191\u2193 \u3067\u884C\u79FB\u52D5\u3067\u304D\u308B\uFF08roving tabindex\uFF09",
2796
- "\u2192 \u3067\u5C55\u958B\u3001\u2190 \u3067\u6298\u308A\u305F\u305F\u307F\u304C\u3067\u304D\u308B",
2797
- "\uFF08\u4EFB\u610F\uFF09Home / End \u3067\u6700\u521D\u30FB\u6700\u5F8C\u306E\u884C\u3078\u79FB\u52D5\u3067\u304D\u308B",
2798
- "\uFF08\u4EFB\u610F\uFF09aria-level / aria-posinset / aria-setsize \u3067\u968E\u5C64\u3068\u4F4D\u7F6E\u3092\u4F1D\u3048\u308B",
2799
- "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
2519
+ "\u30C8\u30EA\u30AC\u30FC\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306A\u8981\u7D20\uFF08<button> \u7B49\uFF09",
2520
+ "\u30C8\u30EA\u30AC\u30FC\u306B aria-describedby \u3067\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u95A2\u9023\u4ED8\u3051\u3066\u3044\u308B",
2521
+ '\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53\u306B role="tooltip" \u3092\u4ED8\u3051\u3066\u3044\u308B',
2522
+ "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u3082\u30DB\u30D0\u30FC\u3067\u3082\u8868\u793A\u3055\u308C\u308B",
2523
+ "Esc \u3067\u9589\u3058\u3089\u308C\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30C8\u30EA\u30AC\u30FC\u306B\u6B8B\u3059\uFF09",
2524
+ "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u81EA\u8EAB\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u3089\u306A\u3044\uFF0F\u64CD\u4F5C\u8981\u7D20\u3092\u5165\u308C\u306A\u3044",
2525
+ "\u64CD\u4F5C\u306B\u5FC5\u9808\u306E\u60C5\u5831\u3092\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u300C\u3060\u3051\u300D\u306B\u5165\u308C\u3066\u3044\u306A\u3044"
2800
2526
  ],
2801
2527
  antipatterns: [
2802
2528
  {
2803
- title: "\u8868\u30FB\u884C\u30FB\u30BB\u30EB\u306E\u610F\u5473\u304C\u7121\u3044",
2804
- why: 'role="treegrid" \u7B49\u304C\u7121\u304F\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u306E\u584A\u300D\u306B\u805E\u3053\u3048\u308B\u3002\u3069\u306E\u30BB\u30EB\u304C\u3069\u306E\u5217\u304B\u3082\u95A2\u9023\u4ED8\u304B\u306A\u3044\u3002'
2805
- },
2806
- {
2807
- title: "\u958B\u9589\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
2808
- why: "aria-expanded \u304C\u7121\u304F\u3001\u958B\u3044\u3066\u3044\u308B\u306E\u304B\u9589\u3058\u3066\u3044\u308B\u306E\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
2529
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u51FA\u306A\u3044",
2530
+ why: "title \u3082\u30DB\u30D0\u30FC\u5C02\u7528CSS\u3082\u3001Tab \u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u306F\u8868\u793A\u3055\u308C\u306A\u3044\u3002"
2809
2531
  },
2810
2532
  {
2811
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
2812
- why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u77E2\u5370\u3067\u306E\u79FB\u52D5\u30FB\u5C55\u958B\u30FB\u6298\u308A\u305F\u305F\u307F\u304C\u3067\u304D\u306A\u3044\u3002"
2533
+ title: "\u30BF\u30C3\u30C1\u3067\u51FA\u306A\u3044",
2534
+ why: "\u30DB\u30D0\u30FC\u306E\u7121\u3044\u7AEF\u672B\u3067\u306F\u6C38\u9060\u306B\u8868\u793A\u3055\u308C\u306A\u3044\u3002"
2813
2535
  },
2814
2536
  {
2815
- title: "roving tabindex \u304C\u7121\u3044",
2816
- why: "\u305D\u3082\u305D\u3082\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u7BA1\u7406\u304C\u5B58\u5728\u3057\u306A\u3044\u3002"
2537
+ title: "\u95A2\u9023\u4ED8\u3051\u304C\u7121\u3044",
2538
+ why: "aria-describedby \u304C\u7121\u304F\u3001\u8AAC\u660E\u3068\u30C8\u30EA\u30AC\u30FC\u304C\u7D50\u3073\u3064\u3044\u3066\u3044\u306A\u3044\u3002"
2817
2539
  },
2818
2540
  {
2819
- title: "display:none \u306E\u30A4\u30F3\u30E9\u30A4\u30F3\u30B9\u30BF\u30A4\u30EB\u983C\u307F",
2820
- why: "hidden \u5C5E\u6027\u3084\u72B6\u614B\u7BA1\u7406\u304C\u7121\u3044\u3002"
2541
+ title: "\u9589\u3058\u3089\u308C\u306A\u3044",
2542
+ why: "Esc \u3067\u9589\u3058\u308B\u624B\u6BB5\u304C\u306A\u3044\uFF08WCAG 1.4.13 \u9055\u53CD\uFF09\u3002"
2821
2543
  }
2822
2544
  ],
2823
2545
  notes: [
2824
- "\u30C4\u30EA\u30FC\u30B0\u30EA\u30C3\u30C9\u306E\u4E2D\u306F1\u3064\u306E\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3002Tab \u3092\u9023\u6253\u3057\u3066\u3082\u5404\u884C\u306B\u6B62\u307E\u3089\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3067\u884C\u3092\u79FB\u52D5\u3059\u308B\uFF08roving tabindex\uFF09\u3002",
2825
- "\u77E2\u5370\u3067\u79FB\u52D5\u3059\u308B\u884C\u306F\u300C\u898B\u3048\u3066\u3044\u308B\u884C\u300D\u3060\u3051\u306B\u7D5E\u308B\u3002\u958B\u9589\u6642\u306F aria-expanded \u3068\u5B50\u884C\u306E hidden \u3092\u5FC5\u305A\u4E00\u81F4\u3055\u305B\u308B\u3053\u3068\u3002"
2546
+ "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u81EA\u8EAB\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308A\u307E\u305B\u3093\uFF08Tab \u306E\u5BFE\u8C61\u306B\u3057\u306A\u3044\uFF09\u3002\u3042\u304F\u307E\u3067\u30C8\u30EA\u30AC\u30FC\u306E\u88DC\u8DB3\u306A\u306E\u3067\u3001\u4E2D\u306B\u30EA\u30F3\u30AF\u3084\u30DC\u30BF\u30F3\u3092\u5165\u308C\u308B\u306E\u3082\u907F\u3051\u307E\u3059\uFF08\u64CD\u4F5C\u8981\u7D20\u3092\u5165\u308C\u305F\u3044\u306A\u3089\u3001\u305D\u308C\u306F\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3067\u306F\u306A\u304F\u30DD\u30C3\u30D7\u30AA\u30FC\u30D0\u30FC/\u30C0\u30A4\u30A2\u30ED\u30B0\u3067\u3059\uFF09\u3002"
2826
2547
  ]
2827
2548
  };
2828
2549
  var treeView = {
@@ -2919,248 +2640,113 @@ var treeView = {
2919
2640
  "\u77E2\u5370\u30AD\u30FC\u306E\u79FB\u52D5\u5148\u306F\u300C\u8868\u793A\u4E2D\uFF08\u7956\u5148\u304C\u3059\u3079\u3066\u5C55\u958B\u6E08\u307F\uFF09\u306E\u9805\u76EE\u300D\u3060\u3051\u3002hidden \u306A group \u5185\u306E\u9805\u76EE\u306F\u5019\u88DC\u304B\u3089\u5916\u3059\u3002"
2920
2641
  ]
2921
2642
  };
2922
- var feed = {
2923
- slug: "feed",
2643
+ var treegrid = {
2644
+ slug: "treegrid",
2924
2645
  keyboard: [
2925
- {
2926
- keys: "PageDown",
2927
- action: "\u6B21\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2928
- requirement: "required"
2929
- },
2930
- {
2931
- keys: "PageUp",
2932
- action: "\u524D\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2933
- requirement: "required"
2934
- },
2935
2646
  {
2936
2647
  keys: "Tab",
2937
- action: "\u8A18\u4E8B\u5185\u306E\u30EA\u30F3\u30AF\u306A\u3069\u3001\u6B21\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u8981\u7D20\u3078\u79FB\u52D5",
2648
+ action: "\u30B0\u30EA\u30C3\u30C9\u5168\u4F53\u306B\u5165\u308B / \u51FA\u308B\uFF08\u4E2D\u306F1\u3064\u306E\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\uFF09",
2938
2649
  requirement: "required"
2939
2650
  },
2940
2651
  {
2941
- keys: "Home / End",
2942
- action: "\u6700\u521D / \u6700\u5F8C\u306E\u8A18\u4E8B\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
2943
- requirement: "recommended"
2944
- }
2945
- ],
2946
- aria: [
2947
- {
2948
- target: "\u30B3\u30F3\u30C6\u30CA",
2949
- attr: 'role="feed"',
2950
- meaning: "\u52D5\u7684\u306B\u5897\u3048\u308B\u30B9\u30AF\u30ED\u30FC\u30EB\u53EF\u80FD\u306A\u8A18\u4E8B\u4E00\u89A7\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
2951
- },
2952
- {
2953
- target: "\u30B3\u30F3\u30C6\u30CA",
2954
- attr: 'aria-busy="true | false"',
2955
- meaning: "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u4E2D\u306F true\u3002\u8AAD\u307F\u8FBC\u307F\u5B8C\u4E86\u5F8C\u306F\u5FC5\u305A false \u306B\u623B\u3059\u3002"
2956
- },
2957
- {
2958
- target: "\u30B3\u30F3\u30C6\u30CA",
2959
- attr: "aria-label / aria-labelledby",
2960
- meaning: "\u30D5\u30A3\u30FC\u30C9\u81EA\u4F53\u306B\u540D\u524D\u3092\u4ED8\u3051\u308B\uFF08\u300C\u65B0\u7740\u8A18\u4E8B\u300D\u306A\u3069\uFF09\u3002"
2961
- },
2962
- {
2963
- target: "\u5404\u8A18\u4E8B",
2964
- attr: 'role="article" + tabindex="0"',
2965
- meaning: "1\u4EF6\u306E\u8A18\u4E8B\u3068\u3057\u3066\u8A8D\u8B58\u3055\u305B\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306B\u3059\u308B\u3002"
2966
- },
2967
- {
2968
- target: "\u5404\u8A18\u4E8B",
2969
- attr: 'aria-labelledby="\u30BF\u30A4\u30C8\u30EB\u306Eid"',
2970
- meaning: "\u8A18\u4E8B\u306E\u540D\u524D\uFF08\u898B\u51FA\u3057\uFF09\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u6642\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002"
2971
- },
2972
- {
2973
- target: "\u5404\u8A18\u4E8B",
2974
- attr: "aria-posinset + aria-setsize",
2975
- meaning: "\u300C\u5168\u25CB\u4EF6\u4E2D\u306E\u25B3\u756A\u76EE\u300D\u3092\u793A\u3059\u3002\u4EF6\u6570\u304C\u5897\u3048\u305F\u3089\u5168\u8A18\u4E8B\u3067\u66F4\u65B0\u3059\u308B\u3002"
2976
- }
2977
- ],
2978
- checklist: [
2979
- '\u30B3\u30F3\u30C6\u30CA\u304C role="feed" \u3067\u3001aria-label \u7B49\u3067\u540D\u524D\u304C\u4ED8\u3044\u3066\u3044\u308B',
2980
- '\u5404\u8A18\u4E8B\u304C role="article" + tabindex="0" \u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u308B',
2981
- "\u5404\u8A18\u4E8B\u306B aria-labelledby \u3067\u898B\u51FA\u3057\u304C\u95A2\u9023\u4ED8\u3044\u3066\u3044\u308B",
2982
- "aria-posinset / aria-setsize \u304C\u73FE\u5728\u306E\u4F4D\u7F6E\u30FB\u7DCF\u6570\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
2983
- '\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u4E2D\u306F aria-busy="true"\u3001\u5B8C\u4E86\u5F8C\u306B false \u3078\u623B\u308B',
2984
- "PageDown / PageUp \u3067\u8A18\u4E8B\u9593\u3092\u79FB\u52D5\u3067\u304D\u308B\uFF08\u65E2\u5B9A\u30B9\u30AF\u30ED\u30FC\u30EB\u306F preventDefault\uFF09",
2985
- "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u3082\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u5931\u308F\u306A\u3044\uFF08\u65B0\u7740\u306E\u5148\u982D\u306A\u3069\u3078\u79FB\u3059\uFF09",
2986
- "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u8AAD\u307F\u9032\u3081\u3089\u308C\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
2987
- ],
2988
- antipatterns: [
2989
- {
2990
- title: "\u4E00\u89A7\u306E\u69CB\u9020\u304C\u4F1D\u308F\u3089\u306A\u3044",
2991
- why: 'role="feed" / role="article" \u304C\u7121\u304F\u3001\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u306E\u584A\u306B\u805E\u3053\u3048\u308B\u3002'
2992
- },
2993
- {
2994
- title: "\u73FE\u5728\u5730\u304C\u5206\u304B\u3089\u306A\u3044",
2995
- why: "aria-posinset / aria-setsize \u304C\u7121\u304F\u3001\u300C\u5168\u4F55\u4EF6\u306E\u4F55\u756A\u76EE\u304B\u300D\u3092\u6848\u5185\u3067\u304D\u306A\u3044\u3002"
2996
- },
2997
- {
2998
- title: "\u8AAD\u307F\u8FBC\u307F\u4E2D\u304C\u4F1D\u308F\u3089\u306A\u3044",
2999
- why: "aria-busy \u304C\u7121\u304F\u3001\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u304C\u8D77\u304D\u3066\u3082\u652F\u63F4\u6280\u8853\u306B\u306F\u7121\u8A00\u306E\u307E\u307E\u3002"
3000
- },
3001
- {
3002
- title: "\u8A18\u4E8B\u9593\u3092\u79FB\u52D5\u3067\u304D\u306A\u3044",
3003
- why: "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u304D\u305A\u3001PageDown / PageUp \u3067\u306E\u8A18\u4E8B\u30B8\u30E3\u30F3\u30D7\u3082\u4E0D\u53EF\u3002"
3004
- },
3005
- {
3006
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u8FF7\u5B50\u306B\u306A\u308B",
3007
- why: "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u306E\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\u304C\u7121\u304F\u3001\u73FE\u5728\u5730\u3092\u898B\u5931\u3046\u3002"
3008
- }
3009
- ],
3010
- notes: [
3011
- "\u8A18\u4E8B\u9593\u306E\u79FB\u52D5\u306B PageDown / PageUp \u3092\u4F7F\u3046\u306E\u306F\u3001Tab \u3092\u8A18\u4E8B\u5185\u306E\u30EA\u30F3\u30AF\u79FB\u52D5\u306E\u305F\u3081\u306B\u7A7A\u3051\u3066\u304A\u304F\u305F\u3081\u3002\u30CF\u30F3\u30C9\u30E9\u5185\u3067 preventDefault() \u3067\u30D6\u30E9\u30A6\u30B6\u65E2\u5B9A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3092\u6B62\u3081\u308B\u3002",
3012
- "\u8FFD\u52A0\u8AAD\u307F\u8FBC\u307F\u5F8C\u306F\u65B0\u3057\u304F\u8FFD\u52A0\u3057\u305F\u8A18\u4E8B\u306E\u5148\u982D\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3059\u3002aria-setsize \u3082\u5168\u8A18\u4E8B\u3067\u65B0\u3057\u3044\u7DCF\u6570\u306B\u66F4\u65B0\u3059\u308B\u3002"
3013
- ]
3014
- };
3015
- var carousel = {
3016
- slug: "carousel",
3017
- keyboard: [
3018
- {
3019
- keys: "Tab \u2192 Enter / Space\uFF08\u518D\u751F\u505C\u6B62\u30DC\u30BF\u30F3\uFF09",
3020
- action: "\u81EA\u52D5\u56DE\u8EE2\u306E\u518D\u751F / \u505C\u6B62\u3092\u5207\u308A\u66FF\u3048\u308B",
2652
+ keys: "\u2193 / \u2191",
2653
+ action: "\u6B21 / \u524D\u306E\uFF08\u898B\u3048\u3066\u3044\u308B\uFF09\u884C\u3078\u30D5\u30A9\u30FC\u30AB\u30B9\u79FB\u52D5",
3021
2654
  requirement: "required"
3022
2655
  },
3023
2656
  {
3024
- keys: "Enter / Space\uFF08\u524D/\u6B21\u30DC\u30BF\u30F3\uFF09",
3025
- action: "\u524D / \u6B21\u306E\u30B9\u30E9\u30A4\u30C9\u3078\u624B\u52D5\u79FB\u52D5\uFF08\u79FB\u52D5\u3059\u308B\u3068\u81EA\u52D5\u56DE\u8EE2\u306F\u505C\u6B62\uFF09",
2657
+ keys: "\u2192",
2658
+ action: "\u9589\u3058\u3066\u3044\u308B\u89AA\u884C\u3092\u5C55\u958B\u3059\u308B",
3026
2659
  requirement: "required"
3027
2660
  },
3028
2661
  {
3029
- keys: "\u30D5\u30A9\u30FC\u30AB\u30B9 / \u30DB\u30D0\u30FC",
3030
- action: "\u30AB\u30EB\u30FC\u30BB\u30EB\u5185\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u30FB\u30DE\u30A6\u30B9\u304C\u3042\u308B\u9593\u306F\u81EA\u52D5\u56DE\u8EE2\u3092\u4E00\u6642\u505C\u6B62",
2662
+ keys: "\u2190",
2663
+ action: "\u958B\u3044\u3066\u3044\u308B\u89AA\u884C\u3092\u6298\u308A\u305F\u305F\u3080",
3031
2664
  requirement: "required"
3032
- }
3033
- ],
3034
- aria: [
3035
- {
3036
- target: "\u30AB\u30EB\u30FC\u30BB\u30EB\u5168\u4F53",
3037
- attr: 'aria-roledescription="carousel" + aria-label',
3038
- meaning: "\u30AB\u30EB\u30FC\u30BB\u30EB\u3067\u3042\u308B\u3053\u3068\u3068\u540D\u524D\u3092\u4F1D\u3048\u308B\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
3039
- },
3040
- {
3041
- target: "\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3",
3042
- attr: "<button> + \u72B6\u614B\u306B\u5FDC\u3058\u305F aria-label",
3043
- meaning: "\u81EA\u52D5\u56DE\u8EE2\u3092\u6B62\u3081/\u518D\u958B\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\uFF08\u81EA\u52D5\u56DE\u8EE2\u6642\u306F\u5FC5\u9808\uFF09\u3002"
3044
- },
3045
- {
3046
- target: "\u524D/\u6B21\u30DC\u30BF\u30F3",
3047
- attr: "<button> + aria-label",
3048
- meaning: "\u30A2\u30A4\u30B3\u30F3\u3060\u3051\u3067\u3082\u76EE\u7684\u304C\u4F1D\u308F\u308B\u3088\u3046\u30E9\u30D9\u30EB\u3092\u4ED8\u3051\u308B\u3002"
3049
- },
3050
- {
3051
- target: "\u5404\u30B9\u30E9\u30A4\u30C9",
3052
- attr: 'role="group" + aria-roledescription="\u30B9\u30E9\u30A4\u30C9" + aria-label="3\u679A\u4E2D1\u679A\u76EE"',
3053
- meaning: "\u5168\u4F53\u306E\u679A\u6570\u3068\u73FE\u5728\u4F4D\u7F6E\u3092\u4F1D\u3048\u308B\u3002"
3054
- },
3055
- {
3056
- target: "\u30B9\u30E9\u30A4\u30C9\u306E\u7BB1",
3057
- attr: 'aria-live="off | polite"',
3058
- meaning: "\u81EA\u52D5\u56DE\u8EE2\u4E2D\u306F off\u3001\u505C\u6B62/\u624B\u52D5\u4E2D\u306F polite \u306B\u5207\u308A\u66FF\u3048\u308B\u3002"
3059
2665
  },
3060
2666
  {
3061
- target: "\u975E\u8868\u793A\u30B9\u30E9\u30A4\u30C9",
3062
- attr: "hidden",
3063
- meaning: "\u8868\u793A\u4E2D\u4EE5\u5916\u306F\u8AAD\u307F\u4E0A\u3052/\u64CD\u4F5C\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
2667
+ keys: "Home / End",
2668
+ action: "\u6700\u521D / \u6700\u5F8C\u306E\uFF08\u898B\u3048\u3066\u3044\u308B\uFF09\u884C\u3078\u79FB\u52D5",
2669
+ requirement: "recommended"
3064
2670
  }
3065
2671
  ],
3066
- checklist: [
3067
- "\u81EA\u52D5\u56DE\u8EE2\u3059\u308B\u306A\u3089\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u3092\u5FC5\u9808\u3067\u7528\u610F\u3057\u3066\u3044\u308B",
3068
- "\u30D5\u30A9\u30FC\u30AB\u30B9\uFF0F\u30DB\u30D0\u30FC\u306E\u9593\u306F\u81EA\u52D5\u56DE\u8EE2\u304C\u4E00\u6642\u505C\u6B62\u3059\u308B",
3069
- "\u524D/\u6B21/\u518D\u751F\u505C\u6B62\u306F\u3059\u3079\u3066\u30CD\u30A4\u30C6\u30A3\u30D6\u306E <button>\uFF08div \u3092\u4F7F\u308F\u306A\u3044\uFF09",
3070
- "\u30A2\u30A4\u30B3\u30F3\u30DC\u30BF\u30F3\u306B aria-label\u3001\u505C\u6B62/\u958B\u59CB\u3067\u30E9\u30D9\u30EB\u3092\u5207\u308A\u66FF\u3048\u3066\u3044\u308B",
3071
- '\u5404\u30B9\u30E9\u30A4\u30C9\u306B role="group" + \u300C\u25CB\u679A\u4E2D\u25CB\u679A\u76EE\u300D\u306E\u30E9\u30D9\u30EB\u304C\u3042\u308B',
3072
- '\u81EA\u52D5\u56DE\u8EE2\u4E2D\u306F aria-live="off"\u3001\u505C\u6B62/\u624B\u52D5\u6642\u306F polite',
3073
- "\u8868\u793A\u4E2D\u4EE5\u5916\u306E\u30B9\u30E9\u30A4\u30C9\u306F hidden",
3074
- 'aria-roledescription="carousel"\uFF08\u4EFB\u610F\uFF09\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B'
3075
- ],
3076
- antipatterns: [
3077
- {
3078
- title: "\u505C\u6B62\u3067\u304D\u306A\u3044",
3079
- why: "\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u304C\u306A\u304F\u3001WCAG 2.2.2 \u9055\u53CD\u3002\u52D5\u304D\u306B\u5F31\u3044\u4EBA\u304C\u8AAD\u3081\u306A\u3044\u3002"
3080
- },
3081
- {
3082
- title: "\u30D5\u30A9\u30FC\u30AB\u30B9/\u30DB\u30D0\u30FC\u3067\u3082\u6B62\u307E\u3089\u306A\u3044",
3083
- why: "\u64CD\u4F5C\u4E2D\u3082\u52DD\u624B\u306B\u5207\u308A\u66FF\u308F\u308B\u3002"
3084
- },
2672
+ aria: [
3085
2673
  {
3086
- title: "\u77E2\u5370\u304C\u30D5\u30A9\u30FC\u30AB\u30B9\u4E0D\u53EF",
3087
- why: "div + onclick \u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u304B\u3089\u64CD\u4F5C\u3067\u304D\u306A\u3044\u3002"
2674
+ target: "\u5916\u67A0",
2675
+ attr: 'role="treegrid" + aria-label',
2676
+ meaning: "\u300C\u958B\u9589\u3067\u304D\u308B\u8868\u300D\u3060\u3068\u4F1D\u3048\u308B\u3002\u540D\u524D\uFF08\u30E9\u30D9\u30EB\uFF09\u3082\u4ED8\u3051\u308B\u3002"
3088
2677
  },
3089
2678
  {
3090
- title: "\u4F4D\u7F6E\u304C\u4F1D\u308F\u3089\u306A\u3044",
3091
- why: '\u30B9\u30E9\u30A4\u30C9\u306B role="group" \u3082\u300C\u25CB\u679A\u4E2D\u25CB\u679A\u76EE\u300D\u30E9\u30D9\u30EB\u3082\u306A\u3044\u3002'
3092
- }
3093
- ],
3094
- notes: [
3095
- "aria-roledescription \u3092\u4ED8\u3051\u308B\u3068\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u304C\u9818\u57DF\u3092\u300C\u304A\u3059\u3059\u3081\u7279\u96C6, \u30AB\u30EB\u30FC\u30BB\u30EB\u300D\u3001\u5404\u30B9\u30E9\u30A4\u30C9\u3092\u300C3\u679A\u4E2D1\u679A\u76EE, \u30B9\u30E9\u30A4\u30C9\u300D\u306E\u3088\u3046\u306B\u6848\u5185\u3057\u307E\u3059\uFF08\u4EFB\u610F\u3067\u3059\u304C\u5206\u304B\u308A\u3084\u3059\u304F\u306A\u308A\u307E\u3059\uFF09\u3002",
3096
- "\u300C\u518D\u751F/\u505C\u6B62\u30DC\u30BF\u30F3\u300D\u306F\u3001\u30B9\u30E9\u30A4\u30C9\u3088\u308A\u524D\uFF08DOM \u4E0A\u3067\u5148\uFF09\u306B\u7F6E\u304F\u306E\u304C\u63A8\u5968\u3067\u3059\u3002\u30AD\u30FC\u30DC\u30FC\u30C9\u5229\u7528\u8005\u304C\u52D5\u304D\u306B\u6C17\u3065\u3044\u305F\u3068\u304D\u3001\u3059\u3050\u6B62\u3081\u3089\u308C\u308B\u3088\u3046\u306B\u3059\u308B\u305F\u3081\u3067\u3059\u3002"
3097
- ]
3098
- };
3099
- var tooltip = {
3100
- slug: "tooltip",
3101
- keyboard: [
3102
- {
3103
- keys: "Tab",
3104
- action: "\u30C8\u30EA\u30AC\u30FC\u306B\u30D5\u30A9\u30FC\u30AB\u30B9 \u2192 \u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u304C\u8868\u793A\u3055\u308C\u308B",
3105
- requirement: "required"
2679
+ target: "\u5404\u884C",
2680
+ attr: 'role="row"',
2681
+ meaning: "\u8868\u306E1\u884C\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
3106
2682
  },
3107
2683
  {
3108
- keys: "Esc",
3109
- action: "\u8868\u793A\u4E2D\u306E\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u9589\u3058\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30C8\u30EA\u30AC\u30FC\u306B\u6B8B\u3059\uFF09",
3110
- requirement: "required"
3111
- }
3112
- ],
3113
- aria: [
2684
+ target: "\u898B\u51FA\u3057\u30BB\u30EB",
2685
+ attr: 'role="columnheader"',
2686
+ meaning: "\u5217\u306E\u898B\u51FA\u3057\u3002\u5404\u30BB\u30EB\u304C\u3069\u306E\u5217\u306E\u5024\u304B\u3092\u95A2\u9023\u4ED8\u3051\u308B\u3002"
2687
+ },
3114
2688
  {
3115
- target: "\u30C8\u30EA\u30AC\u30FC",
3116
- attr: 'aria-describedby="\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u306Eid"',
3117
- meaning: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u300C\u8AAC\u660E\u300D\u3068\u3057\u3066\u95A2\u9023\u4ED8\u3051\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u6642\u306B\u8AAD\u307F\u4E0A\u3052\u3089\u308C\u308B\u3002"
2689
+ target: "\u30C7\u30FC\u30BF\u30BB\u30EB",
2690
+ attr: 'role="gridcell"',
2691
+ meaning: "\u884C\u306E\u4E2D\u306E1\u3064\u306E\u30BB\u30EB\u3002"
3118
2692
  },
3119
2693
  {
3120
- target: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53",
3121
- attr: 'role="tooltip"',
3122
- meaning: "\u3053\u308C\u304C\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3067\u3042\u308B\u3053\u3068\u3092\u793A\u3059\u3002"
2694
+ target: "\u5C55\u958B\u3067\u304D\u308B\u89AA\u884C",
2695
+ attr: 'aria-expanded="true | false"',
2696
+ meaning: "\u305D\u306E\u884C\u304C\u958B\u3044\u3066\u3044\u308B\u304B\u3002\u958B\u9589\u306B\u5408\u308F\u305B\u3066\u5FC5\u305A\u66F4\u65B0\u3059\u308B\u3002"
3123
2697
  },
3124
2698
  {
3125
- target: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53",
3126
- attr: "hidden\uFF08\u975E\u8868\u793A\u6642\uFF09",
3127
- meaning: "\u51FA\u3066\u3044\u306A\u3044\u9593\u306F\u8AAD\u307F\u4E0A\u3052\u30FB\u8868\u793A\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
2699
+ target: "\u5404\u884C",
2700
+ attr: "aria-level / aria-posinset / aria-setsize",
2701
+ meaning: "\u968E\u5C64\u306E\u6DF1\u3055\u3068\u3001\u540C\u968E\u5C64\u3067\u306E\u4F4D\u7F6E\uFF08\u4EFB\u610F\u30FB\u63A8\u5968\uFF09\u3002"
3128
2702
  },
3129
2703
  {
3130
- target: "\u30C8\u30EA\u30AC\u30FC",
3131
- attr: "\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306A\u8981\u7D20\uFF08<button> \u7B49\uFF09",
3132
- meaning: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u3082\u5230\u9054\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002<div> \u7B49\u306B\u3057\u306A\u3044\u3002"
2704
+ target: "\u884C\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u7BA1\u7406\uFF09",
2705
+ attr: 'tabindex="0 | -1"',
2706
+ meaning: "roving tabindex\u3002\u4ECA\u3044\u308B\u884C\u3060\u3051 0\u3001\u307B\u304B\u306F -1\u3002"
2707
+ },
2708
+ {
2709
+ target: "\u9589\u3058\u3066\u3044\u308B\u5B50\u884C",
2710
+ attr: "hidden",
2711
+ meaning: "\u9589\u3058\u3066\u3044\u308B\u9593\u306FDOM\u304B\u3089\u96A0\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u306E\u5BFE\u8C61\u5916\u306B\u3059\u308B\u3002"
3133
2712
  }
3134
2713
  ],
3135
2714
  checklist: [
3136
- "\u30C8\u30EA\u30AC\u30FC\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u53EF\u80FD\u306A\u8981\u7D20\uFF08<button> \u7B49\uFF09",
3137
- "\u30C8\u30EA\u30AC\u30FC\u306B aria-describedby \u3067\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3092\u95A2\u9023\u4ED8\u3051\u3066\u3044\u308B",
3138
- '\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u672C\u4F53\u306B role="tooltip" \u3092\u4ED8\u3051\u3066\u3044\u308B',
3139
- "\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u3082\u30DB\u30D0\u30FC\u3067\u3082\u8868\u793A\u3055\u308C\u308B",
3140
- "Esc \u3067\u9589\u3058\u3089\u308C\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u306F\u30C8\u30EA\u30AC\u30FC\u306B\u6B8B\u3059\uFF09",
3141
- "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u81EA\u8EAB\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u3089\u306A\u3044\uFF0F\u64CD\u4F5C\u8981\u7D20\u3092\u5165\u308C\u306A\u3044",
3142
- "\u64CD\u4F5C\u306B\u5FC5\u9808\u306E\u60C5\u5831\u3092\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u300C\u3060\u3051\u300D\u306B\u5165\u308C\u3066\u3044\u306A\u3044"
2715
+ '\u5916\u67A0\u306B role="treegrid" \u3068 aria-label\uFF08\u540D\u524D\uFF09\u304C\u4ED8\u3044\u3066\u3044\u308B',
2716
+ '\u884C\u306F role="row"\u3001\u30BB\u30EB\u306F role="gridcell" / role="columnheader"',
2717
+ "\u5C55\u958B\u3067\u304D\u308B\u89AA\u884C\u306B aria-expanded \u304C\u3042\u308A\u3001\u958B\u9589\u3068\u5E38\u306B\u4E00\u81F4\u3057\u3066\u3044\u308B",
2718
+ "\u9589\u3058\u3066\u3044\u308B\u5B50\u884C\u306F hidden \u3067\u30AD\u30FC\u30DC\u30FC\u30C9/\u8AAD\u307F\u4E0A\u3052\u304B\u3089\u5916\u308C\u3066\u3044\u308B",
2719
+ "\u30B0\u30EA\u30C3\u30C9\u5185\u306F1\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3067\u3001\u2191\u2193 \u3067\u884C\u79FB\u52D5\u3067\u304D\u308B\uFF08roving tabindex\uFF09",
2720
+ "\u2192 \u3067\u5C55\u958B\u3001\u2190 \u3067\u6298\u308A\u305F\u305F\u307F\u304C\u3067\u304D\u308B",
2721
+ "\uFF08\u4EFB\u610F\uFF09Home / End \u3067\u6700\u521D\u30FB\u6700\u5F8C\u306E\u884C\u3078\u79FB\u52D5\u3067\u304D\u308B",
2722
+ "\uFF08\u4EFB\u610F\uFF09aria-level / aria-posinset / aria-setsize \u3067\u968E\u5C64\u3068\u4F4D\u7F6E\u3092\u4F1D\u3048\u308B",
2723
+ "\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u898B\u3048\u308B\uFF08\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u3066\u3044\u306A\u3044\uFF09"
3143
2724
  ],
3144
2725
  antipatterns: [
3145
2726
  {
3146
- title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u51FA\u306A\u3044",
3147
- why: "title \u3082\u30DB\u30D0\u30FC\u5C02\u7528CSS\u3082\u3001Tab \u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u306F\u8868\u793A\u3055\u308C\u306A\u3044\u3002"
2727
+ title: "\u8868\u30FB\u884C\u30FB\u30BB\u30EB\u306E\u610F\u5473\u304C\u7121\u3044",
2728
+ why: 'role="treegrid" \u7B49\u304C\u7121\u304F\u3001\u30B9\u30AF\u30EA\u30FC\u30F3\u30EA\u30FC\u30C0\u30FC\u306B\u306F\u300C\u305F\u3060\u306E\u30C6\u30AD\u30B9\u30C8\u306E\u584A\u300D\u306B\u805E\u3053\u3048\u308B\u3002\u3069\u306E\u30BB\u30EB\u304C\u3069\u306E\u5217\u304B\u3082\u95A2\u9023\u4ED8\u304B\u306A\u3044\u3002'
3148
2729
  },
3149
2730
  {
3150
- title: "\u30BF\u30C3\u30C1\u3067\u51FA\u306A\u3044",
3151
- why: "\u30DB\u30D0\u30FC\u306E\u7121\u3044\u7AEF\u672B\u3067\u306F\u6C38\u9060\u306B\u8868\u793A\u3055\u308C\u306A\u3044\u3002"
2731
+ title: "\u958B\u9589\u72B6\u614B\u304C\u4F1D\u308F\u3089\u306A\u3044",
2732
+ why: "aria-expanded \u304C\u7121\u304F\u3001\u958B\u3044\u3066\u3044\u308B\u306E\u304B\u9589\u3058\u3066\u3044\u308B\u306E\u304B\u5206\u304B\u3089\u306A\u3044\u3002"
3152
2733
  },
3153
2734
  {
3154
- title: "\u95A2\u9023\u4ED8\u3051\u304C\u7121\u3044",
3155
- why: "aria-describedby \u304C\u7121\u304F\u3001\u8AAC\u660E\u3068\u30C8\u30EA\u30AC\u30FC\u304C\u7D50\u3073\u3064\u3044\u3066\u3044\u306A\u3044\u3002"
2735
+ title: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3067\u304D\u306A\u3044",
2736
+ why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308C\u305A\u3001\u77E2\u5370\u3067\u306E\u79FB\u52D5\u30FB\u5C55\u958B\u30FB\u6298\u308A\u305F\u305F\u307F\u304C\u3067\u304D\u306A\u3044\u3002"
3156
2737
  },
3157
2738
  {
3158
- title: "\u9589\u3058\u3089\u308C\u306A\u3044",
3159
- why: "Esc \u3067\u9589\u3058\u308B\u624B\u6BB5\u304C\u306A\u3044\uFF08WCAG 1.4.13 \u9055\u53CD\uFF09\u3002"
2739
+ title: "roving tabindex \u304C\u7121\u3044",
2740
+ why: "\u305D\u3082\u305D\u3082\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u7BA1\u7406\u304C\u5B58\u5728\u3057\u306A\u3044\u3002"
2741
+ },
2742
+ {
2743
+ title: "display:none \u306E\u30A4\u30F3\u30E9\u30A4\u30F3\u30B9\u30BF\u30A4\u30EB\u983C\u307F",
2744
+ why: "hidden \u5C5E\u6027\u3084\u72B6\u614B\u7BA1\u7406\u304C\u7121\u3044\u3002"
3160
2745
  }
3161
2746
  ],
3162
2747
  notes: [
3163
- "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u81EA\u8EAB\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u53D7\u3051\u53D6\u308A\u307E\u305B\u3093\uFF08Tab \u306E\u5BFE\u8C61\u306B\u3057\u306A\u3044\uFF09\u3002\u3042\u304F\u307E\u3067\u30C8\u30EA\u30AC\u30FC\u306E\u88DC\u8DB3\u306A\u306E\u3067\u3001\u4E2D\u306B\u30EA\u30F3\u30AF\u3084\u30DC\u30BF\u30F3\u3092\u5165\u308C\u308B\u306E\u3082\u907F\u3051\u307E\u3059\uFF08\u64CD\u4F5C\u8981\u7D20\u3092\u5165\u308C\u305F\u3044\u306A\u3089\u3001\u305D\u308C\u306F\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u3067\u306F\u306A\u304F\u30DD\u30C3\u30D7\u30AA\u30FC\u30D0\u30FC/\u30C0\u30A4\u30A2\u30ED\u30B0\u3067\u3059\uFF09\u3002"
2748
+ "\u30C4\u30EA\u30FC\u30B0\u30EA\u30C3\u30C9\u306E\u4E2D\u306F1\u3064\u306E\u30BF\u30D6\u30B9\u30C8\u30C3\u30D7\u3002Tab \u3092\u9023\u6253\u3057\u3066\u3082\u5404\u884C\u306B\u6B62\u307E\u3089\u305A\u3001\u77E2\u5370\u30AD\u30FC\u3067\u884C\u3092\u79FB\u52D5\u3059\u308B\uFF08roving tabindex\uFF09\u3002",
2749
+ "\u77E2\u5370\u3067\u79FB\u52D5\u3059\u308B\u884C\u306F\u300C\u898B\u3048\u3066\u3044\u308B\u884C\u300D\u3060\u3051\u306B\u7D5E\u308B\u3002\u958B\u9589\u6642\u306F aria-expanded \u3068\u5B50\u884C\u306E hidden \u3092\u5FC5\u305A\u4E00\u81F4\u3055\u305B\u308B\u3053\u3068\u3002"
3164
2750
  ]
3165
2751
  };
3166
2752
  var windowSplitter = {
@@ -3298,11 +2884,423 @@ var allViewpoints = [
3298
2884
  tooltip,
3299
2885
  windowSplitter
3300
2886
  ];
3301
- var viewpoints = new Map(
3302
- patternViewpointSchema.array().parse(allViewpoints).map((v) => [v.slug, v])
3303
- );
3304
- function getPatternViewpoint(slug) {
3305
- return viewpoints.get(slug);
2887
+ var viewpoints = new Map(
2888
+ patternViewpointSchema.array().parse(allViewpoints).map((v) => [v.slug, v])
2889
+ );
2890
+ function getPatternViewpoint(slug) {
2891
+ return viewpoints.get(slug);
2892
+ }
2893
+ var waic = (anchor) => `https://waic.jp/translations/WCAG22/#${anchor}`;
2894
+ var understanding = (anchor) => `https://www.w3.org/WAI/WCAG22/Understanding/${anchor}.html`;
2895
+ var rawCriteria = [
2896
+ // ───────────────────────────────────────── 知覚可能 ─────
2897
+ {
2898
+ num: "1.1.1",
2899
+ slug: "1-1-1",
2900
+ ja: "\u975E\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30C6\u30F3\u30C4",
2901
+ en: "Non-text Content",
2902
+ level: "A",
2903
+ principle: "\u77E5\u899A\u53EF\u80FD",
2904
+ guideline: "1.1 \u30C6\u30AD\u30B9\u30C8\u306B\u3088\u308B\u4EE3\u66FF",
2905
+ summary: "\u753B\u50CF\u30FB\u30A2\u30A4\u30B3\u30F3\u30FB\u56F3\u306A\u3069\u6587\u5B57\u3067\u306A\u3044\u30B3\u30F3\u30C6\u30F3\u30C4\u306B\u306F\u3001\u540C\u3058\u610F\u5473\u3092\u4F1D\u3048\u308B\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8\u3092\u7528\u610F\u3059\u308B\u3002\u88C5\u98FE\u3060\u3051\u306E\u3082\u306E\u306F\u652F\u63F4\u6280\u8853\u304B\u3089\u96A0\u3059\u3002",
2906
+ waicUrl: waic("non-text-content"),
2907
+ understandingUrl: understanding("non-text-content"),
2908
+ patterns: ["meter", "table"]
2909
+ },
2910
+ {
2911
+ num: "1.3.1",
2912
+ slug: "1-3-1",
2913
+ ja: "\u60C5\u5831\u53CA\u3073\u95A2\u4FC2\u6027",
2914
+ en: "Info and Relationships",
2915
+ level: "A",
2916
+ principle: "\u77E5\u899A\u53EF\u80FD",
2917
+ guideline: "1.3 \u9069\u5FDC\u53EF\u80FD",
2918
+ summary: "\u898B\u305F\u76EE\u3067\u4F1D\u3048\u3066\u3044\u308B\u69CB\u9020\u3084\u95A2\u4FC2\uFF08\u898B\u51FA\u3057\u30FB\u30EA\u30B9\u30C8\u30FB\u8868\u306E\u5BFE\u5FDC\u30FB\u30E9\u30D9\u30EB\u3068\u5165\u529B\u6B04\u306E\u7D50\u3073\u3064\u304D\uFF09\u3092\u3001HTML \u306E\u30DE\u30FC\u30AF\u30A2\u30C3\u30D7\u3084 ARIA \u3067\u30D7\u30ED\u30B0\u30E9\u30E0\u306B\u3082\u4F1D\u308F\u308B\u5F62\u306B\u3059\u308B\u3002",
2919
+ waicUrl: waic("info-and-relationships"),
2920
+ understandingUrl: understanding("info-and-relationships"),
2921
+ patterns: [
2922
+ "accordion",
2923
+ "disclosure",
2924
+ "alert",
2925
+ "dialog-modal",
2926
+ "alertdialog",
2927
+ "breadcrumb",
2928
+ "menu-menubar",
2929
+ "menu-button",
2930
+ "link",
2931
+ "landmarks",
2932
+ "checkbox",
2933
+ "radio-group",
2934
+ "switch",
2935
+ "combobox",
2936
+ "listbox",
2937
+ "meter",
2938
+ "tabs",
2939
+ "table",
2940
+ "grid",
2941
+ "treegrid",
2942
+ "tree-view",
2943
+ "feed",
2944
+ "carousel",
2945
+ "tooltip"
2946
+ ]
2947
+ },
2948
+ {
2949
+ num: "1.4.3",
2950
+ slug: "1-4-3",
2951
+ ja: "\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\uFF08\u6700\u4F4E\u9650\uFF09",
2952
+ en: "Contrast (Minimum)",
2953
+ level: "AA",
2954
+ principle: "\u77E5\u899A\u53EF\u80FD",
2955
+ guideline: "1.4 \u5224\u5225\u53EF\u80FD",
2956
+ summary: "\u6587\u5B57\u3068\u80CC\u666F\u306E\u660E\u6697\u306E\u5DEE\uFF08\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\uFF09\u3092\u3001\u901A\u5E38\u306E\u6587\u5B57\u3067 4.5:1 \u4EE5\u4E0A\u3001\u5927\u304D\u306A\u6587\u5B57\u3067 3:1 \u4EE5\u4E0A\u306B\u3059\u308B\u3002",
2957
+ waicUrl: waic("contrast-minimum"),
2958
+ understandingUrl: understanding("contrast-minimum"),
2959
+ patterns: []
2960
+ },
2961
+ {
2962
+ num: "1.4.11",
2963
+ slug: "1-4-11",
2964
+ ja: "\u975E\u30C6\u30AD\u30B9\u30C8\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8",
2965
+ en: "Non-text Contrast",
2966
+ level: "AA",
2967
+ principle: "\u77E5\u899A\u53EF\u80FD",
2968
+ guideline: "1.4 \u5224\u5225\u53EF\u80FD",
2969
+ summary: "\u30DC\u30BF\u30F3\u306E\u5883\u754C\u3084\u30D5\u30A9\u30FC\u30E0\u90E8\u54C1\u3001\u72B6\u614B\u3092\u793A\u3059\u30A2\u30A4\u30B3\u30F3\u306A\u3069\u3001\u64CD\u4F5C\u306B\u5FC5\u8981\u306A\u898B\u305F\u76EE\u306E\u8981\u7D20\u3082\u80CC\u666F\u3068 3:1 \u4EE5\u4E0A\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u3092\u78BA\u4FDD\u3059\u308B\u3002",
2970
+ waicUrl: waic("non-text-contrast"),
2971
+ understandingUrl: understanding("non-text-contrast"),
2972
+ patterns: ["button", "slider", "slider-multithumb"]
2973
+ },
2974
+ {
2975
+ num: "1.4.13",
2976
+ slug: "1-4-13",
2977
+ ja: "\u30DB\u30D0\u30FC\u53C8\u306F\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u8868\u793A\u3055\u308C\u308B\u30B3\u30F3\u30C6\u30F3\u30C4",
2978
+ en: "Content on Hover or Focus",
2979
+ level: "AA",
2980
+ principle: "\u77E5\u899A\u53EF\u80FD",
2981
+ guideline: "1.4 \u5224\u5225\u53EF\u80FD",
2982
+ summary: "\u30DB\u30D0\u30FC\u3084\u30D5\u30A9\u30FC\u30AB\u30B9\u3067\u51FA\u308B\u8FFD\u52A0\u8868\u793A\uFF08\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u7B49\uFF09\u306F\u3001\u6D88\u3055\u305A\u306B\u8AAD\u3081\u308B\u30FB\u30DD\u30A4\u30F3\u30BF\u3092\u91CD\u306D\u3089\u308C\u308B\u30FBEsc \u306A\u3069\u3067\u6D88\u305B\u308B\u3001\u306E3\u3064\u3092\u6E80\u305F\u3059\u3002",
2983
+ waicUrl: waic("content-on-hover-or-focus"),
2984
+ understandingUrl: understanding("content-on-hover-or-focus"),
2985
+ patterns: ["tooltip"]
2986
+ },
2987
+ // ───────────────────────────────────────── 操作可能 ─────
2988
+ {
2989
+ num: "2.1.1",
2990
+ slug: "2-1-1",
2991
+ ja: "\u30AD\u30FC\u30DC\u30FC\u30C9",
2992
+ en: "Keyboard",
2993
+ level: "A",
2994
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
2995
+ guideline: "2.1 \u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u53EF\u80FD",
2996
+ summary: "\u3059\u3079\u3066\u306E\u6A5F\u80FD\u3092\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u64CD\u4F5C\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30DE\u30A6\u30B9\u524D\u63D0\u306E\u72EC\u81EA\u90E8\u54C1\u3067\u3082\u3001Tab \u3067\u5230\u9054\u3057 Enter/Space/\u77E2\u5370\u306A\u3069\u3067\u64CD\u4F5C\u3067\u304D\u308B\u3053\u3068\u3002",
2997
+ waicUrl: waic("keyboard"),
2998
+ understandingUrl: understanding("keyboard"),
2999
+ patterns: [
3000
+ "accordion",
3001
+ "disclosure",
3002
+ "menu-menubar",
3003
+ "menu-button",
3004
+ "link",
3005
+ "button",
3006
+ "checkbox",
3007
+ "radio-group",
3008
+ "switch",
3009
+ "combobox",
3010
+ "listbox",
3011
+ "slider",
3012
+ "slider-multithumb",
3013
+ "spinbutton",
3014
+ "tabs",
3015
+ "toolbar",
3016
+ "grid",
3017
+ "treegrid",
3018
+ "tree-view",
3019
+ "carousel",
3020
+ "window-splitter"
3021
+ ]
3022
+ },
3023
+ {
3024
+ num: "2.1.2",
3025
+ slug: "2-1-2",
3026
+ ja: "\u30AD\u30FC\u30DC\u30FC\u30C9\u30C8\u30E9\u30C3\u30D7\u306A\u3057",
3027
+ en: "No Keyboard Trap",
3028
+ level: "A",
3029
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3030
+ guideline: "2.1 \u30AD\u30FC\u30DC\u30FC\u30C9\u64CD\u4F5C\u53EF\u80FD",
3031
+ summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u5165\u3063\u305F\u5834\u6240\u304B\u3089\u30AD\u30FC\u30DC\u30FC\u30C9\u3060\u3051\u3067\u629C\u3051\u51FA\u305B\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30E2\u30FC\u30C0\u30EB\u5185\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u9589\u3058\u8FBC\u3081\u3089\u308C\u305F\u307E\u307E\u623B\u308C\u306A\u3044\u72B6\u614B\u3092\u4F5C\u3089\u306A\u3044\u3002",
3032
+ waicUrl: waic("no-keyboard-trap"),
3033
+ understandingUrl: understanding("no-keyboard-trap"),
3034
+ patterns: ["dialog-modal", "alertdialog"]
3035
+ },
3036
+ {
3037
+ num: "2.2.2",
3038
+ slug: "2-2-2",
3039
+ ja: "\u4E00\u6642\u505C\u6B62\u3001\u505C\u6B62\u3001\u975E\u8868\u793A",
3040
+ en: "Pause, Stop, Hide",
3041
+ level: "A",
3042
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3043
+ guideline: "2.2 \u5341\u5206\u306A\u6642\u9593",
3044
+ summary: "\u81EA\u52D5\u3067\u52D5\u304F\u30FB\u70B9\u6EC5\u3059\u308B\u30FB\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u30B3\u30F3\u30C6\u30F3\u30C4\uFF08\u30AB\u30EB\u30FC\u30BB\u30EB\u7B49\uFF09\u306F\u3001\u30E6\u30FC\u30B6\u30FC\u304C\u4E00\u6642\u505C\u6B62\u30FB\u505C\u6B62\u30FB\u975E\u8868\u793A\u306B\u3067\u304D\u308B\u3088\u3046\u306B\u3059\u308B\u3002",
3045
+ waicUrl: waic("pause-stop-hide"),
3046
+ understandingUrl: understanding("pause-stop-hide"),
3047
+ patterns: ["carousel"]
3048
+ },
3049
+ {
3050
+ num: "2.4.3",
3051
+ slug: "2-4-3",
3052
+ ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u9806\u5E8F",
3053
+ en: "Focus Order",
3054
+ level: "A",
3055
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3056
+ guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
3057
+ summary: "\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u79FB\u308B\u9806\u756A\u3092\u3001\u610F\u5473\u3068\u64CD\u4F5C\u304C\u901A\u3058\u308B\u81EA\u7136\u306A\u9806\u5E8F\u306B\u3059\u308B\u3002\u30C0\u30A4\u30A2\u30ED\u30B0\u3092\u958B\u3044\u305F\u3089\u4E2D\u3078\u3001\u9589\u3058\u305F\u3089\u5143\u306E\u4F4D\u7F6E\u3078\u3001\u3068\u3044\u3063\u305F\u79FB\u52D5\u3082\u542B\u3080\u3002",
3058
+ waicUrl: waic("focus-order"),
3059
+ understandingUrl: understanding("focus-order"),
3060
+ patterns: [
3061
+ "accordion",
3062
+ "dialog-modal",
3063
+ "alertdialog",
3064
+ "breadcrumb",
3065
+ "menu-menubar",
3066
+ "landmarks",
3067
+ "radio-group",
3068
+ "tabs",
3069
+ "toolbar",
3070
+ "grid"
3071
+ ]
3072
+ },
3073
+ {
3074
+ num: "2.4.7",
3075
+ slug: "2-4-7",
3076
+ ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u306E\u53EF\u8996\u5316",
3077
+ en: "Focus Visible",
3078
+ level: "AA",
3079
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3080
+ guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
3081
+ summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u64CD\u4F5C\u3057\u3066\u3044\u308B\u4ECA\u3069\u3053\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u3042\u308B\u304B\u304C\u3001\u898B\u3066\u5206\u304B\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u30D5\u30A9\u30FC\u30AB\u30B9\u30EA\u30F3\u30B0\u3092\u6D88\u3057\u305F\u307E\u307E\u306B\u3057\u306A\u3044\u3002",
3082
+ waicUrl: waic("focus-visible"),
3083
+ understandingUrl: understanding("focus-visible"),
3084
+ patterns: ["accordion", "disclosure", "dialog-modal", "menu-menubar", "link", "button", "tabs"]
3085
+ },
3086
+ {
3087
+ num: "2.4.11",
3088
+ slug: "2-4-11",
3089
+ ja: "\u96A0\u3055\u308C\u306A\u3044\u30D5\u30A9\u30FC\u30AB\u30B9\uFF08\u6700\u4F4E\u9650\uFF09",
3090
+ en: "Focus Not Obscured (Minimum)",
3091
+ level: "AA",
3092
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3093
+ guideline: "2.4 \u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u53EF\u80FD",
3094
+ isNew22: true,
3095
+ summary: "\u30AD\u30FC\u30DC\u30FC\u30C9\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u305F\u8981\u7D20\u304C\u3001\u56FA\u5B9A\u30D8\u30C3\u30C0\u30FC\u3084\u30C0\u30A4\u30A2\u30ED\u30B0\u306A\u3069\u306B\u5B8C\u5168\u306B\u96A0\u308C\u3066\u898B\u3048\u306A\u304F\u306A\u3089\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002",
3096
+ waicUrl: waic("focus-not-obscured-minimum"),
3097
+ understandingUrl: understanding("focus-not-obscured-minimum"),
3098
+ patterns: ["dialog-modal"]
3099
+ },
3100
+ {
3101
+ num: "2.5.7",
3102
+ slug: "2-5-7",
3103
+ ja: "\u30C9\u30E9\u30C3\u30B0\u52D5\u4F5C",
3104
+ en: "Dragging Movements",
3105
+ level: "AA",
3106
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3107
+ guideline: "2.5 \u5165\u529B\u30E2\u30C0\u30EA\u30C6\u30A3",
3108
+ isNew22: true,
3109
+ summary: "\u30C9\u30E9\u30C3\u30B0\u3067\u884C\u3046\u64CD\u4F5C\uFF08\u30B9\u30E9\u30A4\u30C0\u30FC\u30FB\u4E26\u3079\u66FF\u3048\u30FB\u5883\u754C\u306E\u79FB\u52D5\u306A\u3069\uFF09\u306B\u306F\u3001\u30C9\u30E9\u30C3\u30B0\u3092\u4F7F\u308F\u306A\u3044\u4EE3\u66FF\u624B\u6BB5\uFF08\u30AF\u30EA\u30C3\u30AF\u3084\u30DC\u30BF\u30F3\uFF09\u3082\u7528\u610F\u3059\u308B\u3002",
3110
+ waicUrl: waic("dragging-movements"),
3111
+ understandingUrl: understanding("dragging-movements"),
3112
+ patterns: ["slider", "slider-multithumb", "window-splitter"]
3113
+ },
3114
+ {
3115
+ num: "2.5.8",
3116
+ slug: "2-5-8",
3117
+ ja: "\u30BF\u30FC\u30B2\u30C3\u30C8\u306E\u30B5\u30A4\u30BA\uFF08\u6700\u5C0F\uFF09",
3118
+ en: "Target Size (Minimum)",
3119
+ level: "AA",
3120
+ principle: "\u64CD\u4F5C\u53EF\u80FD",
3121
+ guideline: "2.5 \u5165\u529B\u30E2\u30C0\u30EA\u30C6\u30A3",
3122
+ isNew22: true,
3123
+ summary: "\u30AF\u30EA\u30C3\u30AF\u30FB\u30BF\u30C3\u30D7\u3067\u304D\u308B\u5BFE\u8C61\u306F\u539F\u5247 24\xD724 CSS\u30D4\u30AF\u30BB\u30EB\u4EE5\u4E0A\u306B\u3059\u308B\u304B\u3001\u5341\u5206\u306A\u9593\u9694\u3092\u7A7A\u3051\u308B\u3002\u5C0F\u3055\u3059\u304E\u308B\u64CD\u4F5C\u5BFE\u8C61\u3092\u907F\u3051\u308B\u3002",
3124
+ waicUrl: waic("target-size-minimum"),
3125
+ understandingUrl: understanding("target-size-minimum"),
3126
+ patterns: ["menu-button", "link", "button", "checkbox", "switch", "spinbutton"]
3127
+ },
3128
+ // ───────────────────────────────────────── 理解可能 ─────
3129
+ {
3130
+ num: "3.2.1",
3131
+ slug: "3-2-1",
3132
+ ja: "\u30D5\u30A9\u30FC\u30AB\u30B9\u6642",
3133
+ en: "On Focus",
3134
+ level: "A",
3135
+ principle: "\u7406\u89E3\u53EF\u80FD",
3136
+ guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
3137
+ summary: "\u8981\u7D20\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u305F\u3060\u3051\u3067\u3001\u30DA\u30FC\u30B8\u9077\u79FB\u3084\u30E2\u30FC\u30C0\u30EB\u8868\u793A\u306A\u3069\u6587\u8108\u304C\u52DD\u624B\u306B\u5909\u308F\u308B\u3053\u3068\u306E\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002",
3138
+ waicUrl: waic("on-focus"),
3139
+ understandingUrl: understanding("on-focus"),
3140
+ patterns: []
3141
+ },
3142
+ {
3143
+ num: "3.2.2",
3144
+ slug: "3-2-2",
3145
+ ja: "\u5165\u529B\u6642",
3146
+ en: "On Input",
3147
+ level: "A",
3148
+ principle: "\u7406\u89E3\u53EF\u80FD",
3149
+ guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
3150
+ summary: "\u5024\u3092\u9078\u3093\u3060\u308A\u5165\u529B\u3057\u305F\u3060\u3051\u3067\u4E88\u671F\u305B\u305A\u6587\u8108\u304C\u5909\u308F\u3089\u306A\u3044\u3088\u3046\u306B\u3059\u308B\u3002\u5909\u3048\u308B\u5834\u5408\u306F\u4E8B\u524D\u306B\u77E5\u3089\u305B\u308B\u3002",
3151
+ waicUrl: waic("on-input"),
3152
+ understandingUrl: understanding("on-input"),
3153
+ patterns: []
3154
+ },
3155
+ {
3156
+ num: "3.2.6",
3157
+ slug: "3-2-6",
3158
+ ja: "\u4E00\u8CAB\u3057\u305F\u30D8\u30EB\u30D7",
3159
+ en: "Consistent Help",
3160
+ level: "A",
3161
+ principle: "\u7406\u89E3\u53EF\u80FD",
3162
+ guideline: "3.2 \u4E88\u6E2C\u53EF\u80FD",
3163
+ isNew22: true,
3164
+ summary: "\u554F\u3044\u5408\u308F\u305B\u5148\u3084\u30D8\u30EB\u30D7\u3078\u306E\u5C0E\u7DDA\u3092\u8907\u6570\u30DA\u30FC\u30B8\u3067\u63D0\u4F9B\u3059\u308B\u5834\u5408\u3001\u5404\u30DA\u30FC\u30B8\u3067\u540C\u3058\u76F8\u5BFE\u7684\u306A\u4F4D\u7F6E\u30FB\u9806\u5E8F\u306B\u7F6E\u304F\u3002",
3165
+ waicUrl: waic("consistent-help"),
3166
+ understandingUrl: understanding("consistent-help"),
3167
+ patterns: []
3168
+ },
3169
+ {
3170
+ num: "3.3.1",
3171
+ slug: "3-3-1",
3172
+ ja: "\u30A8\u30E9\u30FC\u306E\u7279\u5B9A",
3173
+ en: "Error Identification",
3174
+ level: "A",
3175
+ principle: "\u7406\u89E3\u53EF\u80FD",
3176
+ guideline: "3.3 \u5165\u529B\u652F\u63F4",
3177
+ summary: "\u5165\u529B\u30A8\u30E9\u30FC\u3092\u81EA\u52D5\u691C\u51FA\u3057\u305F\u3089\u3001\u3069\u3053\u304C\u30FB\u4F55\u304C\u9593\u9055\u3063\u3066\u3044\u308B\u304B\u3092\u30C6\u30AD\u30B9\u30C8\u3067\u5177\u4F53\u7684\u306B\u4F1D\u3048\u308B\u3002",
3178
+ waicUrl: waic("error-identification"),
3179
+ understandingUrl: understanding("error-identification"),
3180
+ patterns: []
3181
+ },
3182
+ {
3183
+ num: "3.3.2",
3184
+ slug: "3-3-2",
3185
+ ja: "\u30E9\u30D9\u30EB\u53C8\u306F\u8AAC\u660E",
3186
+ en: "Labels or Instructions",
3187
+ level: "A",
3188
+ principle: "\u7406\u89E3\u53EF\u80FD",
3189
+ guideline: "3.3 \u5165\u529B\u652F\u63F4",
3190
+ summary: "\u30D5\u30A9\u30FC\u30E0\u90E8\u54C1\u306B\u306F\u3001\u4F55\u3092\u5165\u529B\u3059\u308C\u3070\u3088\u3044\u304B\u5206\u304B\u308B\u30E9\u30D9\u30EB\u3084\u8AAC\u660E\u3092\u4ED8\u3051\u308B\u3002\u30D7\u30EC\u30FC\u30B9\u30DB\u30EB\u30C0\u30FC\u3060\u3051\u306B\u983C\u3089\u306A\u3044\u3002",
3191
+ waicUrl: waic("labels-or-instructions"),
3192
+ understandingUrl: understanding("labels-or-instructions"),
3193
+ patterns: ["checkbox", "radio-group", "combobox", "listbox", "slider", "spinbutton"]
3194
+ },
3195
+ {
3196
+ num: "3.3.7",
3197
+ slug: "3-3-7",
3198
+ ja: "\u5197\u9577\u306A\u5165\u529B",
3199
+ en: "Redundant Entry",
3200
+ level: "A",
3201
+ principle: "\u7406\u89E3\u53EF\u80FD",
3202
+ guideline: "3.3 \u5165\u529B\u652F\u63F4",
3203
+ isNew22: true,
3204
+ summary: "\u540C\u3058\u624B\u7D9A\u304D\u306E\u4E2D\u3067\u4E00\u5EA6\u5165\u529B\u3057\u305F\u60C5\u5831\u3092\u518D\u5165\u529B\u3055\u305B\u306A\u3044\u3002\u81EA\u52D5\u5165\u529B\u3059\u308B\u304B\u3001\u524D\u306B\u5165\u529B\u3057\u305F\u5024\u304B\u3089\u9078\u3079\u308B\u3088\u3046\u306B\u3059\u308B\u3002",
3205
+ waicUrl: waic("redundant-entry"),
3206
+ understandingUrl: understanding("redundant-entry"),
3207
+ patterns: []
3208
+ },
3209
+ {
3210
+ num: "3.3.8",
3211
+ slug: "3-3-8",
3212
+ ja: "\u30A2\u30AF\u30BB\u30B7\u30D6\u30EB\u306A\u8A8D\u8A3C\uFF08\u6700\u4F4E\u9650\uFF09",
3213
+ en: "Accessible Authentication (Minimum)",
3214
+ level: "AA",
3215
+ principle: "\u7406\u89E3\u53EF\u80FD",
3216
+ guideline: "3.3 \u5165\u529B\u652F\u63F4",
3217
+ isNew22: true,
3218
+ summary: "\u30ED\u30B0\u30A4\u30F3\u8A8D\u8A3C\u3067\u3001\u8A18\u61B6\u3084\u30D1\u30BA\u30EB\u306E\u3088\u3046\u306A\u8A8D\u77E5\u6A5F\u80FD\u30C6\u30B9\u30C8\u3060\u3051\u306B\u983C\u3089\u305B\u306A\u3044\u3002\u30D1\u30B9\u30EF\u30FC\u30C9\u7BA1\u7406\u3084\u30B3\u30D4\u30DA\u7B49\u306E\u4EE3\u66FF\u3092\u59A8\u3052\u306A\u3044\u3002",
3219
+ waicUrl: waic("accessible-authentication-minimum"),
3220
+ understandingUrl: understanding("accessible-authentication-minimum"),
3221
+ patterns: []
3222
+ },
3223
+ // ───────────────────────────────────────── 堅牢 ─────────
3224
+ {
3225
+ num: "4.1.2",
3226
+ slug: "4-1-2",
3227
+ ja: "\u540D\u524D\uFF08name\uFF09\u30FB\u5F79\u5272\uFF08role\uFF09\u53CA\u3073\u5024\uFF08value\uFF09",
3228
+ en: "Name, Role, Value",
3229
+ level: "A",
3230
+ principle: "\u5805\u7262",
3231
+ guideline: "4.1 \u4E92\u63DB\u6027",
3232
+ summary: "\u3059\u3079\u3066\u306E UI \u90E8\u54C1\u306B\u3064\u3044\u3066\u3001\u540D\u524D\uFF08\u4F55\u304B\uFF09\u30FB\u5F79\u5272\uFF08\u7A2E\u985E\uFF09\u30FB\u72B6\u614B\u3084\u5024\uFF08\u4ECA\u3069\u3046\u306A\u3063\u3066\u3044\u308B\u304B\uFF09\u304C\u652F\u63F4\u6280\u8853\u306B\u4F1D\u308F\u308B\u3088\u3046\u306B\u3059\u308B\u3002\u81EA\u4F5C\u90E8\u54C1\u3067\u306F ARIA \u3067\u88DC\u3046\u3002",
3233
+ waicUrl: waic("name-role-value"),
3234
+ understandingUrl: understanding("name-role-value"),
3235
+ patterns: [
3236
+ "accordion",
3237
+ "disclosure",
3238
+ "dialog-modal",
3239
+ "alertdialog",
3240
+ "breadcrumb",
3241
+ "menu-menubar",
3242
+ "menu-button",
3243
+ "link",
3244
+ "button",
3245
+ "checkbox",
3246
+ "radio-group",
3247
+ "switch",
3248
+ "combobox",
3249
+ "listbox",
3250
+ "slider",
3251
+ "slider-multithumb",
3252
+ "spinbutton",
3253
+ "meter",
3254
+ "tabs",
3255
+ "toolbar",
3256
+ "grid",
3257
+ "treegrid",
3258
+ "tree-view",
3259
+ "feed",
3260
+ "carousel",
3261
+ "tooltip",
3262
+ "window-splitter"
3263
+ ]
3264
+ },
3265
+ {
3266
+ num: "4.1.3",
3267
+ slug: "4-1-3",
3268
+ ja: "\u30B9\u30C6\u30FC\u30BF\u30B9\u30E1\u30C3\u30BB\u30FC\u30B8",
3269
+ en: "Status Messages",
3270
+ level: "AA",
3271
+ principle: "\u5805\u7262",
3272
+ guideline: "4.1 \u4E92\u63DB\u6027",
3273
+ summary: '\u300C\u4FDD\u5B58\u3057\u307E\u3057\u305F\u300D\u300C3\u4EF6\u30D2\u30C3\u30C8\u300D\u306A\u3069\u306E\u72B6\u614B\u901A\u77E5\u3092\u3001\u30D5\u30A9\u30FC\u30AB\u30B9\u3092\u79FB\u3055\u305A\u306B\u652F\u63F4\u6280\u8853\u3078\u4F1D\u3048\u308B\u3002live region\uFF08aria-live / role="status" \u7B49\uFF09\u3092\u4F7F\u3046\u3002',
3274
+ waicUrl: waic("status-messages"),
3275
+ understandingUrl: understanding("status-messages"),
3276
+ patterns: ["alert", "alertdialog", "combobox", "feed"]
3277
+ }
3278
+ ];
3279
+ var criteria = criterionSchema.array().parse(rawCriteria);
3280
+ function getCriterion(slug) {
3281
+ return criteria.find((c) => c.slug === slug);
3282
+ }
3283
+ function numKey(num) {
3284
+ return num.split(".").map((n) => parseInt(n, 10));
3285
+ }
3286
+ function compareByNum(a, b) {
3287
+ const ka = numKey(a.num);
3288
+ const kb = numKey(b.num);
3289
+ for (let i = 0; i < 3; i++) {
3290
+ const va = ka[i] ?? 0;
3291
+ const vb = kb[i] ?? 0;
3292
+ if (va !== vb) return va - vb;
3293
+ }
3294
+ return 0;
3295
+ }
3296
+ function criteriaByPrinciple() {
3297
+ return principles.map((principle) => ({
3298
+ principle,
3299
+ items: criteria.filter((c) => c.principle === principle).sort(compareByNum)
3300
+ }));
3301
+ }
3302
+ function criteriaForPattern(patternSlug) {
3303
+ return criteria.filter((c) => c.patterns.includes(patternSlug)).sort(compareByNum);
3306
3304
  }
3307
3305
  function getPatternDetail(slug) {
3308
3306
  const pattern = getPattern(slug);
@@ -3319,32 +3317,34 @@ function getCriterionDetail(slug) {
3319
3317
  const relatedPatterns = criterion.patterns.map((s) => getPattern(s)).filter((p) => p !== void 0);
3320
3318
  return { ...criterion, relatedPatterns };
3321
3319
  }
3320
+ var searchIndex = null;
3321
+ function getSearchIndex() {
3322
+ if (searchIndex) return searchIndex;
3323
+ searchIndex = [
3324
+ ...patterns.map((p) => ({
3325
+ kind: "pattern",
3326
+ slug: p.slug,
3327
+ title: `${p.ja}\uFF08${p.en}\uFF09`,
3328
+ subtitle: p.summary,
3329
+ haystack: [p.slug, p.ja, p.en, p.summary].join("\0").toLowerCase()
3330
+ })),
3331
+ ...criteria.map((c) => ({
3332
+ kind: "wcag",
3333
+ slug: c.slug,
3334
+ title: `${c.num} ${c.ja}\uFF08${c.en}\uFF09`,
3335
+ subtitle: c.summary,
3336
+ haystack: [c.slug, c.num, c.ja, c.en, c.summary].join("\0").toLowerCase()
3337
+ }))
3338
+ ];
3339
+ return searchIndex;
3340
+ }
3322
3341
  function search(query) {
3323
3342
  const q = query.trim().toLowerCase();
3324
3343
  if (q === "") return [];
3325
- const hits = [];
3326
- for (const p of patterns) {
3327
- const haystack = [p.slug, p.ja, p.en, p.summary];
3328
- if (haystack.some((f) => f.toLowerCase().includes(q))) {
3329
- hits.push({ kind: "pattern", slug: p.slug, title: `${p.ja}\uFF08${p.en}\uFF09`, subtitle: p.summary });
3330
- }
3331
- }
3332
- for (const c of criteria) {
3333
- const haystack = [c.slug, c.num, c.ja, c.en, c.summary];
3334
- if (haystack.some((f) => f.toLowerCase().includes(q))) {
3335
- hits.push({
3336
- kind: "wcag",
3337
- slug: c.slug,
3338
- title: `${c.num} ${c.ja}\uFF08${c.en}\uFF09`,
3339
- subtitle: c.summary
3340
- });
3341
- }
3342
- }
3343
- return hits;
3344
+ return getSearchIndex().filter((entry) => entry.haystack.includes(q)).map(({ kind, slug, title, subtitle }) => ({ kind, slug, title, subtitle }));
3344
3345
  }
3345
3346
 
3346
3347
  // src/output.ts
3347
- import pc from "picocolors";
3348
3348
  var API_VERSION = 1;
3349
3349
  var ERROR_CODES = {
3350
3350
  ERR_UNKNOWN: "ERR_UNKNOWN",
@@ -3377,39 +3377,6 @@ function humanLog(...args) {
3377
3377
  function jsonOut(type, data) {
3378
3378
  console.log(JSON.stringify({ apiVersion: API_VERSION, type, data }, null, 2));
3379
3379
  }
3380
- function reportError(err) {
3381
- let message;
3382
- let code = ERROR_CODES.ERR_UNKNOWN;
3383
- let suggestions;
3384
- if (err instanceof A11yError) {
3385
- message = err.message;
3386
- code = err.code;
3387
- suggestions = err.suggestions;
3388
- } else if (err instanceof Error) {
3389
- message = err.message;
3390
- } else {
3391
- message = String(err);
3392
- }
3393
- if (jsonMode) {
3394
- console.log(
3395
- JSON.stringify(
3396
- { apiVersion: API_VERSION, error: message, code, suggestions: suggestions ?? void 0 },
3397
- null,
3398
- 2
3399
- )
3400
- );
3401
- } else {
3402
- console.error(pc.red(`\u30A8\u30E9\u30FC: ${message}`));
3403
- if (suggestions && suggestions.length > 0) {
3404
- console.error("");
3405
- console.error("\u3082\u3057\u304B\u3057\u3066:");
3406
- for (const s of suggestions) {
3407
- console.error(` ${pc.cyan(s.slug)} \u2014 ${s.reason}`);
3408
- }
3409
- }
3410
- }
3411
- process.exit(1);
3412
- }
3413
3380
 
3414
3381
  // src/api.ts
3415
3382
  function bigrams(s) {
@@ -3499,11 +3466,13 @@ function checklist(slug) {
3499
3466
  }
3500
3467
 
3501
3468
  export {
3469
+ API_VERSION,
3470
+ ERROR_CODES,
3471
+ A11yError,
3502
3472
  setJsonMode,
3503
3473
  isJsonMode,
3504
3474
  humanLog,
3505
3475
  jsonOut,
3506
- reportError,
3507
3476
  patternList,
3508
3477
  patternDetail,
3509
3478
  wcagList,
@@ -3511,4 +3480,3 @@ export {
3511
3480
  search2 as search,
3512
3481
  checklist
3513
3482
  };
3514
- //# sourceMappingURL=chunk-Y6KJQSVY.js.map