feat: add manual testing slide

cas-fe · Nov 29, 2023 · edfa9fa · edfa9fa
1 parent 395a67d
commit edfa9fa
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -75,6 +75,8 @@
           <section data-markdown="slides/visual-contrast-tools.md"></section>
         </section>
 
+        <section data-markdown="slides/manual.md" id="manual"></section>
+
         <section>
           <section data-markdown="slides/automation-intro.md" id="automation"></section>
           <section data-markdown="slides/automation-example.md"></section>

diff --git a/media/accessibility-tree.png b/media/accessibility-tree.png
diff --git a/slides/automation-intro.md b/slides/automation-intro.md
@@ -1,4 +1,4 @@
-## 6. Automatisches Testing
+## 7. Automatisches Testing
 
 Mittels **statischer Code-Analyse** können sowohl Markup-Fehler als auch visuelle Probleme wie mangelnde Kontraste identifiziert werden.
 

diff --git a/slides/demos.md b/slides/demos.md
@@ -1,3 +1,3 @@
-## 9. Demo wichtiger Webseiten
+## 10. Demo wichtiger Webseiten
 
 ![Disaster Girl Meme: Girl smirking with burning building in background](media/fire.png) <!-- .element class="custom-fire" -->
diff --git a/slides/intro-agenda.md b/slides/intro-agenda.md
@@ -5,7 +5,8 @@
 3. [WCAG als Basis](#/wcag)
 4. [WAI-ARIA für interaktive Elemente](#/aria)
 5. [Visuelle Aspekte](#/visual)
-6. [Automatisches Testing](#/automation)
-7. [Accessibility Overlays](#/overlays)
-8. [Projektvorgehen](#/project-workflow)
-9. [Demo wichtiger Webseiten](#/demos)
+6. [Manuelles Testing](#/manual)
+7. [Automatisches Testing](#/automation)
+8. [Accessibility Overlays](#/overlays)
+9. [Projektvorgehen](#/project-workflow)
+10. [Demo wichtiger Webseiten](#/demos)
diff --git a/slides/manual.md b/slides/manual.md
@@ -0,0 +1,8 @@
+## 6. Manuelles Testing
+
+Wichtige Hilfsmittel <em>neben</em> Screenreader:
+
+- **Tastatur**: Kann die Webseite/Applikation ohne Maus bedient werden?
+- **Browser Developer Tools**: Wie sieht der Accessibility Tree aus?
+
+![Chrome Dev Tools Accessibility Tree](media/accessibility-tree.png)
diff --git a/slides/overlays.md b/slides/overlays.md
@@ -1,4 +1,4 @@
-## 7. Accessibility Overlays
+## 8. Accessibility Overlays
 
 [![accessiBe Startseite](media/accessibe.png)](https://accessibe.com) <!-- .element class="custom-accessibe" -->
 

diff --git a/slides/project-workflow.md b/slides/project-workflow.md
@@ -1,4 +1,4 @@
-## 8. Projektvorgehen
+## 9. Projektvorgehen
 
 <div class="fragment">