diff --git a/.changeset/feat-stepper-a11y.md b/.changeset/feat-stepper-a11y.md
new file mode 100644
index 000000000..5ac672c63
--- /dev/null
+++ b/.changeset/feat-stepper-a11y.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(Stepper): Additions to the Stepper component for accessibility compliance. The 'aria-current' attribute now reads 'step' when active, the DOM structure has been changed to a UL LI layout, and when labels are hidden, the screenreader sees the step state for each step label.
diff --git a/packages/react-magma-dom/src/components/Stepper/Step.tsx b/packages/react-magma-dom/src/components/Stepper/Step.tsx
index 440f7f056..bf6bf1f75 100644
--- a/packages/react-magma-dom/src/components/Stepper/Step.tsx
+++ b/packages/react-magma-dom/src/components/Stepper/Step.tsx
@@ -8,6 +8,7 @@ import { ThemeInterface } from '../../theme/magma';
 import { useIsInverse } from '../../inverse';
 import { transparentize } from 'polished';
 import { HiddenStyles } from '../../utils/UtilityStyles';
+import { StepperLayout } from './Stepper';
 
 export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -18,7 +19,7 @@ export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * @internal
    */
-  areLabelsHidden?: boolean;
+  layout?: StepperLayout;
   /**
    * Label beneath each step.
    */
@@ -31,10 +32,18 @@ export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
    * @internal
    */
   stepStatus?: StepStatus;
+  /**
+   * @internal
+   */
+  index?: number;
   /**
    * @internal
    */
   isInverse?: boolean;
+  /**
+   * @internal
+   */
+  stepLabel?: string;
   /**
    * @internal
    */
@@ -47,7 +56,7 @@ export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export enum StepStatus {
   active = 'active',
-  complete = 'complete',
+  completed = 'completed',
   incomplete = 'incomplete',
 }
 
@@ -74,13 +83,13 @@ function buildStepCircleOutlineColors(props) {
 function buildStepCircleBackgroundColors(props) {
   const { isInverse, stepStatus, hasError, theme } = props;
   if (isInverse) {
-    if (stepStatus === StepStatus.complete && !hasError) {
+    if (stepStatus === StepStatus.completed && !hasError) {
       return theme.colors.tertiary500;
     } else if (hasError) {
       return theme.colors.danger500;
     }
   } else {
-    if (stepStatus === StepStatus.complete && !hasError) {
+    if (stepStatus === StepStatus.completed && !hasError) {
       return theme.colors.primary500;
     } else if (hasError) {
       return theme.colors.danger500;
@@ -131,7 +140,6 @@ const StyledStep = typedStyled.div`
   text-align: center;
   align-self: self-start;
   align-items: center;
-
 `;
 
 const StyledStepIndicator = typedStyled.span<{
@@ -160,7 +168,7 @@ const StyledStepIndicator = typedStyled.span<{
   }
 `;
 
-const StyledStepTextWrapper = typedStyled.div`
+const StyledStepTextWrapper = typedStyled.span`
   flex: 1;
   display: flex;
   align-self: center;
@@ -203,9 +211,11 @@ export const Step = React.forwardRef<HTMLDivElement, StepProps>(
   (props, ref) => {
     const {
       hasError,
-      areLabelsHidden,
+      index,
       label,
+      layout,
       secondaryLabel,
+      stepLabel,
       testId,
       isInverse: isInverseProp,
       stepStatus,
@@ -222,15 +232,25 @@ export const Step = React.forwardRef<HTMLDivElement, StepProps>(
           stepStatus={stepStatus}
           theme={theme}
         >
-          {stepStatus === StepStatus.complete && !hasError && (
+          {stepStatus === StepStatus.completed && !hasError && (
             <CheckIcon aria-hidden="true" />
           )}
           {hasError && <CrossIcon aria-hidden="true" />}
         </StyledStepIndicator>
 
         <StyledStepTextWrapper>
-          {!areLabelsHidden ? (
+          {layout !== StepperLayout.hideLabels &&
+          layout !== StepperLayout.summaryView ? (
             <>
+              {layout === StepperLayout.showLabels && (
+                <HiddenLabelText>
+                  {`${
+                    stepStatus === StepStatus.completed
+                      ? `${stepLabel} ${stepStatus}, `
+                      : ''
+                  }`}
+                </HiddenLabelText>
+              )}
               {label && (
                 <StyledLabel
                   label={label}
@@ -253,11 +273,17 @@ export const Step = React.forwardRef<HTMLDivElement, StepProps>(
               )}
             </>
           ) : (
-            <HiddenLabelText>
-              {label && secondaryLabel
-                ? `${label} ${secondaryLabel}`
-                : label || secondaryLabel}
-            </HiddenLabelText>
+            layout !== StepperLayout.summaryView && (
+              <HiddenLabelText>
+                {`${
+                  stepStatus === StepStatus.completed
+                    ? `${stepLabel} ${stepStatus}, `
+                    : ''
+                }${label || ''}${secondaryLabel ? ' ' : ''}${
+                  secondaryLabel || ''
+                }`}
+              </HiddenLabelText>
+            )
           )}
         </StyledStepTextWrapper>
       </StyledStep>
diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx b/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx
index 00ef6780e..97b0fa84c 100644
--- a/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx
+++ b/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx
@@ -21,46 +21,38 @@ export default {
   ],
   argTypes: {
     breakpoint: {
-      control: {
-        type: 'number',
-      },
+      control: 'number',
     },
     breakpointLayout: {
       control: {
         type: 'select',
         options: StepperLayout,
+        defaultValue: StepperLayout.hideLabels,
       },
     },
     layout: {
       control: {
         type: 'select',
         options: StepperLayout,
+        defaultValue: StepperLayout.showLabels,
       },
     },
     completionLabel: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     stepLabel: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     isInverse: {
-      control: {
-        type: 'boolean',
-      },
+      control: 'boolean',
+      defaultValue: false,
     },
     testId: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     ariaLabel: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
+      defaultValue: 'progress',
     },
   },
 } as Meta;
@@ -99,8 +91,8 @@ const Template: Story<StepperProps> = args => {
     return (
       <Step
         key={i}
-        testId={`Step ${i}`}
-        label={`Step ${i}`}
+        testId={`Item ${i}`}
+        label={`Item ${i}`}
         secondaryLabel={`Description area in secondaryLabel component ${i}`}
       />
     );
@@ -108,7 +100,7 @@ const Template: Story<StepperProps> = args => {
 
   return (
     <>
-      <Stepper ariaLabel="progress" currentStep={currentStep} {...args}>
+      <Stepper currentStep={currentStep} {...args}>
         {step}
       </Stepper>
 
@@ -122,8 +114,8 @@ const Template: Story<StepperProps> = args => {
       >
         <div>
           {currentStep < numberOfSteps
-            ? `Step Content ${currentStep + 1}`
-            : `Steps Completed`}
+            ? `Item Content ${currentStep + 1}`
+            : `Items Completed`}
         </div>
       </Container>
 
@@ -163,21 +155,103 @@ const Template: Story<StepperProps> = args => {
   );
 };
 
+const RealisticLabels: Story<StepperProps> = args => {
+  const [currentStep, setCurrentStep] = React.useState(0);
+
+  const handleOnNext = () => {
+    if (currentStep !== 4) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+  const handleOnPrevious = () => {
+    if (currentStep !== 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+  const handleFinish = () => {
+    if (currentStep >= 4) {
+      setCurrentStep(0);
+    }
+  };
+
+  return (
+    <>
+      <Stepper currentStep={currentStep} {...args}>
+        <Step
+          key={0}
+          label="Fenway seating"
+          secondaryLabel="Select an area in the ball park"
+          testId="fenway0"
+        />
+        <Step
+          key={1}
+          label="Guest information"
+          secondaryLabel="Please fill out the registration form for your party"
+          testId="fenway1"
+        />
+        <Step
+          key={2}
+          label="Yankees fans?"
+          secondaryLabel="An additional surcharge may be applicable"
+          testId="fenway2"
+        />
+        <Step
+          key={3}
+          label="MBTA and parking information"
+          secondaryLabel="Suggested methods of transportation"
+          testId="fenway3"
+        />
+      </Stepper>
+
+      <Container
+        style={{
+          background: '#F5F5F5',
+          borderRadius: '6px',
+          margin: '20px 0 0',
+          padding: '20px',
+        }}
+      >
+        {currentStep === 0 && <div>Fenway seating Content</div>}
+        {currentStep === 1 && <div>Guest information Content</div>}
+        {currentStep === 2 && <div>Yankees fans? Content</div>}
+        {currentStep === 3 && <div>MBTA and parking information Content</div>}
+        {currentStep === 4 && <div>Steps completed</div>}
+      </Container>
+
+      <Container style={{ padding: '20px 0' }}>
+        <ButtonGroup>
+          <Button disabled={currentStep === 0} onClick={handleOnPrevious}>
+            Previous
+          </Button>
+          <Button onClick={currentStep >= 4 ? handleFinish : handleOnNext}>
+            {currentStep >= 4 ? 'Finish' : 'Next'}
+          </Button>
+        </ButtonGroup>
+      </Container>
+    </>
+  );
+};
+
 const ErrorTemplate: Story<StepperProps> = args => {
   return (
     <>
-      <Stepper ariaLabel="progress" currentStep={2} {...args}>
-        <Step label="First Step" secondaryLabel="Description One">
-          Step Content One
+      <Stepper currentStep={2} {...args}>
+        <Step key={0} label="First Item" secondaryLabel="Description One">
+          Item Content One
         </Step>
-        <Step label="Second Step" secondaryLabel="Description Two">
-          Step Content Two
+        <Step key={1} label="Second Item" secondaryLabel="Description Two">
+          Item Content Two
         </Step>
-        <Step label="Third Step" hasError secondaryLabel="Description Three">
-          Step Content Three
+        <Step
+          key={2}
+          label="Third Item"
+          hasError
+          secondaryLabel="Description Three"
+        >
+          Item Content Three
         </Step>
-        <Step label="Fourth Step" secondaryLabel="Description Four">
-          Step Content Four
+        <Step key={3} label="Fourth Item" secondaryLabel="Description Four">
+          Item Content Four
         </Step>
       </Stepper>
       <Container
@@ -188,7 +262,7 @@ const ErrorTemplate: Story<StepperProps> = args => {
           padding: '20px',
         }}
       >
-        <div>Step Content Three</div>
+        <div>Item Content Three</div>
       </Container>
 
       <Container style={{ padding: '20px 0' }}>
@@ -202,8 +276,11 @@ const ErrorTemplate: Story<StepperProps> = args => {
 };
 
 export const Default = Template.bind({});
-Default.args = {
-  ariaLabel: 'progress',
+Default.args = {};
+
+export const RealWorldExample = RealisticLabels.bind({});
+RealisticLabels.args = {
+  stepLabel: 'Module',
 };
 
 export const WithError = ErrorTemplate.bind({});
diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.test.js b/packages/react-magma-dom/src/components/Stepper/Stepper.test.js
index abda11645..63b08451c 100644
--- a/packages/react-magma-dom/src/components/Stepper/Stepper.test.js
+++ b/packages/react-magma-dom/src/components/Stepper/Stepper.test.js
@@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { axe } from '../../../axe-helper';
 import { magma } from '../../theme/magma';
 import { Stepper, Step, StepperLayout } from '.';
-import { getByTestId, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { transparentize } from 'polished';
 import { I18nContext } from '../../i18n';
 import { defaultI18n } from '../../i18n/default';
@@ -13,35 +13,102 @@ const testId = 'test-id';
 
 describe('Stepper', () => {
   it('should find element by testId', () => {
-    const { getByTestId } = render(<Stepper ariaLabel="progress"  testId={testId}></Stepper>);
+    const { getByTestId } = render(
+      <Stepper ariaLabel="progress" testId={testId}>
+        <Step testId="step" label="step" />
+      </Stepper>
+    );
 
     expect(getByTestId(testId)).toBeInTheDocument();
   });
 
-  it('Does not violate accessibility standards', () => {
-    const { container } = render(<Stepper ariaLabel="progress" role="form"></Stepper>);
+  describe('Accessibility', () => {
+    it('Does not violate accessibility standards', () => {
+      const { container } = render(
+        <Stepper ariaLabel="progress">
+          <Step testId="step1" label="step1" />
+          <Step testId="step2" label="step2" />
+        </Stepper>
+      );
 
-    return axe(container.innerHTML).then(result => {
-      return expect(result).toHaveNoViolations();
+      return axe(container.innerHTML).then(result => {
+        return expect(result).toHaveNoViolations();
+      });
     });
-  });
 
-  it('should use the custom aria-label', () => {
-    const { getByLabelText } = render(
-      <Stepper ariaLabel="custom" testId={testId}  currentStep={0}>
-        <Step />
-        <Step />
-      </Stepper>
-    );
+    it('should use the custom aria-label', () => {
+      const { getByLabelText } = render(
+        <Stepper ariaLabel="custom" testId={testId} currentStep={0}>
+          <Step />
+          <Step />
+        </Stepper>
+      );
+
+      const customAriaLabel = getByLabelText('custom', { selector: 'ol' });
+
+      expect(customAriaLabel).toBeInTheDocument();
+    });
+
+    it('should have hidden labels for screen readers when layout is set to "showLabels"', () => {
+      const { getByTestId } = render(
+        <Stepper
+          ariaLabel="progress"
+          layout={StepperLayout.showLabels}
+          currentStep={1}
+        >
+          <Step testId={`${testId}-1`} label={`${TEXT}-1`} />
+          <Step testId={`${testId}-2`} label={`${TEXT}-2`} />
+        </Stepper>
+      );
+
+      expect(getByTestId(`${testId}-1`)).toHaveTextContent(
+        `Step completed, ${TEXT}-1`
+      );
+      expect(getByTestId(`${testId}-1`).closest('li')).toHaveAttribute(
+        'aria-current',
+        'false'
+      );
+      expect(getByTestId(`${testId}-2`)).toHaveTextContent(`${TEXT}-2`);
+      expect(getByTestId(`${testId}-2`).closest('li')).toHaveAttribute(
+        'aria-current',
+        'step'
+      );
+    });
 
-    const customAriaLabel = getByLabelText('custom', {selector: 'div'});
+    it('should have hidden labels for screen readers when layout is set to "hideLabels"', () => {
+      const { getByTestId } = render(
+        <Stepper
+          ariaLabel="progress"
+          layout={StepperLayout.hideLabels}
+          currentStep={1}
+        >
+          <Step testId={`${testId}-1`} label={`${TEXT}-1`} />
+          <Step testId={`${testId}-2`} label={`${TEXT}-2`} />
+        </Stepper>
+      );
 
-    expect(customAriaLabel).toBeInTheDocument();
+      expect(getByTestId(`${testId}-1`)).toHaveTextContent(
+        `Step completed, ${TEXT}-1`
+      );
+      expect(getByTestId(`${testId}-1`).closest('li')).toHaveAttribute(
+        'aria-current',
+        'false'
+      );
+      expect(getByTestId(`${testId}-2`)).toHaveTextContent(`${TEXT}-2`);
+      expect(getByTestId(`${testId}-2`).closest('li')).toHaveAttribute(
+        'aria-current',
+        'step'
+      );
+    });
   });
 
   it('should use the default completion label', () => {
     const { getByText } = render(
-      <Stepper ariaLabel="progress"  currentStep={2} layout={StepperLayout.summaryView}>
+      <Stepper
+        ariaLabel="progress"
+        currentStep={2}
+        layout={StepperLayout.summaryView}
+      >
         <Step />
         <Step />
       </Stepper>
@@ -52,7 +119,11 @@ describe('Stepper', () => {
 
   it('should use the default step label', () => {
     const { getByText } = render(
-      <Stepper ariaLabel="progress"  currentStep={0} layout={StepperLayout.summaryView}>
+      <Stepper
+        ariaLabel="progress"
+        currentStep={0}
+        layout={StepperLayout.summaryView}
+      >
         <Step />
         <Step />
       </Stepper>
@@ -63,7 +134,8 @@ describe('Stepper', () => {
 
   it('should use the custom completion label', () => {
     const { getByText } = render(
-      <Stepper ariaLabel="progress" 
+      <Stepper
+        ariaLabel="progress"
         completionLabel="You're victorious"
         currentStep={2}
         layout={StepperLayout.summaryView}
@@ -78,7 +150,8 @@ describe('Stepper', () => {
 
   it('should use the custom step label', () => {
     const { getByText } = render(
-      <Stepper ariaLabel="progress" 
+      <Stepper
+        ariaLabel="progress"
         stepLabel="Party On"
         currentStep={0}
         layout={StepperLayout.summaryView}
@@ -103,7 +176,11 @@ describe('Stepper', () => {
             },
           }}
         >
-          <Stepper ariaLabel="progress"  currentStep={2} layout={StepperLayout.summaryView}>
+          <Stepper
+            ariaLabel="progress"
+            currentStep={2}
+            layout={StepperLayout.summaryView}
+          >
             <Step />
             <Step />
           </Stepper>
@@ -126,7 +203,11 @@ describe('Stepper', () => {
             },
           }}
         >
-          <Stepper ariaLabel="progress"  currentStep={0} layout={StepperLayout.summaryView}>
+          <Stepper
+            ariaLabel="progress"
+            currentStep={0}
+            layout={StepperLayout.summaryView}
+          >
             <Step />
             <Step />
           </Stepper>
@@ -140,7 +221,7 @@ describe('Stepper', () => {
   describe('Styling', () => {
     it('should have an active styled circle', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={0}>
+        <Stepper ariaLabel="progress" currentStep={0}>
           <Step testId={testId} />
           <Step />
         </Stepper>
@@ -156,7 +237,7 @@ describe('Stepper', () => {
 
     it('should have an incomplete styled circle', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={0}>
+        <Stepper ariaLabel="progress" currentStep={0}>
           <Step />
           <Step testId={testId} />
         </Stepper>
@@ -172,7 +253,7 @@ describe('Stepper', () => {
 
     it('should have a completed styled circle', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={1}>
+        <Stepper ariaLabel="progress" currentStep={1}>
           <Step testId={testId} />
           <Step />
         </Stepper>
@@ -185,7 +266,7 @@ describe('Stepper', () => {
 
     it('should have a error styled circle', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={1}>
+        <Stepper ariaLabel="progress" currentStep={1}>
           <Step testId={testId} hasError />
           <Step />
         </Stepper>
@@ -198,7 +279,7 @@ describe('Stepper', () => {
 
     it('should have a primary label', () => {
       const { getByText } = render(
-        <Stepper ariaLabel="progress"  currentStep={1}>
+        <Stepper ariaLabel="progress" currentStep={1}>
           <Step label={TEXT} />
           <Step />
         </Stepper>
@@ -213,7 +294,7 @@ describe('Stepper', () => {
 
     it('should have a secondary label', () => {
       const { getByText } = render(
-        <Stepper ariaLabel="progress"  currentStep={1}>
+        <Stepper ariaLabel="progress" currentStep={1}>
           <Step secondaryLabel={TEXT} hasError />
           <Step />
         </Stepper>
@@ -227,7 +308,7 @@ describe('Stepper', () => {
 
     it('should have an incomplete styled separator', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={0}>
+        <Stepper ariaLabel="progress" currentStep={0}>
           <Step testId={testId} />
           <Step />
         </Stepper>
@@ -241,7 +322,7 @@ describe('Stepper', () => {
 
     it('should have a completed styled separator', () => {
       const { getByTestId } = render(
-        <Stepper ariaLabel="progress"  currentStep={1}>
+        <Stepper ariaLabel="progress" currentStep={1}>
           <Step testId={testId} />
           <Step />
         </Stepper>
@@ -256,8 +337,8 @@ describe('Stepper', () => {
     describe('Inverse', () => {
       it('should have an inverse active styled circle', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  testId={testId} isInverse currentStep={0}>
-            <Step />
+          <Stepper ariaLabel="progress" isInverse currentStep={0}>
+            <Step testId={testId} />
             <Step />
           </Stepper>
         );
@@ -272,7 +353,7 @@ describe('Stepper', () => {
 
       it('should have an inverse incomplete styled circle', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={0}>
+          <Stepper ariaLabel="progress" isInverse currentStep={0}>
             <Step />
             <Step testId={testId} />
           </Stepper>
@@ -288,7 +369,7 @@ describe('Stepper', () => {
 
       it('should have an inverse completed styled circle', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={1}>
+          <Stepper ariaLabel="progress" isInverse currentStep={1}>
             <Step testId={testId} />
             <Step />
           </Stepper>
@@ -301,7 +382,7 @@ describe('Stepper', () => {
 
       it('should have an inverse error styled circle', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={1}>
+          <Stepper ariaLabel="progress" isInverse currentStep={1}>
             <Step testId={testId} hasError />
             <Step />
           </Stepper>
@@ -314,7 +395,7 @@ describe('Stepper', () => {
 
       it('should have an inverse primary label', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={1}>
+          <Stepper ariaLabel="progress" isInverse currentStep={1}>
             <Step label={TEXT} hasError />
             <Step />
           </Stepper>
@@ -327,7 +408,7 @@ describe('Stepper', () => {
 
       it('should have an inverse secondary label', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={1}>
+          <Stepper ariaLabel="progress" isInverse currentStep={1}>
             <Step secondaryLabel={TEXT} hasError />
             <Step />
           </Stepper>
@@ -343,7 +424,7 @@ describe('Stepper', () => {
 
       it('should have an inverse incomplete styled separator', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={0}>
+          <Stepper ariaLabel="progress" isInverse currentStep={0}>
             <Step testId={testId} />
             <Step />
           </Stepper>
@@ -359,7 +440,7 @@ describe('Stepper', () => {
 
       it('should have an inverse completed styled separator', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress"  isInverse currentStep={1}>
+          <Stepper ariaLabel="progress" isInverse currentStep={1}>
             <Step testId={testId} />
             <Step />
           </Stepper>
@@ -374,16 +455,20 @@ describe('Stepper', () => {
       });
     });
 
-    describe('States', () => {
+    describe('Layout', () => {
       it('should hide labels when layout is set to "hideLabels"', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress"  layout={StepperLayout.hideLabels} currentStep={1}>
+          <Stepper
+            ariaLabel="progress"
+            layout={StepperLayout.hideLabels}
+            currentStep={1}
+          >
             <Step label={`${TEXT}-1`} />
             <Step label={`${TEXT}-2`} />
           </Stepper>
         );
 
-        const label1 = getByText(`${TEXT}-1`);
+        const label1 = getByText(`Step completed, ${TEXT}-1`);
         const label2 = getByText(`${TEXT}-2`);
 
         expect(label1).toHaveStyleRule('height', '1px');
@@ -403,7 +488,8 @@ describe('Stepper', () => {
 
       it('should only show one step label and description at a time along with a counter when layout is set to summaryView', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress" 
+          <Stepper
+            ariaLabel="progress"
             testId={testId}
             layout={StepperLayout.summaryView}
             currentStep={0}
@@ -417,9 +503,13 @@ describe('Stepper', () => {
         expect(getByTestId(testId)).toHaveTextContent('Step 1 of 2');
       });
 
-      it('should show labels when layout is set to showLabels', () => {
+      it('should show labels when layout is set to "showLabels"', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress"  layout={StepperLayout.showLabels} currentStep={0}>
+          <Stepper
+            ariaLabel="progress"
+            layout={StepperLayout.showLabels}
+            currentStep={0}
+          >
             <Step label={`${TEXT}-1`} />
             <Step label={`${TEXT}-2`} />
           </Stepper>
@@ -439,10 +529,12 @@ describe('Stepper', () => {
 
       it('should hide labels when breakpointLayout is set to "hideLabels" if viewport is smaller than set breakpoint prop', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress" 
+          <Stepper
+            ariaLabel="progress"
             breakpoint={1500}
             breakpointLayout={StepperLayout.hideLabels}
-            currentStep={0}
+            layout={StepperLayout.showLabels}
+            currentStep={1}
           >
             <Step label={`${TEXT}-1`} />
             <Step label={`${TEXT}-2`} />
@@ -452,7 +544,7 @@ describe('Stepper', () => {
           global.innerWidth = 1400;
           global.dispatchEvent(new Event('resize'));
         });
-        const label1 = getByText(`${TEXT}-1`);
+        const label1 = getByText(`Step completed, ${TEXT}-1`);
 
         expect(label1).toHaveStyleRule('height', '1px');
         expect(label1).toHaveStyleRule('position', 'absolute');
@@ -464,9 +556,11 @@ describe('Stepper', () => {
 
       it('should show labels when breakpointLayout is set to "showLabels" if viewport is smaller than set breakpoint prop', () => {
         const { getByText } = render(
-          <Stepper ariaLabel="progress" 
+          <Stepper
+            ariaLabel="progress"
             breakpoint={1500}
             breakpointLayout={StepperLayout.showLabels}
+            layout={StepperLayout.hideLabels}
             currentStep={0}
           >
             <Step label={`${TEXT}-1`} />
@@ -492,10 +586,12 @@ describe('Stepper', () => {
 
       it('should show summaryView when breakpointStyle is set to "summaryView" if viewport is smaller than set breakpoint prop', () => {
         const { getByTestId } = render(
-          <Stepper ariaLabel="progress" 
+          <Stepper
+            ariaLabel="progress"
             testId={testId}
             breakpoint={1500}
             breakpointLayout={StepperLayout.summaryView}
+            layout={StepperLayout.showLabels}
             currentStep={0}
           >
             <Step label={`${TEXT}-1`} />
diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.tsx b/packages/react-magma-dom/src/components/Stepper/Stepper.tsx
index 8789f8db5..ea3bec669 100644
--- a/packages/react-magma-dom/src/components/Stepper/Stepper.tsx
+++ b/packages/react-magma-dom/src/components/Stepper/Stepper.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { CreateStyled } from '@emotion/styled';
 
 import { ThemeContext } from '../../theme/ThemeContext';
@@ -64,12 +65,12 @@ export enum StepperLayout {
 function buildSeparatorBackgroundColors(props) {
   const { isInverse, theme, stepStatus } = props;
   if (isInverse) {
-    if (stepStatus === StepStatus.complete) {
+    if (stepStatus === StepStatus.completed) {
       return theme.colors.tertiary500;
     }
     return theme.colors.primary400;
   } else {
-    if (stepStatus === StepStatus.complete) {
+    if (stepStatus === StepStatus.completed) {
       return theme.colors.primary500;
     }
     return theme.colors.neutral300;
@@ -84,23 +85,29 @@ const StyledStepper = typedStyled.div`
   flex-direction: column;
 `;
 
-const StyledStepContent = typedStyled.div<{
-  showLabelsLayout?: boolean;
-  theme?: ThemeInterface;
-}>`
+const StyledStepContent = typedStyled.ol`
   display: flex;
-  
+  margin: 0;
+  padding: 0;
 `;
 
-const StyledWrapper = typedStyled.div`
-    position:relative;
-    flex:1;
+const StyledLiWrapper = typedStyled.li<{ hasLabels?: boolean }>`
+  list-style-type: none;
+  ${props =>
+    props.hasLabels
+      ? css`
+          position: relative;
+          flex: 1;
+        `
+      : css`
+          display: contents;
+        `}
 `;
 
 const StyledSeparator = typedStyled.div<{
   isInverse?: boolean;
   bothLabels?: boolean;
-  label?: boolean;
+  allStepsHaveLabels?: boolean;
   secondaryLabel?: boolean;
   showLabelsLayout?: boolean;
   stepStatus: StepStatus;
@@ -109,19 +116,19 @@ const StyledSeparator = typedStyled.div<{
   background: ${buildSeparatorBackgroundColors};
   width: ${props =>
     props.showLabelsLayout &&
-    (props.bothLabels || props.label || props.secondaryLabel)
+    (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel)
       ? 'calc(100% - 24px)'
       : '100%'};
   height: 2px;
   top: 11px;
   left: ${props =>
     props.showLabelsLayout &&
-    (props.bothLabels || props.label || props.secondaryLabel)
+    (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel)
       ? 'calc(50% + 12px)'
       : ''};
   position: ${props =>
     props.showLabelsLayout &&
-    (props.bothLabels || props.label || props.secondaryLabel)
+    (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel)
       ? 'absolute'
       : 'relative'};
   align-self: baseline;
@@ -149,21 +156,22 @@ const StyledSummary = typedStyled.div<{
     display: flex;
     text-align: left;
   }
-  svg{
-    height:0;
+  svg {
+    height: 0;
   }
-  div > span{
+  div > span:first-child {
     height: auto;
+    margin: 0;
   }
-  div div {
-    margin:3px 0;
-    span{
-      margin:0
+  div span {
+    margin: 3px 0;
+    span:first-child {
+      margin: 0
     }
+    span:last-child {
+      margin: 4px 0 0 0;
+    } 
   }
-  div div span:last-child{
-    margin: 4px 0 0 0;
-  } 
 `;
 
 // Stepper!
@@ -186,7 +194,6 @@ export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
     const isInverse = useIsInverse(isInverseProp);
 
     // Controls the varying layouts with a set breakpoint number between a breakpointLayout type and / or a layout type.
-
     const [showLabelsLayout, setShowLabelsLayout] = React.useState(false);
     const [hideLabelsLayout, setHideLabelsLayout] = React.useState(false);
     const [summaryViewLayout, setSummaryViewLayout] = React.useState(false);
@@ -263,16 +270,20 @@ export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
         if (child.type === Step) {
           const stepStatusStyles =
             currentStep >= index + 1
-              ? StepStatus.complete
+              ? StepStatus.completed
               : currentStep >= index
               ? StepStatus.active
               : StepStatus.incomplete;
 
           const item = React.cloneElement(child, {
-            'aria-current': !showLabelsLayout ? currentStep === index : null,
-            key: index,
-            isInverse: isInverse,
-            areLabelsHidden: hideLabelsLayout || summaryViewLayout,
+            isInverse,
+            index,
+            layout: summaryViewLayout
+              ? StepperLayout.summaryView
+              : hideLabelsLayout
+              ? StepperLayout.hideLabels
+              : StepperLayout.showLabels,
+            stepLabel: stepLabel || i18n.stepper.stepLabel,
             stepStatus: stepStatusStyles,
           });
 
@@ -284,7 +295,7 @@ export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
                   key={`separator-${index}`}
                   isInverse={isInverse}
                   bothLabels={allStepsHaveLabels && allStepsHaveSecondaryLabels}
-                  label={allStepsHaveLabels}
+                  allStepsHaveLabels={allStepsHaveLabels}
                   secondaryLabel={allStepsHaveSecondaryLabels}
                   showLabelsLayout={showLabelsLayout}
                   stepStatus={stepStatusStyles}
@@ -294,24 +305,22 @@ export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
             ];
           };
 
-          if (
-            showLabelsLayout &&
-            (allStepsHaveLabels || allStepsHaveSecondaryLabels)
-          ) {
-            return (
-              <StyledWrapper aria-current={currentStep === index} theme={theme}>
-                {stepAndSeparator()}
-              </StyledWrapper>
-            );
-          } else {
-            return <>{stepAndSeparator()}</>;
-          }
+          return (
+            <StyledLiWrapper
+              aria-current={currentStep === index ? 'step' : false}
+              hasLabels={
+                showLabelsLayout &&
+                (allStepsHaveLabels || allStepsHaveSecondaryLabels)
+              }
+            >
+              {stepAndSeparator()}
+            </StyledLiWrapper>
+          );
         }
       }
     );
 
     // When summaryView is set to true, this shows one step label and description at a time based on the active step below the Stepper component.
-
     const getSummaryStepLabels = () =>
       React.Children.map(children, (child, index) => {
         const item = child as React.ReactElement<
@@ -328,33 +337,26 @@ export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
       props.completionLabel || i18n.stepper.completionLabel;
 
     return (
-      <StyledStepper
-        {...rest}
-        aria-label={ariaLabel}
-        data-testid={testId}
-        ref={ref}
-      >
-        <StyledStepContent showLabelsLayout={showLabelsLayout} theme={theme}>
+      <StyledStepper {...rest} data-testid={testId} ref={ref}>
+        <StyledStepContent aria-label={ariaLabel} theme={theme}>
           {stepContent}
         </StyledStepContent>
         {summaryViewLayout && (
-          <StyledStepContent>
-            <StyledSummary
-              data-testid={testId && `${testId}-stepper-summary`}
-              isInverse={isInverse}
-              theme={theme}
-            >
-              {currentStep < numberOfSteps
-                ? stepLabel
-                  ? `${stepLabel} ${currentStep + 1} ${
-                      i18n.stepper.stepOfLabel
-                    } ${numberOfSteps}`
-                  : `${i18n.stepper.stepLabel} 
+          <StyledSummary
+            data-testid={testId && `${testId}-stepper-summary`}
+            isInverse={isInverse}
+            theme={theme}
+          >
+            {currentStep < numberOfSteps
+              ? stepLabel
+                ? `${stepLabel} ${currentStep + 1} ${
+                    i18n.stepper.stepOfLabel
+                  } ${numberOfSteps}`
+                : `${i18n.stepper.stepLabel} 
           ${currentStep + 1} ${i18n.stepper.stepOfLabel} ${numberOfSteps}`
-                : completionLabel}
-              {getSummaryStepLabels()}
-            </StyledSummary>
-          </StyledStepContent>
+              : completionLabel}
+            {getSummaryStepLabels()}
+          </StyledSummary>
         )}
       </StyledStepper>
     );
diff --git a/website/react-magma-docs/src/pages/api/stepper.mdx b/website/react-magma-docs/src/pages/api/stepper.mdx
index 6d02828be..21b75cfd3 100644
--- a/website/react-magma-docs/src/pages/api/stepper.mdx
+++ b/website/react-magma-docs/src/pages/api/stepper.mdx
@@ -55,7 +55,7 @@ export function Example() {
       <Heading level={4} style={{ textAlign: 'center' }}>
         Course Selector
       </Heading>
-      <Stepper  ariaLabel="progress" currentStep={currentStep}>
+      <Stepper ariaLabel="progress" currentStep={currentStep}>
         <Step label="Choose materials" />
         <Step label="Additional details" />
         <Step label="Confirm" />
@@ -122,7 +122,7 @@ export function Example() {
   return (
     <>
       <Stepper
-       ariaLabel="progress" 
+        ariaLabel="progress"
         layout={StepperLayout.summaryView}
         currentStep={currentStep}
         stepLabel="Module"
@@ -190,7 +190,7 @@ export function Example() {
   return (
     <>
       <Stepper
-       ariaLabel="progress" 
+        ariaLabel="progress"
         completedStepDescription="Steps Complete!"
         layout={StepperLayout.summaryView}
         currentStep={currentStep}
@@ -260,7 +260,7 @@ export function Example() {
 
   return (
     <>
-      <Stepper  ariaLabel="progress" currentStep={currentStep}>
+      <Stepper ariaLabel="progress" currentStep={currentStep}>
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" secondaryLabel="Description Three" />
@@ -335,7 +335,11 @@ export function Example() {
 
   return (
     <>
-      <Stepper  ariaLabel="progress" layout={StepperLayout.hideLabels} currentStep={currentStep}>
+      <Stepper
+        ariaLabel="progress"
+        layout={StepperLayout.hideLabels}
+        currentStep={currentStep}
+      >
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" secondaryLabel="Description Three" />
@@ -406,7 +410,11 @@ export function Example() {
 
   return (
     <>
-      <Stepper  ariaLabel="progress" layout={StepperLayout.showLabels} currentStep={currentStep}>
+      <Stepper
+        ariaLabel="progress"
+        layout={StepperLayout.showLabels}
+        currentStep={currentStep}
+      >
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" secondaryLabel="Description Three" />
@@ -477,7 +485,11 @@ export function Example() {
 
   return (
     <>
-      <Stepper  ariaLabel="progress" layout={StepperLayout.summaryView} currentStep={currentStep}>
+      <Stepper
+        ariaLabel="progress"
+        layout={StepperLayout.summaryView}
+        currentStep={currentStep}
+      >
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" secondaryLabel="Description Three" />
@@ -553,7 +565,7 @@ export function Example() {
   return (
     <>
       <Stepper
-       ariaLabel="progress" 
+        ariaLabel="progress"
         layout={StepperLayout.hideLabels}
         breakpoint={1500}
         breakpointLayout={StepperLayout.showLabels}
@@ -630,7 +642,7 @@ export function Example() {
   return (
     <>
       <Stepper
-       ariaLabel="progress" 
+        ariaLabel="progress"
         breakpoint={1500}
         breakpointLayout={StepperLayout.hideLabels}
         currentStep={currentStep}
@@ -706,7 +718,7 @@ export function Example() {
   return (
     <>
       <Stepper
-       ariaLabel="progress" 
+        ariaLabel="progress"
         breakpoint={1500}
         breakpointLayout={StepperLayout.summaryView}
         currentStep={currentStep}
@@ -760,7 +772,7 @@ export function Example() {
 
   return (
     <>
-      <Stepper  ariaLabel="progress" currentStep={2}>
+      <Stepper ariaLabel="progress" currentStep={2}>
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" hasError secondaryLabel="Description Three" />
@@ -816,7 +828,7 @@ export function Example() {
 
   return (
     <Container isInverse style={{ padding: '20px' }}>
-      <Stepper  ariaLabel="progress" currentStep={currentStep} isInverse>
+      <Stepper ariaLabel="progress" currentStep={currentStep} isInverse>
         <Step label="First Step" secondaryLabel="Description One" />
         <Step label="Second Step" secondaryLabel="Description Two" />
         <Step label="Third Step" secondaryLabel="Description Three" />
@@ -853,13 +865,13 @@ export function Example() {
 }
 ```
 
-# Step Props
+## Step Props
 
 **Any other props supplied will be provided to the wrapping `div` element.**
 
 <StepProps />
 
-# Stepper Props
+## Stepper Props
 
 **Any other props supplied will be provided to the wrapping `div` element.**