Finale Verbesserung Prototyp Seite

src/main/resources/static/css/prototype.css

@@ -129,14 +129,16 @@
 
 .tutorial-section p {
     margin: 0 0 0.8rem 0;
-    line-height: 1.6;
+    line-height: 1.5;
     color: #555;
+    font-size: 1.1rem;
 }
 
 .tutorial-section ul {
     margin: 0;
     padding-left: 1.5rem;
     color: #555;
+    font-size: 1.1rem;
 }
 
 .tutorial-section li {

src/main/resources/templates/prototype.html

@@ -11,11 +11,11 @@
 </head>
 <body>
     <!-- Tutorial Modal -->
-    <div id="tutorialModal" class="tutorial-modal">
+    <div id="tutorialModal" class="tutorial-modal" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
         <div class="modal-content">
             <div class="modal-header">
-                <h2><i class="fas fa-graduation-cap"></i> Anleitung zur Vergleichsansicht</h2>
-                <button class="close" onclick="closeTutorial()">&times;</button>
+                <h2 id="modal-title"><i class="fas fa-graduation-cap"></i> Anleitung zur Vergleichsansicht</h2>
+                <button class="close" onclick="closeTutorial()" aria-label="Tutorial schließen">&times;</button>
             </div>
             <div class="modal-body">
                 <div class="video-container">
@@ -74,7 +74,7 @@
                     <div class="kunde-logo-placeholder"></div>
                 </div>
             </div>
-            <div class="page-title" role="heading" aria-level="2" th:text="${pageTitle ?: 'Vergleich'}">Prototyp</div>
+            <h1 class="page-title" th:text="${pageTitle ?: 'Vergleich'}">Prototyp</h1>
         </div>
     </header>
     
@@ -83,7 +83,7 @@
             <nav class="navigation">
                 <h3>Navigation</h3>
                 <ul class="nav-links">
-                    <li><a href="#" id="nav-hhm" class="nav-link active" onclick="switchView('hhm')">Haushaltsmitglieder/Einkommen</a></li>
+                    <li><a href="#" id="nav-hhm" class="nav-link active" aria-current="page" onclick="switchView('hhm')">Haushaltsmitglieder/Einkommen</a></li>
                     <li><a href="#" id="nav-miete" class="nav-link" onclick="switchView('miete')">Miete</a></li>
                 </ul>
             </nav>
@@ -98,8 +98,8 @@
         <main class="main-content">
             <div class="screenshot-container">
                 <div class="watermark">Bildschirmfoto</div>
-                <button class="compare-button" onclick="openCompareView()"><i class="fa-solid fa-code-compare"></i> Vergleichsansicht</button>
-                <button class="compare-button-bottom" onclick="openCompareView()"><i class="fa-solid fa-code-compare"></i> Vergleichsansicht</button>
+                <button class="compare-button" onclick="openCompareView()" aria-label="Vergleichsansicht öffnen"><i class="fa-solid fa-code-compare"></i> Vergleichsansicht</button>
+                <button class="compare-button-bottom" onclick="openCompareView()" aria-label="Vergleichsansicht öffnen"><i class="fa-solid fa-code-compare"></i> Vergleichsansicht</button>
                 <div class="screenshot" id="screenshot">
                     <img src="/images/hhm-einkommen-diwo.jpg" alt="Screenshot Haushaltsmitglieder/Einkommen" id="screenshotImage">
                 </div>