Cross-link resources, accessibility-ready requirements, and make setup resources uniform

CONTRIBUTING.md

@@ -27,7 +27,7 @@ There are several easy ways to help:
   Open an [issue on GitHub](https://github.com/wpaccessibility/wp-a11y-docs/issues) if you find an error, want to suggest improvements, or see a missing topic.
 - **Write or edit documentation**  
   You can contribute content by creating or editing Markdown (`.md`) files in [this repository](https://github.com/wpaccessibility/wp-a11y-docs/issues).  
-  If you’re new to GitHub, see our [guide on how to contribute](/docs/contribute/).
+  If you’re new to GitHub, see our [guide on how to contribute]({{site.baseurl}}/docs/contribute/).
 - **Accessibility reviews**  
   Help by testing the site for accessibility issues. Report findings in [GitHub issues](https://github.com/wpaccessibility/wp-a11y-docs/issues).
 - **Improve examples**  

_includes/components/guide.md

@@ -13,60 +13,60 @@
 <details markdown="block">
 <summary>Content managers and writers</summary>
 
-- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/), in Start with accessibility.
-- [Content and images]({{site.baseurl}}/docs/topics/content/), in Standards and best practice.
-- [Content checks]({{site.baseurl}}/docs/testing/content/), in Checklists for accessibility testing.
-- [WordPress plugins for accessibility testing]({{site.baseurl}}/docs/testing/plugins/), in Test for accessibility.
+- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/) in Start with accessibility.
+- [Content and images]({{site.baseurl}}/docs/topics/content/) in Standards and best practice.
+- [Content checks]({{site.baseurl}}/docs/testing/content/) in Checklists for accessibility testing.
+- [WordPress plugins for accessibility testing]({{site.baseurl}}/docs/testing/plugins/) in Test for accessibility.
 
 </details>
 
 <details markdown="block">
 <summary>Design & user experience specialists</summary>
 
-- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/), in Start with accessibility.
-- [Design & user experience]({{site.baseurl}}/docs/topics/design/), in Standards and best practice.
-- [Web forms]({{site.baseurl}}/docs/topics/forms/input-label/placeholders/), in Standards and best practice. 
-- [Design checks]({{site.baseurl}}/docs/testing/checklists/design/), in Checklists for accessibility testing:
+- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/) in Start with accessibility.
+- [Design & user experience]({{site.baseurl}}/docs/topics/design/) in Standards and best practice.
+- [Web forms]({{site.baseurl}}/docs/topics/forms/input-label/placeholders/) in Standards and best practice. 
+- [Design checks]({{site.baseurl}}/docs/testing/checklists/design/) in Checklists for accessibility testing:
 
 </details>
 
 <details markdown="block">
 <summary>Website and plugin developers</summary>
 
-- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/), in Start with accessibility.
-- [Frontend code]({{site.baseurl}}/docs/topics/code/), in Standards and best practice.
-- [How to build accessible web forms]({{site.baseurl}}/docs/topics/forms/), in Standards and best practice.
-- [Frontend checks]({{site.baseurl}}/docs/testing/checklists/code), in Checklists for accessibility testing.
+- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/) in Start with accessibility.
+- [Frontend code]({{site.baseurl}}/docs/topics/code/) in Standards and best practice.
+- [How to build accessible web forms]({{site.baseurl}}/docs/topics/forms/) in Standards and best practice.
+- [Frontend checks]({{site.baseurl}}/docs/testing/checklists/code) in Checklists for accessibility testing.
 
 </details>
 
 <details markdown="block">
 <summary>Theme developers</summary>
 
-- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/), in Start with accessibility.
-- [Standards and best practice]({{site.baseurl}}docs/topics/).
-- [The accessibility-ready program for WordPress]({{site.baseurl}}/docs/accessibility-ready/)
-- [Set up testing for the WordPress themes accessibility-ready tag]({{site.baseurl}}/docs/accessibility-ready/testing-themes/), in Test for accessibility.
+- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/) in Start with accessibility.
+- [Standards and best practice]({{site.baseurl}}/docs/topics/).
+- [The accessibility-ready program for WordPress]({{site.baseurl}}/docs/accessibility-ready/).
+- [Set up testing for the WordPress themes accessibility-ready tag]({{site.baseurl}}/docs/accessibility-ready/testing-themes/) in Test for accessibility.
 
 </details>
 
 <details markdown="block">
 <summary>Quality assurance and auditing</summary>
 
-- [Documenting accessibility]({{site.baseurl}}/docs/topics/documenting-accessibility/), in Standards and best practice.
-- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/), in Standards and best practice.
+- [Documenting accessibility]({{site.baseurl}}/docs/topics/documenting-accessibility/) in Standards and best practice.
+- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/) in Standards and best practice.
 - [Test for accessibility]({{site.baseurl}}/docs/testing/).
 - [WordPress plugins for testing]({{site.baseurl}}/docs/testing/plugins/) in Test for accessibility.
-- [Accessibility for your business]({{site.baseurl}}/docs/start/business/), in Start with accessibility.
+- [Accessibility for your business]({{site.baseurl}}/docs/start/business/) in Start with accessibility.
 - [The accessibility-ready program for WordPress]({{site.baseurl}}/docs/accessibility-ready/).
-- [Set up testing for the WordPress themes accessibility-ready program]({{site.baseurl}}/docs/accessibility-ready/testing-themes/), in Test for accessibility.
+- [Set up testing for the WordPress themes accessibility-ready program]({{site.baseurl}}/docs/accessibility-ready/testing-themes/) in Test for accessibility.
 
 </details>
 
 <details markdown="block">
 <summary>WordPress core contributors</summary>
 
-- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/), in Start with accessibility.
+- [Find training that fits your needs]({{site.baseurl}}/docs/start/training/) in Start with accessibility.
 - [Standards and best practice]({{site.baseurl}}/docs/topics/).
 - [Test for accessibility]({{site.baseurl}}/docs/testing/).
 - [WordPress and accessibility]({{site.baseurl}}/docs/wp-a11y/).
@@ -82,8 +82,8 @@
   - [Accessibility for your business]({{site.baseurl}}/docs/start/business/).
   - [They’re not my visitors]({{site.baseurl}}/docs/start/business/personas/).
   - [Overlays]({{site.baseurl}}/docs/start/overlays/) and why not to use them.
-- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/), in Standards and best practice.
-- [Documenting Accessibility]({{site.baseurl}}/docs/topics/documenting-accessibility/), including how to write an accessibility statement.
+- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/) in Standards and best practice.
+- [Documenting Accessibility]({{site.baseurl}}/docs/topics/documenting-accessibility/) including how to write an accessibility statement.
 
 </details>
 
@@ -96,7 +96,7 @@
   - [Accessibility for your business]({{site.baseurl}}/docs/start/business/).
   - [They’re not my visitors]({{site.baseurl}}/docs/start/business/personas/).
   - [Overlays]({{site.baseurl}}/docs/start/overlays/) and why not to use them.
-- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/), in Standards and best practice.
+- [Accessibility legislation]({{site.baseurl}}/docs/topics/legislation/) in Standards and best practice.
 - [Documenting Accessibility]({{site.baseurl}}/docs/topics/documenting-accessibility/), including how to write an accessibility statement.
 
 </details>

_sass/layout/_navigation.scss

@@ -109,9 +109,9 @@
 
         .nav-list-link {
           color: $nav-child-link-color;
-		  min-height: 48px;
-		  display: flex;
-		  align-items: center;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
 
           &.active {
             color: var(--color-wa11ypuu-yellow);

docs/about/contribute/suggest.md

@@ -11,7 +11,7 @@ nav_order: 6
 Do you have a great idea for a new topic or blog post for this documentation? Here's how to share it.
 
 First, go through the current suggestions for new content, maybe someone else has the same idea.
-You can find [open GitHub issues for new content](https://github.com/wpaccessibility/wp-a11y-docs/issues?q=is%3Aissue%20state%3Aopen%20label%3Adocumentation) for this documentation. All content issues are labelled "Documentation", the issue title for blog posts start with [Blog post], the accessibility topics with [Topic].
+You can find [open GitHub issues for new content](https://github.com/wpaccessibility/wp-a11y-docs/issues?q=is%3Aissue%20state%3Aopen%20label%3Adocumentation) for this documentation. All content issues are labeled "Documentation", the issue title for blog posts start with [Blog post], the accessibility topics with [Topic].
 
 You don't need a GitHub account to read through the issues.
 

docs/accessibility-ready/theme-guidelines/accessibility-statement.md

@@ -25,4 +25,12 @@ This file has a standardized format outlining the theme's accessibility audit st
 
 1. Verify that there is a file in the main theme directory named `accessibility.txt`.  
 2. Open the `accessibility.txt` file with a text editor or the [theme file editor](https://developer.wordpress.org/advanced-administration/wordpress/edit-files/).  
-3. Review the contents of the file and verify it adheres to the WordPress [accessibility.txt readme standard.]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-txt/)
+3. Review the contents of the file and verify it adheres to the WordPress [accessibility.txt readme standard]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-txt/).
+
+## Resources
+
+{: .resource-h3}
+### Related pages in this documentation
+
+- [Accessibility.txt files]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-txt/) in Standards and best practice, Documenting accessibility.
+- [Accessibility statements]({{site.baseurl}}/docs/topics/documenting-accessibility/accessibility-statements/) in Standards and best practice, Documenting accessibility.

docs/accessibility-ready/theme-guidelines/accessible-animation.md

@@ -38,8 +38,19 @@ The basic requirements are:
    1. On Windows 11: Go to Settings \> Accessibility \> Visual Effects \> Animation Effects.  
    2. On macOS: Navigate to System Preferences \> Accessibility \> Display \> Reduce motion.
 
-## WCAG resources
+## Resources
 
-* [Understanding: Pause, Stop and Hide.](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)  
-* [Understanding: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html)  
-* [Understanding: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html)
+{: .resource-h3}
+### WCAG Success Criteria for audio, video, and animations
+
+Using accessibile audio, video, and animations is necessary to meet the WCAG success criteria:
+
+* [2.2.2 Pause, Stop and Hide](https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide) (Level A).
+* [2.3.1 Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold) (Level A).
+* [2.3.2 Three Flashes](https://www.w3.org/WAI/WCAG22/quickref/#three-flashes) (Level **AAA**).
+* [2.3.3 Animation from Interactions](https://www.w3.org/WAI/WCAG22/quickref/#animation-from-interactions) (Level **AAA**).
+
+{: .resource-h3}
+### Related pages in this documentation
+
+[Image animation and accessibility]({{site.baseurl}}/docs/topics/code/images/image-animation/) in Standards and best practice, Frontend code.

docs/accessibility-ready/theme-guidelines/alternative-text.md

@@ -41,4 +41,17 @@ Decorative graphics may include:
 
 ## WCAG resources
 
-* [Understanding: Non-text content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)
+## Resources
+
+{: .resource-h3}
+### WCAG Success Criteria for alternative text on images and graphics
+
+By giving a meaningful image the proper alternative text, you meet WCAG success criterion [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content) (level A).
+
+{: .resource-h3}
+### Related pages in this documentation
+
+- [7 Quick wins]({{site.baseurl}}/docs/start/quick-wins/) in Start with accessibility.
+- [Alternative text for images in the content]({{site.baseurl}}/docs/topics/content/alt-text/) in Standards and best practice, Content and images.
+- [Images as links]({{site.baseurl}}/docs/topics/content/links/link-image/) in Standards and best practice, Content and images.
+- [Alternative text for images, SVGs and icons in development]({{site.baseurl}}/docs/topics/code/images/alt-text/) in Standards and best practice, Frontend code. 

docs/accessibility-ready/theme-guidelines/content-hover-focus.md

@@ -39,7 +39,19 @@ When additional content appears on hover or keyboard focus—such as tooltips, d
    1. Remains visible and usable.  
    2. Does not overlap or become clipped by the viewport.
 
-## WCAG resources
+## Resources
 
-* [Understanding: Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus)  
-* [Understanding: Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard)
+{: .resource-h3}
+### WCAG Success Criteria for content on hover or focus
+
+Accessibile content on hover or focus is necessary to meet the WCAG success criteria:
+
+* [1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/quickref/#content-on-hover-or-focus) (Level AA).
+* [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/quickref/#keyboard) (Level A).
+
+{: .resource-h3}
+### Related pages in this documentation
+
+* [Handling focus]({{site.baseurl}}/docs/topics/code/focus-handling/) and subpages in Standards and best practice, Frontend code. 
+* [Styling focus and hover states of interactive HTML elements]({{site.baseurl}}/docs/topics/design/focus-hover/) in Standards and best practice, Design and user experience.
+* [Keyboard navigation testing]({{site.baseurl}}/docs/testing/keyboard/) in Test for accessibility.

docs/accessibility-ready/theme-guidelines/controls-with-accessible-names.md

@@ -45,19 +45,35 @@ For each interactive control, check for an accessible **name,** the correct **ro
 11. Repeat this process for all controls in your list.  
 12. After testing the desktop view, switch into responsive mode or zoom your browser at least 200% and test responsive toggles (e.g., hamburger menu toggles) in the same way.
 
-## WCAG resources
-
-* [Understanding: Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)  
-* [Understanding: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)  
-* [Understanding: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)  
-* [Understanding: Label in Name](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html)  
-* [Tab Pattern Expectations](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
-
-## Relevant ARIA
-
-* [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)  
-* [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby)  
-* [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded)  
-* [aria-selected](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected)  
-* [aria-pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-pressed)  
-* [button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role)
+## Resources
+
+{: .resource-h3}
+### WCAG Success Criteria for controls with accessible names, roles, and states
+
+Using controls with accessible names, roles, and states is necessary to meet the WCAG success criteria:
+
+* [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content)  (Level A)
+* [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships) (Level A)
+* [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/quickref/#name-role-value) (Level A)
+* [2.5.3 Label in Name](https://www.w3.org/WAI/WCAG22/quickref/#label-in-name) (Level A)
+
+{: .resource-h3}
+### Related pages in this documentation
+
+* [Alternative text for images in the content]({{site.baseurl}}/docs/topics/content/alt-text/) in Standards and best practice, Content and images.
+* [The accessible name]({{site.baseurl}}/docs/topics/code/accessible-name/) in Standards and best practice, Frontend code.
+* [Input field and form label]({{site.baseurl}}/docs/topics/forms/input-label/) in Standards and best practice, Web forms.
+
+{: .resource-h3}
+### Other resources
+
+[Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) in the ARIA Authoring Practices Guide (APG).
+
+Relevant documentation on ARIA on the MDN web docs:
+
+* [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label).  
+* [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby). 
+* [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded).  
+* [aria-selected](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected).  
+* [aria-pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-pressed).  
+* [button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role).

docs/accessibility-ready/theme-guidelines/headings-structure.md

@@ -51,7 +51,8 @@ Using a meaningful heading structure is necessary to meet the WCAG success crite
 - [WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships) (Level A).
 - [WCAG 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/quickref/#headings-and-labels) (Level AA).
 
+{: .resource-h3}
 ### Related pages in this documentation
 
-- [Using headings in the content]({{site.baseurl}}/docs/topics/content/headings/)
-- [Heading structure in theme development]({{site.baseurl}}/docs/topics/code/heading-structure/).
+- [Using headings in the content]({{site.baseurl}}/docs/topics/content/headings/) in Standards and best practice, Content and images.
+- [Heading structure in theme development]({{site.baseurl}}/docs/topics/code/heading-structure/) in Standards and best practice, Frontend code.