From 6391b3d81cbec9c3e2f19842fbef762c98f4dc5d Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Tue, 23 Sep 2025 22:25:16 +0000
Subject: [PATCH] Enhance website accessibility and improve user interface
 elements

Introduce ARIA attributes, improve focus management, and refine UI element styling for better accessibility and user experience across the application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 .replit                               |  8 +--
 static/css/tailwind.css               | 36 ++++++++---
 templates/cotton/enhanced_search.html | 57 +++++++++++++----
 templates/cotton/filter_chips.html    | 18 +++---
 templates/cotton/park_card.html       | 92 ++++++++++++++++-----------
 templates/cotton/result_stats.html    | 10 +--
 templates/cotton/sort_controls.html   | 14 ++--
 templates/cotton/view_toggle.html     |  6 +-
 templates/parks/park_list.html        | 55 +++++++++-------
 9 files changed, 189 insertions(+), 107 deletions(-)

diff --git a/.replit b/.replit
index a0a35a63..7f53545a 100644
--- a/.replit
+++ b/.replit
@@ -54,14 +54,14 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 33323
-externalPort = 3002
-
 [[ports]]
 localPort = 41923
 externalPort = 3000
 
+[[ports]]
+localPort = 44757
+externalPort = 3002
+
 [[ports]]
 localPort = 45245
 externalPort = 3001
diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index 0847611e..74a0f20b 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -809,9 +809,6 @@
   .min-h-20 {
     min-height: calc(var(--spacing) * 20);
   }
-  .min-h-\[24px\] {
-    min-height: 24px;
-  }
   .min-h-\[44px\] {
     min-height: 44px;
   }
@@ -947,9 +944,6 @@
   .min-w-16 {
     min-width: calc(var(--spacing) * 16);
   }
-  .min-w-\[24px\] {
-    min-width: 24px;
-  }
   .min-w-\[44px\] {
     min-width: 44px;
   }
@@ -3091,6 +3085,11 @@
       left: calc(var(--spacing) * 4);
     }
   }
+  .focus\:left-32 {
+    &:focus {
+      left: calc(var(--spacing) * 32);
+    }
+  }
   .focus\:z-50 {
     &:focus {
       z-index: 50;
@@ -3162,6 +3161,11 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-gray-500 {
+    &:focus {
+      --tw-ring-color: var(--color-gray-500);
+    }
+  }
   .focus\:ring-green-500 {
     &:focus {
       --tw-ring-color: var(--color-green-500);
@@ -3193,6 +3197,12 @@
       --tw-ring-color: var(--color-yellow-500);
     }
   }
+  .focus\:ring-offset-1 {
+    &:focus {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -3215,6 +3225,11 @@
       outline-style: none;
     }
   }
+  .focus\:ring-inset {
+    &:focus {
+      --tw-ring-inset: inset;
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3371,6 +3386,11 @@
       min-height: calc(var(--spacing) * 0);
     }
   }
+  .sm\:min-h-\[32px\] {
+    @media (width >= 40rem) {
+      min-height: 32px;
+    }
+  }
   .sm\:min-h-\[400px\] {
     @media (width >= 40rem) {
       min-height: 400px;
@@ -3406,9 +3426,9 @@
       width: auto;
     }
   }
-  .sm\:min-w-0 {
+  .sm\:min-w-\[32px\] {
     @media (width >= 40rem) {
-      min-width: calc(var(--spacing) * 0);
+      min-width: 32px;
     }
   }
   .sm\:flex-1 {
diff --git a/templates/cotton/enhanced_search.html b/templates/cotton/enhanced_search.html
index 90440d13..40e502da 100644
--- a/templates/cotton/enhanced_search.html
+++ b/templates/cotton/enhanced_search.html
@@ -90,16 +90,17 @@ Features:
      @click.away="open = false">
     
     <div class="relative">
-        <!-- Search Icon -->
-        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <!-- Search Icon with ARIA -->
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" aria-hidden="true">
+            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
             </svg>
         </div>
 
-        <!-- Search Input -->
+        <!-- Search Input with Enhanced Accessibility -->
         <input 
             x-ref="searchInput"
+            id="park-search"
             type="text" 
             name="search"
             x-model="search"
@@ -136,32 +137,40 @@ Features:
                 }
             "
             autocomplete="off"
+            role="combobox"
+            aria-expanded="false"
+            :aria-expanded="open"
+            aria-autocomplete="list"
+            aria-controls="search-suggestions"
+            aria-describedby="search-help-text search-live-region"
+            :aria-activedescendant="selectedIndex >= 0 ? `suggestion-${selectedIndex}` : null"
         />
 
-        <!-- Loading Spinner -->
-        <div id="search-spinner" class="absolute inset-y-0 right-0 pr-3 flex items-center htmx-indicator">
-            <svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
+        <!-- Loading Spinner with ARIA -->
+        <div id="search-spinner" class="absolute inset-y-0 right-0 pr-3 flex items-center htmx-indicator" aria-hidden="true">
+            <svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
         </div>
 
-        <!-- Clear Button -->
+        <!-- Clear Button with Enhanced Accessibility -->
         <button 
             x-show="search.length > 0"
             @click="clearSearch()"
             type="button"
-            class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors htmx-indicator:hidden"
-            aria-label="Clear search"
+            class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors htmx-indicator:hidden min-w-[44px] min-h-[44px] justify-center"
+            aria-label="Clear search input"
             title="Clear search"
+            tabindex="0"
         >
-            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
         </button>
     </div>
 
-    <!-- Autocomplete Dropdown -->
+    <!-- Autocomplete Dropdown with ARIA -->
     <div 
         x-show="open && suggestions.length > 0"
         x-transition:enter="transition ease-out duration-100"
@@ -172,15 +181,22 @@ Features:
         x-transition:leave-end="transform opacity-0 scale-95"
         class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700 max-h-60 overflow-y-auto"
         style="display: none;"
+        role="listbox"
+        aria-label="Search suggestions"
+        id="search-suggestions"
     >
         <div class="py-1">
             <template x-for="(suggestion, index) in suggestions" :key="index">
                 <button
                     type="button"
-                    class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-between"
+                    class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 flex items-center justify-between min-h-[44px] focus:outline-none focus:ring-2 focus:ring-blue-500"
                     :class="{ 'bg-gray-100 dark:bg-gray-700': selectedIndex === index }"
                     @click="selectSuggestion(suggestion)"
                     @mouseenter="selectedIndex = index"
+                    role="option"
+                    :id="`suggestion-${index}`"
+                    :aria-selected="selectedIndex === index"
+                    :aria-label="`Select ${suggestion.name || suggestion}${suggestion.type ? ' - ' + suggestion.type : ''}`"
                 >
                     <span x-text="suggestion.name || suggestion"></span>
                     <template x-if="suggestion.type">
@@ -229,4 +245,19 @@ Features:
             </div>
         {% endif %}
     </div>
+    
+    <!-- Screen Reader Support Elements -->
+    <div id="search-help-text" class="sr-only">
+        Type to search parks. Use arrow keys to navigate suggestions, Enter to select, or Escape to close.
+    </div>
+    
+    <!-- Live Region for Screen Reader Announcements -->
+    <div id="search-live-region" 
+         aria-live="polite" 
+         aria-atomic="true" 
+         class="sr-only"
+         x-text="open && suggestions.length > 0 ? 
+             `${suggestions.length} suggestion${suggestions.length !== 1 ? 's' : ''} available. Use arrow keys to navigate.` : 
+             (search.length >= 2 && !loading && suggestions.length === 0 ? 'No suggestions found.' : '')">
+    </div>
 </div>
\ No newline at end of file
diff --git a/templates/cotton/filter_chips.html b/templates/cotton/filter_chips.html
index 2cea939d..f8c342bc 100644
--- a/templates/cotton/filter_chips.html
+++ b/templates/cotton/filter_chips.html
@@ -28,10 +28,10 @@ Features:
 />
 
 {% if filters %}
-<div class="flex flex-wrap gap-2 {{ class }}">
+<div class="flex flex-wrap gap-2 {{ class }}" role="group" aria-label="Active filters">
     {% for filter_name, filter_value in filters.items %}
         {% if filter_value and filter_name != 'page' and filter_name != 'view_mode' %}
-            <div class="inline-flex items-center gap-2 px-3 py-1.5 sm:py-1 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 rounded-full border border-blue-200 dark:border-blue-700/50">
+            <div class="inline-flex items-center gap-2 px-3 py-1.5 sm:py-1 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 rounded-full border border-blue-200 dark:border-blue-700/50" role="group" aria-label="{{ filter_name|title }} filter: {{ filter_value }}">
                 <span class="capitalize text-xs sm:text-sm">{{ filter_name|title }}:</span>
                 <span class="font-semibold text-xs sm:text-sm">
                     {% if filter_value == 'True' %}
@@ -44,15 +44,15 @@ Features:
                 </span>
                 <button 
                     type="button"
-                    class="ml-1 p-1 sm:p-0.5 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800/50 rounded-full transition-all duration-200 min-w-[24px] min-h-[24px] sm:min-w-0 sm:min-h-0 flex items-center justify-center"
+                    class="ml-1 p-1 sm:p-0.5 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800/50 rounded-full transition-all duration-200 min-w-[44px] min-h-[44px] sm:min-w-[32px] sm:min-h-[32px] flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
                     hx-get="{% if base_url %}{{ base_url }}{% else %}{{ request.path }}{% endif %}?{% for name, value in request.GET.items %}{% if name != filter_name and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}"
                     hx-target="#park-results"
                     hx-push-url="true"
                     hx-indicator="#search-spinner"
-                    aria-label="Remove {{ filter_name }} filter"
-                    title="Remove filter"
+                    aria-label="Remove {{ filter_name|title }} filter with value {{ filter_value }}"
+                    title="Remove {{ filter_name|title }} filter"
                 >
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                     </svg>
                 </button>
@@ -63,15 +63,15 @@ Features:
     {% if filters|length > 1 %}
         <button 
             type="button"
-            class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-gray-600 bg-gray-100 rounded-full border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors"
+            class="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-full border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors min-h-[44px] focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
             hx-get="{% if base_url %}{{ base_url }}{% else %}{{ request.path }}{% endif %}"
             hx-target="#park-results"
             hx-push-url="true"
             hx-indicator="#search-spinner"
-            aria-label="Clear all filters"
+            aria-label="Clear all active filters"
             title="Clear all filters"
         >
-            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
             Clear all
diff --git a/templates/cotton/park_card.html b/templates/cotton/park_card.html
index ff51d00f..c0e8244c 100644
--- a/templates/cotton/park_card.html
+++ b/templates/cotton/park_card.html
@@ -48,8 +48,8 @@ Features:
 
 {% if park %}
     {% if view_mode == 'list' %}
-        {# Enhanced List View Item with CloudFlare Images #}
-        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] overflow-hidden {{ class }}">
+        {# Enhanced List View Item with CloudFlare Images and Accessibility #}
+        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] overflow-hidden {{ class }}" role="article" aria-labelledby="park-title-{{ park.id }}" aria-describedby="park-description-{{ park.id }}">
             <div class="p-4 sm:p-6">
                 <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
                     {# Enhanced List View Image Section #}
@@ -92,7 +92,7 @@ Features:
                                 </div>
                             {% endif %}
                             
-                            {# List View Status Badge Overlay #}
+                            {# List View Status Badge Overlay with Accessibility #}
                             <div class="absolute top-1.5 right-1.5 sm:top-2 sm:right-2">
                                 <span class="inline-flex items-center px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full text-xs font-semibold border shrink-0 bg-white/95 backdrop-blur-sm shadow-sm
                                            {% if park.status == 'operating' or park.status == 'OPERATING' %}text-green-700 border-green-200
@@ -102,9 +102,12 @@ Features:
                                            {% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}text-blue-700 border-blue-200
                                            {% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}text-gray-700 border-gray-200
                                            {% elif park.status == 'relocated' or park.status == 'RELOCATED' %}text-purple-700 border-purple-200
-                                           {% else %}text-gray-700 border-gray-200{% endif %}">
-                                    <span class="hidden sm:inline">{{ park.get_status_display }}</span>
-                                    <span class="sm:hidden">{{ park.get_status_display|truncatechars:3 }}</span>
+                                           {% else %}text-gray-700 border-gray-200{% endif %}"
+                                      role="img" 
+                                      aria-label="Park status: {{ park.get_status_display }}"
+                                      title="Park status: {{ park.get_status_display }}">
+                                    <span class="hidden sm:inline" aria-hidden="true">{{ park.get_status_display }}</span>
+                                    <span class="sm:hidden" aria-hidden="true">{{ park.get_status_display|truncatechars:3 }}</span>
                                 </span>
                             </div>
                         </div>
@@ -113,9 +116,9 @@ Features:
                     {# Enhanced Main Content Section with Better Mobile Layout #}
                     <div class="flex-1 min-w-0 flex flex-col justify-between">
                         <div class="space-y-2 sm:space-y-3">
-                            {# Enhanced Title with Better Mobile Typography #}
+                            {# Enhanced Title with Better Mobile Typography and Accessibility #}
                             <div class="flex items-start justify-between">
-                                <h2 class="text-lg sm:text-xl lg:text-2xl font-bold line-clamp-2 leading-tight">
+                                <h3 id="park-title-{{ park.id }}" class="text-lg sm:text-xl lg:text-2xl font-bold line-clamp-2 leading-tight">
                                     {% if park.slug %}
                                         <a href="{% url 'parks:park_detail' park.slug %}"
                                            class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-400 dark:hover:to-purple-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm"
@@ -127,7 +130,7 @@ Features:
                                             {{ park.name }}
                                         </span>
                                     {% endif %}
-                                </h2>
+                                </h3>
                                 
                                 {# View Details Arrow for Mobile #}
                                 <div class="sm:hidden text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 ml-2 flex-shrink-0">
@@ -147,9 +150,9 @@ Features:
                                 </div>
                             {% endif %}
                             
-                            {# Enhanced Description #}
+                            {# Enhanced Description with Accessibility #}
                             {% if park.description %}
-                                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
+                                <p id="park-description-{{ park.id }}" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
                                     {{ park.description|truncatewords:30 }}
                                 </p>
                             {% endif %}
@@ -160,21 +163,27 @@ Features:
                             <div class="flex items-center justify-between pt-3 border-t border-gray-200/50 dark:border-gray-600/50 mt-3">
                                 <div class="flex items-center space-x-3 sm:space-x-6 text-sm">
                                     {% if park.ride_count %}
-                                        <div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50" title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
-                                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50" 
+                                             role="img" 
+                                             aria-label="{{ park.ride_count }} ride{{ park.ride_count|pluralize }} available"
+                                             title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
+                                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                             </svg>
-                                            <span class="font-semibold text-blue-700 dark:text-blue-300">{{ park.ride_count }}</span>
-                                            <span class="text-blue-600 dark:text-blue-400 hidden sm:inline">rides</span>
+                                            <span class="font-semibold text-blue-700 dark:text-blue-300" aria-hidden="true">{{ park.ride_count }}</span>
+                                            <span class="text-blue-600 dark:text-blue-400 hidden sm:inline" aria-hidden="true">rides</span>
                                         </div>
                                     {% endif %}
                                     {% if park.coaster_count %}
-                                        <div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200/50 dark:border-purple-800/50" title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
-                                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-600 dark:text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <div class="flex items-center space-x-1.5 sm:space-x-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200/50 dark:border-purple-800/50" 
+                                             role="img" 
+                                             aria-label="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }} available"
+                                             title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
+                                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-600 dark:text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                             </svg>
-                                            <span class="font-semibold text-purple-700 dark:text-purple-300">{{ park.coaster_count }}</span>
-                                            <span class="text-purple-600 dark:text-purple-400 hidden sm:inline">coasters</span>
+                                            <span class="font-semibold text-purple-700 dark:text-purple-300" aria-hidden="true">{{ park.coaster_count }}</span>
+                                            <span class="text-purple-600 dark:text-purple-400 hidden sm:inline" aria-hidden="true">coasters</span>
                                         </div>
                                     {% endif %}
                                 </div>
@@ -201,8 +210,8 @@ Features:
             </div>
         </article>
     {% else %}
-        {# Enhanced Grid View Item #}
-        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden {{ class }}">
+        {# Enhanced Grid View Item with Accessibility #}
+        <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden {{ class }}" role="article" aria-labelledby="park-title-grid-{{ park.id }}" aria-describedby="park-description-grid-{{ park.id }}">
             {# Enhanced Park Image with CloudFlare Images Integration #}
             <div class="relative aspect-[4/3] bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 overflow-hidden">
                 {% if park.card_image.image or park.photos.first.image %}
@@ -258,7 +267,7 @@ Features:
                     </div>
                 {% endif %}
                 
-                {# Enhanced Status Badge Overlay with Better Mobile Touch Targets #}
+                {# Enhanced Status Badge Overlay with Better Mobile Touch Targets and Accessibility #}
                 <div class="absolute top-2 right-2 sm:top-3 sm:right-3">
                     <span class="inline-flex items-center px-2 py-1 sm:px-2.5 sm:py-1 rounded-full text-xs font-semibold border shrink-0 bg-white/95 backdrop-blur-sm shadow-sm
                                {% if park.status == 'operating' or park.status == 'OPERATING' %}text-green-700 border-green-200
@@ -268,8 +277,11 @@ Features:
                                {% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}text-blue-700 border-blue-200
                                {% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}text-gray-700 border-gray-200
                                {% elif park.status == 'relocated' or park.status == 'RELOCATED' %}text-purple-700 border-purple-200
-                               {% else %}text-gray-700 border-gray-200{% endif %}">
-                        {{ park.get_status_display }}
+                               {% else %}text-gray-700 border-gray-200{% endif %}"
+                          role="img" 
+                          aria-label="Park status: {{ park.get_status_display }}"
+                          title="Park status: {{ park.get_status_display }}">
+                        <span aria-hidden="true">{{ park.get_status_display }}</span>
                     </span>
                 </div>
                 
@@ -280,8 +292,8 @@ Features:
             {# Enhanced Content Area with Better Mobile Optimization #}
             <div class="p-4 sm:p-6">
                 <div class="mb-3 sm:mb-4">
-                    {# Enhanced Title with Better Mobile Typography #}
-                    <h2 class="text-lg sm:text-xl font-bold line-clamp-2 mb-2 leading-tight">
+                    {# Enhanced Title with Better Mobile Typography and Accessibility #}
+                    <h3 id="park-title-grid-{{ park.id }}" class="text-lg sm:text-xl font-bold line-clamp-2 mb-2 leading-tight">
                         {% if park.slug %}
                             <a href="{% url 'parks:park_detail' park.slug %}"
                                class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm"
@@ -293,7 +305,7 @@ Features:
                                 {{ park.name }}
                             </span>
                         {% endif %}
-                    </h2>
+                    </h3>
                 </div>
                 
                 {# Enhanced Operator Display with Better Mobile Layout #}
@@ -306,9 +318,9 @@ Features:
                     </div>
                 {% endif %}
                 
-                {# Enhanced Description with Better Mobile Readability #}
+                {# Enhanced Description with Better Mobile Readability and Accessibility #}
                 {% if park.description %}
-                    <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4 leading-relaxed">
+                    <p id="park-description-grid-{{ park.id }}" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4 leading-relaxed">
                         {{ park.description|truncatewords:15 }}
                     </p>
                 {% endif %}
@@ -318,21 +330,27 @@ Features:
                     <div class="flex items-center justify-between pt-3 sm:pt-4 border-t border-gray-200/50 dark:border-gray-600/50">
                         <div class="flex items-center space-x-3 sm:space-x-4 text-sm">
                             {% if park.ride_count %}
-                                <div class="flex items-center space-x-1.5 text-blue-600 dark:text-blue-400" title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
-                                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <div class="flex items-center space-x-1.5 text-blue-600 dark:text-blue-400" 
+                                     role="img" 
+                                     aria-label="{{ park.ride_count }} ride{{ park.ride_count|pluralize }} available"
+                                     title="{{ park.ride_count }} ride{{ park.ride_count|pluralize }}">
+                                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                     </svg>
-                                    <span class="font-semibold">{{ park.ride_count }}</span>
-                                    <span class="hidden sm:inline text-xs opacity-75">rides</span>
+                                    <span class="font-semibold" aria-hidden="true">{{ park.ride_count }}</span>
+                                    <span class="hidden sm:inline text-xs opacity-75" aria-hidden="true">rides</span>
                                 </div>
                             {% endif %}
                             {% if park.coaster_count %}
-                                <div class="flex items-center space-x-1.5 text-purple-600 dark:text-purple-400" title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
-                                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <div class="flex items-center space-x-1.5 text-purple-600 dark:text-purple-400" 
+                                     role="img" 
+                                     aria-label="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }} available"
+                                     title="{{ park.coaster_count }} roller coaster{{ park.coaster_count|pluralize }}">
+                                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                     </svg>
-                                    <span class="font-semibold">{{ park.coaster_count }}</span>
-                                    <span class="hidden sm:inline text-xs opacity-75">coasters</span>
+                                    <span class="font-semibold" aria-hidden="true">{{ park.coaster_count }}</span>
+                                    <span class="hidden sm:inline text-xs opacity-75" aria-hidden="true">coasters</span>
                                 </div>
                             {% endif %}
                         </div>
diff --git a/templates/cotton/result_stats.html b/templates/cotton/result_stats.html
index 7e96f741..0022dfda 100644
--- a/templates/cotton/result_stats.html
+++ b/templates/cotton/result_stats.html
@@ -44,7 +44,7 @@ Features:
     class=""
 />
 
-<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 {{ class }}">
+<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 {{ class }}" role="status" aria-live="polite">
     <div class="flex items-center gap-4">
         <!-- Result Count -->
         <div class="flex items-center gap-1">
@@ -74,11 +74,11 @@ Features:
 
         <!-- Filter Indicator -->
         {% if filter_count and filter_count > 0 %}
-            <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400" role="img" aria-label="{{ filter_count }} active filter{{ filter_count|pluralize }}">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                 </svg>
-                <span>{{ filter_count }} filter{{ filter_count|pluralize }} active</span>
+                <span aria-hidden="true">{{ filter_count }} filter{{ filter_count|pluralize }} active</span>
             </div>
         {% endif %}
     </div>
@@ -103,7 +103,7 @@ Features:
 {% if total_results == 0 and is_search %}
     <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
         <div class="flex items-start gap-2">
-            <svg class="w-5 h-5 mt-0.5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-5 h-5 mt-0.5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
             <div class="text-sm">
diff --git a/templates/cotton/sort_controls.html b/templates/cotton/sort_controls.html
index 24318cc6..b0d617de 100644
--- a/templates/cotton/sort_controls.html
+++ b/templates/cotton/sort_controls.html
@@ -39,11 +39,12 @@ Features:
             type="button"
             class="inline-flex items-center justify-center w-full px-3 sm:px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 min-h-[44px] sm:min-h-0"
             @click="open = !open"
-            aria-expanded="true"
+            :aria-expanded="open"
             aria-haspopup="true"
-            aria-label="Sort options"
+            aria-label="Sort options menu"
+            id="sort-menu-button"
         >
-            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
             </svg>
             Sort by
@@ -72,7 +73,7 @@ Features:
                     <span class="ml-1">: {{ current_sort }}</span>
                 {% endif %}
             {% endif %}
-            <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
+            <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
             </svg>
         </button>
@@ -90,18 +91,19 @@ Features:
         @click.away="open = false"
         style="display: none;"
     >
-        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu-button">
             {% if options %}
                 {% for option in options %}
                     <button
                         type="button"
-                        class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == option.value %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %}"
+                        class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {% if current_sort == option.value %}bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% endif %} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset"
                         hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'ordering' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}ordering={{ option.value }}"
                         hx-target="#park-results"
                         hx-push-url="true"
                         hx-indicator="#search-spinner"
                         @click="open = false"
                         role="menuitem"
+                        tabindex="-1"
                     >
                         {% if current_sort == option.value %}
                             <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
diff --git a/templates/cotton/view_toggle.html b/templates/cotton/view_toggle.html
index ea0a0e9f..ba09ea6f 100644
--- a/templates/cotton/view_toggle.html
+++ b/templates/cotton/view_toggle.html
@@ -30,7 +30,7 @@ Features:
     class=""
 />
 
-<div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 {{ class }}" role="group" aria-label="View toggle">
+<div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 {{ class }}" role="group" aria-label="Toggle between grid and list view modes">
     <button
         type="button"
         class="inline-flex items-center px-3 py-2.5 sm:py-2 text-sm font-medium rounded-l-lg transition-all duration-200 min-h-[44px] sm:min-h-0 {% if current_view == 'grid' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 focus:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700{% endif %} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -42,7 +42,7 @@ Features:
         aria-pressed="{% if current_view == 'grid' %}true{% else %}false{% endif %}"
         title="Grid view"
     >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
         </svg>
         <span class="ml-1 hidden sm:inline">Grid</span>
@@ -59,7 +59,7 @@ Features:
         aria-pressed="{% if current_view == 'list' %}true{% else %}false{% endif %}"
         title="List view"
     >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
         </svg>
         <span class="ml-1 hidden sm:inline">List</span>
diff --git a/templates/parks/park_list.html b/templates/parks/park_list.html
index 24977c2e..afa71728 100644
--- a/templates/parks/park_list.html
+++ b/templates/parks/park_list.html
@@ -5,46 +5,57 @@
 {% block title %}Parks{% endblock %}
 
 {% block content %}
-{# Enhanced Mobile-First Container with Better Spacing #}
+{# Skip Navigation Links for Keyboard Users #}
+<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
+    Skip to main content
+</a>
+<a href="#search-form" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-32 z-50 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
+    Skip to search
+</a>
+
+{# Enhanced Mobile-First Container with Better Spacing and Landmarks #}
 <div class="container mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6" x-data="parkListState()">
     {# Enhanced Mobile-First Header Section #}
-    <div class="mb-6 sm:mb-8">
+    <header class="mb-6 sm:mb-8" aria-labelledby="page-title">
         <div class="flex flex-col gap-4 sm:gap-6">
-            {# Enhanced Mobile-First Title Section #}
+            {# Enhanced Mobile-First Title Section with Proper Heading #}
             <div class="text-center sm:text-left">
-                <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight">
+                <h1 id="page-title" class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight">
                     Theme Parks
                 </h1>
-                <p class="mt-1 sm:mt-2 text-base sm:text-lg text-gray-600 dark:text-gray-400">
+                <p class="mt-1 sm:mt-2 text-base sm:text-lg text-gray-600 dark:text-gray-400" id="page-description">
                     Discover amazing theme parks around the world
                 </p>
             </div>
             
-            {# Enhanced Mobile-First Quick Stats with Better Touch Targets #}
-            <div class="grid grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
-                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
-                    <div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.total_parks|default:0 }}</div>
+            {# Enhanced Mobile-First Quick Stats with Better Touch Targets and Landmarks #}
+            <section aria-labelledby="park-statistics" class="grid grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
+                <h2 id="park-statistics" class="sr-only">Park Statistics Summary</h2>
+                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="total-parks-stat" tabindex="0">
+                    <div id="total-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.total_parks|default:0 }} total parks in database">{{ filter_counts.total_parks|default:0 }}</div>
                     <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Total Parks</div>
                 </div>
-                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
-                    <div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.operating_parks|default:0 }}</div>
+                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="operating-parks-stat" tabindex="0">
+                    <div id="operating-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.operating_parks|default:0 }} currently operating parks">{{ filter_counts.operating_parks|default:0 }}</div>
                     <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Operating</div>
                 </div>
-                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50">
-                    <div class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white">{{ filter_counts.parks_with_coasters|default:0 }}</div>
+                <div class="text-center p-3 sm:p-4 bg-white/50 dark:bg-gray-800/50 rounded-lg border border-gray-200/50 dark:border-gray-700/50" role="img" aria-labelledby="coaster-parks-stat" tabindex="0">
+                    <div id="coaster-parks-stat" class="font-bold text-lg sm:text-xl lg:text-2xl text-gray-900 dark:text-white" aria-label="{{ filter_counts.parks_with_coasters|default:0 }} parks with roller coasters">{{ filter_counts.parks_with_coasters|default:0 }}</div>
                     <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">With Coasters</div>
                 </div>
-            </div>
+            </section>
         </div>
-    </div>
+    </header>
 
-    {# Enhanced Mobile-First Search and Filter Bar #}
-    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6 mb-6 sm:mb-8">
+    {# Enhanced Mobile-First Search and Filter Bar with Proper Landmarks #}
+    <section class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6 mb-6 sm:mb-8" aria-labelledby="search-filters-heading" role="search">
+        <h2 id="search-filters-heading" class="sr-only">Search and Filter Parks</h2>
         <div class="space-y-4 sm:space-y-6">
             {# Enhanced Mobile-First Main Search Row #}
             <div class="space-y-3 sm:space-y-0 sm:flex sm:flex-col lg:flex-row gap-4">
-                {# Enhanced Search Input with Better Mobile UX #}
-                <div class="flex-1">
+                {# Enhanced Search Input with Better Mobile UX and Form Landmark #}
+                <div class="flex-1" id="search-form">
+                    <label for="park-search" class="sr-only">Search parks by name, location, or features</label>
                     <c-enhanced_search 
                         placeholder="Search parks by name, location, or features..."
                         current_value="{{ search_query }}"
@@ -53,8 +64,8 @@
                     />
                 </div>
                 
-                {# Enhanced Mobile-First Controls Row with Better Touch Targets #}
-                <div class="flex items-center justify-between sm:justify-start gap-2 sm:gap-3">
+                {# Enhanced Mobile-First Controls Row with Better Touch Targets and Navigation #}
+                <nav class="flex items-center justify-between sm:justify-start gap-2 sm:gap-3" aria-label="View and sort controls">
                     {# Sort Controls with Mobile Optimization #}
                     <div class="flex-1 sm:flex-none min-w-0">
                         <c-sort_controls 
@@ -88,7 +99,7 @@
                         <span class="ml-1 sm:ml-2 hidden sm:inline">Filters</span>
                         <span class="sr-only sm:hidden" x-text="showFilters ? 'Hide filters' : 'Show filters'"></span>
                     </button>
-                </div>
+                </nav>
             </div>
 
             {# Enhanced Mobile-First Advanced Filters with Better Touch Interaction #}