@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.
- package/README.md +4 -0
- package/dist/api.js +1 -2
- package/dist/{chunk-Y6KJQSVY.js → chunk-Q5KNFZTF.js} +1562 -1594
- package/dist/index.js +38 -6
- package/package.json +10 -2
- package/dist/api.js.map +0 -1
- package/dist/chunk-Y6KJQSVY.js.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -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: "\
|
|
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: "
|
|
777
|
-
action: "\
|
|
778
|
-
requirement: "
|
|
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: "
|
|
782
|
-
action: "\
|
|
783
|
-
requirement: "
|
|
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: "\
|
|
789
|
-
attr: '
|
|
790
|
-
meaning: "\
|
|
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: "\
|
|
794
|
-
attr: 'aria-
|
|
795
|
-
meaning: "\
|
|
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: "\
|
|
799
|
-
attr: "
|
|
800
|
-
meaning: "\
|
|
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: "\
|
|
804
|
-
attr: '
|
|
805
|
-
meaning: "\
|
|
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: "\
|
|
809
|
-
attr: "
|
|
810
|
-
meaning: "\
|
|
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
|
-
|
|
815
|
-
"\
|
|
816
|
-
"aria-
|
|
817
|
-
"
|
|
818
|
-
"\
|
|
819
|
-
|
|
820
|
-
"\
|
|
821
|
-
"\
|
|
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: "
|
|
826
|
-
why: "
|
|
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: "\
|
|
830
|
-
why: "\
|
|
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: "\
|
|
834
|
-
why: "
|
|
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: "
|
|
838
|
-
why: "
|
|
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
|
-
"
|
|
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
|
|
847
|
-
slug: "
|
|
579
|
+
var breadcrumb = {
|
|
580
|
+
slug: "breadcrumb",
|
|
848
581
|
keyboard: [
|
|
849
582
|
{
|
|
850
|
-
keys: "
|
|
851
|
-
action: "\
|
|
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\
|
|
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: "\
|
|
664
|
+
target: "\u30DC\u30BF\u30F3\uFF08\u63A8\u5968\uFF09",
|
|
863
665
|
attr: '<button type="button">',
|
|
864
|
-
meaning: "\
|
|
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: "\
|
|
868
|
-
attr: '
|
|
869
|
-
meaning:
|
|
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: "\
|
|
873
|
-
attr:
|
|
874
|
-
meaning: "\
|
|
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: "\
|
|
878
|
-
attr: "
|
|
879
|
-
meaning: "\
|
|
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
|
-
|
|
884
|
-
|
|
885
|
-
"
|
|
886
|
-
"\
|
|
887
|
-
"\
|
|
888
|
-
|
|
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: "
|
|
893
|
-
why: "div \u306F\
|
|
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: "\
|
|
897
|
-
why: "\
|
|
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: "\
|
|
901
|
-
why: "
|
|
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: "
|
|
905
|
-
why: "
|
|
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
|
-
"
|
|
910
|
-
"\
|
|
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
|
|
914
|
-
slug: "
|
|
715
|
+
var carousel = {
|
|
716
|
+
slug: "carousel",
|
|
915
717
|
keyboard: [
|
|
916
718
|
{
|
|
917
|
-
keys: "\uFF08\
|
|
918
|
-
action: "\
|
|
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: "
|
|
923
|
-
action: "\
|
|
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: "\
|
|
930
|
-
attr: '
|
|
931
|
-
meaning:
|
|
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: "\
|
|
935
|
-
attr:
|
|
936
|
-
meaning: "\
|
|
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: "\
|
|
940
|
-
attr: "
|
|
941
|
-
meaning: "\
|
|
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
|
-
|
|
946
|
-
"\
|
|
947
|
-
"\
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
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: "\
|
|
955
|
-
why:
|
|
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: "\
|
|
959
|
-
why: "\
|
|
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\
|
|
963
|
-
why: "\
|
|
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
|
-
|
|
968
|
-
"\
|
|
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
|
|
972
|
-
slug: "
|
|
799
|
+
var checkbox = {
|
|
800
|
+
slug: "checkbox",
|
|
973
801
|
keyboard: [
|
|
974
802
|
{
|
|
975
|
-
keys: "
|
|
976
|
-
action: "\
|
|
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: "
|
|
986
|
-
action: "\u30D5\u30A9\u30FC\u30AB\u30B9\u4E2D\u306E\u30DC\
|
|
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: "\
|
|
993
|
-
attr:
|
|
994
|
-
meaning:
|
|
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: "\
|
|
998
|
-
attr:
|
|
999
|
-
meaning: "\
|
|
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: "\
|
|
1003
|
-
attr: "
|
|
1004
|
-
meaning:
|
|
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: "\
|
|
1008
|
-
attr: "
|
|
1009
|
-
meaning: "
|
|
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
|
-
|
|
1014
|
-
"\
|
|
1015
|
-
"\
|
|
1016
|
-
"
|
|
1017
|
-
"
|
|
1018
|
-
"\
|
|
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: "
|
|
1025
|
-
why: "\u30D5\u30A9\u30FC\u30AB\u30B9\
|
|
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: "\
|
|
1033
|
-
why: "\
|
|
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: "\
|
|
1037
|
-
why: "\u30D5\
|
|
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: "\
|
|
1041
|
-
why: "\
|
|
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
|
-
'
|
|
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
|
|
1049
|
-
slug: "
|
|
866
|
+
var combobox = {
|
|
867
|
+
slug: "combobox",
|
|
1050
868
|
keyboard: [
|
|
1051
869
|
{
|
|
1052
|
-
keys: "
|
|
1053
|
-
action: "\
|
|
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: "
|
|
1058
|
-
action: "\
|
|
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: "
|
|
1063
|
-
action: "\
|
|
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: "
|
|
1068
|
-
action: "\
|
|
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: "\
|
|
1075
|
-
attr: 'role="
|
|
1076
|
-
meaning: "\
|
|
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: "\
|
|
1080
|
-
attr: 'aria-
|
|
1081
|
-
meaning: "\
|
|
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: "\
|
|
1085
|
-
attr: 'aria-
|
|
1086
|
-
meaning: "\
|
|
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: "\
|
|
1090
|
-
attr: 'aria-
|
|
1091
|
-
meaning: "\
|
|
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: "\
|
|
1095
|
-
attr: "
|
|
1096
|
-
meaning: "\
|
|
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
|
-
|
|
1101
|
-
'role="
|
|
1102
|
-
"
|
|
1103
|
-
"\
|
|
1104
|
-
"
|
|
1105
|
-
"
|
|
1106
|
-
"\
|
|
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: "\
|
|
1112
|
-
why:
|
|
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: "
|
|
1120
|
-
why: "\
|
|
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: "\
|
|
1124
|
-
why: "\
|
|
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: "\
|
|
1128
|
-
why: "\
|
|
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
|
-
|
|
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
|
|
1136
|
-
slug: "
|
|
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: "\
|
|
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\
|
|
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: "\
|
|
1152
|
-
attr:
|
|
1153
|
-
meaning:
|
|
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: "\
|
|
1157
|
-
attr: "
|
|
1158
|
-
meaning: "\
|
|
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: "\
|
|
1162
|
-
attr:
|
|
1163
|
-
meaning: "\
|
|
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: "\
|
|
1167
|
-
attr: "\
|
|
1168
|
-
meaning: "\
|
|
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
|
-
|
|
1173
|
-
"\
|
|
1174
|
-
"\
|
|
1175
|
-
|
|
1176
|
-
"
|
|
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: "\
|
|
1182
|
-
why: "
|
|
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: "\
|
|
1186
|
-
why: "
|
|
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: "\
|
|
1190
|
-
why:
|
|
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: "\
|
|
1194
|
-
why: "\
|
|
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
|
-
"\
|
|
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
|
|
1202
|
-
slug: "
|
|
1050
|
+
var disclosure = {
|
|
1051
|
+
slug: "disclosure",
|
|
1203
1052
|
keyboard: [
|
|
1204
1053
|
{
|
|
1205
|
-
keys: "
|
|
1206
|
-
action: "\
|
|
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: "
|
|
1241
|
-
action: "\
|
|
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: "\
|
|
1248
|
-
attr: '
|
|
1249
|
-
meaning: "\
|
|
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: "\
|
|
1263
|
-
attr: '
|
|
1264
|
-
meaning: "\
|
|
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: "\
|
|
1268
|
-
attr: '
|
|
1269
|
-
meaning: "\
|
|
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\
|
|
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
|
|
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
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
"\
|
|
1282
|
-
|
|
1283
|
-
"\
|
|
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:
|
|
1290
|
-
why: "\
|
|
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: "
|
|
1294
|
-
why: "\
|
|
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: "\
|
|
1298
|
-
why: "
|
|
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
|
-
|
|
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
|
|
1306
|
-
slug: "
|
|
1117
|
+
var feed = {
|
|
1118
|
+
slug: "feed",
|
|
1307
1119
|
keyboard: [
|
|
1308
1120
|
{
|
|
1309
|
-
keys: "
|
|
1310
|
-
action: "\
|
|
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: "
|
|
1315
|
-
action: "\
|
|
1316
|
-
requirement: "
|
|
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: "
|
|
1320
|
-
action: "\
|
|
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\
|
|
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: "\
|
|
1342
|
-
attr: '
|
|
1343
|
-
meaning: "\
|
|
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: "\
|
|
1347
|
-
attr: 'aria-
|
|
1348
|
-
meaning: "\
|
|
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: "\
|
|
1352
|
-
attr:
|
|
1353
|
-
meaning: "\
|
|
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: "\
|
|
1357
|
-
attr: 'role="
|
|
1358
|
-
meaning: "\
|
|
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\
|
|
1362
|
-
attr: '
|
|
1363
|
-
meaning: "\
|
|
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: "\
|
|
1367
|
-
attr: "
|
|
1368
|
-
meaning: "\
|
|
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
|
-
'\
|
|
1373
|
-
'\
|
|
1374
|
-
"\
|
|
1375
|
-
"\
|
|
1376
|
-
|
|
1377
|
-
"
|
|
1378
|
-
"\
|
|
1379
|
-
"
|
|
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: "\
|
|
1384
|
-
why: "
|
|
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: "
|
|
1388
|
-
why: "\
|
|
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: "\
|
|
1392
|
-
why:
|
|
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: "\
|
|
1396
|
-
why: "
|
|
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
|
-
"\
|
|
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
|
|
1404
|
-
slug: "
|
|
1210
|
+
var grid = {
|
|
1211
|
+
slug: "grid",
|
|
1405
1212
|
keyboard: [
|
|
1406
1213
|
{
|
|
1407
1214
|
keys: "Tab",
|
|
1408
|
-
action: "\
|
|
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: "
|
|
1413
|
-
action: "\
|
|
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: "\
|
|
1420
|
-
attr: '
|
|
1421
|
-
meaning: "\
|
|
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: "\
|
|
1425
|
-
attr:
|
|
1426
|
-
meaning: "\
|
|
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: "
|
|
1430
|
-
attr: 'role="
|
|
1431
|
-
meaning: "\
|
|
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: "\
|
|
1435
|
-
attr: '
|
|
1436
|
-
meaning: "\
|
|
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
|
-
'\
|
|
1441
|
-
|
|
1442
|
-
'\
|
|
1443
|
-
"\
|
|
1444
|
-
"
|
|
1445
|
-
"\
|
|
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\
|
|
1450
|
-
why: "
|
|
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\
|
|
1454
|
-
why: "\
|
|
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: "\
|
|
1458
|
-
why: "
|
|
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: "\
|
|
1462
|
-
why: "\
|
|
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
|
-
"\
|
|
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
|
|
1547
|
-
slug: "
|
|
1380
|
+
var link = {
|
|
1381
|
+
slug: "link",
|
|
1548
1382
|
keyboard: [
|
|
1549
1383
|
{
|
|
1550
1384
|
keys: "Tab",
|
|
1551
|
-
action: "\u6B21 / \u524D\u306E\
|
|
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: "\
|
|
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: "\
|
|
1568
|
-
attr: '<
|
|
1569
|
-
meaning: "\u30ED\u30FC\u30EB\u30FB\u30D5\u30A9\u30FC\u30AB\u30B9\
|
|
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: "\
|
|
1573
|
-
attr: '
|
|
1574
|
-
meaning:
|
|
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: "\
|
|
1578
|
-
attr: "
|
|
1579
|
-
meaning: "\
|
|
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: "
|
|
1583
|
-
attr: '
|
|
1584
|
-
meaning: "\
|
|
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
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
"\
|
|
1592
|
-
"\u30D5\u30A9\u30FC\u30AB\u30B9\
|
|
1593
|
-
|
|
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: "
|
|
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: "
|
|
1602
|
-
why: "
|
|
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: "\
|
|
1606
|
-
why: "\
|
|
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: "\
|
|
1610
|
-
why: "
|
|
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
|
-
"
|
|
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
|
|
1619
|
-
slug: "
|
|
1446
|
+
var listbox = {
|
|
1447
|
+
slug: "listbox",
|
|
1620
1448
|
keyboard: [
|
|
1621
1449
|
{
|
|
1622
1450
|
keys: "Tab",
|
|
1623
|
-
action: "\
|
|
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: "
|
|
1628
|
-
action: "\
|
|
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: "\
|
|
1635
|
-
attr: '
|
|
1636
|
-
meaning: "\
|
|
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: "\
|
|
1640
|
-
attr: "
|
|
1641
|
-
meaning: "\
|
|
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: "\
|
|
1645
|
-
attr: "
|
|
1646
|
-
meaning:
|
|
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: "\
|
|
1650
|
-
attr: "
|
|
1651
|
-
meaning: "\
|
|
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
|
-
'\
|
|
1656
|
-
|
|
1657
|
-
"
|
|
1658
|
-
"\
|
|
1659
|
-
"\
|
|
1660
|
-
"\
|
|
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\
|
|
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: "\
|
|
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: "\
|
|
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: "\
|
|
1677
|
-
why: "\
|
|
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
|
-
|
|
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
|
|
1686
|
-
slug: "
|
|
1522
|
+
var menuButton = {
|
|
1523
|
+
slug: "menu-button",
|
|
1687
1524
|
keyboard: [
|
|
1688
1525
|
{
|
|
1689
|
-
keys: "
|
|
1690
|
-
action: "\
|
|
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: "\
|
|
1695
|
-
action: "\
|
|
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: "
|
|
1700
|
-
action: "\
|
|
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: "
|
|
1705
|
-
action: "\
|
|
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: "\
|
|
1712
|
-
attr: '<
|
|
1713
|
-
meaning: "
|
|
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: "\
|
|
1717
|
-
attr: "
|
|
1718
|
-
meaning: "\
|
|
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: "\
|
|
1722
|
-
attr: "
|
|
1723
|
-
meaning: "\
|
|
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
|
-
'\
|
|
1728
|
-
|
|
1729
|
-
"
|
|
1730
|
-
"
|
|
1731
|
-
"
|
|
1732
|
-
"\
|
|
1733
|
-
|
|
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\
|
|
1738
|
-
why: "div \u306F\u30D5\u30A9\u30FC\u30AB\u30B9\
|
|
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: "\
|
|
1742
|
-
why:
|
|
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: "\
|
|
1746
|
-
why: 'role="
|
|
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: "\
|
|
1750
|
-
why: "\
|
|
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
|
-
"\
|
|
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
|
|
1759
|
-
slug: "
|
|
1620
|
+
var menuMenubar = {
|
|
1621
|
+
slug: "menu-menubar",
|
|
1760
1622
|
keyboard: [
|
|
1761
1623
|
{
|
|
1762
1624
|
keys: "Tab",
|
|
1763
|
-
action: "\
|
|
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: "
|
|
1768
|
-
action: "\
|
|
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: "\
|
|
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
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
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
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
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
|
-
|
|
1815
|
-
|
|
1649
|
+
keys: "Home / End",
|
|
1650
|
+
action: "\u6700\u521D / \u6700\u5F8C\u306E\u9805\u76EE\u3078\u79FB\u52D5",
|
|
1651
|
+
requirement: "optional"
|
|
1816
1652
|
},
|
|
1817
1653
|
{
|
|
1818
|
-
|
|
1819
|
-
|
|
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
|
-
|
|
1823
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
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
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
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
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
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
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
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
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
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
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
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
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
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: "\
|
|
1878
|
-
attr: '
|
|
1879
|
-
meaning: "\
|
|
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: "\
|
|
1883
|
-
attr:
|
|
1884
|
-
meaning: "\
|
|
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: "\
|
|
1888
|
-
attr:
|
|
1889
|
-
meaning: "\
|
|
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: "\
|
|
1893
|
-
attr:
|
|
1894
|
-
meaning: "\
|
|
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: "\
|
|
1898
|
-
attr:
|
|
1899
|
-
meaning:
|
|
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: "\
|
|
1903
|
-
attr:
|
|
1904
|
-
meaning:
|
|
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
|
-
|
|
1909
|
-
|
|
1910
|
-
"\
|
|
1911
|
-
"aria-
|
|
1912
|
-
"\
|
|
1913
|
-
"\
|
|
1914
|
-
"\
|
|
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: "\
|
|
1919
|
-
why: "\
|
|
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: "\
|
|
1923
|
-
why:
|
|
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: "\
|
|
1927
|
-
why: "
|
|
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: "\
|
|
1931
|
-
why: "
|
|
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
|
-
"\
|
|
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
|
|
1939
|
-
slug: "
|
|
1797
|
+
var radioGroup = {
|
|
1798
|
+
slug: "radio-group",
|
|
1940
1799
|
keyboard: [
|
|
1941
1800
|
{
|
|
1942
1801
|
keys: "Tab",
|
|
1943
|
-
action: "\
|
|
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 / \
|
|
1948
|
-
action: "\u6B21
|
|
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: "
|
|
1953
|
-
action: "\
|
|
1954
|
-
requirement: "
|
|
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: "\
|
|
1960
|
-
attr: '
|
|
1961
|
-
meaning: "\
|
|
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: "\
|
|
1975
|
-
attr:
|
|
1976
|
-
meaning: "
|
|
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: "\
|
|
1980
|
-
attr:
|
|
1981
|
-
meaning: "\u9078\u629E\
|
|
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
|
-
'\
|
|
1986
|
-
|
|
1987
|
-
"
|
|
1988
|
-
"
|
|
1989
|
-
"
|
|
1990
|
-
"\
|
|
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\
|
|
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: "\
|
|
1999
|
-
why: 'role="
|
|
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\
|
|
2003
|
-
why: "aria-
|
|
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: "\
|
|
2007
|
-
why: "\
|
|
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
|
-
"\
|
|
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
|
|
2304
|
-
slug: "
|
|
2305
|
-
|
|
2306
|
-
|
|
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: "\
|
|
2310
|
-
attr:
|
|
2311
|
-
meaning: "
|
|
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: "\
|
|
2315
|
-
attr: '
|
|
2316
|
-
meaning: "\
|
|
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: "\
|
|
2320
|
-
attr: "aria-
|
|
2321
|
-
meaning: "\
|
|
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: "\
|
|
2325
|
-
attr:
|
|
2326
|
-
meaning: "\
|
|
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: "\
|
|
2330
|
-
attr: "
|
|
2331
|
-
meaning: "\
|
|
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: "\
|
|
2335
|
-
attr: "
|
|
2336
|
-
meaning: "\
|
|
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: "\
|
|
2340
|
-
attr: "
|
|
2341
|
-
meaning:
|
|
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
|
-
"\
|
|
2346
|
-
"\
|
|
2347
|
-
|
|
2348
|
-
'\
|
|
2349
|
-
"\
|
|
2350
|
-
"\
|
|
2351
|
-
"\
|
|
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: "\
|
|
2356
|
-
why:
|
|
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: "\
|
|
2360
|
-
why: "
|
|
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: "\
|
|
2364
|
-
why: "\
|
|
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: "\
|
|
2368
|
-
why: "\
|
|
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
|
-
"\
|
|
2373
|
-
"
|
|
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
|
|
2560
|
-
slug: "
|
|
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: "\
|
|
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: "
|
|
2744
|
-
action: "\
|
|
2745
|
-
requirement: "
|
|
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: "\
|
|
2771
|
-
attr: 'aria-
|
|
2772
|
-
meaning: "\
|
|
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: "\
|
|
2776
|
-
attr: "
|
|
2777
|
-
meaning: "\
|
|
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: "\
|
|
2781
|
-
attr:
|
|
2782
|
-
meaning: "
|
|
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: "\
|
|
2786
|
-
attr: "
|
|
2787
|
-
meaning: "\
|
|
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
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
"\
|
|
2795
|
-
"\
|
|
2796
|
-
"\
|
|
2797
|
-
"\
|
|
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: "\
|
|
2804
|
-
why:
|
|
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: "\
|
|
2812
|
-
why: "
|
|
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: "
|
|
2816
|
-
why: "\
|
|
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: "
|
|
2820
|
-
why: "
|
|
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\
|
|
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
|
|
2923
|
-
slug: "
|
|
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: "\
|
|
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: "
|
|
2942
|
-
action: "\
|
|
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: "
|
|
3025
|
-
action: "\
|
|
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: "\
|
|
3030
|
-
action: "\
|
|
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
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
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
|
-
|
|
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
|
-
|
|
3087
|
-
|
|
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
|
-
|
|
3091
|
-
|
|
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
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
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: "\
|
|
3116
|
-
attr: '
|
|
3117
|
-
meaning: "\
|
|
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: "\
|
|
3121
|
-
attr: '
|
|
3122
|
-
meaning: "\
|
|
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: "\
|
|
3126
|
-
attr: "
|
|
3127
|
-
meaning: "\
|
|
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: "\
|
|
3131
|
-
attr: "
|
|
3132
|
-
meaning: "\
|
|
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
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
"\
|
|
3140
|
-
"
|
|
3141
|
-
"\
|
|
3142
|
-
"\
|
|
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: "\
|
|
3147
|
-
why: "
|
|
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: "\
|
|
3151
|
-
why: "\
|
|
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: "\
|
|
3155
|
-
why: "
|
|
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: "\
|
|
3159
|
-
why: "
|
|
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\
|
|
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
|
-
|
|
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
|