Restructuring html and tabindices

src/assets/i18n/demo/demo-de.html

-<div id="demoContent" tabindex="3">
-  <h2>»Haben Sie Fragen?«</h2>
 
+  <h2 tabindex="0">»Haben Sie Fragen?«</h2>
+
+  <div tabindex="0">
   <p>Die klassische Vorlesung endet in der Regel mit: »Haben Sie Fragen?«. Und stets meldet sich niemand oder es fragen
     immer dieselben wenigen. Entweder traut sich im großen Hörsaal niemand oder die Fragen, die man im Verlauf der
     Vorlesung eigentlich stellen wollte, sind vergessen.</p>
@@ -21,11 +22,11 @@
     beantworten. Klar. Hier kommt der kollektive Tool-Aspekt zum Tragen: Jeder im Auditorium kann jede Frage bewerten,
     neudeutsch: up oder down voten. Die vom Auditorium am höchsten bewerteten Fragen kannst du sofort beantworten, die
     anderen, falls du es willst, später im Kursforum der Lernplattform.</p>
-
-  <h3>
+  </div>
+  <h2 tabindex="0">
     Das Besondere an »frag.jetzt«
-  </h3>
-
+  </h2>
+<div tabindex="0">
   <p>
     Die Lehrperson kann für zielführende und vorlesungsadäquate Fragen Bonuspunkte vergeben.
     Prämierte Fragen erhalten ein Stern-Icon und die Studentin oder der Student findet zu jedem erworbenen Stern
@@ -62,9 +63,9 @@
     Der Programmcode ist »Open Source Software« und kann auf GitHub eingesehen werden.
     »frag.jetzt« wird als kostenlose »Software as a Service« von der TransMIT GmbH betrieben, siehe Impressum.
   </p>
-
-  <h3>Handy-Nutzung im Hörsaal</h3>
-
+</div>
+  <h2 tabindex="0">Handy-Nutzung im Hörsaal</h2>
+<div tabindex="0">
   <p>
     Die Nutzung des Smartphones während der Vorlesung bringt natürlich ein hohes Ablenkungsrisiko mit sich.
     Wir haben aus unserer langjährigen Erfahrung mit Audience-Response-Systemen im Hörsaal gelernt
@@ -73,85 +74,85 @@
   </p>
 
   <ol>
-    <li>
-      Handy-Nutzung während der Vorlesung:
+    <li tabindex="0">
+      <p>Handy-Nutzung während der Vorlesung:</p>
       Eine Hilfskraft moderiert die Fragenliste vor Ort oder aus der Ferne.
       10 Minuten vor Ende der Vorlesung beantwortet die Lehrperson 2-3 Top-Fragen am Beamer.
     </li>
     <li>
-      Handy-Nutzung nur in der Pause:
+      <p>Handy-Nutzung nur in der Pause:</p>
       Die Lehrperson gibt den Sitzungs-Code in der Pause bekannt und moderiert die Fragen selbst.
       Nach der Pause beantwortet sie 2-3 Top-Fragen.
     </li>
     <li>
-      Keine Handy-Nutzung während der Vorlesung:
+     <p> Keine Handy-Nutzung während der Vorlesung:</p>
       Die Lehrperson erstellt eine neue Sitzung am Ende jeder Vorlesung.
       Die Studierenden können zuhause Fragen stellen und bewerten.
       Die Fragenliste moderiert eine Hilfskraft oder die Lehrperson selbst.
       In den ersten 10 Minuten der nächsten Vorlesung geht die Lehrperson auf 2-3 Top-Fragen ein.
     </li>
     <li>
-      Keine Handy-Nutzung während der Vorlesung:
+      <p>Keine Handy-Nutzung während der Vorlesung:</p>
       Die Lehrperson erstellt eine Sitzung für die gesamte Dauer des Kurses.
       Eine Hilfskraft moderiert die Fragenliste während des Semesters.
       Die Lehrperson markiert die relevanten Fragen und löscht alle anderen.
       Die Fragenliste dient so der Reflexion der Vorlesungsinhalte und zur Vorbereitung auf die Klausur.
     </li>
   </ol>
+</div>
+  <h2 tabindex =0>Info-Poster</h2>
 
-  <h2>Info-Poster</h2>
-
-  <img src="https://arsnova.thm.de/blog/wp-content/uploads/2020/01/frag_jetzt-scaled.jpg"
+  <img tabindex=0 src="https://arsnova.thm.de/blog/wp-content/uploads/2020/01/frag_jetzt-scaled.jpg"
        alt="Info-Poster zu frag.jetzt" width="100%">
 
-  <h2>Icons und Buttons</h2>
+  <h2 tabindex="0">Icons und Buttons</h2>
 
-  <p>Dozentensicht auf das Fragenboard:</p>
+  <p tabindex="0">Dozentensicht auf das Fragenboard:</p>
 
-  <img src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Fragen-Board.png"
+  <img  tabindex=0 src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Fragen-Board.png"
        alt="Screenshot einer Frage aus Dozentensicht" width="100%">
 
-  <p>Kopfleiste des Fra&shy;gen&shy;boards</p>
-  <ol>
-    <li>Zurück zur vorherigen Seite</li>
-    <li>Vollansicht mit Skalierungs&shy;optionen</li>
-    <li>Sitzung wird moderiert</li>
-    <li>QR-Code der Sitzung</li>
-    <li>Konto mit weiteren Optionen</li>
+  <p tabindex="0">Kopfleiste des Fra&shy;gen&shy;boards</p>
+  <ol tabindex="0">
+    <li>Zurück zur vorherigen Seite.</li>
+    <li>Vollansicht mit Skalierungs&shy;optionen.</li>
+    <li>Sitzung wird moderiert.</li>
+    <li>QR-Code der Sitzung.</li>
+    <li>Konto mit weiteren Optionen.</li>
   </ol>
 
-  <p>Werkzeugleiste des Fra&shy;gen&shy;boards</p>
-  <ol>
-    <li>Anzahl eingegangener Fragen</li>
-    <li>Fragenliste durchsuchen</li>
-    <li>Fragen sortieren</li>
-    <li>Fragen filtern</li>
-    <li>Fragenstrom anhalten</li>
-    <li>Frage stellen</li>
+  <p tabindex="0">Werkzeugleiste des Fra&shy;gen&shy;boards</p>
+  <ol tabindex="0">
+    <li>Anzahl eingegangener Fragen.</li>
+    <li>Fragenliste durchsuchen.</li>
+    <li>Fragen sortieren.</li>
+    <li>Fragen filtern.</li>
+    <li>Fragenstrom anhalten.</li>
+    <li>Frage stellen.</li>
   </ol>
 
-  <p>Werkzeugleiste einer Fragenkarte</p>
-  <ol>
-    <li>Zeitstempel der Frage</li>
-    <li>Frage besprechen</li>
-    <li>Frage kommentieren</li>
-    <li>Frage bejahen</li>
-    <li>Frage verneinen</li>
-    <li>Bonus vergeben</li>
-    <li>Frage löschen</li>
-    <li>Frage verbannen</li>
+  <p tabindex="0">Werkzeugleiste einer Fragenkarte</p>
+  <ol tabindex="0">
+    <li>Zeitstempel der Frage.</li>
+    <li>Frage besprechen.</li>
+    <li>Frage kommentieren.</li>
+    <li>Frage bejahen.</li>
+    <li>Frage verneinen.</li>
+    <li>Bonus vergeben.</li>
+    <li>Frage löschen.</li>
+    <li>Frage verbannen.</li>
   </ol>
 
 
-  <h2>Sitzungsverwaltung</h2>
+  <h2 tabindex="0">Sitzungsverwaltung</h2>
 
-  <p>Dozentensicht auf die Sitzung:</p>
+  <p tabindex="0">Dozentensicht auf die Sitzung:</p>
 
-  <img src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Settings-505x1024.png"
+  <img tabindex=0 src="https://arsnova.thm.de/blog/wp-content/uploads/2019/12/Settings-505x1024.png"
        alt="Screenshot der Optionen für die Sitzungsverwaltung" width="100%">
 
-  <p>Mit einem Klick auf das Zahnrad-Icon öffnest du die Verwaltungs&shy;optionen:</p>
-  <ol>
+  <p tabindex="0">Mit einem Klick auf das Zahnrad-Icon öffnest du die Verwaltungs&shy;optionen:</p>
+  <ol tabindex="0">
     <li>Sitzung: Hier kannst du den Namen der Sitzung ändern und eine Beschreibung hinzufügen.
       Für die Textformatierung steht dir <a href="https://de.wikipedia.org/wiki/Markdown" target="_blank">Markdown</a> zur Verfügung.
       Hier ist auch der Ort, um die Sitzung mit allen Fragen und Bewertungen zu löschen.
@@ -179,7 +180,7 @@
     </li>
   </ol>
 
-  <h2>Das Rollenkonzept von »frag.jetzt«</h2>
+  <h2 tabindex="0">Das Rollenkonzept von »frag.jetzt«</h2>
 
   <div class="video">
     <div class="videoWrapper">
@@ -249,7 +250,7 @@
       Impressum.</p>
   </div>
 
-  <h2>Fragen an die Entwickler</h2>
+  <h2 tabindex="0">Fragen an die Entwickler</h2>
 
   <p>
     Verwende den Sitzungs-Code 11 22 33 44 für Fragen an die Entwickler.
@@ -257,9 +258,9 @@
     Offene Fragen beantworten wir im <a href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova-Blog</a>.
   </p>
 
-  <h2>»Gender«-gerechte Sprache</h2>
+  <h2 tabindex="0">»Gender«-gerechte Sprache</h2>
 
-  <p>
+  <p tabindex="0">
     Screen Reader für Sehbehinderte und Blinde,
     wie <a
     href="https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=de"
@@ -271,4 +272,4 @@
                                  rel="noreferrer">Generische
     Maskulinum</a> für Texte und Labels in der App.
   </p>
-</div>
+

src/assets/i18n/imprint/imprint.scss

@@ -11,3 +11,10 @@ img {
   background-color: white;
   border: 3px solid var(--dialog);
 }
+
+h2 {
+  font-size: 19px !important;
+  line-height: 1.1em !important;
+  margin-bottom: 8px !important;
+  text-transform: none !important;
+}