diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx
index 15a7a991b6..1a5eac04d4 100644
--- a/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx
+++ b/src/components/stepindicator/StepIndicator/StepIndicator.stories.tsx
@@ -18,10 +18,27 @@ Updates users on their progress through a multi-step process.
       },
     },
   },
+  argTypes: {
+    stepText: {
+      control: 'text',
+    },
+    ofText: {
+      control: 'text',
+    },
+  },
+  args: {
+    stepText: 'Step',
+    ofText: 'of',
+  }
+}
+
+type StorybookArguments = {
+  stepText: string
+  ofText: string
 }
 
-export const defaultStepIndicator = (): React.ReactElement => (
-  <StepIndicator headingLevel="h4">
+export const defaultStepIndicator = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator headingLevel="h4" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -30,8 +47,8 @@ export const defaultStepIndicator = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const noLabels = (): React.ReactElement => (
-  <StepIndicator showLabels={false} headingLevel="h4">
+export const noLabels = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator showLabels={false} headingLevel="h4" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -40,8 +57,8 @@ export const noLabels = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const centered = (): React.ReactElement => (
-  <StepIndicator centered headingLevel="h4">
+export const centered = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator centered headingLevel="h4" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -50,8 +67,8 @@ export const centered = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const counters = (): React.ReactElement => (
-  <StepIndicator counters="default" headingLevel="h4">
+export const counters = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator counters="default" headingLevel="h4" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -60,8 +77,8 @@ export const counters = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const smallCounters = (): React.ReactElement => (
-  <StepIndicator counters="small" headingLevel="h4">
+export const smallCounters = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator counters="small" headingLevel="h4" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
@@ -70,8 +87,8 @@ export const smallCounters = (): React.ReactElement => (
   </StepIndicator>
 )
 
-export const differentHeadingLevel = (): React.ReactElement => (
-  <StepIndicator headingLevel="h2">
+export const differentHeadingLevel = (args: StorybookArguments): React.ReactElement => (
+  <StepIndicator headingLevel="h2" ofText={args.ofText} stepText={args.stepText}>
     <StepIndicatorStep label="Personal information" status="complete" />
     <StepIndicatorStep label="Household status" status="complete" />
     <StepIndicatorStep label="Supporting documents" status="current" />
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
index dddfc15305..04542c2376 100644
--- a/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
+++ b/src/components/stepindicator/StepIndicator/StepIndicator.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, within } from '@testing-library/react'
 import { StepIndicatorStep } from '../StepIndicatorStep/StepIndicatorStep'
 import { StepIndicator } from '../StepIndicator/StepIndicator'
 import { HeadingLevel } from '../../../types/headingLevel'
@@ -163,4 +163,32 @@ describe('StepIndicator component', () => {
       'usa-step-indicator__heading my-custom-className'
     )
   })
+
+  it('renders properly with translatable \'of\' string', () => {
+    const ofText = 'de'
+    const { queryByText } = render(
+      <StepIndicator headingLevel="h4" ofText={ofText}>
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+    const totalSteps = queryByText(`${ofText} 3`)
+    expect(totalSteps).toBeInTheDocument()
+    expect(totalSteps).toHaveClass('usa-step-indicator__total-steps')
+  })
+
+  it('renders properly with translatable \'step\' string', () => {
+    const stepText = 'Paso'
+    const { getByTestId } = render(
+      <StepIndicator headingLevel="h4" stepText={stepText}>
+        <StepIndicatorStep label={step1} status="complete" />
+        <StepIndicatorStep label={step2} status="current" />
+        <StepIndicatorStep label={step3} status="incomplete" />
+      </StepIndicator>
+    )
+    const stepIndicator = getByTestId('step-indicator')
+    const stepSrOnly = within(stepIndicator).queryByText(stepText)
+    expect(stepSrOnly).toHaveClass('usa-sr-only')
+  })
 })
diff --git a/src/components/stepindicator/StepIndicator/StepIndicator.tsx b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
index 0d05459b9f..fd38a80f83 100644
--- a/src/components/stepindicator/StepIndicator/StepIndicator.tsx
+++ b/src/components/stepindicator/StepIndicator/StepIndicator.tsx
@@ -16,6 +16,8 @@ type StepIndicatorProps = {
     HTMLHeadingElement
   >
   headingLevel: HeadingLevel
+  stepText?: string
+  ofText?: string
 }
 export const StepIndicator = (
   props: StepIndicatorProps
@@ -30,6 +32,8 @@ export const StepIndicator = (
     listProps,
     headingProps,
     headingLevel,
+    stepText = 'Step',
+    ofText = 'of',
   } = props
 
   const Heading = headingLevel
@@ -84,12 +88,12 @@ export const StepIndicator = (
       <div className="usa-step-indicator__header">
         <Heading className={headingClasses} {...remainingHeadingProps}>
           <span className="usa-step-indicator__heading-counter">
-            <span className="usa-sr-only">Step</span>
+            <span className="usa-sr-only" data-testid="step-text">{stepText}</span>
             <span className="usa-step-indicator__current-step">
               {currentStepNumber}
             </span>
             &nbsp;
-            <span className="usa-step-indicator__total-steps">{`of ${totalNumberOfSteps}`}</span>
+            <span className="usa-step-indicator__total-steps">{`${ofText} ${totalNumberOfSteps}`}</span>
             &nbsp;
           </span>
           <span className="usa-step-indicator__heading-text">