feat: optimize slides order

index.html

@@ -59,21 +59,14 @@
           <section data-markdown="slides/aria-roles.md"></section>
           <section data-markdown="slides/aria-states.md"></section>
           <section data-markdown="slides/demos-autosuggest.md"></section>
-          <section data-markdown="slides/demos-modal.md"></section>
           <!-- <section data-markdown="slides/demos-tabs.md"></section> -->
           <section data-markdown="slides/aria-limits.md"></section>
-          <section data-markdown="slides/demos-button.md"></section>
-          <section data-markdown="slides/aria-frameworks.md"></section>
-          <section data-markdown="slides/aria-guide.md"></section>
+          <!-- <section data-markdown="slides/demos-button.md"></section> -->
           <section data-markdown="slides/aria-platform-native.md"></section>
           <section data-markdown="slides/aria-platform.md"></section>
-        </section>
-
-        <section>
-          <section data-markdown="slides/visual-intro.md" id="visual"></section>
-          <section data-markdown="slides/visual-contrast.md"></section>
-          <section data-markdown="slides/demos-visual.md"></section>
-          <section data-markdown="slides/visual-contrast-tools.md"></section>
+          <!-- <section data-markdown="slides/demos-modal.md"></section> -->
+          <section data-markdown="slides/aria-frameworks.md"></section>
+          <section data-markdown="slides/aria-guide.md"></section>
         </section>
 
         <section data-markdown="slides/manual.md" id="manual"></section>
@@ -95,6 +88,13 @@
         </section>
 
         <section data-markdown="slides/contact.md" id="contact"></section>
+
+        <section>
+          <section data-markdown="slides/visual-intro.md" id="visual"></section>
+          <section data-markdown="slides/visual-contrast.md"></section>
+          <section data-markdown="slides/demos-visual.md"></section>
+          <section data-markdown="slides/visual-contrast-tools.md"></section>
+        </section>
       </div>
     </div>
 

slides/aria-limits.md

@@ -7,7 +7,7 @@
     ```html
     <button type="button">I'm a button!</button>
     ```
-  - Do-it-yourself-Variante:
+  - [Do-it-yourself-Variante](https://cas-fe.github.io/Accessibility/demos/aria/button-accessible.html):
 
     ```html
     <span class="button" role="button" tabindex="0">I'm a button, too!</span>

slides/aria-platform-native.md

@@ -2,7 +2,7 @@
 
 Beispiele, wo **keine Library** notwendig ist:
 
-- Dialog/Modal: [<dialog>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+- Dialog/Modal: [<dialog>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) → [schlechter Eigenbau](https://cas-fe.github.io/Accessibility/demos/aria/modal-inaccessible.html) vs [nativ](https://cas-fe.github.io/Accessibility/demos/aria/modal-accessible-native.html)
 - Accordion: [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
 - Input: [<input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
 - Select: [<select>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) (bald [flexibel](https://developer.chrome.com/blog/rfc-customizable-select))

slides/automation-example.md

@@ -1,8 +1,14 @@
 ## Automatisches Testing: Trefferquote
 
 - Beispiel [inaccessible table](https://cas-fe.github.io/Accessibility/demos/table/table-inaccessible.html):
-  - WAVE und HTML_CodeSniffer erkennen _Layout table_.
+  - WAVE und HTML*CodeSniffer erkennen \_Layout table*.
   - [Tenon](https://tenon.io) (deprecated) warnte zusätzlich _Implicit table headers_.
   - Axe ist [happy](https://github.com/dequelabs/axe-core/issues/3011#issuecomment-863283657).
 - Beispiel [inaccessible form](https://cas-fe.github.io/Accessibility/demos/form/form-inaccessible.html):
   - axe, WAVE, HTML_CodeSniffer und Tenon finden alle Felder ohne Label.
+
+<div class="fragment">
+
+- _Grenzen_: [Building the most inaccessible site possible with a perfect Lighthouse score](https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/)
+
+</div>

slides/automation-intro.md

@@ -1,4 +1,4 @@
-## 7. Automatisches Testing
+## 6. Automatisches Testing
 
 Mittels **statischer Code-Analyse** können sowohl Markup-Fehler als auch visuelle Probleme wie mangelnde Kontraste identifiziert werden.
 

slides/demos.md

@@ -1,3 +1,3 @@
-## 10. Demo wichtiger Webseiten
+## 9. Demo wichtiger Webseiten
 
 ![Disaster Girl Meme: Girl smirking with burning building in background](media/fire.png) <!-- .element class="custom-fire" -->

slides/intro-agenda.md

@@ -4,9 +4,12 @@
 2. [Zugang mit Screenreadern](#/screenreader)
 3. [WCAG als Basis](#/wcag)
 4. [WAI-ARIA für interaktive Elemente](#/aria)
-5. [Visuelle Aspekte](#/visual)
-6. [Manuelles Testing](#/manual)
-7. [Automatisches Testing](#/automation)
-8. [Accessibility Overlays](#/overlays)
-9. [Projektvorgehen](#/project-workflow)
-10. [Demo wichtiger Webseiten](#/demos)
+5. [Manuelles Testing](#/manual)
+6. [Automatisches Testing](#/automation)
+7. [Accessibility Overlays](#/overlays)
+8. [Projektvorgehen](#/project-workflow)
+9. [Demo wichtiger Webseiten](#/demos)
+
+Anhang:
+
+1. [Visuelle Aspekte](#/visual)

slides/manual.md

@@ -1,4 +1,4 @@
-## 6. Manuelles Testing
+## 5. Manuelles Testing
 
 Wichtige Hilfsmittel <em>neben</em> Screenreader:
 

slides/overlays.md

@@ -1,4 +1,4 @@
-## 8. Accessibility Overlays
+## 7. Accessibility Overlays
 
 [![accessiBe Startseite](media/accessibe.png)](https://accessibe.com) <!-- .element class="custom-accessibe" -->
 

slides/project-workflow.md

@@ -1,4 +1,4 @@
-## 9. Projektvorgehen
+## 8. Projektvorgehen
 
 <div class="fragment">
 

slides/visual-intro.md

@@ -1,4 +1,4 @@
-## 5. Visuelle Aspekte
+## Anhang 1: Visuelle Aspekte
 
 Wichtige WCAG-Richtlinie: «[1.4 Distinguishable](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable): Make it easier for users to see and hear content including separating foreground from background.»