diff --git a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
index 571b056b52f..f1b4cf5d63a 100644
--- a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1836,7 +1841,7 @@
               data-automation-id="rule-details-group"
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -1891,7 +1896,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-bypass"
                   class="collapsible-content"
@@ -1966,7 +1971,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -2021,7 +2026,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-color-contrast"
                   class="collapsible-content"
@@ -2507,7 +2512,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -2561,7 +2566,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-html-has-lang"
                   class="collapsible-content"
@@ -2634,7 +2639,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -2688,7 +2693,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-image-alt"
                   class="collapsible-content"
@@ -2962,7 +2967,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -3015,7 +3020,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-label"
                   class="collapsible-content"
@@ -3770,7 +3775,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -3825,7 +3830,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-landmark-one-main"
                   class="collapsible-content"
@@ -3897,7 +3902,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -3951,7 +3956,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-page-has-heading-one"
                   class="collapsible-content"
@@ -4023,7 +4028,7 @@
                 ></div
               ><div
                 class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                ><div class="title-container" role="heading" aria-level="3"
+                ><h3 class="title-container"
                   ><button
                     class="collapsible-control"
                     aria-expanded="false"
@@ -4077,7 +4082,7 @@
                         ></span
                       ></span
                     ></button
-                  ></div
+                  ></h3
                 ><div
                   id="content-container-region"
                   class="collapsible-content"
@@ -4151,7 +4156,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="2"
+              ><h2 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -4197,7 +4202,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h2
               ><div
                 id="content-container-passed-checks-section"
                 class="collapsible-content"
@@ -4700,7 +4705,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="2"
+              ><h2 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -4752,7 +4757,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h2
               ><div
                 id="content-container-not-applicable-checks-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
index 19bc884ed21..055bfd8dde4 100644
--- a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1832,7 +1837,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="2"
+              ><h2 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1878,7 +1883,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h2
               ><div
                 id="content-container-passed-checks-section"
                 class="collapsible-content"
@@ -3019,7 +3024,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="2"
+              ><h2 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -3071,7 +3076,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h2
               ><div
                 id="content-container-not-applicable-checks-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
index 7d94dcf247f..fbd93ba0121 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1787,7 +1792,7 @@
           ><div class="results-heading--pyS7R"><h2>Rules</h2></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1798,7 +1803,7 @@
                       >Failed rules (2)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-combined-report-failed-section"
                 class="collapsible-content"
@@ -1808,7 +1813,7 @@
                   data-automation-id="rule-details-group"
                   ><div
                     class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                    ><div class="title-container" role="heading" aria-level="4"
+                    ><h4 class="title-container"
                       ><button
                         class="collapsible-control"
                         aria-expanded="false"
@@ -1865,7 +1870,7 @@
                             ></span
                           ></span
                         ></button
-                      ></div
+                      ></h4
                     ><div
                       id="content-container-bypass"
                       class="collapsible-content"
@@ -2166,7 +2171,7 @@
                     ></div
                   ><div
                     class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                    ><div class="title-container" role="heading" aria-level="4"
+                    ><h4 class="title-container"
                       ><button
                         class="collapsible-control"
                         aria-expanded="false"
@@ -2223,7 +2228,7 @@
                             ></span
                           ></span
                         ></button
-                      ></div
+                      ></h4
                     ><div
                       id="content-container-color-contrast"
                       class="collapsible-content"
@@ -2477,7 +2482,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -2488,7 +2493,7 @@
                       >Passed rules (2)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-pass-checks-section"
                 class="collapsible-content"
@@ -2636,7 +2641,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -2648,7 +2653,7 @@
                       >Not applicable rules (3)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-inapplicable-checks-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
index 774f838229d..902b1dc9561 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1787,7 +1792,7 @@
           ><div class="results-heading--pyS7R"><h2>Rules</h2></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1798,7 +1803,7 @@
                       >Failed rules (2)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-combined-report-failed-section"
                 class="collapsible-content"
@@ -1808,7 +1813,7 @@
                   data-automation-id="rule-details-group"
                   ><div
                     class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                    ><div class="title-container" role="heading" aria-level="4"
+                    ><h4 class="title-container"
                       ><button
                         class="collapsible-control"
                         aria-expanded="false"
@@ -1865,7 +1870,7 @@
                             ></span
                           ></span
                         ></button
-                      ></div
+                      ></h4
                     ><div
                       id="content-container-bypass"
                       class="collapsible-content"
@@ -2160,7 +2165,7 @@
                     ></div
                   ><div
                     class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
-                    ><div class="title-container" role="heading" aria-level="4"
+                    ><h4 class="title-container"
                       ><button
                         class="collapsible-control"
                         aria-expanded="false"
@@ -2217,7 +2222,7 @@
                             ></span
                           ></span
                         ></button
-                      ></div
+                      ></h4
                     ><div
                       id="content-container-color-contrast"
                       class="collapsible-content"
@@ -2465,7 +2470,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -2476,7 +2481,7 @@
                       >Passed rules (2)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-pass-checks-section"
                 class="collapsible-content"
@@ -2624,7 +2629,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -2636,7 +2641,7 @@
                       >Not applicable rules (3)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-inapplicable-checks-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
index b38a1b7fcf9..1b3528b1689 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1787,7 +1792,7 @@
           ><div class="results-heading--pyS7R"><h2>Rules</h2></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1798,7 +1803,7 @@
                       >Failed rules (0)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-combined-report-failed-section"
                 class="collapsible-content"
@@ -1806,7 +1811,7 @@
               ></div></div></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1817,7 +1822,7 @@
                       >Passed rules (2)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-pass-checks-section"
                 class="collapsible-content"
@@ -1965,7 +1970,7 @@
             ></div
           ><div class="result-section"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1977,7 +1982,7 @@
                       >Not applicable rules (3)</span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-inapplicable-checks-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
index 1c2128f4059..24e5fffd340 100644
--- a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1787,7 +1792,7 @@
           ><div class="results-heading--D3Qtr"><h2>Results by URL</h2></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1831,7 +1836,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-failed-urls-section"
                 class="collapsible-content"
@@ -1906,7 +1911,7 @@
             ></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1957,7 +1962,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-not-scanned-urls-section"
                 class="collapsible-content"
@@ -2005,7 +2010,7 @@
             ></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -2051,7 +2056,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-passed-urls-section"
                 class="collapsible-content"
diff --git a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
index 694183abdd6..d3882b04fb1 100644
--- a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
@@ -702,6 +702,11 @@
       .results-container {
         margin-top: 56px;
       }
+      .results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+      }
       @media screen and (max-width: 640px) {
         .outcome-past-tense {
           display: none;
@@ -1787,7 +1792,7 @@
           ><div class="results-heading--D3Qtr"><h2>Results by URL</h2></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1831,7 +1836,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-failed-urls-section"
                 class="collapsible-content"
@@ -1851,7 +1856,7 @@
                   ><tbody></tbody></table></div></div></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1902,7 +1907,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-not-scanned-urls-section"
                 class="collapsible-content"
@@ -1921,7 +1926,7 @@
                   ><tbody></tbody></table></div></div></div
           ><div class="url-result-section--PmEoY"
             ><div class="collapsible-container collapsed"
-              ><div class="title-container" role="heading" aria-level="3"
+              ><h3 class="title-container"
                 ><button
                   class="collapsible-control"
                   aria-expanded="false"
@@ -1967,7 +1972,7 @@
                       ></span
                     ></span
                   ></button
-                ></div
+                ></h3
               ><div
                 id="content-container-passed-urls-section"
                 class="collapsible-content"
diff --git a/src/common/components/cards/collapsible-component-cards.tsx b/src/common/components/cards/collapsible-component-cards.tsx
index e462edbced7..31e7412e23c 100644
--- a/src/common/components/cards/collapsible-component-cards.tsx
+++ b/src/common/components/cards/collapsible-component-cards.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { ActionButton } from '@fluentui/react';
 import { css } from '@fluentui/utilities';
+import { HeadingElementForLevel, HeadingLevel } from 'common/components/heading-element-for-level';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
 import { SetFocusVisibility } from 'types/set-focus-visibility';
@@ -43,7 +44,6 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
             onExpandToggle: onExpandToggle,
         } = props;
 
-        const containerProps = { role: 'heading', 'aria-level': headingLevel };
         let contentWrapper: JSX.Element | null = null;
         let collapsedCSSClassName: string | null = 'collapsed';
 
@@ -76,7 +76,7 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
                     collapsedCSSClassName,
                 )}
             >
-                <div {...containerProps}>
+                <HeadingElementForLevel headingLevel={headingLevel as HeadingLevel}>
                     <ActionButton
                         data-automation-id={collapsibleButtonAutomationId}
                         className={styles.collapsibleControl}
@@ -86,7 +86,7 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
                     >
                         <span className={styles.collapsibleTitle}>{header}</span>
                     </ActionButton>
-                </div>
+                </HeadingElementForLevel>
                 {contentWrapper}
             </div>
         );
diff --git a/src/content/adhoc/tabstops/guidance.tsx b/src/content/adhoc/tabstops/guidance.tsx
index 7eb9fc9c47e..108df49f29c 100644
--- a/src/content/adhoc/tabstops/guidance.tsx
+++ b/src/content/adhoc/tabstops/guidance.tsx
@@ -7,7 +7,7 @@ import { whyItMatters } from './why-it-matters';
 export const guidance = create(({ Markup }) => (
     <>
         <GuidanceTitle name={'Tab stops'} />
-        <Markup.Include content={createHowToTest(1)} />
+        <Markup.Include content={createHowToTest(2)} />
         <Markup.Include content={whyItMatters} />
     </>
 ));
diff --git a/src/content/adhoc/tabstops/how-to-test.tsx b/src/content/adhoc/tabstops/how-to-test.tsx
index 7552f3ecd28..5e027f6cd55 100644
--- a/src/content/adhoc/tabstops/how-to-test.tsx
+++ b/src/content/adhoc/tabstops/how-to-test.tsx
@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { HeadingElementForLevel, HeadingLevel } from 'common/components/heading-element-for-level';
 import { create, React } from '../../common';
 
 export const createHowToTest = (headingLevel: number) => {
@@ -10,9 +11,7 @@ export const createHowToTest = (headingLevel: number) => {
                     Note: this test requires you to use a keyboard and to visually identify interactive elements.
                 </Markup.Emphasis>
             </p>
-            <div role="heading" aria-level={headingLevel}>
-                How to test
-            </div>
+            <HeadingElementForLevel headingLevel={headingLevel as HeadingLevel}>How to test</HeadingElementForLevel>
             <ol>
                 <li>Refresh the target page to put it in its default state.</li>
                 <li>Turn on the Show tab stops toggle. An empty circle will highlight the element with focus.</li>
diff --git a/src/popup/Styles/popup.scss b/src/popup/Styles/popup.scss
index eb06295d47a..7aad47acae4 100644
--- a/src/popup/Styles/popup.scss
+++ b/src/popup/Styles/popup.scss
@@ -115,7 +115,8 @@ html {
     -moz-box-sizing: border-box;
 }
 
-#popup-container [role='heading'] {
+#popup-container :is(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0;
     width: fit-content;
     padding-left: 0;
 }
diff --git a/src/popup/components/launch-pad.tsx b/src/popup/components/launch-pad.tsx
index f824b610aae..0bda5494c88 100644
--- a/src/popup/components/launch-pad.tsx
+++ b/src/popup/components/launch-pad.tsx
@@ -60,13 +60,7 @@ export class LaunchPad extends React.Component<LaunchPadProps, undefined> {
             <div className="main-section">
                 <div className="popup-grid">
                     <main>
-                        <div
-                            role="heading"
-                            aria-level={2}
-                            className="launch-pad-title ms-fontWeight-semibold"
-                        >
-                            Launch pad
-                        </div>
+                        <h2 className="launch-pad-title ms-fontWeight-semibold">Launch pad</h2>
                         <hr className="ms-fontColor-neutralTertiaryAlt launch-pad-hr" />
                         <div className="launch-pad-main-section">
                             {this.renderLaunchPadItemRows(this.props.rowConfigs)}
diff --git a/src/reports/components/report-sections/report-collapsible-container.tsx b/src/reports/components/report-sections/report-collapsible-container.tsx
index 824b58c1446..5fef2860a18 100644
--- a/src/reports/components/report-sections/report-collapsible-container.tsx
+++ b/src/reports/components/report-sections/report-collapsible-container.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { css } from '@fluentui/utilities';
+import { HeadingElementForLevel, HeadingLevel } from 'common/components/heading-element-for-level';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
 
@@ -26,7 +27,10 @@ const ReportCollapsibleContainer = NamedFC<ReportCollapsibleContainerProps>(
 
         return (
             <div className={outerDivClassName}>
-                <div className="title-container" role="heading" aria-level={headingLevel}>
+                <HeadingElementForLevel
+                    headingLevel={headingLevel as HeadingLevel}
+                    className="title-container"
+                >
                     <button
                         className="collapsible-control"
                         aria-expanded="false"
@@ -35,7 +39,7 @@ const ReportCollapsibleContainer = NamedFC<ReportCollapsibleContainerProps>(
                     >
                         {header}
                     </button>
-                </div>
+                </HeadingElementForLevel>
                 <div id={contentId} className="collapsible-content" aria-hidden="true">
                     {content}
                 </div>
diff --git a/src/reports/components/report-sections/results-container.scss b/src/reports/components/report-sections/results-container.scss
index e722160c33c..ad103f322c7 100644
--- a/src/reports/components/report-sections/results-container.scss
+++ b/src/reports/components/report-sections/results-container.scss
@@ -3,4 +3,10 @@
 
 .results-container {
     margin-top: 56px;
+
+    .title-container :is(h1, h2, h3, h4, h5, h6) {
+        font-weight: unset;
+        margin-block: 0;
+        margin-inline: 0;
+    }
 }
diff --git a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap
index 6483d3e5f87..df8bf062b57 100644
--- a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap
+++ b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap
@@ -1034,12 +1034,9 @@ exports[`Guidance Content pages adhoc/tabstops/guidance matches the snapshot 1`]
           Note: this test requires you to use a keyboard and to visually identify interactive elements.
         </em>
       </p>
-      <div
-        aria-level="1"
-        role="heading"
-      >
+      <h2>
         How to test
-      </div>
+      </h2>
       <ol>
         <li>
           Refresh the target page to put it in its default state.
diff --git a/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap b/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap
index fdb792e1abd..6385fdd2df8 100644
--- a/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap
+++ b/src/tests/end-to-end/tests/popup/__snapshots__/launchpad.test.ts.snap
@@ -84,13 +84,11 @@ exports[`Popup -> Launch Pad content should match snapshot 1`] = `
         class="popup-grid"
       >
         <main>
-          <div
-            aria-level="2"
+          <h2
             class="launch-pad-title ms-fontWeight-semibold"
-            role="heading"
           >
             Launch pad
-          </div>
+          </h2>
           <hr
             class="ms-fontColor-neutralTertiaryAlt launch-pad-hr"
           />
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
index 9c893f72d4b..e95e6a213a0 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
@@ -4,10 +4,7 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: some
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       ariaLabel="some button label"
@@ -18,12 +15,14 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: some
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -38,10 +37,7 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: undef
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -51,12 +47,14 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: undef
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -71,10 +69,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: a-
 <div
   className="a-container collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -84,12 +79,14 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: a-
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -104,10 +101,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: un
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -117,12 +111,14 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: un
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -137,10 +133,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: cont
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -150,12 +143,14 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: cont
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="content-class-name-a collapsibleContainerContent"
   >
@@ -170,10 +165,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: unde
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -183,12 +175,14 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: unde
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -203,10 +197,7 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: collap
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -216,12 +207,14 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: collap
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
@@ -236,10 +229,7 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: expand
 <div
   className="collapsibleContainer"
 >
-  <div
-    aria-level={5}
-    role="heading"
-  >
+  <HeadingElementForLevel>
     <CustomizedActionButton
       aria-expanded={true}
       className="collapsibleControl"
@@ -249,12 +239,14 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: expand
       <span
         className="collapsibleTitle"
       >
-        <div>
+        <HeadingElementForLevel
+          headingLevel={5}
+        >
           Some header
-        </div>
+        </HeadingElementForLevel>
       </span>
     </CustomizedActionButton>
-  </div>
+  </HeadingElementForLevel>
   <div
     className="collapsibleContainerContent"
   >
diff --git a/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx b/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
index c9ae322dd0d..21b7107474f 100644
--- a/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
+++ b/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
@@ -4,6 +4,7 @@ import {
     CardsCollapsibleControl,
     CollapsibleComponentCardsProps,
 } from 'common/components/cards/collapsible-component-cards';
+import { HeadingElementForLevel } from 'common/components/heading-element-for-level';
 import { shallow } from 'enzyme';
 import { forOwn } from 'lodash';
 import * as React from 'react';
@@ -19,9 +20,8 @@ describe('CollapsibleComponentCardsTest', () => {
     let clickEventMock: IMock<React.MouseEvent<HTMLDivElement>>;
 
     const partialProps: Partial<CollapsibleComponentCardsProps> = {
-        header: <div>Some header</div>,
+        header: <HeadingElementForLevel headingLevel={5}>Some header</HeadingElementForLevel>,
         content: <div>Some content</div>,
-        headingLevel: 5,
         isExpanded: true,
     };
 
diff --git a/src/tests/unit/tests/popup/components/launch-pad.test.tsx b/src/tests/unit/tests/popup/components/launch-pad.test.tsx
index 8358b533189..525119fff4b 100644
--- a/src/tests/unit/tests/popup/components/launch-pad.test.tsx
+++ b/src/tests/unit/tests/popup/components/launch-pad.test.tsx
@@ -57,13 +57,7 @@ describe('LaunchPad', () => {
             <div className="main-section">
                 <div className="popup-grid">
                     <main>
-                        <div
-                            role="heading"
-                            aria-level={2}
-                            className="launch-pad-title ms-fontWeight-semibold"
-                        >
-                            Launch pad
-                        </div>
+                        <h2 className="launch-pad-title ms-fontWeight-semibold">Launch pad</h2>
                         <hr className="ms-fontColor-neutralTertiaryAlt launch-pad-hr" />
                         <div className="launch-pad-main-section">
                             <div key="row-item-1">
diff --git a/src/tests/unit/tests/reports/components/report-sections/__snapshots__/report-collapsible-container.test.tsx.snap b/src/tests/unit/tests/reports/components/report-sections/__snapshots__/report-collapsible-container.test.tsx.snap
index d574ce48f62..7760b7ef6ca 100644
--- a/src/tests/unit/tests/reports/components/report-sections/__snapshots__/report-collapsible-container.test.tsx.snap
+++ b/src/tests/unit/tests/reports/components/report-sections/__snapshots__/report-collapsible-container.test.tsx.snap
@@ -4,10 +4,9 @@ exports[`ReportCollapsibleContainerControl render with buttonAriaLabel set to: s
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -19,7 +18,7 @@ exports[`ReportCollapsibleContainerControl render with buttonAriaLabel set to: s
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -36,10 +35,9 @@ exports[`ReportCollapsibleContainerControl render with buttonAriaLabel set to: u
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -50,7 +48,7 @@ exports[`ReportCollapsibleContainerControl render with buttonAriaLabel set to: u
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -67,10 +65,9 @@ exports[`ReportCollapsibleContainerControl render with containerClassName set to
 <div
   className="collapsible-container a-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -81,7 +78,7 @@ exports[`ReportCollapsibleContainerControl render with containerClassName set to
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -98,10 +95,9 @@ exports[`ReportCollapsibleContainerControl render with containerClassName set to
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -112,7 +108,7 @@ exports[`ReportCollapsibleContainerControl render with containerClassName set to
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -129,10 +125,9 @@ exports[`ReportCollapsibleContainerControl render with contentClassName set to:
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -143,7 +138,7 @@ exports[`ReportCollapsibleContainerControl render with contentClassName set to:
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -160,10 +155,9 @@ exports[`ReportCollapsibleContainerControl render with contentClassName set to:
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some-id"
@@ -174,7 +168,7 @@ exports[`ReportCollapsibleContainerControl render with contentClassName set to:
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -191,10 +185,9 @@ exports[`ReportCollapsibleContainerControl render with id set to: some id 1`] =
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-some id"
@@ -205,7 +198,7 @@ exports[`ReportCollapsibleContainerControl render with id set to: some id 1`] =
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"
@@ -222,10 +215,9 @@ exports[`ReportCollapsibleContainerControl render with id set to: undefined 1`]
 <div
   className="collapsible-container collapsed"
 >
-  <div
-    aria-level={5}
+  <HeadingElementForLevel
     className="title-container"
-    role="heading"
+    headingLevel={5}
   >
     <button
       aria-controls="content-container-undefined"
@@ -236,7 +228,7 @@ exports[`ReportCollapsibleContainerControl render with id set to: undefined 1`]
         Some header
       </div>
     </button>
-  </div>
+  </HeadingElementForLevel>
   <div
     aria-hidden="true"
     className="collapsible-content"