feat: update slides

index.html

@@ -64,8 +64,9 @@
           <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-helpers.md"></section>
           <section data-markdown="slides/aria-guide.md"></section>
+          <section data-markdown="slides/aria-platform-native.md"></section>
+          <section data-markdown="slides/aria-platform.md"></section>
         </section>
 
         <section>

slides/aria-frameworks.md

@@ -6,4 +6,4 @@
 - Positivbeispiele:
   - [Reach UI](https://reach.tech)
   - [BootstrapVue](https://bootstrap-vue.org)
-  - [Angular Material](https://material.angular.io) (Spielraum nach oben)
+  - [Angular Material](https://material.angular.io)

slides/aria-platform-native.md

@@ -0,0 +1,17 @@
+## Native Elemente FTW!
+
+Beispiele, wo **keine Library** notwendig ist:
+
+- Dialog/Modal: [<dialog>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+- 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))
+- Sichtbarer Fokus: [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
+
+_Beinahe_:
+
+- Carousel: [CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap)
+
+_Bald_:
+
+- Tooltip: [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) & [CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)

slides/aria-platform.md

@@ -0,0 +1,4 @@
+## Learn the platform
+
+- Zeit, welche wir in das Lernen der Plattform investieren, ist **nachhaltig** investiert.
+- Libraries und Frameworks sind kurzlebig und plattform-nativen Lösungen **immer unterlegen**.

slides/contact.md

@@ -2,8 +2,7 @@
 
 ### ![Werner](media/werner.png) <!-- .element class="custom-avatar" --> Werner Hänggi
 
-[[email protected]](mailto:[email protected]) –
-[LinkedIn](https://linkedin.com/in/werner-h%C3%A4nggi-716718145/)
+[[email protected]](mailto:[email protected])
 
 ### ![Thomas](media/thomas.png) <!-- .element class="custom-avatar" --> Thomas Jaggi
 

slides/why-http-archive.md

@@ -1,12 +1,12 @@
 ## Wie barrierefrei ist das Web?
 
-Auszug aus [Auswertung des HTTP Archive für 2022](https://almanac.httparchive.org/en/2022/accessibility) (8.5 Mio Webseiten):
+Auszug aus [Auswertung des HTTP Archive für 2024](https://almanac.httparchive.org/en/2024/accessibility) (17 Mio Webseiten):
 
 ![Almanac Logo](media/http-archive.png)
 
 <!-- .element class="custom-right" -->
 
-- **3/4** der Seiten haben **ungenügenden Farbkontrast**.
+- **2/3** der Seiten haben **ungenügenden Farbkontrast**.
 - **1/4** der Seiten versucht, Zooming auf Mobile zu deaktivieren.
-- **1/2** der Seiten hat **Bilder ohne Alternativtexte**.
+- **1/3** der Bilder haben **keinen Alternativtext**.
 - **2/3** der Seiten haben **Formularfelder ohne Labels**.

slides/why-impairments-you.md

@@ -1,3 +1,5 @@
+<!-- .element class="custom-disabilities" -->
+
 ## Nicht alle Einschränkungen sind permanent
 
-[![Grafik aus dem Microsoft Inclusive Design Toolkit, welche den Unterschied zwischen permanenten, temporären und situationsbedingten Einschränkungen aufzeigt](media/inclusive-design-toolkit.jpg)](https://inclusive.microsoft.design/) <!-- .element class="custom-inclusive-design-toolkit" -->
+[![Grafik aus dem Microsoft Inclusive Design Toolkit, welche den Unterschied zwischen permanenten, temporären und situationsbedingten Einschränkungen aufzeigt](media/inclusive-design-toolkit.jpg)](https://inclusive.microsoft.design/)

src/fonts.css

@@ -27,3 +27,13 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
     U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@font-face {
+  font-family: "Merriweather";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url(../media/fonts/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvzDP3WG.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/index.css

@@ -149,8 +149,7 @@
   vertical-align: middle;
 }
 
-.reveal .custom-inclusive-design-toolkit img {
-  display: block;
-  max-height: 50vh;
-  margin: 0 auto;
+.reveal .custom-disabilities.present {
+  display: grid !important;
+  grid-template-columns: repeat(2, 1fr);
 }