shyusu4 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix heading order and landmark uniqueness in the pattern library UI ([#279](https://github.com/torchbox/django-pattern-library/issues/279), [#280](https://github.com/torchbox/django-pattern-library/issues/280))
+
 ## [1.6.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.6.0) - 2026-07-24
 
 ### Added

diff --git a/pattern_library/static/pattern_library/src/scss/components/_heading.scss b/pattern_library/static/pattern_library/src/scss/components/_heading.scss
@@ -1,7 +1,10 @@
 @use '../config' as *;
 
 .heading {
+    font-size: 19px;
+
     &--iframe-size {
+        font-size: 16px;
         color: $mid-grey;
         align-self: center;
         margin-right: 10px;

diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html
@@ -52,7 +52,7 @@ <h1 class="header__title">
         {% block custom_sidebar_content %}
         {% endblock %}
     </aside>
-    <main class="main">
+    <main class="main" aria-label="Pattern details">
         {% block content %}{% endblock %}
     </main>
 </body>

diff --git a/pattern_library/templates/pattern_library/index.html b/pattern_library/templates/pattern_library/index.html
@@ -3,16 +3,16 @@
 {% block content %}
     <section>
         <div class="wrapper wrapper--pattern-header">
-            <h3 class="heading">
+            <h2 class="heading">
                 <a href="{% url 'pattern_library:render_pattern' pattern_template_name=pattern_template_name %}">
                     {{ pattern_name }}
                     <svg class="icon icon--external" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M38 38h-28v-28h14v-4h-14c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-14h-4v14zm-10-32v4h7.17l-19.66 19.66 2.83 2.83 19.66-19.66v7.17h4v-14h-14z"/></svg>
                 </a>
-            </h3>
+            </h2>
             <div class="wrapper wrapper--resize-buttons">
-                <h4 class="heading heading--iframe-size js-iframe-size">
+                <h3 class="heading heading--iframe-size js-iframe-size">
                     <span class="sr-only">Window sizes</span>
-                </h4>
+                </h3>
                 <button class="button button--resize js-resize-iframe" data-resize="320">S</button>
                 <button class="button button--resize js-resize-iframe" data-resize="768">M</button>
                 <button class="button button--resize js-resize-iframe" data-resize="1024">L</button>

diff --git a/tests/jinja/patterns_jinja/components/accordion/accordion.html b/tests/jinja/patterns_jinja/components/accordion/accordion.html
@@ -1,14 +1,14 @@
 <div class="accordion" data-accordion>
     {% for accordion in accordions %}
         <div class="accordion__panel" data-accordion-panel>
-            <h3 class="accordion__title heading heading--4">
+            <h2 class="accordion__title heading heading--4">
                 <button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ loop.index }}">
                     <span class="accordion__title-inner">{{ accordion.title }}</span>
                     {% set name="chevron-down" %}
                     {% set classname="accordion__icon" %}
                     {% include "patterns_jinja/components/icons/icon.html" %}
                 </button>
-            </h3>
+            </h2>
             <div id="{{ id_prefix }}-content-{{ loop.index }}" class="accordion__content" data-accordion-content>
                 <p>{{ accordion.description }}</p>
             </div>

diff --git a/tests/jinja/patterns_jinja/pages/search/search.html b/tests/jinja/patterns_jinja/pages/search/search.html
@@ -9,7 +9,7 @@ <h1>{% if search_query %}Search results for “{{ search_query }}”{% else %}Se
         {% endwith %}
 
         {% for result in search_results %}
-            <h4>{{ result.title }}</h4>
+            <h2>{{ result.title }}</h2>
         {% endfor %}
 
         {% if paginator.num_pages > 1 %}

diff --git a/tests/templates/patterns/molecules/accordion/accordion.html b/tests/templates/patterns/molecules/accordion/accordion.html
@@ -1,12 +1,12 @@
 <div class="accordion" data-accordion>
     {% for accordion in accordions %}
         <div class="accordion__panel" data-accordion-panel>
-            <h3 class="accordion__title heading heading--4">
+            <h2 class="accordion__title heading heading--4">
                 <button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ forloop.counter }}">
                     <span class="accordion__title-inner">{{ accordion.title }}</span>
                     {% include "patterns/atoms/icons/icon.html" with name="chevron-down" classname="accordion__icon" %}
                 </button>
-            </h3>
+            </h2>
             <div id="{{ id_prefix }}-content-{{ forloop.counter }}" class="accordion__content" data-accordion-content>
                 <p>{{ accordion.description }}</p>
             </div>

diff --git a/tests/templates/patterns/pages/search/search.html b/tests/templates/patterns/pages/search/search.html
@@ -9,7 +9,7 @@ <h1>{% if search_query %}Search results for “{{ search_query }}”{% else %}Se
         {% endwith %}
 
         {% for result in search_results %}
-            <h4>{{ result.title }}</h4>
+            <h2>{{ result.title }}</h2>
         {% endfor %}
 
         {% if search_results.paginator.num_pages > 1 %}

diff --git a/tests/templates/patterns/pages/test_page/test_page.yaml b/tests/templates/patterns/pages/test_page/test_page.yaml
@@ -1,5 +1,6 @@
 context:
   page:
+    title: Test page
     body: >
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod