From 73dd3fcf94f69ab4fc9eed6cf2c7542019351eb8 Mon Sep 17 00:00:00 2001 From: Masahiro Fujimoto Date: Mon, 22 Aug 2022 17:21:42 +0900 Subject: [PATCH 1/3] =?UTF-8?q?web/accessibility=20=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E3=82=92=20md=20=E3=81=AB=E6=94=B9=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{index.html => index.md} | 0 .../web/accessibility/aria/aria_guides/{index.html => index.md} | 0 .../accessibility/aria/aria_live_regions/{index.html => index.md} | 0 .../{index.html => index.md} | 0 .../accessibility/aria/aria_techniques/{index.html => index.md} | 0 .../attributes/aria-activedescendant/{index.html => index.md} | 0 files/ja/web/accessibility/aria/{index.html => index.md} | 0 .../accessibility/aria/roles/alert_role/{index.html => index.md} | 0 .../aria/roles/alertdialog_role/{index.html => index.md} | 0 .../aria/roles/application_role/{index.html => index.md} | 0 .../aria/roles/article_role/{index.html => index.md} | 0 .../accessibility/aria/roles/banner_role/{index.html => index.md} | 0 .../accessibility/aria/roles/button_role/{index.html => index.md} | 0 .../accessibility/aria/roles/cell_role/{index.html => index.md} | 0 .../aria/roles/checkbox_role/{index.html => index.md} | 0 .../aria/roles/complementary_role/{index.html => index.md} | 0 .../aria/roles/contentinfo_role/{index.html => index.md} | 0 .../accessibility/aria/roles/dialog_role/{index.html => index.md} | 0 .../aria/roles/document_role/{index.html => index.md} | 0 .../accessibility/aria/roles/feed_role/{index.html => index.md} | 0 .../accessibility/aria/roles/figure_role/{index.html => index.md} | 0 .../accessibility/aria/roles/form_role/{index.html => index.md} | 0 .../accessibility/aria/roles/grid_role/{index.html => index.md} | 0 .../aria/roles/gridcell_role/{index.html => index.md} | 0 .../accessibility/aria/roles/group_role/{index.html => index.md} | 0 .../aria/roles/heading_role/{index.html => index.md} | 0 files/ja/web/accessibility/aria/roles/{index.html => index.md} | 0 .../accessibility/aria/roles/link_role/{index.html => index.md} | 0 .../accessibility/aria/roles/list_role/{index.html => index.md} | 0 .../aria/roles/listbox_role/{index.html => index.md} | 0 .../aria/roles/listitem_role/{index.html => index.md} | 0 .../accessibility/aria/roles/log_role/{index.html => index.md} | 0 .../accessibility/aria/roles/main_role/{index.html => index.md} | 0 .../aria/roles/navigation_role/{index.html => index.md} | 0 .../aria/roles/presentation_role/{index.html => index.md} | 0 .../aria/roles/progressbar_role/{index.html => index.md} | 0 .../accessibility/aria/roles/radio_role/{index.html => index.md} | 0 .../accessibility/aria/roles/region_role/{index.html => index.md} | 0 .../accessibility/aria/roles/role_img/{index.html => index.md} | 0 .../accessibility/aria/roles/row_role/{index.html => index.md} | 0 .../aria/roles/rowgroup_role/{index.html => index.md} | 0 .../accessibility/aria/roles/search_role/{index.html => index.md} | 0 .../accessibility/aria/roles/slider_role/{index.html => index.md} | 0 .../accessibility/aria/roles/status_role/{index.html => index.md} | 0 .../accessibility/aria/roles/switch_role/{index.html => index.md} | 0 .../accessibility/aria/roles/tab_role/{index.html => index.md} | 0 .../accessibility/aria/roles/table_role/{index.html => index.md} | 0 .../aria/roles/textbox_role/{index.html => index.md} | 0 .../aria/roles/toolbar_role/{index.html => index.md} | 0 files/ja/web/accessibility/community/{index.html => index.md} | 0 files/ja/web/accessibility/{index.html => index.md} | 0 .../{index.html => index.md} | 0 .../mobile_accessibility_checklist/{index.html => index.md} | 0 .../web/accessibility/understanding_wcag/{index.html => index.md} | 0 .../understanding_wcag/operable/{index.html => index.md} | 0 .../understanding_wcag/perceivable/{index.html => index.md} | 0 .../understanding_wcag/robust/{index.html => index.md} | 0 .../understanding_wcag/understandable/{index.html => index.md} | 0 58 files changed, 0 insertions(+), 0 deletions(-) rename files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/aria_guides/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/aria_live_regions/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/aria_techniques/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/attributes/aria-activedescendant/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/alert_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/alertdialog_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/application_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/article_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/banner_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/button_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/cell_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/checkbox_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/complementary_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/contentinfo_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/dialog_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/document_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/feed_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/figure_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/form_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/grid_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/gridcell_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/group_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/heading_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/link_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/list_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/listbox_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/listitem_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/log_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/main_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/navigation_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/presentation_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/progressbar_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/radio_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/region_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/role_img/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/row_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/rowgroup_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/search_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/slider_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/status_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/switch_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/tab_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/table_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/textbox_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/aria/roles/toolbar_role/{index.html => index.md} (100%) rename files/ja/web/accessibility/community/{index.html => index.md} (100%) rename files/ja/web/accessibility/{index.html => index.md} (100%) rename files/ja/web/accessibility/keyboard-navigable_javascript_widgets/{index.html => index.md} (100%) rename files/ja/web/accessibility/mobile_accessibility_checklist/{index.html => index.md} (100%) rename files/ja/web/accessibility/understanding_wcag/{index.html => index.md} (100%) rename files/ja/web/accessibility/understanding_wcag/operable/{index.html => index.md} (100%) rename files/ja/web/accessibility/understanding_wcag/perceivable/{index.html => index.md} (100%) rename files/ja/web/accessibility/understanding_wcag/robust/{index.html => index.md} (100%) rename files/ja/web/accessibility/understanding_wcag/understandable/{index.html => index.md} (100%) diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md similarity index 100% rename from files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html rename to files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md diff --git a/files/ja/web/accessibility/aria/aria_guides/index.html b/files/ja/web/accessibility/aria/aria_guides/index.md similarity index 100% rename from files/ja/web/accessibility/aria/aria_guides/index.html rename to files/ja/web/accessibility/aria/aria_guides/index.md diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.html b/files/ja/web/accessibility/aria/aria_live_regions/index.md similarity index 100% rename from files/ja/web/accessibility/aria/aria_live_regions/index.html rename to files/ja/web/accessibility/aria/aria_live_regions/index.md diff --git a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md similarity index 100% rename from files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html rename to files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md diff --git a/files/ja/web/accessibility/aria/aria_techniques/index.html b/files/ja/web/accessibility/aria/aria_techniques/index.md similarity index 100% rename from files/ja/web/accessibility/aria/aria_techniques/index.html rename to files/ja/web/accessibility/aria/aria_techniques/index.md diff --git a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.html b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md similarity index 100% rename from files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.html rename to files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md diff --git a/files/ja/web/accessibility/aria/index.html b/files/ja/web/accessibility/aria/index.md similarity index 100% rename from files/ja/web/accessibility/aria/index.html rename to files/ja/web/accessibility/aria/index.md diff --git a/files/ja/web/accessibility/aria/roles/alert_role/index.html b/files/ja/web/accessibility/aria/roles/alert_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/alert_role/index.html rename to files/ja/web/accessibility/aria/roles/alert_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/alertdialog_role/index.html b/files/ja/web/accessibility/aria/roles/alertdialog_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/alertdialog_role/index.html rename to files/ja/web/accessibility/aria/roles/alertdialog_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/application_role/index.html b/files/ja/web/accessibility/aria/roles/application_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/application_role/index.html rename to files/ja/web/accessibility/aria/roles/application_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/article_role/index.html b/files/ja/web/accessibility/aria/roles/article_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/article_role/index.html rename to files/ja/web/accessibility/aria/roles/article_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/banner_role/index.html b/files/ja/web/accessibility/aria/roles/banner_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/banner_role/index.html rename to files/ja/web/accessibility/aria/roles/banner_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/button_role/index.html b/files/ja/web/accessibility/aria/roles/button_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/button_role/index.html rename to files/ja/web/accessibility/aria/roles/button_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/cell_role/index.html b/files/ja/web/accessibility/aria/roles/cell_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/cell_role/index.html rename to files/ja/web/accessibility/aria/roles/cell_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/checkbox_role/index.html b/files/ja/web/accessibility/aria/roles/checkbox_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/checkbox_role/index.html rename to files/ja/web/accessibility/aria/roles/checkbox_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/complementary_role/index.html b/files/ja/web/accessibility/aria/roles/complementary_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/complementary_role/index.html rename to files/ja/web/accessibility/aria/roles/complementary_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html b/files/ja/web/accessibility/aria/roles/contentinfo_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/contentinfo_role/index.html rename to files/ja/web/accessibility/aria/roles/contentinfo_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/dialog_role/index.html b/files/ja/web/accessibility/aria/roles/dialog_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/dialog_role/index.html rename to files/ja/web/accessibility/aria/roles/dialog_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/document_role/index.html b/files/ja/web/accessibility/aria/roles/document_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/document_role/index.html rename to files/ja/web/accessibility/aria/roles/document_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/feed_role/index.html b/files/ja/web/accessibility/aria/roles/feed_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/feed_role/index.html rename to files/ja/web/accessibility/aria/roles/feed_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/figure_role/index.html b/files/ja/web/accessibility/aria/roles/figure_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/figure_role/index.html rename to files/ja/web/accessibility/aria/roles/figure_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/form_role/index.html b/files/ja/web/accessibility/aria/roles/form_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/form_role/index.html rename to files/ja/web/accessibility/aria/roles/form_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/grid_role/index.html b/files/ja/web/accessibility/aria/roles/grid_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/grid_role/index.html rename to files/ja/web/accessibility/aria/roles/grid_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/gridcell_role/index.html b/files/ja/web/accessibility/aria/roles/gridcell_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/gridcell_role/index.html rename to files/ja/web/accessibility/aria/roles/gridcell_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/group_role/index.html b/files/ja/web/accessibility/aria/roles/group_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/group_role/index.html rename to files/ja/web/accessibility/aria/roles/group_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/heading_role/index.html b/files/ja/web/accessibility/aria/roles/heading_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/heading_role/index.html rename to files/ja/web/accessibility/aria/roles/heading_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/index.html b/files/ja/web/accessibility/aria/roles/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/index.html rename to files/ja/web/accessibility/aria/roles/index.md diff --git a/files/ja/web/accessibility/aria/roles/link_role/index.html b/files/ja/web/accessibility/aria/roles/link_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/link_role/index.html rename to files/ja/web/accessibility/aria/roles/link_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/list_role/index.html b/files/ja/web/accessibility/aria/roles/list_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/list_role/index.html rename to files/ja/web/accessibility/aria/roles/list_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/listbox_role/index.html b/files/ja/web/accessibility/aria/roles/listbox_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/listbox_role/index.html rename to files/ja/web/accessibility/aria/roles/listbox_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/listitem_role/index.html b/files/ja/web/accessibility/aria/roles/listitem_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/listitem_role/index.html rename to files/ja/web/accessibility/aria/roles/listitem_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/log_role/index.html b/files/ja/web/accessibility/aria/roles/log_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/log_role/index.html rename to files/ja/web/accessibility/aria/roles/log_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/main_role/index.html b/files/ja/web/accessibility/aria/roles/main_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/main_role/index.html rename to files/ja/web/accessibility/aria/roles/main_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/navigation_role/index.html b/files/ja/web/accessibility/aria/roles/navigation_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/navigation_role/index.html rename to files/ja/web/accessibility/aria/roles/navigation_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/presentation_role/index.html b/files/ja/web/accessibility/aria/roles/presentation_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/presentation_role/index.html rename to files/ja/web/accessibility/aria/roles/presentation_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/progressbar_role/index.html b/files/ja/web/accessibility/aria/roles/progressbar_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/progressbar_role/index.html rename to files/ja/web/accessibility/aria/roles/progressbar_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/radio_role/index.html b/files/ja/web/accessibility/aria/roles/radio_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/radio_role/index.html rename to files/ja/web/accessibility/aria/roles/radio_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/region_role/index.html b/files/ja/web/accessibility/aria/roles/region_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/region_role/index.html rename to files/ja/web/accessibility/aria/roles/region_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/role_img/index.html b/files/ja/web/accessibility/aria/roles/role_img/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/role_img/index.html rename to files/ja/web/accessibility/aria/roles/role_img/index.md diff --git a/files/ja/web/accessibility/aria/roles/row_role/index.html b/files/ja/web/accessibility/aria/roles/row_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/row_role/index.html rename to files/ja/web/accessibility/aria/roles/row_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/rowgroup_role/index.html rename to files/ja/web/accessibility/aria/roles/rowgroup_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.html b/files/ja/web/accessibility/aria/roles/search_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/search_role/index.html rename to files/ja/web/accessibility/aria/roles/search_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/slider_role/index.html b/files/ja/web/accessibility/aria/roles/slider_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/slider_role/index.html rename to files/ja/web/accessibility/aria/roles/slider_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/status_role/index.html b/files/ja/web/accessibility/aria/roles/status_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/status_role/index.html rename to files/ja/web/accessibility/aria/roles/status_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/switch_role/index.html b/files/ja/web/accessibility/aria/roles/switch_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/switch_role/index.html rename to files/ja/web/accessibility/aria/roles/switch_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/tab_role/index.html b/files/ja/web/accessibility/aria/roles/tab_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/tab_role/index.html rename to files/ja/web/accessibility/aria/roles/tab_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/table_role/index.html b/files/ja/web/accessibility/aria/roles/table_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/table_role/index.html rename to files/ja/web/accessibility/aria/roles/table_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/textbox_role/index.html b/files/ja/web/accessibility/aria/roles/textbox_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/textbox_role/index.html rename to files/ja/web/accessibility/aria/roles/textbox_role/index.md diff --git a/files/ja/web/accessibility/aria/roles/toolbar_role/index.html b/files/ja/web/accessibility/aria/roles/toolbar_role/index.md similarity index 100% rename from files/ja/web/accessibility/aria/roles/toolbar_role/index.html rename to files/ja/web/accessibility/aria/roles/toolbar_role/index.md diff --git a/files/ja/web/accessibility/community/index.html b/files/ja/web/accessibility/community/index.md similarity index 100% rename from files/ja/web/accessibility/community/index.html rename to files/ja/web/accessibility/community/index.md diff --git a/files/ja/web/accessibility/index.html b/files/ja/web/accessibility/index.md similarity index 100% rename from files/ja/web/accessibility/index.html rename to files/ja/web/accessibility/index.md diff --git a/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.md similarity index 100% rename from files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html rename to files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.md diff --git a/files/ja/web/accessibility/mobile_accessibility_checklist/index.html b/files/ja/web/accessibility/mobile_accessibility_checklist/index.md similarity index 100% rename from files/ja/web/accessibility/mobile_accessibility_checklist/index.html rename to files/ja/web/accessibility/mobile_accessibility_checklist/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/index.html b/files/ja/web/accessibility/understanding_wcag/index.md similarity index 100% rename from files/ja/web/accessibility/understanding_wcag/index.html rename to files/ja/web/accessibility/understanding_wcag/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/operable/index.html b/files/ja/web/accessibility/understanding_wcag/operable/index.md similarity index 100% rename from files/ja/web/accessibility/understanding_wcag/operable/index.html rename to files/ja/web/accessibility/understanding_wcag/operable/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/perceivable/index.html b/files/ja/web/accessibility/understanding_wcag/perceivable/index.md similarity index 100% rename from files/ja/web/accessibility/understanding_wcag/perceivable/index.html rename to files/ja/web/accessibility/understanding_wcag/perceivable/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/robust/index.html b/files/ja/web/accessibility/understanding_wcag/robust/index.md similarity index 100% rename from files/ja/web/accessibility/understanding_wcag/robust/index.html rename to files/ja/web/accessibility/understanding_wcag/robust/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/understandable/index.html b/files/ja/web/accessibility/understanding_wcag/understandable/index.md similarity index 100% rename from files/ja/web/accessibility/understanding_wcag/understandable/index.html rename to files/ja/web/accessibility/understanding_wcag/understandable/index.md From de1ac2697fe4ba7c3713f24bf4fcfe7067fdc049 Mon Sep 17 00:00:00 2001 From: Masahiro Fujimoto Date: Mon, 22 Aug 2022 17:23:30 +0900 Subject: [PATCH 2/3] =?UTF-8?q?web/accessibility=20=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E3=82=92=20md=20=E3=81=AB=E4=B8=80=E6=8B=AC=E5=A4=89=E6=8F=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 221 ++--- .../accessibility/aria/aria_guides/index.md | 34 +- .../aria/aria_live_regions/index.md | 253 +++--- .../index.md | 36 +- .../aria/aria_techniques/index.md | 364 ++++---- .../attributes/aria-activedescendant/index.md | 39 +- files/ja/web/accessibility/aria/index.md | 133 ++- .../aria/roles/alert_role/index.md | 91 +- .../aria/roles/alertdialog_role/index.md | 92 +- .../aria/roles/application_role/index.md | 127 ++- .../aria/roles/article_role/index.md | 153 ++-- .../aria/roles/banner_role/index.md | 120 ++- .../aria/roles/button_role/index.md | 267 +++--- .../aria/roles/cell_role/index.md | 345 ++++---- .../aria/roles/checkbox_role/index.md | 167 ++-- .../aria/roles/complementary_role/index.md | 142 ++- .../aria/roles/contentinfo_role/index.md | 182 ++-- .../aria/roles/dialog_role/index.md | 198 ++--- .../aria/roles/document_role/index.md | 97 +- .../aria/roles/feed_role/index.md | 150 ++-- .../aria/roles/figure_role/index.md | 194 ++-- .../aria/roles/form_role/index.md | 175 ++-- .../aria/roles/grid_role/index.md | 722 +++++++-------- .../aria/roles/gridcell_role/index.md | 325 ++++--- .../aria/roles/group_role/index.md | 160 ++-- .../aria/roles/heading_role/index.md | 140 ++- .../ja/web/accessibility/aria/roles/index.md | 124 ++- .../aria/roles/link_role/index.md | 89 +- .../aria/roles/list_role/index.md | 141 ++- .../aria/roles/listbox_role/index.md | 411 ++++----- .../aria/roles/listitem_role/index.md | 138 ++- .../aria/roles/log_role/index.md | 95 +- .../aria/roles/main_role/index.md | 162 ++-- .../aria/roles/navigation_role/index.md | 208 ++--- .../aria/roles/presentation_role/index.md | 47 +- .../aria/roles/progressbar_role/index.md | 74 +- .../aria/roles/radio_role/index.md | 57 +- .../aria/roles/region_role/index.md | 156 ++-- .../aria/roles/role_img/index.md | 146 ++- .../aria/roles/row_role/index.md | 411 ++++----- .../aria/roles/rowgroup_role/index.md | 269 +++--- .../aria/roles/search_role/index.md | 172 ++-- .../aria/roles/slider_role/index.md | 129 ++- .../aria/roles/status_role/index.md | 81 +- .../aria/roles/switch_role/index.md | 186 ++-- .../aria/roles/tab_role/index.md | 216 ++--- .../aria/roles/table_role/index.md | 243 +++-- .../aria/roles/textbox_role/index.md | 171 ++-- .../aria/roles/toolbar_role/index.md | 39 +- files/ja/web/accessibility/community/index.md | 24 +- files/ja/web/accessibility/index.md | 100 +-- .../index.md | 213 ++--- .../mobile_accessibility_checklist/index.md | 141 ++- .../accessibility/understanding_wcag/index.md | 63 +- .../understanding_wcag/operable/index.md | 338 ++----- .../understanding_wcag/perceivable/index.md | 835 +++++++++++------- .../understanding_wcag/robust/index.md | 76 +- .../understandable/index.md | 387 ++++---- 58 files changed, 4903 insertions(+), 5966 deletions(-) diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index 7eacb51e5f4b8f..be54282e4b83c5 100644 --- a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -9,169 +9,170 @@ tags: - Widget translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets --- -

Web は変化しています。静的でページに基づくサイトは、次第に動的でデスクトップスタイルの、JavaScript や AJAX を多用する Web アプリケーションに置き換えられています。デザイナーは JavaScript、HTML、CSS を組み合わせて、驚くような新しいウィジェットやコントロールのすべてを作り上げています。この変化は Web の応答性やユーザビリティを劇的に向上させる可能性を秘めていますが、多くのユーザはアクセシビリティのギャップにより閉め出されてしまう恐れがあります。JavaScript は伝統的に、スクリーンリーダーなどの支援技術のユーザに対してアクセシブルではないと言われてきましたが、現在はさまざまなユーザに対してアクセシブルな動的 Web ユーザインターフェイスを作成するための手段があります。

+Web は変化しています。静的でページに基づくサイトは、次第に動的でデスクトップスタイルの、JavaScript や AJAX を多用する Web アプリケーションに置き換えられています。デザイナーは JavaScript、HTML、CSS を組み合わせて、驚くような新しいウィジェットやコントロールのすべてを作り上げています。この変化は Web の応答性やユーザビリティを劇的に向上させる可能性を秘めていますが、多くのユーザはアクセシビリティのギャップにより閉め出されてしまう恐れがあります。JavaScript は伝統的に、スクリーンリーダーなどの支援技術のユーザに対してアクセシブルではないと言われてきましたが、現在はさまざまなユーザに対してアクセシブルな動的 Web ユーザインターフェイスを作成するための手段があります。 -

問題点

+## 問題点 -

ほとんどの JavaScript ツールキットは、よく知られたデスクトップインターフェイスの動作を模倣する、クライアントサイドのウィジェットのライブラリを提供します。スライダー、メニューバー、ファイルリストビューなどを JavaScript、CSS、HTML の組み合わせにより構築できます。HTML 4 の仕様はこれらの種類のウィジェットを意味的に表すタグを内蔵していないため、一般的に開発者は <div> や <span> といった汎用の要素を使用します。これはデスクトップによく似たもののように見えますが、支援技術が使用するのに値する意味的な情報は、たいていマークアップ内にありません。Web ページ上の動的コンテンツは、どのような理由であれ画面を見ることができないユーザにとって特に問題になる可能性があります。株価表示、Twitter のフィード更新、進捗の表示やそれらに似たコンテンツは、支援技術 (AT) が認識できないかもしれない方法で DOM を変更します。ここが、ARIA が必要になるところです。

+ほとんどの JavaScript ツールキットは、よく知られたデスクトップインターフェイスの動作を模倣する、クライアントサイドのウィジェットのライブラリを提供します。スライダー、メニューバー、ファイルリストビューなどを JavaScript、CSS、HTML の組み合わせにより構築できます。HTML 4 の仕様はこれらの種類のウィジェットを意味的に表すタグを内蔵していないため、一般的に開発者は \
や \ といった汎用の要素を使用します。これはデスクトップによく似たもののように見えますが、支援技術が使用するのに値する意味的な情報は、たいていマークアップ内にありません。Web ページ上の動的コンテンツは、どのような理由であれ画面を見ることができないユーザにとって特に問題になる可能性があります。株価表示、Twitter のフィード更新、進捗の表示やそれらに似たコンテンツは、支援技術 (AT) が認識できないかもしれない方法で DOM を変更します。ここが、[ARIA](/ja/docs/ARIA "ARIA") が必要になるところです。 -

例 1: ARIA でラベルをつけずに作成したタブウィジェットのマークアップ。ウィジェットの外観や機能を示す情報は、マークアップ内にありません。

+_例 1: ARIA でラベルをつけずに作成したタブウィジェットのマークアップ。ウィジェットの外観や機能を示す情報は、マークアップ内にありません。_ -
<!-- これはタブウィジェットです。マークアップだけを見て、どのようにしてわかるのでしょうか?-->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
+```html
+
+
    +
  1. + Chapter 1 +
  2. +
  3. + Chapter 2 +
  4. +
  5. + Quiz +
  6. +
-<div> - <div id="ch1Panel">Chapter 1 content goes here</div> - <div id="ch2Panel">Chapter 2 content goes here</div> - <div id="quizPanel">Quiz content goes here</div> -</div>
+
+
Chapter 1 content goes here
+
Chapter 2 content goes here
+
Quiz content goes here
+
+``` -

例 2: タブウィジェットはどのようにして視覚的にスタイルが設定されるのでしょうか。ユーザはそれを視覚的に認識するでしょう。しかし、支援技術向けに機械が読み取れる意味の情報はありません。
- Screenshot of the tabs widget

+_例 2: タブウィジェットはどのようにして視覚的にスタイルが設定されるのでしょうか。ユーザはそれを視覚的に認識するでしょう。しかし、支援技術向けに機械が読み取れる意味の情報はありません。_ +![Screenshot of the tabs widget](/@api/deki/files/4926/=Tabs_Widget.png) -

ARIA

+## ARIA -

W3C の Web Accessibility Initiative から生まれた WAI-ARIA こと Accessible Rich Internet Applications 仕様は、スクリーンリーダーのような支援技術が必要とする、欠けているセマンティクスを追加する手段です。ARIA はマークアップに特別な属性を追加することで、開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコントロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた UI ウィジェットの動作を示す役割や状態を与えます。

+W3C の [Web Accessibility Initiative](http://www.w3.org/WAI/) から生まれた [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php) こと **Accessible Rich Internet Applications** 仕様は、スクリーンリーダーのような支援技術が必要とする、欠けているセマンティクスを追加する手段です。ARIA はマークアップに特別な属性を追加することで、開発者が自身のウィジェットをより詳しく説明することを可能にします。ARIA は動的な Web アプリケーションにおいて、標準の HTML タグとデスクトップスタイルのコントロールとの間にあるギャップを埋めるように設計されており、ほとんどのよく知られた UI ウィジェットの動作を示す役割や状態を与えます。 -

ARIA 仕様書は 3 種類の属性に分けられています: ロール、ステート、プロパティです。ロールは HTML 4 において他の方法で利用できないウィジェット、例えばスライダー、メニューバー、タブ、ダイアログなどを説明します。プロパティはこれらのウィジェットの特徴、例えばドラッグ可能、必須の要素がある、関連づけられたポップアップがあるなどを説明します。ステートは要素について支援技術に伝える現在の対話状態、例えばビジー、無効、選択中、非可視などを説明します。

+ARIA 仕様書は 3 種類の属性に分けられています: ロール、ステート、プロパティです。ロールは HTML 4 において他の方法で利用できないウィジェット、例えばスライダー、メニューバー、タブ、ダイアログなどを説明します。プロパティはこれらのウィジェットの特徴、例えばドラッグ可能、必須の要素がある、関連づけられたポップアップがあるなどを説明します。ステートは要素について支援技術に伝える現在の対話状態、例えばビジー、無効、選択中、非可視などを説明します。 -

ARIA の属性はブラウザによって自動的に解釈され、オペレーティングシステムのネイティブなアクセシビリティ API に変換されるように設計されています。ARIA が提供されていると、支援技術は独自の JavaScript コントロールについて、デスクトップにおける同等物と同じ方法で、認識および対話ができます。支援技術のユーザが Web ベースのアプリケーションを使用するときに、デスクトップアプリケーションの動作に関するあらゆる知識を適用できますので、以前の Web アプリケーションより一貫したユーザエクスペリエンスをもたらす可能性を秘めています。

+ARIA の属性はブラウザによって自動的に解釈され、オペレーティングシステムのネイティブなアクセシビリティ API に変換されるように設計されています。ARIA が提供されていると、支援技術は独自の JavaScript コントロールについて、デスクトップにおける同等物と同じ方法で、認識および対話ができます。支援技術のユーザが Web ベースのアプリケーションを使用するときに、デスクトップアプリケーションの動作に関するあらゆる知識を適用できますので、以前の Web アプリケーションより一貫したユーザエクスペリエンスをもたらす可能性を秘めています。 -

例 3: ARIA の属性を追加したタブウィジェットのマークアップ。

+_例 3: ARIA の属性を追加したタブウィジェットのマークアップ。_ -
<!-- *これら* はタブです!-->
-<!-- タブリストや各タブを表すために、role 属性を追加しました。-->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
+```html
+
+
+
    + + + +
-<div> - <!-- タブのパネルを表すために追加した role および aria-labelledby 属性に注目してください。--> - <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> - <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> - <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div> -</div> -
+
+ +
Chapter 1 content goes here
+
Chapter 2 content goes here
+
Quiz content goes here
+
+``` -

ARIA は Firefox、Safari、Opera、Chrome、Internet Explorer といった主要なブラウザの最新バージョンでサポートされています。オープンソースの NVDA や Orca スクリーンリーダーなど、多くの支援技術も ARIA をサポートしています。jQuery UI、YUI、Google Closure、Dojo Dijit などの JavaScript ウィジェットライブラリも、次第に ARIA のマークアップを導入しています。

+ARIA は Firefox、Safari、Opera、Chrome、Internet Explorer といった主要なブラウザの最新バージョンでサポートされています。オープンソースの NVDA や Orca スクリーンリーダーなど、多くの支援技術も ARIA をサポートしています。jQuery UI、YUI、Google Closure、Dojo Dijit などの JavaScript ウィジェットライブラリも、次第に ARIA のマークアップを導入しています。 -

表現の変化

+### 表現の変化 -

動的な表現の変化には、コンテンツを表示させたり隠したりすることはもちろん、コンテンツの外見を変える (不正なデータを囲む赤色のボーダー、チェックされたチェックボックスの背景色を変えるなど) ために CSS を使用することも含みます。

+動的な表現の変化には、コンテンツを表示させたり隠したりすることはもちろん、コンテンツの外見を変える (不正なデータを囲む赤色のボーダー、チェックされたチェックボックスの背景色を変えるなど) ために CSS を使用することも含みます。 -

状態の変化

+#### 状態の変化 -

ARIA に、UI ウィジェットの現在の状態を定義する属性があります。例えば以下のとおりです (これだけではありません):

+ARIA に、UI ウィジェットの現在の状態を定義する属性があります。例えば以下のとおりです (これだけではありません): -
    -
  • aria-checked: チェックボックスやラジオボタンの状態を示します。
  • -
  • aria-disabled: 要素は可視状態ですが、編集や他の操作ができないことを示します。
  • -
  • aria-grabbed: ドラッグアンドドロップの操作で、オブジェクトが 'つかまれている' 状態を示します。
  • -
+- **`aria-checked`**: チェックボックスやラジオボタンの状態を示します。 +- **`aria-disabled`**: 要素は可視状態ですが、編集や他の操作ができないことを示します。 +- **`aria-grabbed`**: ドラッグアンドドロップの操作で、オブジェクトが 'つかまれている' 状態を示します。 -

(ARIA のすべてのステートの一覧については、ARIA のステートとプロパティの一覧をご覧ください。)

+(ARIA のすべてのステートの一覧については、[ARIA のステートとプロパティの一覧](http://www.w3.org/TR/wai-aria/states_and_properties)をご覧ください。) -

開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。

+開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。 -

可視性の変化

+#### 可視性の変化 -

コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は aria-hidden プロパティの値を変更するとよいでしょう。先に説明した手法を、display:none を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。

+コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は **`aria-hidden`** プロパティの値を変更するとよいでしょう。先に説明した手法を、`display:none` を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。 -

これは、可視性の制御に aria-hidden を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。

+これは、可視性の制御に **`aria-hidden`** を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。 -

この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で aria-hiddentrue に設定しています。

+この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で **`aria-hidden`** を `true` に設定しています。 -

例 2a: ツールチップ用の HTML

+_例 2a: ツールチップ用の HTML_ -
<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
+```html
+
+ + + +
+``` -

このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で aria-hidden 属性の状態のみを使用していることに注意してください。

+このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で **`aria-hidden`** 属性の状態のみを使用していることに注意してください。 -

例 2b: 状態を示すための、属性セレクタ

+_例 2b: 状態を示すための、属性セレクタ_ -
div.tooltip[aria-hidden="true"] {
+```css
+div.tooltip[aria-hidden="true"] {
   display: none;
 }
-
+``` -

>aria-hidden プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは >aria-hidden 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。

+**>`aria-hidden`** プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは **>`aria-hidden`** 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。 -

例 2c: aria-hidden 属性を更新する JavaScript

+_例 2c: aria-hidden 属性を更新する JavaScript_ -
var showTip = function(el) {
+```js
+var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
-}
+} +``` -

ロールの変化

+### ロールの変化 -
作成中
+> **Note:** 作成中 -

ARIA によって開発者は、誤った意味を持っていたり意味が存在しない要素に対して意味的なロールを宣言することができます。例えばメニューを作るために順番付けがないリストを使用するとき、{{HTMLElement("ul")}} に menubarrole を、各々の {{HTMLElement("li")}} に menuitemrole を与えるべきです。

+ARIA によって開発者は、誤った意味を持っていたり意味が存在しない要素に対して意味的なロールを宣言することができます。例えばメニューを作るために順番付けがないリストを使用するとき、{{HTMLElement("ul")}} に `menubar` の **`role`** を、各々の {{HTMLElement("li")}} に `menuitem` の **`role`** を与えるべきです。 -

要素の role を変更するべきではありません。代わりに元の要素を削除して、新たな role の要素で置き換えてください。

+要素の **`role`** を変更するべきではありません。代わりに元の要素を削除して、新たな **`role`** の要素で置き換えてください。 -

例えば "インライン編集" ウィジェットについて考えてみましょう: これはコンテキストを切り替えることなく、ユーザがその場でひとまとまりのテキストを編集できるコンポーネントです。このコンポーネントは、テキストの編集はできませんがアクティブが可能な "閲覧" モードと、テキストの編集が可能な "編集" モードがあります。開発者は、ARIA の rolebutton に設定した読み取り専用の text 型 {{HTMLElement("input")}} 要素で "閲覧" モードを実装して、要素を書き換え可能にするとともに "閲覧" モードの role 属性を削除する ({{HTMLElement("input")}} は自身のロールを意味として持っているため) ことで "編集" モードに切り替えようと考えるでしょう。

+例えば "インライン編集" ウィジェットについて考えてみましょう: これはコンテキストを切り替えることなく、ユーザがその場でひとまとまりのテキストを編集できるコンポーネントです。このコンポーネントは、テキストの編集はできませんがアクティブが可能な "閲覧" モードと、テキストの編集が可能な "編集" モードがあります。開発者は、ARIA の **`role`** を `button` に設定した読み取り専用の text 型 {{HTMLElement("input")}} 要素で "閲覧" モードを実装して、要素を書き換え可能にするとともに "閲覧" モードの **`role`** 属性を削除する ({{HTMLElement("input")}} は自身のロールを意味として持っているため) ことで "編集" モードに切り替えようと考えるでしょう。 -

これを行ってはいけません。代わりに rolebutton である {{HTMLElement("div")}} や {{HTMLElement("span")}} といった、まったく別の要素を使用して "閲覧" モードを、また text 型の {{HTMLElement("input")}} 要素を要して "編集" モードを実装してください。

+これを行ってはいけません。代わりに **`role`** が `button` である {{HTMLElement("div")}} や {{HTMLElement("span")}} といった、まったく別の要素を使用して "閲覧" モードを、また text 型の {{HTMLElement("input")}} 要素を要して "編集" モードを実装してください。 -

非同期のコンテンツ変更

+### 非同期のコンテンツ変更 -
作成中です。Live Regions もご覧ください。
+> **Note:** 作成中です。[Live Regions](/ja/docs/ARIA/Live_Regions "Live Regions") もご覧ください。 -

キーボードナビゲーション

+## キーボードナビゲーション -

開発者は、独自のウィジェットを作成する際にキーボードのサポートを見落とすことがよくあります。さまざまなユーザにとってアクセシブルにするために、すべての Web アプリケーションやウィジェットはマウスを必要とせずにキーボードでも操作できるようにするべきです。実際、通常これはデスクトップにおける同様のウィジェットがサポートする慣習への準拠度を向上させて、Tab、Enter、スペース、矢印キーのあらゆる利点を獲得します。

+開発者は、独自のウィジェットを作成する際にキーボードのサポートを見落とすことがよくあります。さまざまなユーザにとってアクセシブルにするために、すべての Web アプリケーションやウィジェットはマウスを必要とせずにキーボードでも操作できるようにするべきです。実際、通常これはデスクトップにおける同様のウィジェットがサポートする慣習への準拠度を向上させて、Tab、Enter、スペース、矢印キーのあらゆる利点を獲得します。 -

伝統的に、Web におけるキーボードナビゲーションは Tab キーに限定されてきました。ユーザはページ内の各リンク、ボタン、フォームへ順番にフォーカスを当てるために Tab キーを、逆順に進むために Shift-Tab を押します。これは一次元、つまり一度に 1 つの要素で、進むまたは戻るナビゲーションです。かなり分量の多いページでは、キーボードのみ使用するユーザは必要なセクションへアクセスするまでに何度も Tab キーを押さなければなりません。Web においてデスクトップスタイルのキーボード操作の慣習を実装すると、多くのユーでナビゲーションが劇的に高速化する可能性があります。

+伝統的に、Web におけるキーボードナビゲーションは Tab キーに限定されてきました。ユーザはページ内の各リンク、ボタン、フォームへ順番にフォーカスを当てるために Tab キーを、逆順に進むために Shift-Tab を押します。これは一次元、つまり一度に 1 つの要素で、進むまたは戻るナビゲーションです。かなり分量の多いページでは、キーボードのみ使用するユーザは必要なセクションへアクセスするまでに何度も Tab キーを押さなければなりません。Web においてデスクトップスタイルのキーボード操作の慣習を実装すると、多くのユーでナビゲーションが劇的に高速化する可能性があります。 -

以下は、ARIA が有効な Web アプリケーションでどのようなキーボードナビゲーションが動作すべきかの概要です:

+以下は、ARIA が有効な Web アプリケーションでどのようなキーボードナビゲーションが動作すべきかの概要です: -
    -
  • Tab キーは、全体としてウィジェットへフォーカスを当てます。例えばメニューバーで Tab キーを押すと、メニューの最初の項目にフォーカスを当てるべきです。
  • -
  • 矢印キーは、ウィジェット内での選択やナビゲーションをできるべきです。例えば左または右矢印キーを使用すると、前や次のメニュー項目にフォーカスを移動できます。
  • -
  • フォームの中にないウィジェットは、Enter やスペースキーでコントロールの選択やアクティブ化を行うべきです。
  • -
  • フォーム内で、スペースキーはコントロールの選択やアクティブ化を、Enter キーはフォームのデフォルトのアクションの実行を行うべきです。
  • -
  • 迷った場合はあなたが作成するコントールの、デスクトップにおける標準的な動作を模倣しましょう。
  • -
+- Tab キーは、全体としてウィジェットへフォーカスを当てます。例えばメニューバーで Tab キーを押すと、メニューの最初の項目にフォーカスを当てるべきです。 +- 矢印キーは、ウィジェット内での選択やナビゲーションをできるべきです。例えば左または右矢印キーを使用すると、前や次のメニュー項目にフォーカスを移動できます。 +- フォームの中にないウィジェットは、Enter やスペースキーでコントロールの選択やアクティブ化を行うべきです。 +- フォーム内で、スペースキーはコントロールの選択やアクティブ化を、Enter キーはフォームのデフォルトのアクションの実行を行うべきです。 +- 迷った場合はあなたが作成するコントールの、デスクトップにおける標準的な動作を模倣しましょう。 -

従って前出のタブウィジェットの例では、ユーザが Tab および Shift+Tab キーを使用してウィジェットのコンテナ (マークアップにおける <ol>) に出入りするナビゲーションを行えるとよいでしょう。キーボードのフォーカスがコンテナ内に入ったら、矢印キーで各々のタブ (<li> 要素) を行き来できるとよいでしょう。ここからは、プラットフォームによって慣習が異なります。Windows では、ユーザが矢印キーを押すと自動的に次のタブがアクティブ化されます。Mac OS X では、ユーザは次のタブをアクティブ化するために Enter またはスペースキーを押します。キーボードでナビゲーション可能な JavaScript ウィジェット作成の包括的なチュートリアルで、このような動作を JavaScript で実装する方法を説明します。

+従って前出のタブウィジェットの例では、ユーザが Tab および Shift+Tab キーを使用してウィジェットのコンテナ (マークアップにおける \
    ) に出入りするナビゲーションを行えるとよいでしょう。キーボードのフォーカスがコンテナ内に入ったら、矢印キーで各々のタブ (\
  1. 要素) を行き来できるとよいでしょう。ここからは、プラットフォームによって慣習が異なります。Windows では、ユーザが矢印キーを押すと自動的に次のタブがアクティブ化されます。Mac OS X では、ユーザは次のタブをアクティブ化するために Enter またはスペースキーを押します。[キーボードでナビゲーション可能な JavaScript ウィジェット](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets "Accessibility/Keyboard-navigable JavaScript widgets")作成の包括的なチュートリアルで、このような動作を JavaScript で実装する方法を説明します。 -

    デスクトップスタイルのキーボードナビゲーションの慣習に関する詳細として、包括的な DHTML style guide があります。これは、ARIA がサポートする各種ウィジェットで動作すべきキーボードナビゲーションは何かの概要を示します。W3C でもさまざまなウィジェット向けのキーボードナビゲーションやショートカットの慣習を収めた、ARIA Best Practices の有用なドキュメントを提供しています。

    +デスクトップスタイルのキーボードナビゲーションの慣習に関する詳細として、包括的な [DHTML style guide](http://access.aol.com/dhtml-style-guide-working-group/) があります。これは、ARIA がサポートする各種ウィジェットで動作すべきキーボードナビゲーションは何かの概要を示します。W3C でもさまざまなウィジェット向けのキーボードナビゲーションやショートカットの慣習を収めた、[ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) の有用なドキュメントを提供しています。 -

    関連情報

    +## 関連情報 - +- [ARIA](/ja/docs/ARIA "ARIA") +- [Web アプリケーションと ARIA の FAQ](/ja/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ "Web applications and ARIA FAQ") +- [WAI-ARIA Specification](http://www.w3.org/TR/wai-aria/) +- [WAI-ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) +- [DHTML Style Guide](http://access.aol.com/dhtml-style-guide-working-group/) diff --git a/files/ja/web/accessibility/aria/aria_guides/index.md b/files/ja/web/accessibility/aria/aria_guides/index.md index 3bebf397ddc29c..2ce3d62aad6af3 100644 --- a/files/ja/web/accessibility/aria/aria_guides/index.md +++ b/files/ja/web/accessibility/aria/aria_guides/index.md @@ -5,22 +5,20 @@ tags: - ARIA translation_of: Web/Accessibility/ARIA/ARIA_Guides --- -

    Accessible Rich Internet Applications (ARIA) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。

    +Accessible Rich Internet Applications (**ARIA**) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。 -
      -
    • フォームのエラー処理
    • -
    • ウィジェットへのラベルづけ
    • -
    • 複合ウィジェットや領域のラベルづけ
    • -
    • 複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex)
    • -
    • ランドマークロールを使う
    • -
    • 動的更新とライブ領域を扱う
    • -
    • AT製品の仮想と非仮想モード
    • -
    • ドラッグアンドドロップを使う
    • -
    • 非ARIA なスクリーンリーダーのユーザーへの通知
    • -
    • プレゼンテーションロールの構造を固定する
    • -
    • レイアウト表を隠す
    • -
    • モーダルと非モーダルなダイアログを管理する
    • -
    • HTML5 で ARIA を使う
    • -
    • ARIA をテストする方法
    • -
    • モバイル端末での ARIA
    • -
    +- フォームのエラー処理 +- ウィジェットへのラベルづけ +- 複合ウィジェットや領域のラベルづけ +- 複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex) +- ランドマークロールを使う +- 動的更新とライブ領域を扱う +- AT 製品の仮想と非仮想モード +- ドラッグアンドドロップを使う +- 非 ARIA なスクリーンリーダーのユーザーへの通知 +- プレゼンテーションロールの構造を固定する +- レイアウト表を隠す +- モーダルと非モーダルなダイアログを管理する +- HTML5 で ARIA を使う +- ARIA をテストする方法 +- モバイル端末での ARIA diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.md b/files/ja/web/accessibility/aria/aria_live_regions/index.md index 4dcaac17e6bb6b..a583040318fe4d 100644 --- a/files/ja/web/accessibility/aria/aria_live_regions/index.md +++ b/files/ja/web/accessibility/aria/aria_live_regions/index.md @@ -7,65 +7,61 @@ tags: - ariaLive translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions --- -

    JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。

    +JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。 -
    -

    注記: 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から(かつ空で)存在しなければなりません。続いて後に起こる変更は通知されます。

    +> **Note:** 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から(かつ空で)存在しなければなりません。続いて後に起こる変更は通知されます。 +> +> 単に読み込まれた最初のマークアップに `aria-live` 属性もしくは 特化したライブリージョン `role` (例えば `role="alert"` など)を含めても何も効果はありません。 +> +> `aria-live` 属性もしくは特化した `role` をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。 +> +> 常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加/変更をしてください。 -

    単に読み込まれた最初のマークアップに aria-live 属性もしくは 特化したライブリージョン role (例えば role="alert" など)を含めても何も効果はありません。

    +## 単純なライブリージョン -

    aria-live 属性もしくは特化した role をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。

    +ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。 -

    常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加/変更をしてください。

    -
    - -

    単純なライブリージョン

    - -

    ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。

    +1. **`aria-live`**: `aria-live=POLITENESS_SETTING` はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は `off`、`polite`、` assertive` で、デフォルトは `off` です。この属性は間違いなく最も重要な属性です。 +2. **`aria-controls`**: `aria-controls=[IDLIST]` は領域とそれをコントロールするものを関連付けるために使用されます。領域は `div` の `id` のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば `aria-controls="myRegionID1 myRegionsID2"`。 -
      -
    1. aria-live: aria-live=POLITENESS_SETTING はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は offpolite assertive で、デフォルトは off です。この属性は間違いなく最も重要な属性です。
    2. -
    3. -

      aria-controls: aria-controls=[IDLIST] は領域とそれをコントロールするものを関連付けるために使用されます。領域は divid のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば aria-controls="myRegionID1 myRegionsID2"

      + > **Warning:** ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。 -
      ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。
      -
    4. -
    +通常、`aria-live="polite"` のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。 -

    通常、aria-live="polite" のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。

    +重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、`aria-live="off"` で黙らせます。 -

    重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、aria-live="off" で黙らせます。

    +### 有益な画面上の情報を更新するドロップダウンボックス - +ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。 -

    ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。

    +#### HTML -

    HTML

    +```html +
    + Planet information + + + +
    -
    <fieldset>
    -  <legend>Planet information</legend>
    -  <label for="planetsSelect">Planet:</label>
    -  <select id="planetsSelect" aria-controls="planetInfo">
    -    <option value="">Select a planet&hellip;</option>
    -    <option value="mercury">Mercury</option>
    -    <option value="venus">Venus</option>
    -    <option value="earth">Earth</option>
    -    <option value="mars">Mars</option>
    -  </select>
    -  <button id="renderPlanetInfoButton">Go</button>
    -</fieldset>
    -
    -<div role="region" id="planetInfo" aria-live="polite">
    -  <h2 id="planetTitle">No planet selected</h2>
    -  <p id="planetDescription">Select a planet to view its description</p>
    -</div>
    +
    +

    No planet selected

    +

    Select a planet to view its description

    +
    -<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p> -
    +

    Information courtesy Wikipedia

    +``` -

    JavaScript

    +#### JavaScript -
    const PLANETS_INFO = {
    +```js
    +const PLANETS_INFO = {
       mercury: {
         title: 'Mercury',
         description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.'
    @@ -102,126 +98,91 @@ function renderPlanetInfo(planet) {
     
     const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton');
     
    -renderPlanetInfoButton.addEventListener('click', event => {
    +renderPlanetInfoButton.addEventListener('click', event => {
       const planetsSelect = document.querySelector('#planetsSelect');
       const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value;
     
       renderPlanetInfo(selectedPlanet);
     });
    -
    - -

    {{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}

    - -

    ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは aria-live="polite" を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。

    - -

    ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:

    - -

    A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.

    - -

    優先する専門のライブリージョンロール

    - -

    次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ロール説明互換性に関する注意事項
    logチャット、エラー、ゲームもしくは別種のログ互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
    statusある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。互換性を最大限にするために、このロールを使う際には冗長な aria-live="polite" を追加します。
    alertスクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIAフォームのチュートリアルへのリンク)互換性を最大限にするために、このロールを使う際に aria-live="assertive" を追加するよう勧める人もいます。しかし、aria-liverole=alert の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。
    progressbarウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。
    marquee株式相場表示機のようなスクロールするテキストのためのものです。
    timerカウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。
    - -

    高度なライブリージョン

    - -

    (TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。

    - -

    一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。

    - -

    The Paciello Group は、ライブリージョンのサポート状況についての情報 (2014) をいくつかもっています。Paul Jadam は特に aira-atomic と aria-relevant のサポートについてのリサーチをしました。

    - -
      -
    1. aria-atomic: aria-atomic=BOOLEAN は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は false または true で、デフォルトは false です。
    2. -
    3. aria-relevant: aria-relevant=[LIST_OF_CHANGES] はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は additionsremovalstextall で、 additions text がデフォルトです。
    4. -
    5. aria-labelledby: aria-labelledby=[IDLIST] は領域とラベルを関連付けるために使われます。aria-controls と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。
    6. -
    7. aria-describedby: aria-describedby=[IDLIST] は領域と説明の関連付けを行います。aria-controls と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。
    8. -
    - -

    高度なユースケース: Clock

    - -

    aria-atomic についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。

    - -
    <div id="clock" role="timer" aria-live="polite"></div>
    -
    - -
    /* basic JavaScript to update the clock */
    +```
    +
    +{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}
    +
    +ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは `aria-live="polite"` を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。
    +
    +ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:
    +
    +![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png)
    +
    +## 優先する専門のライブリージョンロール
    +
    +次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:
    +
    +| ロール      | 説明                                                                                                                                                                                   | 互換性に関する注意事項                                                                                                                                                                                                                        |
    +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    +| log         | チャット、エラー、ゲームもしくは別種のログ                                                                                                                                             | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。                                                                                                                                                  |
    +| status      | ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。                         | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。                                                                                                                                                  |
    +| alert       | スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIA フォームのチュートリアルへのリンク) | 互換性を最大限にするために、このロールを使う際に `aria-live="assertive"` を追加するよう勧める人もいます。しかし、`aria-live` と `role=alert` の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。 |
    +| progressbar | ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。                                                                           |                                                                                                                                                                                                                                               |
    +| marquee     | 株式相場表示機のようなスクロールするテキストのためのものです。                                                                                                                         |                                                                                                                                                                                                                                               |
    +| timer       | カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。                                                                                                               |                                                                                                                                                                                                                                               |
    +
    +## 高度なライブリージョン
    +
    +(TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。
    +
    +一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008 年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。
    +
    +The Paciello Group は、[ライブリージョンのサポート状況についての情報](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/) (2014) をいくつかもっています。Paul Jadam は特に [aira-atomic と aria-relevant のサポート](http://pauljadam.com/demos/aria-atomic-relevant.html)についてのリサーチをしました。
    +
    +1.  **`aria-atomic`**: `aria-atomic=BOOLEAN` は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は `false` または `true` で、デフォルトは `false` です。
    +2.  [**``aria-relevant**](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute "Using_the_aria-relevant_attribute"): `aria-relevant=[LIST_OF_CHANGES]` はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は `additions`、`removals`、`text`、`all` で、 `additions text` がデフォルトです。
    +3.  **`aria-labelledby`**: `aria-labelledby=[IDLIST]` は領域とラベルを関連付けるために使われます。`aria-controls` と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。
    +4.  **`aria-describedby`**: `aria-describedby=[IDLIST]` は領域と説明の関連付けを行います。`aria-controls` と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。
    +
    +### 高度なユースケース: Clock
    +
    +`aria-atomic` についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。
    +
    +```
    +
    +``` + +```js +/* basic JavaScript to update the clock */ setInterval(function() { var now = new Date(); document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); }, 60000); -
    +``` -

    最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。

    +最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。 -

    一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。

    +一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。 -

    aria-atomic="true" はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。

    +`aria-atomic="true"` はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。 -
    <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
    -
    +``` +
    +``` -

    高度なユースケース: Roster

    +### 高度なユースケース: Roster -

    チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。

    +チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。 -
    <ul id="roster" aria-live="polite" aria-relevant="additions removals">
    -	<!-- use JavaScript to add remove users here-->
    -</ul>
    -
    +``` +
      + +
    +``` -

    ARIA ライブプロパティの内訳:

    +ARIA ライブプロパティの内訳: -
      -
    • aria-live="polite" はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。
    • -
    • 追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため aria-atomic は設定されていません (デフォルトの false が入ります)。
    • -
    • aria-relevant="additions removals" により追加もしくは削除されたユーザーが読み上げられることを確かにします。
    • -
    +- `aria-live="polite"` はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。 +- 追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため `aria-atomic` は設定されていません (デフォルトの `false` が入ります)。 +- `aria-relevant="additions removals"` により追加もしくは削除されたユーザーが読み上げられることを確かにします。 -

    関連情報

    +## 関連情報 - +- [ARIA Roles](/ja/docs/Web/Accessibility/ARIA/Roles) diff --git a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md index a62f6ac1371f7d..deff41bf4890dd 100644 --- a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md +++ b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md @@ -3,30 +3,26 @@ title: ARIA Screen Reader Implementors Guide slug: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide --- -

    Live Regions

    +## Live Regions -

    This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete.

    +This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete. -

    Interpreting WAI-ARIA live region markup

    +### Interpreting WAI-ARIA live region markup -
      -
    1. Live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no WAI-ARIA hints.
    2. -
    3. Optionally, create a second, additional queue if the user configures a second hardware channel: If there are two channels for presentation (e.g. text to speech and a Braille display), then two queues can be maintained to allow for parallel presentation. The channels could be user configured for presenting live regions based on role or politeness.
    4. -
    5. Busy regions: Any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared.
    6. -
    7. Politeness (aria-live or from role) takes first precedence,: items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g. role="log" is polite by default). Assertive items are first then politeness level. Alternatively, implementations may choose to have a policy of clearing more polite items, e.g. assertive items clear any polite items from the queue.
    8. -
    9. Time takes second precedence: Prioritize items with the same politeness level according to when the event occurs (earlier events come first). Present items of the same politeness level in the order of what occurred first.
    10. -
    11. Atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content. As a new event for an atomic region is added to the queue remove an earlier event for the same region. It is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other.
    12. -
    13. Include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. This is particularly important for changes in data cells, where the column and row headers provide important contextual information.
    14. -
    +1. Live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no WAI-ARIA hints. +2. Optionally, create a second, additional queue if the user configures a second hardware channel: If there are two channels for presentation (e.g. text to speech and a Braille display), then two queues can be maintained to allow for parallel presentation. The channels could be user configured for presenting live regions based on role or politeness. +3. Busy regions: Any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared. +4. Politeness (aria-live or from role) takes first precedence,: items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g. role="log" is polite by default). Assertive items are first then politeness level. Alternatively, implementations may choose to have a policy of clearing more polite items, e.g. assertive items clear any polite items from the queue. +5. Time takes second precedence: Prioritize items with the same politeness level according to when the event occurs (earlier events come first). Present items of the same politeness level in the order of what occurred first. +6. Atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content. As a new event for an atomic region is added to the queue remove an earlier event for the same region. It is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other. +7. Include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. This is particularly important for changes in data cells, where the column and row headers provide important contextual information. -

    Ideas for Settings and Heuristics

    +### Ideas for Settings and Heuristics -
      -
    1. Allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart.
    2. -
    3. When no WAI-ARIA markup is present, automatically present some changes unless the user configures all live changes to off. For example, automatically speak changes that are caused by the user's own input, as part of the context of that input.
    4. -
    5. Allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics)
    6. -
    +1. Allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart. +2. When no WAI-ARIA markup is present, automatically present some changes unless the user configures all live changes to off. For example, automatically speak changes that are caused by the user's own input, as part of the context of that input. +3. Allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) -

    Details for Processing via Platform Accessibility APIs

    +### Details for Processing via Platform Accessibility APIs -

    We hope browser manufacturers will work to provide consistent implementations. The most complete implementation of live regions currently is in Firefox 3. Here is how WAI-ARIA live regions are exposed in Firefox 3.

    +We hope browser manufacturers will work to provide consistent implementations. The most complete implementation of live regions currently is in Firefox 3. Here is how [WAI-ARIA live regions are exposed in Firefox 3](/ja/AJAX/WAI_ARIA_Live_Regions//API_Support "http://developer.mozilla.org/editor/fckeditor/core/editor/en/AJAX/WAI_ARIA_Live_Regions//API_Support"). diff --git a/files/ja/web/accessibility/aria/aria_techniques/index.md b/files/ja/web/accessibility/aria/aria_techniques/index.md index 5402dec2a3031c..77089b9b79a99d 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/index.md +++ b/files/ja/web/accessibility/aria/aria_techniques/index.md @@ -9,208 +9,162 @@ tags: - TopicStub translation_of: Web/Accessibility/ARIA/ARIA_Techniques --- -

    ロール

    - - - -

    ウィジェットロール

    - -
    - -
    - -

    複合ロール

    - -

    以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。

    - -
    - -
    - -

    文書構造ロール

    - -
    - -
    - -

    ランドマークロール

    - - - -

    ライブリージョンロール

    - -
    - -
    - -

    ウィンドウロール

    - -
    - -
    - -

    ステートとプロパティ

    - -

    ウィジェット属性

    - -
    - -
    - -

    ライブリージョン属性

    - -
    - -
    - -

    ドラッグ&ドロップ属性

    - -
    -
      -
    • aria-dropeffect
    • -
    • aria-dragged
    • -
    -
    - -

    関係属性

    - -
    -
      -
    • aria-activedescendant
    • -
    • aria-colcount
    • -
    • aria-colindex
    • -
    • aria-colspan
    • -
    • aria-controls
    • -
    • aria-describedby
    • -
    • aria-details
    • -
    • aria-errormessage
    • -
    • aria-flowto
    • -
    • aria-labelledby
    • -
    • aria-owns
    • -
    • aria-posinset
    • -
    • aria-rowcount
    • -
    • aria-rowindex
    • -
    • aria-rowspan
    • -
    • aria-setsize
    • -
    -
    - -

    MicrosoftEdge 固有のプロパティ

    - -
    - -
    +## ロール + +### ウィジェットロール + +- [Button](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role) +- [Checkbox](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role) +- [Dialog](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) +- [Gridcell](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_Gridcell_Role) +- [Link](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role) +- Menuitem +- Menuitemcheckbox +- Menuitemradio +- Option +- [Progressbar](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) +- [Radio](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) +- Scrollbar +- Searchbox +- Separator(フォーカス可能な場合) +- [Slider](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role) +- Spinbutton +- [Switch](/ja/docs/Web/Accessibility/ARIA/Roles/Switch_role) +- [Tab](/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role) +- [Tabpanel](/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role) +- [Textbox](/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role) +- Treeitem + +### 複合ロール + +以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。 + +- Combobox +- [Grid](/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role) ([row](/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role), [gridcell](/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role), rowheader, columnheader ロールを含む) +- [Listbox ](/ja/docs/Web/Accessibility/ARIA/Roles/listbox_role)(option ロールを含む) +- Menu +- Menubar +- [Radiogroup (radio ロールを参照)](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) +- [Tablist](/ja/docs/Web/Accessibility/ARIA/Roles/Tablist_Role) ([tab](/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role), [tabpanel](/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role) ロールを含む) +- Tree +- Treegrid + +### 文書構造ロール + +- [Application](/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role) +- [Article](/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role) +- [Cell](/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role) +- Columnheader +- Definition +- Directory +- [Document](/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role) +- [Feed](/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role) +- [Figure](/ja/docs/Web/Accessibility/ARIA/Roles/Figure_Role) +- [Group](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role) +- [Grid](/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role) +- [Heading](/ja/docs/Web/Accessibility/ARIA/Roles/heading_role) +- [Img](/ja/docs/Web/Accessibility/ARIA/Roles/Role_Img) +- [List](/ja/docs/Web/Accessibility/ARIA/Roles/List_role) +- [Listitem](/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role) +- Math +- [None(presentation ロールと同義)](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- Note +- [Presentation](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- [Row](/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role) +- [Rowgroup](/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role) +- Rowheader +- Separator +- [Table](/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role) +- Term +- [Textbox](/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role) +- Tooltip +- [Toolbar](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role) + +### ランドマークロール + +- [Banner](/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role) +- [Complementary](/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role) +- [Contentinfo](/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role) +- [Form](/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [Main](/ja/docs/Web/Accessibility/ARIA/Roles/Main_role) +- [Navigation](/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role) +- [Region](/ja/docs/Web/Accessibility/ARIA/Roles/Region_role) +- [Search](/ja/docs/Web/Accessibility/ARIA/Roles/Search_role) + +### ライブリージョンロール + +- [Alert](/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role) +- [Log](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role) +- Marquee +- [Status](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role) +- Timer + +### ウィンドウロール + +- [Alertdialog](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role) +- [Dialog](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) + +## ステートとプロパティ + +### ウィジェット属性 + +- aria-autocomplete +- aria-checked +- aria-current +- aria-disabled +- aria-errormessage +- aria-expanded +- aria-haspopup +- aria-hidden +- [aria-invalid](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) +- [aria-label](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) +- aria-level +- aria-modal +- aria-multiline +- aria-multiselectable +- [aria-orientation](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute) +- aria-placeholder +- aria-pressed +- aria-readonly +- [aria-required](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute) +- aria-selected +- aria-sort +- [aria-valuemax](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) +- [aria-valuemin](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) +- [aria-valuenow](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute) +- [aria-valuetext](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) + +### ライブリージョン属性 + +- aria-live +- [aria-relevant](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute) +- aria-atomic +- aria-busy + +### ドラッグ&ドロップ属性 + +- aria-dropeffect +- aria-dragged + +### 関係属性 + +- [aria-activedescendant](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute) +- aria-colcount +- aria-colindex +- aria-colspan +- aria-controls +- [aria-describedby](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) +- aria-details +- aria-errormessage +- aria-flowto +- [aria-labelledby](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- aria-owns +- aria-posinset +- aria-rowcount +- aria-rowindex +- aria-rowspan +- aria-setsize + +### MicrosoftEdge 固有のプロパティ + +- [x-ms-aria-flowfrom](/ja/docs/Web/API/x-ms-aria-flowfrom) {{Non-standard_Inline}} diff --git a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md index 2a92eac790f073..2b365a9badfa11 100644 --- a/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md +++ b/files/ja/web/accessibility/aria/attributes/aria-activedescendant/index.md @@ -9,39 +9,36 @@ translation_of: >- original_slug: >- Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute --- -

    この記事では、aria-activedescendant プロパティについて説明します。

    +この記事では、[`aria-activedescendant`](https://www.w3.org/TR/wai-aria/#aria-activedescendant) プロパティについて説明します。 -

    説明

    +### 説明 -

    aria-activedescendant 属性には、ドキュメントオブジェクトモデル内の複合ウィジェットの一部である、現在アクティブな子オブジェクトの ID が含まれます。 これは、1つ以上の子にフォーカスを持たせるというオーバーヘッドを伴います。 名前が指定するように、複合ウィジェットの現在アクティブな子を管理するのに役立ちます。

    +`aria-activedescendant` 属性には、ドキュメントオブジェクトモデル内の複合ウィジェットの一部である、現在アクティブな子オブジェクトの ID が含まれます。 これは、1 つ以上の子にフォーカスを持たせるというオーバーヘッドを伴います。 名前が指定するように、複合ウィジェットの現在アクティブな子を管理するのに役立ちます。 -

    ユーザーエージェントと支援技術への影響

    +### ユーザーエージェントと支援技術への影響 -

    ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、aria-activedescendant プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 aria-activedescendant プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。

    +ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、`aria-activedescendant` プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 `aria-activedescendant` プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。 -
    : 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の1つで、したがって規範的ではありません。
    +> **Note:** **注**: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の 1 つで、したがって規範的ではありません。 -

    +### 例 -

    Example 1:

    +#### Example 1: -

    +```html +Code +``` -
    Code 
    +#### 動作する例 -

    動作する例

    +### 注 -
      -
    +### 使用された ARIA 属性 -

    +### 関連する ARIA 技術 -

    使用された ARIA 属性

    +### 互換性 - +TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する -

    互換性

    - -

    TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

    - -

    その他のリソース

    +### その他のリソース diff --git a/files/ja/web/accessibility/aria/index.md b/files/ja/web/accessibility/aria/index.md index 68d0c2e1076f2c..74b1cd755c6a1e 100644 --- a/files/ja/web/accessibility/aria/index.md +++ b/files/ja/web/accessibility/aria/index.md @@ -7,26 +7,26 @@ tags: - HTML translation_of: Web/Accessibility/ARIA --- -

    Accessible Rich Internet Applications (ARIA) はウェブコンテンツやウェブアプリケーション (特に JavaScript で開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。

    +Accessible Rich Internet Applications **(ARIA)** はウェブコンテンツやウェブアプリケーション (特に JavaScript で開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。 -

    ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、 HTML4 のアクセシブルナビゲーションランドマーク、 JavaScript のウィジェット、フォームのヒントやエラーメッセージ、ライブコンテンツの更新などを可能にします。

    +ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、 HTML4 のアクセシブルナビゲーションランドマーク、 JavaScript のウィジェット、フォームのヒントやエラーメッセージ、ライブコンテンツの更新などを可能にします。 -
    -

    これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 ARIA を使用するよりも、その要素を使用したほうがいいでしょう。例えば、ネイティブな要素にはキーボードのアクセシビリティや役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。

    -
    +> **Warning:** これらのウィジェットの多くは、後に HTML5 に組み込まれました。意味的に正しい HTML 要素が存在するのであれば、 **ARIA を使用するよりも、その要素を使用したほうがいいでしょう**。例えば、ネイティブな要素には[キーボードのアクセシビリティ](/ja/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)や役割、状態が組み込まれています。しかし、 ARIA を使用する場合は、スクリプトで (同等の) ブラウザーの動作を模倣する責任があります。 -

    プログレスバーウィジェットのためのマークアップです。

    +プログレスバーウィジェットのためのマークアップです。 -
    <div id="percent-loaded" role="progressbar" aria-valuenow="75"
    -     aria-valuemin="0" aria-valuemax="100">
    -</div>
    -
    +```html +
    +
    +``` -

    このプログレスバーは、意味を持たない <div> を使って作られています。残念ながら、 HTML 4 には開発者が利用できるより意味のある要素がないので、 ARIA の役割とプロパティを追加する必要があります。要素に属性を追加することでこれを指定します。この例では、 role="progressbar" 属性により、この要素が実際には JavaScript を使用したプログレスバーウィジェットであることをブラウザーに伝えています。 aria-valuemin および aria-valuemax 属性はプログレスバーの最小値と最大値を指定し、 aria-valuenow は現在の状態を表すため、 JavaScript から更新し続けます。

    +このプログレスバーは、意味を持たない `
    ` を使って作られています。残念ながら、 HTML 4 には開発者が利用できるより意味のある要素がないので、 ARIA の役割とプロパティを追加する必要があります。要素に属性を追加することでこれを指定します。この例では、 `role="progressbar"` 属性により、この要素が実際には JavaScript を使用したプログレスバーウィジェットであることをブラウザーに伝えています。 `aria-valuemin` および `aria-valuemax` 属性はプログレスバーの最小値と最大値を指定し、 `aria-valuenow` は現在の状態を表すため、 JavaScript から更新し続けます。 -

    マークアップに直接配置するとともに、 ARIA の属性を要素に追加して、次のような JavaScript コードを使用して動的に更新することができます。

    +マークアップに直接配置するとともに、 ARIA の属性を要素に追加して、次のような JavaScript コードを使用して動的に更新することができます。 -
    // プログレスバーの <div> を DOM 内で探す。
    +```js
    +// プログレスバーの 
    を DOM 内で探す。 var progressBar = document.getElementById("percent-loaded"); // ARIA ロールと状態を設定することで、 @@ -39,88 +39,71 @@ progressBar.setAttribute("aria-valuemax", 100); // 関数を作成する。 function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); -}
    +} +``` -
    -

    ARIA は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。

    - -

    HTML5 では、すべての ARIA 属性が有効です。新しいランドマーク要素 (<main>, <header>, <nav> など) は ARIA ロールに組み込まれたため、重複指定する必要はありません。

    -
    +> **Note:** ARIA は HTML4 以降に導入されたため、 HTML4 や XHTML の派生形では検証できません。ただし、技術的に問題があっても、それを上回るアクセシビリティの向上が得られます。 +> +> HTML5 では、すべての ARIA 属性が有効です。新しいランドマーク要素 (`
    `, `
    `, `
+#### CSS -

CSS

- -
button,
+```css
+button,
 [role="button"] {
     padding: 3px;
     border: 2px solid transparent;
@@ -198,17 +184,18 @@ button:focus,
 [role="button"][aria-pressed="true"] {
     border: 2px solid #000;
 }
-
+``` -

JavaScript

+#### JavaScript -
function handleBtnClick(event) {
+```js
+function handleBtnClick(event) {
   toggleButton(event.target);
 }
 
 function handleBtnKeyDown(event) {
   // Space や Enter が押されたかどうかを確認します
-  if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // IE11 サポートのための "Spacebar"
+  if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // IE11 サポートのための "Spacebar"
     // デフォルトのアクションを防止して Space が押されたときにスクロールするのを止める
     event.preventDefault();
     toggleButton(event.target);
@@ -227,66 +214,46 @@ function toggleButton(element) {
   } else {
      audio.play();
   }
-}
- -

結果

+} +``` -

{{EmbedLiveSample('Toggle_button_example')}}

+#### 結果 -

アクセシビリティの懸念

+{{EmbedLiveSample('Toggle_button_example')}} -

ボタンはインタラクティブなコントロールであるため、フォーカス可能です。 ボタン (button) ロールがそれ自体ではフォーカスできない要素 (<span><div><p> など) に追加された場合、ボタンをフォーカス可能にするには tabindex 属性を使用する必要があります。

+## アクセシビリティの懸念 -

警告: ボタンロールでリンクをマークアップするときは注意してください。 ボタンは Space キーや Enter キーを使用してトリガーされることが期待されますが、リンクは Enter キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、role="button" を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、Space キーをリッスンするキーイベントハンドラーを追加する必要もあります。

+ボタンはインタラクティブなコントロールであるため、フォーカス可能です。 ボタン (`button`) ロールがそれ自体ではフォーカスできない要素 (``、`
`、`

` など) に追加された場合、ボタンをフォーカス可能にするには `tabindex` 属性を使用する必要があります。 -

ボタン (button) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または aria-label の値、または aria-labelledby 属性によって参照される要素、または含まれている場合は説明のいずれかです。

+> **Warning:** **警告:** ボタンロールでリンクをマークアップするときは注意してください。 ボタンは Space キーや Enter キーを使用してトリガーされることが期待されますが、リンクは Enter キーを使用してトリガーされることが期待されます。 つまり、リンクがボタンのように振る舞うために使用される場合、`role="button"` を追加するだけでは不十分です。 ネイティブなボタンとの一貫性を保つために、Space キーをリッスンするキーイベントハンドラーを追加する必要もあります。 -

ベストプラクティス

+ボタン (`button`) ロールを使用すると、スクリーンリーダーは要素をボタンとしてアナウンスします。 通常、「クリック」の後にボタンのアクセス可能な名前が続きます。 アクセス可能な名前は、要素のコンテンツ、または `aria-label` の値、または `aria-labelledby` 属性によって参照される要素、または含まれている場合は説明のいずれかです。 -

リンクがボタンのアクションを実行する場合、要素に role="button" を指定すると、支援技術のユーザーが要素の機能を理解するのに役立ちます。 ただし、より良い解決策は、機能と ARIA のロールに一致するようにビジュアルデザインを調整することです。 可能な場合は、ボタン (button) ロールではなく、ネイティブな HTML のボタン (<button><input type="button"><input type="submit"><input type="reset">、および <input type="image">) を使用することをお勧めします。 ネイティブな HTML のボタンは、すべてのユーザーエージェントと支援技術によってサポートされており、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件を提供します。

+## ベストプラクティス -

仕様

+リンクがボタンのアクションを実行する場合、要素に `role="button"` を指定すると、支援技術のユーザーが要素の機能を理解するのに役立ちます。 ただし、より良い解決策は、機能と ARIA のロールに一致するようにビジュアルデザインを調整することです。 可能な場合は、ボタン (`button`) ロールではなく、ネイティブな HTML のボタン (`