Anatomy imagery

website/docs/components/badge.mdx

@@ -3,15 +3,21 @@ title: Badge
 description: A badge brings attention to information about a related component.
 ---
 
-import { Badge, CalloutError, CalloutSuccess } from '@wwnds/react';
+import { Badge } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A badge brings attention to information about a related component.
 
 ## Anatomy
 
-1. **A container** - an outline or background sets the badge apart from adjacent text.
-1. **A label** - the badge's label conveys a single piece of metadata about the component it references.
+<img
+	alt="A badge with indicators calling out the corresponding anatomy items of a navy blue container and label of “badge label” in the center."
+	src={useBaseUrl('/img/Anatomy_badge.png')}
+/>
+
+1. **Badge Container** - an outline or background sets the badge apart from adjacent text.
+1. **Label** - the badge's label conveys a single piece of metadata about the component it references.
 
 ## Usage
 

website/docs/components/button.mdx

@@ -3,13 +3,19 @@ title: Button
 description: A button allows the user to perform an action
 ---
 
-import { Button, IconButton, Callout, CalloutError, CalloutSuccess } from '@wwnds/react';
+import { Button, IconButton } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A button allows the user to perform an action.
 
 ## Anatomy
 
+<img
+	alt="A button with indicators calling out the corresponding anatomy items of a solid teal container, text label of “Button,” and heart icon."
+	src={useBaseUrl('/img/Anatomy_button.png')}
+/>
+
 1. **Text** - button text lets the user know what will happen when they click the button.
 	- If a button's text is not displayed inside the button, it should be displayed in a related [tooltip](tooltip).
 1. **Icon** (_optional_) - an icon can be added either before or after a button to emphasize the button text or character.

website/docs/components/callout.mdx

@@ -5,15 +5,21 @@ description: A callout brings attention to important information that is related
 
 import { Callout, CalloutError, CalloutSuccess, CalloutWarning } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A callout brings attention to important information that is related to the main content.
 
 ## Anatomy
 
+<img
+	alt="A callout with indicators pointing to the corresponding anatomy items of container, icon: top left, title: right of icon, dismiss button: top right, and body text: below title and dismiss button."
+	src={useBaseUrl('/img/Anatomy_callout.png')}
+/>
+
 1. **Container** - the container sets the contents of the callout apart from the main content.
 1. **Icon** (_optional_) - an icon can be used to add character or emphasize the title.
 1. **Title** (_recommended_) - the title of a callout summarizes its contents.
-1. **Dismiss button** (_optional_) - a control that allows the user to dismiss the callout.
+1. **Dismiss Button** (_optional_) - a control that allows the user to dismiss the callout.
 1. **Body** - the contents of the callout.
 
 ## Usage

website/docs/components/checkbox.mdx

@@ -5,24 +5,22 @@ tags: [field, form, input]
 ---
 import { Checkbox, CheckboxGroup } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A checkbox allows the user to check or uncheck an option.
 
 ## Anatomy
 
-The anatomy for both the standalone checkbox and a group of related checkboxes are outlined here.
+<img
+	alt="A checkbox group with indicators calling out the corresponding anatomy items starting with Group Label followed by three checkbox options that consist of: an unchecked control box: left, a checkbox label: right of control box, and descriptive text: below the checkbox label."
+	src={useBaseUrl('/img/Anatomy_checkbox.png')}
+/>
 
-### Checkbox
-
-1. **Control** - the input control that conveys the current state of the checkbox to the user.
-1. **Label** - a short name that lets the user know what the checkbox is checking. Clicking the label should toggle the checkbox.
+1. **Group Label** - text that conveys how the checkboxes are related and prompts the user to check one or more checkbox.
+1. **Control** - the input control that conveys the appropriate state of the checkbox to the user. By default it is unselected. Clicking a checkbox will check or uncheck it.
+1. **Checkbox Label** - a short name that lets the user know what the checkbox is checking. Clicking the label should toggle the checkbox.
 1. **Description** (_optional_) - additional text that can be used to add clarity or context to the checkbox label. Clicking the description should do nothing.
 
-### Checkbox Group
-
-1. **Label** - text that conveys how the checkboxes are related and prompts the user to check one or more checkbox.
-1. **Current selection**: a checked checkbox indicates that it will be included when the field is submitted.
-1. **Choices** - the available checkboxes. Clicking a checkbox will check or uncheck it.
 
 ## Usage
 

website/docs/components/choice-field.mdx

@@ -5,23 +5,29 @@ description: A choice field allows the user to choose one or more option from a
 
 import { Choice, ChoiceField } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A choice field allows the user to choose one or more option from a set of related options.
 
 ## Anatomy
 
-1. **Label**: text that conveys how the choices are related and prompts the user to choose one or more choice.
-1. **Current selection**: a selected choice indicates that it will be included when the field is submitted.
-1. **Choices**: the available choices.
-	- If the Choice Field is single-choice, all choices should be [radio buttons](radio-group#radio-button).
-	- If the Choice Field is multiple-choice, all choices should be [checkboxes](checkbox#checkbox).
+<img
+	alt="A diagram of two choice fields: A Radio group choice field and a checkbox group choice field with indicators calling out the label: top, the current selection, and choices."
+	src={useBaseUrl('/img/Anatomy_ChoiceField.png')}
+/>
+
+1. **Label** - text that conveys how the choices are related and prompts the user to choose one or more choice.
+1. **Current Selection** - a selected choice indicates that it will be included when the field is submitted.
+1. **Choices** - the available choices.
+	- If the Choice Field is single-choice, all choices should be [radio buttons](radio-group) (A).
+	- If the Choice Field is multiple-choice, all choices should be [checkboxes](checkbox) (B).
 
 ## Usage
 In most cases, this component should not be used directly.
 Rather, you should choose ahead of time whether your field should be single-choice or multi-choice and use the corresponding implementation.
 
-- For single-choice, use the [Radio Group](radio-group#radio-group).
-- For multi-choice, use the [Checkbox Group](checkbox#checkbox-group).
+- For single-choice, use the [Radio Group](radio-group).
+- For multi-choice, use the [Checkbox Group](checkbox).
 
 ## React API
 

website/docs/components/disclosure.mdx

@@ -10,8 +10,8 @@ import { PropsTable } from '@website/components';
 
 ## Anatomy
 
-1. **Summary button** - a control that opens or closes the disclosure and conveys to the user what is contained in the disclosure body.
-1. **Summary marker** - an icon that indicates that the disclosure can be opened or closed.
+1. **Summary Button** - a control that opens or closes the disclosure and conveys to the user what is contained in the disclosure body.
+1. **Summary Marker** - an icon that indicates that the disclosure can be opened or closed.
 	- When displayed before the label, the marker should point to the right when closed and down when open.
 	- When displayed after the label, the marker should point down when closed and up when open.
 1. **Body** - the disclosed contents, as summarized by the summary button.

website/docs/components/dropdown.mdx

@@ -5,18 +5,24 @@ description: A dropdown allows the user to select an option from a list of optio
 
 import { Dropdown, Option } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A dropdown allows the user to select an option from a list of options in an expandable overlay.
 
 ## Anatomy
 
+<img
+	alt="A dropdown closed with indicators calling out the corresponding anatomy items starting with Label above the Button followed by an open Dropdown that consist of: a listbox that includes options and the selected option."
+	src={useBaseUrl('/img/Anatomy_dropdown.png')}
+/>
+
 1. **Label** - a short description or prompt that lets the user know what they will be selecting.
 1. **Button** - a button that opens the dropdown listbox and displays the currently selected option.
 	- Default text before selection should be "Select".
 	- A marker should be displayed to the right of the button's text to convey whether the dropdown listbox is open or closed.
 1. **Listbox** - a container for the list of options that only appears when opened by the dropdown button.
-1. **Selected option** - the currently selected option.
 1. **Options** - the available options. Clicking an unselected option will select that option, deselect the currently selected option, and close the listbox.
+1. **Selected Option** - the currently selected option.
 
 ## Usage
 

website/docs/components/link.mdx

@@ -5,11 +5,17 @@ description: A link allows the user to navigate to another place.
 
 import { Link } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A link allows the user to navigate to another place.
 
 ## Anatomy
 
+<img
+	alt="A link with indicators calling out the corresponding anatomy items of text, labeled: Link Text’, and a launch icon: right of Link Text."
+	src={useBaseUrl('/img/Anatomy_link.png')}
+/>
+
 1. **Text** - link text should succinctly describe its destination.
 2. **Destination** - where the link will navigate when clicked.
 This is typically the address (URL) of another page, or a [fragment identifier](https://www.w3.org/Addressing/URL/4_2_Fragments.html) on the current page.

website/docs/components/modal.mdx

@@ -5,18 +5,24 @@ description: A modal presents important information or simple tasks to the user
 
 import { Modal } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A modal presents important information or simple tasks to the user in an overlay.
 
 ## Anatomy
 
+<img
+	alt="A Modal with indicators calling out the corresponding anatomy items starting with modal container, title: top left, close button icon: top right, body, action buttons: bottom right, and a dark backdrop overlay behind the modal."
+	src={useBaseUrl('/img/Anatomy_modal.png')}
+/>
+
 1. **Modal container** - the modal container provides a boundary for the contents of the modal.
-1. **Backdrop overlay** - an overlay that prevents the user from interacting with the page's main content.
-1. **Title** (_recommended_) - the name of the modal lets the user know what to expect from it and functions as a header for the body of the modal.
+1. **Title** (recommended) - the name of the modal lets the user know what to expect from it and functions as a header for the body of the modal.
+1. **Close Button** (_optional_) - a button that will always close the modal.
+      - This should always be included when no other controls exist inside the modal.
 1. **Body** - the main content of the modal presents important information to the user or asks them to perform simple tasks before exiting the modal.
-1. **Close button** (_optional_) - a button that will always close the modal.
-	- This should always be included when no other controls exist inside the modal.
-1. **Action buttons** (_optional_) - one or more actions that will result in the dismissal of the modal.
+1. **Action Buttons** (_optional_) - one or more actions that will result in the dismissal of the modal.
+1. **Backdrop Overlay** - an overlay that prevents the user from interacting with the page’s main content.
 
 ## Usage
 

website/docs/components/popover.mdx

@@ -4,18 +4,24 @@ description: A popover allows the user to reveal more information or non-critica
 ---
 
 import { Popover } from '@wwnds/react';
-import { PropsTable, Usage } from "@website/components";
+import { PropsTable } from "@website/components";
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A popover allows the user to reveal more information or non-critical tasks in an overlay.
 
 ## Anatomy
 
-1. **Container** - the popover's container overlays the main page's content.
+<img
+	alt="A popover with indicators calling out the corresponding anatomy items starting with popover container that contains, an arrow: pointing to an info icon, title: top left, close button icon: top right, body, and action buttons: bottom right."
+	src={useBaseUrl('/img/Anatomy_popover.png')}
+/>
+
+1. **Container Container** - the popover's container overlays the main page's content.
 1. **Arrow** - a visual indicator that points to the related element.
 1. **Title** (_recommended_) - the title of a callout summarizes its contents.
-1. **Close button** (_optional_) - a button that will always close the popover.
+1. **Close Button** (_optional_) - a button that will always close the popover.
 1. **Body** - the contents of the popover.
-1. **Action buttons** (_optional_) - one or more custom actions that will result in the popover closing.
+1. **Action Buttons** (_optional_) - one or more custom actions that will result in the popover closing.
 
 ## Usage
 

website/docs/components/progress-bar.mdx

@@ -5,13 +5,19 @@ description: A progress bar lets the user know that something is processing or p
 
 import { ProgressBar } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A progress bar lets the user know that something is processing or progressing.
 
 ## Anatomy
 
+<img
+	alt="A progress bar with indicators calling out the corresponding anatomy items of a gray track containing a teal progress indicator with a label: ‘Loading content…’ below the track."
+	src={useBaseUrl('/img/Anatomy_progress-bar.png')}
+/>
+
 1. **Track** - a fixed width track for the progress indicator to travel along.
-1. **Progress indicator** - an animated bar that conveys processing or progress toward completion.
+1. **Progress Indicator** - an animated bar that conveys processing or progress toward completion.
 1. **Label** - a description of what is progressing.
 
 ## Usage

website/docs/components/radio-group.mdx

@@ -5,25 +5,23 @@ description: A radio group allows the user to select one option from a set of re
 
 import { RadioGroup, Radio } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A radio group allows the user to select one option from a set of related options.
 
 ## Anatomy
 
-The anatomy for both a group of related radio buttons and a single radio button are outlined here.
+<img
+	alt="A radio group with indicators calling out the corresponding anatomy items starting with Group Label followed by three radio button options that consist of: an unselected control: left, a radio button label: right of control, and description text: below the radio button label."
+	src={useBaseUrl('/img/Anatomy_radio.png')}
+/>
 
-### Radio Group
-
-1. **Label** - text that conveys how the radio buttons are related and prompts the user to select a single radio button.
-1. **Current selection**: a selected radio button indicates that it will be the option that is submitted.
-1. **Choices** - the available radio buttons. Clicking or arrowing to an unselected radio button will deselect the currently selected radio button.
-
-### Radio Button
-
-1. **Control** - the input control that conveys the current state of the radio button to the user.
-1. **Label** - a short name that lets the user know what the radio button is selecting. Clicking the label should select the radio button.
+1. **Group Label** - text that conveys how the radio buttons are related and prompts the user to select a single radio button.
+1. **Control** - the input control that conveys the current state of the radio button to the user.  A selected radio button indicates that it will be the option that is submitted.
+1. **Radio Button Label** - a short name that lets the user know what the radio button is selecting. Clicking the label should select the radio button.
 1. **Description** (_optional_) - additional text that can be used to add clarity or context to the radio button label. Clicking the description should do nothing.
 
+
 :::warning Single Radio Button Usage
 Radio buttons must always be part of a radio group.
 Using a single radio button by itself would allow the user to check the option but not uncheck it.

website/docs/components/spinner.mdx

@@ -5,12 +5,18 @@ description: A spinner lets the user know that something is processing or progre
 
 import { Spinner } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A spinner lets the user know that something is processing or progressing.
 
 ## Anatomy
 
-1. **Progress circle** - the circle spins to convey that something is processing and fills clockwise to convey progress toward completion.
+<img
+	alt="A spinner with indicators calling out the corresponding anatomy items of an incomplete progress circle followed by a label: Loading images… on the bottom."
+	src={useBaseUrl('/img/Anatomy_spinner.png')}
+/>
+
+1. **Progress Circle** - the circle spins to convey that something is processing and fills clockwise to convey progress toward completion.
 1. **Label** - a description of what is processing or progressing.
 
 ## Usage

website/docs/components/step-indicator.mdx

@@ -5,20 +5,21 @@ description: A step indicator allows users to know where they are in a long proc
 
 import { StepIndicator, Step } from '@wwnds/react';
 import { PropsTable, ColorChip } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A step indicator allows users to know where they are in a long process or form while they focus on completing discrete steps.
 
 ## Anatomy
 
-A step indicator contains:
+<img
+	alt="A step indicator with indicators calling out the corresponding anatomy items of four steps with each step containing a step marker (top): two completed, one active, and one incomplete, a connector, and step labels (bottom)."
+	src={useBaseUrl('/img/Anatomy_step-indicator.png')}
+/>
 
-1. **Steps** - a list of steps, each of which is individually called a step.
+1. **Step** - an individual step that is part of a list of steps.
+1. **Step Marker** - the marker visually indicates whether the step is complete or incomplete.
 1. **Connector** (_optional_) - a purely presentational line that visually connects the individual steps.
-
-A step contains:
-
-1. **A step marker** - the marker visually indicates whether the step is complete or incomplete.
-1. **Contents** - the step's contents function as an [accessible name](https://www.w3.org/TR/accname-1.2/#dfn-accessible-name) for the step.
+1. **Step Label** - text that identifies the step and function as an [accessible name](https://www.w3.org/TR/accname-1.2/#dfn-accessible-name) for the step.
 
 ## States and properties
 

website/docs/components/switch.mdx

@@ -1,18 +1,18 @@
----
+ ---
 title: Switch
 description: A switch allows the user to immediately turn an option on or off.
 ---
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import { Switch } from '@wwnds/react';
 import { PropsTable } from '@website/components';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 > A switch allows the user to immediately turn an option on or off.
 
 ## Anatomy
 
 <img
-	alt="A diagram of the switch's various components."
+	alt="An active ‘on’ switch with indicators calling out the corresponding anatomy items starting with Label to the left of the switch, descriptive text located below, followed by the control to the right of label and descriptive text."
 	src={useBaseUrl('/img/anatomy_switch.png')}
 />
 

website/docs/components/table.mdx

@@ -3,6 +3,8 @@ title: Table
 description: A table allows users to view data organized in rows and columns.
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 > A table allows users to view data organized in rows and columns.
 
 ## Anatomy