diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 2559642..e16d4d4 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -243,13 +243,13 @@ const StepCard = ({
           <StepCardHeader>
             <div>
               {leftHeaderChildren}
-              <div className="question-info" role="heading" aria-level={2}>
+              <h2 className="question-info">
                 {headerTitleChildren}
                 <span>{formattedQuestionNumber}</span>
                 {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}
                 <span className="separator">|</span>
                 <span className="question-id">ID: {questionId}</span>
-              </div>
+              </h2>
             </div>
             {availablePoints || rightHeaderChildren ? <div>
               {availablePoints && <div className="points">{availablePoints} Points</div>}
diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
index 6c640be..c2731f0 100644
--- a/src/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -11,10 +11,8 @@ exports[`StepCard matches snapshot 1`] = `
       className="sc-dkzDqf hbFgnH"
     >
       <div>
-        <div
-          aria-level={2}
+        <h2
           className="question-info"
-          role="heading"
         >
           <span>
             Question 1
@@ -29,7 +27,7 @@ exports[`StepCard matches snapshot 1`] = `
           >
             ID: 
           </span>
-        </div>
+        </h2>
       </div>
       <div>
         <div
@@ -60,10 +58,8 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
       className="sc-dkzDqf hbFgnH"
     >
       <div>
-        <div
-          aria-level={2}
+        <h2
           className="question-info"
-          role="heading"
         >
           <span>
             Questions 1 - 3
@@ -84,7 +80,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
           >
             ID: 
           </span>
-        </div>
+        </h2>
       </div>
       <div>
         <div
@@ -116,10 +112,8 @@ exports[`TaskStepCard can optionally provide task 1`] = `
       className="sc-dkzDqf hbFgnH"
     >
       <div>
-        <div
-          aria-level={2}
+        <h2
           className="question-info"
-          role="heading"
         >
           <span>
             Question 1
@@ -135,7 +129,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
             ID: 
             1234@1
           </span>
-        </div>
+        </h2>
       </div>
     </div>
     <div
@@ -157,10 +151,8 @@ exports[`TaskStepCard can optionally provide type 1`] = `
       className="sc-dkzDqf hbFgnH"
     >
       <div>
-        <div
-          aria-level={2}
+        <h2
           className="question-info"
-          role="heading"
         >
           <span>
             Question 1
@@ -176,7 +168,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
             ID: 
             1234@1
           </span>
-        </div>
+        </h2>
       </div>
     </div>
     <div
@@ -198,10 +190,8 @@ exports[`TaskStepCard matches snapshot 1`] = `
       className="sc-dkzDqf hbFgnH"
     >
       <div>
-        <div
-          aria-level={2}
+        <h2
           className="question-info"
-          role="heading"
         >
           <span>
             Question 1
@@ -217,7 +207,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
             ID: 
             1234@1
           </span>
-        </div>
+        </h2>
       </div>
     </div>
     <div
diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
index b6df90f..1ec135f 100644
--- a/src/components/__snapshots__/Exercise.spec.tsx.snap
+++ b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -15,10 +15,8 @@ exports[`Exercise using step data matches snapshot 1`] = `
         className="sc-dkzDqf hbFgnH"
       >
         <div>
-          <div
-            aria-level={2}
+          <h2
             className="question-info"
-            role="heading"
           >
             <span>
               Question 1
@@ -40,7 +38,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
               ID: 
               1234@4
             </span>
-          </div>
+          </h2>
         </div>
       </div>
       <div
@@ -208,10 +206,8 @@ exports[`Exercise with question state data matches snapshot 1`] = `
         className="sc-dkzDqf hbFgnH"
       >
         <div>
-          <div
-            aria-level={2}
+          <h2
             className="question-info"
-            role="heading"
           >
             <span>
               Question 1
@@ -227,7 +223,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
               ID: 
               1234@5
             </span>
-          </div>
+          </h2>
         </div>
       </div>
       <div
@@ -449,10 +445,8 @@ exports[`Exercise with question state data renders header icons with multiple ch
         className="sc-dkzDqf hbFgnH"
       >
         <div>
-          <div
-            aria-level={2}
+          <h2
             className="question-info"
-            role="heading"
           >
             <span>
               Question 1
@@ -468,7 +462,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
               ID: 
               1234@5
             </span>
-          </div>
+          </h2>
         </div>
         <div>
           <div
@@ -776,10 +770,8 @@ exports[`Exercise with question state data renders header icons with two-step ex
         className="sc-dkzDqf hbFgnH"
       >
         <div>
-          <div
-            aria-level={2}
+          <h2
             className="question-info"
-            role="heading"
           >
             <span>
               Question 1
@@ -795,7 +787,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
               ID: 
               1234@5
             </span>
-          </div>
+          </h2>
         </div>
         <div>
           <div
@@ -1089,10 +1081,8 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
         className="sc-dkzDqf hbFgnH"
       >
         <div>
-          <div
-            aria-level={2}
+          <h2
             className="question-info"
-            role="heading"
           >
             <span>
               Question 1
@@ -1108,7 +1098,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
               ID: 
               1234@5
             </span>
-          </div>
+          </h2>
         </div>
       </div>
       <div