diff --git a/index.html b/index.html index e5a58f8..c89e918 100644 --- a/index.html +++ b/index.html @@ -64,8 +64,9 @@
-
+
+
diff --git a/media/fonts/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvzDP3WG.woff2 b/media/fonts/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvzDP3WG.woff2 new file mode 100644 index 0000000..6352779 Binary files /dev/null and b/media/fonts/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvzDP3WG.woff2 differ diff --git a/slides/aria-frameworks.md b/slides/aria-frameworks.md index 78797c4..0e20e8a 100644 --- a/slides/aria-frameworks.md +++ b/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) diff --git a/slides/aria-helpers.md b/slides/aria-helpers.md deleted file mode 100644 index dc3aee3..0000000 --- a/slides/aria-helpers.md +++ /dev/null @@ -1,8 +0,0 @@ -## Ally.js: Nützliche Accessibility-Helpers - -- “Focus trapping” ist in vielen Situation wichtig: - - [A11y Dialog](https://github.com/KittyGiraudel/a11y-dialog) (vorherige Demo) kümmert sich selber darum - - [Ally.js](https://allyjs.io/api/maintain/tab-focus.html) hilft bei Custom-Modulen -- Weitere hilfreiche Features: - - [Unterscheidung](https://allyjs.io/api/style/focus-source.html) zwischen Maus und Tastatur als “Focus source” - - [Detektierung](https://allyjs.io/api/is/visible.html), ob ein Element sichtbar ist diff --git a/slides/aria-platform-native.md b/slides/aria-platform-native.md new file mode 100644 index 0000000..7c6d655 --- /dev/null +++ b/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) diff --git a/slides/aria-platform.md b/slides/aria-platform.md new file mode 100644 index 0000000..ab5252b --- /dev/null +++ b/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**. diff --git a/slides/contact.md b/slides/contact.md index f620cd9..21845ba 100644 --- a/slides/contact.md +++ b/slides/contact.md @@ -2,8 +2,7 @@ ### ![Werner](media/werner.png) Werner Hänggi -[werner.haenggi@adnovum.ch](mailto:werner.haenggi@adnovum.ch) – -[LinkedIn](https://linkedin.com/in/werner-h%C3%A4nggi-716718145/) +[werner.haenggi@adnovum.ch](mailto:werner.haenggi@adnovum.ch) ### ![Thomas](media/thomas.png) Thomas Jaggi diff --git a/slides/why-http-archive.md b/slides/why-http-archive.md index 67aa0a3..52a0642 100644 --- a/slides/why-http-archive.md +++ b/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) -- **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**. diff --git a/slides/why-impairments-you.md b/slides/why-impairments-you.md index 8b49c64..63dcaf3 100644 --- a/slides/why-impairments-you.md +++ b/slides/why-impairments-you.md @@ -1,3 +1,5 @@ + + ## 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/) +[![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/) diff --git a/src/fonts.css b/src/fonts.css index facfaea..b390851 100644 --- a/src/fonts.css +++ b/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; +} diff --git a/src/index.css b/src/index.css index 4d84f1a..ff758fa 100644 --- a/src/index.css +++ b/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); }