From ea3e9e112e68a7b693cef3b5fb21e23be89427ec Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Wed, 4 Dec 2024 15:57:08 +0100 Subject: [PATCH] feat: optimize slides order --- index.html | 22 +++++++++++----------- slides/aria-limits.md | 2 +- slides/aria-platform-native.md | 2 +- slides/automation-example.md | 8 +++++++- slides/automation-intro.md | 2 +- slides/demos.md | 2 +- slides/intro-agenda.md | 15 +++++++++------ slides/manual.md | 2 +- slides/overlays.md | 2 +- slides/project-workflow.md | 2 +- slides/visual-intro.md | 2 +- 11 files changed, 35 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index c89e918..3b45b67 100644 --- a/index.html +++ b/index.html @@ -59,21 +59,14 @@
-
-
-
-
+
- - -
-
-
-
-
+ +
+
@@ -95,6 +88,13 @@
+ +
+
+
+
+
+
diff --git a/slides/aria-limits.md b/slides/aria-limits.md index 6e53003..c3608c6 100644 --- a/slides/aria-limits.md +++ b/slides/aria-limits.md @@ -7,7 +7,7 @@ ```html ``` - - Do-it-yourself-Variante: + - [Do-it-yourself-Variante](https://cas-fe.github.io/Accessibility/demos/aria/button-accessible.html): ```html I'm a button, too! diff --git a/slides/aria-platform-native.md b/slides/aria-platform-native.md index 7c6d655..9065b16 100644 --- a/slides/aria-platform-native.md +++ b/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)) diff --git a/slides/automation-example.md b/slides/automation-example.md index 82e4ab8..5e4a349 100644 --- a/slides/automation-example.md +++ b/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. + +
+ +- _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/) + +
diff --git a/slides/automation-intro.md b/slides/automation-intro.md index 41650cd..77f0b38 100644 --- a/slides/automation-intro.md +++ b/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. diff --git a/slides/demos.md b/slides/demos.md index b7ece0b..7830453 100644 --- a/slides/demos.md +++ b/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) diff --git a/slides/intro-agenda.md b/slides/intro-agenda.md index c965d48..b02c1d3 100644 --- a/slides/intro-agenda.md +++ b/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) diff --git a/slides/manual.md b/slides/manual.md index f919edc..45ce301 100644 --- a/slides/manual.md +++ b/slides/manual.md @@ -1,4 +1,4 @@ -## 6. Manuelles Testing +## 5. Manuelles Testing Wichtige Hilfsmittel neben Screenreader: diff --git a/slides/overlays.md b/slides/overlays.md index bdbd845..cdb0728 100644 --- a/slides/overlays.md +++ b/slides/overlays.md @@ -1,4 +1,4 @@ -## 8. Accessibility Overlays +## 7. Accessibility Overlays [![accessiBe Startseite](media/accessibe.png)](https://accessibe.com) diff --git a/slides/project-workflow.md b/slides/project-workflow.md index 9813bb0..bc11ee8 100644 --- a/slides/project-workflow.md +++ b/slides/project-workflow.md @@ -1,4 +1,4 @@ -## 9. Projektvorgehen +## 8. Projektvorgehen
diff --git a/slides/visual-intro.md b/slides/visual-intro.md index 02de1c8..876d8db 100644 --- a/slides/visual-intro.md +++ b/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.»