Replace dead W3c ARIA Authoring Practices Guide links with relevant, …

…working links (mdn#30278)

Replace dead W3c ARIA Authoring Pratcies Guide links with relevant, working links

files/en-us/learn/accessibility/wai-aria_basics/index.md

@@ -451,6 +451,6 @@ This article has by no means covered all that's available in WAI-ARIA, but it sh
 - [WAI-ARIA roles](/en-US/docs/Web/Accessibility/ARIA/Roles): Categories of ARIA roles and the roles covered on MDN
 - [ARIA in HTML](https://www.w3.org/TR/html-aria/) on W3C: A specification that defines, for each HTML feature, the accessibility (ARIA) semantics implicitly applied on it by the browser and the WAI-ARIA features you may set on it if extra semantics are required
 - [Deque university code library](https://dequeuniversity.com/library/): A library of really useful and practical examples showing complex UI controls made accessible using WAI-ARIA features
-- [WAI-ARIA authoring practices](https://w3c.github.io/aria-practices/) on W3C: A very detailed design pattern from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features
+- [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/) on W3C: A very detailed design pattern from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features
 
 {{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

files/en-us/mdn/writing_guidelines/page_structures/page_types/aria_page_template/index.md

@@ -28,7 +28,7 @@ In ARIA role or attribute subpages, you need to include the following tags (see
 In the value of the `spec_urls` front matter metadata key, update the URLs to point to the fragment IDs for the correct sections from the following specifications:
 
 - [ARIA](https://w3c.github.io/aria/)
-- [ARIA Authoring Practices](https://w3c.github.io/aria-practices/)
+- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
 
 Additional resources:
 

files/en-us/web/accessibility/aria/attributes/aria-activedescendant/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-activedescendant
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-activedescendant
-  - https://w3c.github.io/aria-practices/#kbd_focus_activedescendant
+  - https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant
 ---
 
 The `aria-activedescendant` attribute identifies the currently active element when focus is on a [`composite`](/en-US/docs/Web/Accessibility/ARIA/Roles/composite_role) widget, [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role), [`textbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role), [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role), or [`application`](/en-US/docs/Web/Accessibility/ARIA/Roles/application_role).

files/en-us/web/accessibility/aria/attributes/aria-autocomplete/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-autocomplete
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-autocomplete,
-  - https://w3c.github.io/aria-practices/#combobox
+  - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
 ---
 
 The `aria-autocomplete` attribute indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role), [`searchbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role), or [`textbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role) and specifies how predictions will be presented if they are made.

files/en-us/web/accessibility/aria/attributes/aria-busy/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-busy
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-busy
-  - https://w3c.github.io/aria-practices/#feed
+  - https://www.w3.org/TR/wai-aria-1.2/#aria-busy
 ---
 
 Used in [ARIA live regions](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

files/en-us/web/accessibility/aria/attributes/aria-checked/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-checked
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-checked
-  - https://w3c.github.io/aria-practices/#checkbox
+  - https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/
 ---
 
 The `aria-checked` attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

files/en-us/web/accessibility/aria/attributes/aria-describedby/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-describedby
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-describedby
-  - https://w3c.github.io/aria-practices/#describing_with_aria-describedby
+  - https://www.w3.org/TR/wai-aria-1.2/#aria-describedby
 ---
 
 The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.

files/en-us/web/accessibility/aria/attributes/aria-keyshortcuts/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-keyshortcuts
 page-type: aria-attribute
 spec-urls:
   - https://w3c.github.io/aria/#aria-keyshortcuts
-  - https://w3c.github.io/aria-practices/#kbd_shortcuts
+  - https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
 ---
 
 The global `aria-keyshortcuts` attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

files/en-us/web/accessibility/aria/roles/alert_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/alert_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#alert
-  - https://w3c.github.io/aria-practices/#log
+  - https://www.w3.org/TR/wai-aria-1.2/#alert
 ---
 
 The `alert` role is for important, and usually time-sensitive, information. The `alert` is a type of [`status`](/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) processed as an atomic live region.
@@ -121,7 +121,7 @@ document.getElementById("hiddenAlertContainer").innerHTML =
 - [ARIA: `alertdialog` role](/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)
 - [ARIA: live regions](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
 - [ARIA alert support - The Paciello Group](https://www.tpgi.com/aria-alert-support/)
-- [ARIA Practices alert example](https://w3c.github.io/aria-practices/examples/alert/alert.html)
+- [ARIA Practices alert example](https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/)
 
 <section id="Quick_links">
 

files/en-us/web/accessibility/aria/roles/alertdialog_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/alertdialog_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#alertdialog
-  - https://w3c.github.io/aria-practices/#alertdialog
+  - https://www.w3.org/TR/wai-aria-1.2/#alertdialog
 ---
 
 The **alertdialog** role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response.

files/en-us/web/accessibility/aria/roles/application_role/index.md

@@ -2,9 +2,7 @@
 title: "ARIA: application role"
 slug: Web/Accessibility/ARIA/Roles/application_role
 page-type: aria-role
-spec-urls:
-  - https://w3c.github.io/aria/#application
-  - https://w3c.github.io/aria-practices/#application
+spec-urls: https://w3c.github.io/aria/#application
 ---
 
 The `application` role indicates to assistive technologies that an element _and all of its children_ should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. This role should only be used to define very dynamic and desktop-like web applications. Most mobile and desktop web apps _are not_ considered applications for this purpose.

files/en-us/web/accessibility/aria/roles/article_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/article_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#article
-  - https://w3c.github.io/aria-practices/#feed
+  - https://www.w3.org/WAI/ARIA/apg/patterns/feed/examples/feed/
 ---
 
 The `article` role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.

files/en-us/web/accessibility/aria/roles/banner_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/banner_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#banner
-  - https://w3c.github.io/aria-practices/#aria_lh_banner
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html
 ---
 
 The `banner` role is for defining a global site header, which usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.
@@ -70,7 +70,7 @@ While it is best to use the `header` element and ensure it is not a descendant o
 ## See also
 
 - [HTML `header` element](/en-US/docs/Web/HTML/Element/header)
-- [WC3 Landmarks Example](https://w3c.github.io/aria-practices/examples/landmarks/banner.html)
+- [WC3 Landmarks Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html)
 
 <section id="Quick_links">
 

files/en-us/web/accessibility/aria/roles/button_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/button_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#button
-  - https://w3c.github.io/aria-practices/#button
+  - https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/
 ---
 
 The `button` role is for clickable elements that trigger a response when activated by the user. Adding `role="button"` tells the screen reader the element is a button, but provides no button functionality. Use {{HTMLElement("button")}} or {{HTMLElement("input")}} with `type="button"` instead.

files/en-us/web/accessibility/aria/roles/cell_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/cell_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#cell
-  - https://w3c.github.io/aria-practices/#cell
+  - https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/
 ---
 
 The `cell` value of the ARIA _role_ attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of `row`.

files/en-us/web/accessibility/aria/roles/columnheader_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/columnheader_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#columnheader
-  - https://w3c.github.io/aria-practices/#table
+  - https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/
 ---
 
 The `columnheader` value of the ARIA role attribute identifies an element as being a cell in a row contains header information for a column, similar to the native {{HTMLElement('th')}} element with column scope.

files/en-us/web/accessibility/aria/roles/combobox_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/combobox_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#combobox,
-  - https://w3c.github.io/aria-practices/#combobox
+  - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 ---
 
 The `combobox` role identifies an element as an `input` that controls another element, such as a `listbox` or `grid`, that can dynamically pop up to help the user set the value of that `input`.

files/en-us/web/accessibility/aria/roles/complementary_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/complementary_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#complementary
-  - https://w3c.github.io/aria-practices/#aria_lh_complementary
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/complementary.html
 ---
 
 The `complementary` [landmark role](/en-US/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles) is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the [HTML \<aside> element](/en-US/docs/Web/HTML/Element/aside) instead.

files/en-us/web/accessibility/aria/roles/contentinfo_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/contentinfo_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#contentinfo
-  - https://w3c.github.io/aria-practices/#aria_lh_contentinfo
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/contentinfo.html
 ---
 
 The `contentinfo` role defines a footer, containing identifying information such as copyright information, navigation links, and privacy statements, found on every document within a site. This section is commonly called a footer.

files/en-us/web/accessibility/aria/roles/dialog_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#dialog
-  - https://w3c.github.io/aria-practices/#dialog_modal
+  - https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
 ---
 
 The `dialog` role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).

files/en-us/web/accessibility/aria/roles/feed_role/index.md

@@ -70,7 +70,7 @@ Note: It is the author's responsibility to apply the "above" keyboard behavior.
 
 ## Examples
 
-[Example Implementation of Feed Pattern](https://w3c.github.io/aria-practices/examples/feed/feed.html)
+[Example Implementation of Feed Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/feed/examples/feed/)
 
 ## Best practices
 

files/en-us/web/accessibility/aria/roles/figure_role/index.md

@@ -2,9 +2,7 @@
 title: "ARIA: figure role"
 slug: Web/Accessibility/ARIA/Roles/figure_role
 page-type: aria-role
-spec-urls:
-  - https://w3c.github.io/aria/#figure
-  - https://w3c.github.io/aria-practices/#describing_with_captions
+spec-urls: https://w3c.github.io/aria/#figure
 ---
 
 The ARIA `figure` role can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.

files/en-us/web/accessibility/aria/roles/form_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/form_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#form
-  - https://w3c.github.io/aria-practices/#aria_lh_form
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html
 ---
 
 The `form` role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form. The form is not exposed as a landmark region unless it has an [accessible name](/en-US/docs/Glossary/Accessible_name).

files/en-us/web/accessibility/aria/roles/heading_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/heading_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#heading
-  - https://w3c.github.io/aria-practices/#heading
+  - https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/#when_to_use_structural_roles
 ---
 
 The `heading` role defines this element as a heading to a page or section, with the [`aria-level`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) attribute providing for more structure.

files/en-us/web/accessibility/aria/roles/link_role/index.md

@@ -95,7 +95,7 @@ Using the {{HTMLElement('a')}} instead.
 - The {{HTMLElement('a')}} element
 - The {{HTMLElement('button')}} element
 - [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
-- [ARIA practices `link` role examples](https://w3c.github.io/aria-practices/examples/link/link.html)
+- [ARIA practices `link` role examples](https://www.w3.org/WAI/ARIA/apg/patterns/link/examples/link/)
 
 <section id="Quick_links">
 

files/en-us/web/accessibility/aria/roles/listbox_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#listbox
-  - https://w3c.github.io/aria-practices/#Listbox
+  - https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
 ---
 
 The `listbox` role is used for lists from which a user may select one or more items which are static and, unlike HTML {{HTMLElement('select')}} elements, may contain images.
@@ -199,9 +199,9 @@ This could have more easily been handled with the native HTML {{HTMLElement('sel
 
 ### More examples
 
-- [Scrollable Listbox Example](https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html): Single-select listbox that scrolls to reveal more options, similar to HTML {{HTMLElement('select')}} with `size` attribute greater than one.
-- [Collapsible Dropdown Listbox Example](https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html): Single-select collapsible listbox that expands when activated, similar to HTML {{HTMLElement('select')}} with the attribute `size="1"`.
-- [Example Listboxes with Rearrangeable Options](https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html): Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.
+- [Scrollable Listbox Example](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/): Single-select listbox that scrolls to reveal more options, similar to HTML {{HTMLElement('select')}} with `size` attribute greater than one.
+- [Listbox Example with Grouped Options](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/): Single-select listbox with grouped options, similar to HTML {{HTMLElement('select')}} with the attribute `size` set to greater than `"1"` and options grouped with `optgroup` elements.
+- [Example Listboxes with Rearrangeable Options](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/): Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.
 
 ## Best practices
 

files/en-us/web/accessibility/aria/roles/main_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/main_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#main
-  - https://w3c.github.io/aria-practices/#aria_lh_main
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html
 ---
 
 The `main` landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the main function of an application.

files/en-us/web/accessibility/aria/roles/menu_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/menu_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#menu
-  - https://w3c.github.io/aria-practices/#menu
+  - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 ---
 
 The `menu` role is a type of composite widget that offers a list of choices to the user.

files/en-us/web/accessibility/aria/roles/menubar_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/menubar_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#menubar
-  - https://w3c.github.io/aria-practices/#menu
+  - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 ---
 
 A `menubar` is a presentation of `menu` that usually remains visible and is usually presented horizontally.

files/en-us/web/accessibility/aria/roles/menuitem_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/menuitem_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#menuitem
-  - https://w3c.github.io/aria-practices/#menu
+  - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 ---
 
 The `menuitem` role indicates the element is an option in a set of choices contained by a `menu` or `menubar`.

files/en-us/web/accessibility/aria/roles/menuitemcheckbox_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/menuitemcheckbox_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#menuitemcheckbox
-  - https://w3c.github.io/aria-practices/#menu
+  - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 ---
 
 A `menuitemcheckbox` is a `menuitem` with a checkable state whose possible values are `true`, `false`, or `mixed`.

files/en-us/web/accessibility/aria/roles/menuitemradio_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/menuitemradio_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#menuitemradio
-  - https://w3c.github.io/aria-practices/#menu
+  - https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 ---
 
 A `menuitemradio` is checkable menuitem in a set of elements with the same role, only one of which can be checked at a time.

files/en-us/web/accessibility/aria/roles/navigation_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/navigation_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#navigation
-  - https://w3c.github.io/aria-practices/#aria_lh_navigation
+  - https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html
 ---
 
 The `navigation` role is used to identify major groups of links used for navigating through a website or page content.

files/en-us/web/accessibility/aria/roles/option_role/index.md

@@ -4,7 +4,7 @@ slug: Web/Accessibility/ARIA/Roles/option_role
 page-type: aria-role
 spec-urls:
   - https://w3c.github.io/aria/#option
-  - https://w3c.github.io/aria-practices/#Listbox
+  - https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
 ---
 
 The `option` role is used for selectable items in a `listbox`.