├── .nojekyll ├── .gitignore ├── .revealjs ├── assets │ └── avatar.jpg ├── theme │ ├── fonts │ │ ├── lato-v23-latin-900.woff2 │ │ ├── lato-v23-latin-italic.woff2 │ │ ├── lato-v23-latin-regular.woff2 │ │ ├── nunito-v16-latin-700.woff2 │ │ ├── oswald-v48-latin-500.woff2 │ │ ├── lato-v23-latin-900italic.woff2 │ │ ├── nunito-v16-latin-italic.woff2 │ │ ├── nunito-v16-latin-regular.woff2 │ │ └── ubuntu-mono-v15-latin-regular.woff2 │ ├── dk-dark.css │ └── dk-light.css ├── reset.css └── plugin │ ├── theme-toggle │ └── theme-toggle.js │ └── search │ └── search.js ├── accessible-web ├── resources │ ├── assets │ │ ├── video │ │ │ ├── video-demo-subtitles.vtt │ │ │ ├── video-demo.mp4 │ │ │ ├── video-demo-cc.vtt │ │ │ └── video-demo-ad.vtt │ │ ├── img │ │ │ ├── banner.jpg │ │ │ ├── coward.jpg │ │ │ ├── article-1.jpg │ │ │ ├── article-2.jpg │ │ │ ├── article-3.jpg │ │ │ └── filter.svg │ │ ├── css │ │ │ ├── base.css │ │ │ ├── highlight.css │ │ │ └── examples.css │ │ └── js │ │ │ ├── popper.min.js │ │ │ └── tippy.min.js │ ├── index.html │ ├── live-region.html │ ├── video.html │ ├── custom-component.html │ ├── labeling.html │ ├── example-good.html │ ├── color-blind.html │ └── example-bad.html ├── assets │ ├── alt-text.png │ ├── personas.png │ ├── color-blind.png │ ├── label-input.png │ ├── autocomplete.png │ ├── contrast-ratio.png │ ├── stairs-bicycle.jpg │ ├── stairs-trolley.jpg │ ├── video-example.mp4 │ ├── video-poster.jpg │ ├── website-mockup.png │ ├── chrome-contrast.png │ ├── intro-companies.png │ ├── picture-new-york.jpg │ ├── video-screenshot.png │ ├── chrome-lighthouse.png │ ├── construction-fail-1.jpg │ ├── construction-fail-2.jpg │ ├── software-lifecycle.png │ ├── stairs-wheelchair.jpg │ ├── stairs-baby-stroller.jpg │ ├── wai-aria-authoring-practices.png │ └── video-track-cc.vtt └── index.html ├── atomic-design ├── assets │ ├── buttons.jpg │ ├── atom-link.png │ ├── book-cover.png │ ├── overview.png │ ├── stakeholders.png │ ├── boolean-widgets.png │ ├── composability.png │ ├── design-system.png │ ├── molecule-navigation.png │ └── software-lifecycle.png ├── resources │ └── atomic-design.html └── index.html ├── functional-css └── assets │ ├── attention.jpg │ ├── css-bears.mp4 │ ├── dev-tools.png │ ├── good-css.png │ ├── author-bio.jpg │ ├── css-awesome.png │ ├── mythbusters.jpg │ ├── performance.png │ ├── readability.png │ ├── reusability.png │ ├── author-bio-bem.jpg │ ├── css-specifity.png │ ├── side-effects.png │ ├── tailwind-css.mp4 │ ├── autocomplete-css.png │ ├── bio-and-article.jpg │ ├── malcolm-reynolds.mp4 │ ├── no-side-effects.png │ ├── autocomplete-html.png │ ├── bio-and-article-bem.jpg │ ├── bio-and-article-acss.jpg │ ├── html-css-js-connected.png │ └── reusability.svg ├── dev-ninja-tools ├── build.sh ├── handout.md └── handout.html └── README.md /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### IDE ### 2 | 3 | /.idea 4 | *.iml 5 | -------------------------------------------------------------------------------- /.revealjs/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/assets/avatar.jpg -------------------------------------------------------------------------------- /accessible-web/resources/assets/video/video-demo-subtitles.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00:04.300 --> 00:00:07.000 4 | Hello? 5 | -------------------------------------------------------------------------------- /atomic-design/assets/buttons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/buttons.jpg -------------------------------------------------------------------------------- /accessible-web/assets/alt-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/alt-text.png -------------------------------------------------------------------------------- /accessible-web/assets/personas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/personas.png -------------------------------------------------------------------------------- /atomic-design/assets/atom-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/atom-link.png -------------------------------------------------------------------------------- /atomic-design/assets/book-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/book-cover.png -------------------------------------------------------------------------------- /atomic-design/assets/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/overview.png -------------------------------------------------------------------------------- /functional-css/assets/attention.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/attention.jpg -------------------------------------------------------------------------------- /functional-css/assets/css-bears.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/css-bears.mp4 -------------------------------------------------------------------------------- /functional-css/assets/dev-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/dev-tools.png -------------------------------------------------------------------------------- /functional-css/assets/good-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/good-css.png -------------------------------------------------------------------------------- /accessible-web/assets/color-blind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/color-blind.png -------------------------------------------------------------------------------- /accessible-web/assets/label-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/label-input.png -------------------------------------------------------------------------------- /atomic-design/assets/stakeholders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/stakeholders.png -------------------------------------------------------------------------------- /functional-css/assets/author-bio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/author-bio.jpg -------------------------------------------------------------------------------- /functional-css/assets/css-awesome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/css-awesome.png -------------------------------------------------------------------------------- /functional-css/assets/mythbusters.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/mythbusters.jpg -------------------------------------------------------------------------------- /functional-css/assets/performance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/performance.png -------------------------------------------------------------------------------- /functional-css/assets/readability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/readability.png -------------------------------------------------------------------------------- /functional-css/assets/reusability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/reusability.png -------------------------------------------------------------------------------- /accessible-web/assets/autocomplete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/autocomplete.png -------------------------------------------------------------------------------- /accessible-web/assets/contrast-ratio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/contrast-ratio.png -------------------------------------------------------------------------------- /accessible-web/assets/stairs-bicycle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/stairs-bicycle.jpg -------------------------------------------------------------------------------- /accessible-web/assets/stairs-trolley.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/stairs-trolley.jpg -------------------------------------------------------------------------------- /accessible-web/assets/video-example.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/video-example.mp4 -------------------------------------------------------------------------------- /accessible-web/assets/video-poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/video-poster.jpg -------------------------------------------------------------------------------- /accessible-web/assets/website-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/website-mockup.png -------------------------------------------------------------------------------- /atomic-design/assets/boolean-widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/boolean-widgets.png -------------------------------------------------------------------------------- /atomic-design/assets/composability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/composability.png -------------------------------------------------------------------------------- /atomic-design/assets/design-system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/design-system.png -------------------------------------------------------------------------------- /functional-css/assets/author-bio-bem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/author-bio-bem.jpg -------------------------------------------------------------------------------- /functional-css/assets/css-specifity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/css-specifity.png -------------------------------------------------------------------------------- /functional-css/assets/side-effects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/side-effects.png -------------------------------------------------------------------------------- /functional-css/assets/tailwind-css.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/tailwind-css.mp4 -------------------------------------------------------------------------------- /accessible-web/assets/chrome-contrast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/chrome-contrast.png -------------------------------------------------------------------------------- /accessible-web/assets/intro-companies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/intro-companies.png -------------------------------------------------------------------------------- /accessible-web/assets/picture-new-york.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/picture-new-york.jpg -------------------------------------------------------------------------------- /accessible-web/assets/video-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/video-screenshot.png -------------------------------------------------------------------------------- /functional-css/assets/autocomplete-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/autocomplete-css.png -------------------------------------------------------------------------------- /functional-css/assets/bio-and-article.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/bio-and-article.jpg -------------------------------------------------------------------------------- /functional-css/assets/malcolm-reynolds.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/malcolm-reynolds.mp4 -------------------------------------------------------------------------------- /functional-css/assets/no-side-effects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/no-side-effects.png -------------------------------------------------------------------------------- /accessible-web/assets/chrome-lighthouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/chrome-lighthouse.png -------------------------------------------------------------------------------- /accessible-web/assets/construction-fail-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/construction-fail-1.jpg -------------------------------------------------------------------------------- /accessible-web/assets/construction-fail-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/construction-fail-2.jpg -------------------------------------------------------------------------------- /accessible-web/assets/software-lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/software-lifecycle.png -------------------------------------------------------------------------------- /accessible-web/assets/stairs-wheelchair.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/stairs-wheelchair.jpg -------------------------------------------------------------------------------- /atomic-design/assets/molecule-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/molecule-navigation.png -------------------------------------------------------------------------------- /atomic-design/assets/software-lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/atomic-design/assets/software-lifecycle.png -------------------------------------------------------------------------------- /functional-css/assets/autocomplete-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/autocomplete-html.png -------------------------------------------------------------------------------- /functional-css/assets/bio-and-article-bem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/bio-and-article-bem.jpg -------------------------------------------------------------------------------- /.revealjs/theme/fonts/lato-v23-latin-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/lato-v23-latin-900.woff2 -------------------------------------------------------------------------------- /accessible-web/assets/stairs-baby-stroller.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/stairs-baby-stroller.jpg -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/img/banner.jpg -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/coward.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/img/coward.jpg -------------------------------------------------------------------------------- /functional-css/assets/bio-and-article-acss.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/bio-and-article-acss.jpg -------------------------------------------------------------------------------- /functional-css/assets/html-css-js-connected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/functional-css/assets/html-css-js-connected.png -------------------------------------------------------------------------------- /.revealjs/theme/fonts/lato-v23-latin-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/lato-v23-latin-italic.woff2 -------------------------------------------------------------------------------- /.revealjs/theme/fonts/lato-v23-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/lato-v23-latin-regular.woff2 -------------------------------------------------------------------------------- /.revealjs/theme/fonts/nunito-v16-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/nunito-v16-latin-700.woff2 -------------------------------------------------------------------------------- /.revealjs/theme/fonts/oswald-v48-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/oswald-v48-latin-500.woff2 -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/article-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/img/article-1.jpg -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/article-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/img/article-2.jpg -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/article-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/img/article-3.jpg -------------------------------------------------------------------------------- /.revealjs/theme/fonts/lato-v23-latin-900italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/lato-v23-latin-900italic.woff2 -------------------------------------------------------------------------------- /.revealjs/theme/fonts/nunito-v16-latin-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/nunito-v16-latin-italic.woff2 -------------------------------------------------------------------------------- /.revealjs/theme/fonts/nunito-v16-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/nunito-v16-latin-regular.woff2 -------------------------------------------------------------------------------- /accessible-web/resources/assets/video/video-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/resources/assets/video/video-demo.mp4 -------------------------------------------------------------------------------- /accessible-web/assets/wai-aria-authoring-practices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/accessible-web/assets/wai-aria-authoring-practices.png -------------------------------------------------------------------------------- /.revealjs/theme/fonts/ubuntu-mono-v15-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darekkay/presentations/HEAD/.revealjs/theme/fonts/ubuntu-mono-v15-latin-regular.woff2 -------------------------------------------------------------------------------- /accessible-web/assets/video-track-cc.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00:00.200 --> 00:00:04.000 4 | Suspenseful music playing. Door creaking. 5 | 6 | 00:00:04.300 --> 00:00:07.000 7 | Female voice: Hello? 8 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/video/video-demo-cc.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00:00.200 --> 00:00:04.000 4 | Suspenseful music playing. Door creaking. 5 | 6 | 00:00:04.300 --> 00:00:07.000 7 | Female voice: Hello? 8 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/video/video-demo-ad.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00:00.000 --> 00:00:01.500 4 | An old door opens. 5 | 6 | 00:00:02.000 --> 00:00:04.000 7 | A decayed room in an abandoned building. 8 | 9 | 00:00:06.000 --> 00:00:08.000 10 | Sunlight shines through a window. 11 | -------------------------------------------------------------------------------- /dev-ninja-tools/build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # Settings 4 | TITLE="Dev Ninja Tools" 5 | PARSER=gfm 6 | 7 | # Delete build files 8 | rm handout.html 9 | 10 | # Build handout 11 | pandoc \ 12 | handout.md \ 13 | --from $PARSER \ 14 | --to html \ 15 | --output handout.html \ 16 | --metadata title="$TITLE" \ 17 | --standalone \ 18 | --toc \ 19 | --template="$HOME\.pandoc\templates\github.html5" 20 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/css/base.css: -------------------------------------------------------------------------------- 1 | html { 2 | /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 3 | box-sizing: border-box; 4 | } 5 | 6 | *, *:before, *:after { 7 | box-sizing: inherit; 8 | } 9 | 10 | body { 11 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 12 | } 13 | 14 | a { text-decoration: none; } 15 | a:hover { text-decoration: underline; } 16 | a, a:hover, a:visited { color: #006aff; } 17 | -------------------------------------------------------------------------------- /.revealjs/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v4.0 | 20180602 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | main, menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, main, menu, nav, section { 29 | display: block; 30 | } -------------------------------------------------------------------------------- /accessible-web/resources/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Accessible Web - Examples 9 | 23 | 24 | 25 | 26 | 27 |

Accessible Web - Examples

28 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /.revealjs/plugin/theme-toggle/theme-toggle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Toggles the current color theme when "t" is pressed 3 | */ 4 | var RevealToggleTheme = (function() { 5 | 6 | function toggleTheme() { 7 | const currentTheme = document.getElementById("theme"); 8 | if (currentTheme.href.includes("dk-light")) { 9 | currentTheme.setAttribute("href", currentTheme.href.replace("dk-light", "dk-dark")); 10 | } else { 11 | currentTheme.setAttribute("href", currentTheme.href.replace("dk-dark", "dk-light")); 12 | } 13 | } 14 | 15 | return { 16 | init: function() { 17 | 18 | if (!/receiver/i.test(window.location.search)) { 19 | 20 | // If the there's a 'theme' query set, use it directly 21 | if (window.location.search.match(/(\?|\&)theme/gi) !== null) { 22 | // TODO: implement 23 | } 24 | 25 | // Open the notes when the 's' key is hit 26 | Reveal.addKeyBinding({ 27 | keyCode: 84, 28 | key: "T", 29 | description: "Toggle theme" 30 | }, function() { 31 | toggleTheme(); 32 | }); 33 | 34 | } 35 | 36 | } 37 | }; 38 | 39 | })(); 40 | 41 | Reveal.registerPlugin("toggle-theme", RevealToggleTheme); 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Presentations 2 | 3 | ## Accessible Web 4 | 5 | - [Slides](https://darekkay.github.io/presentations/accessible-web/index.html) 6 | - [Demo examples](https://darekkay.github.io/presentations/accessible-web/resources/index.html) 7 | 8 | Did you ever ask yourself how visually impaired people access the web? What barriers do they encounter? Understanding how other people use the web is the key to identifying and solving any accessibility issues. In this session, I show some common web accessibility problems and ways to fix them. 9 | 10 | ## Functional CSS 11 | 12 | - [Slides](https://darekkay.github.io/presentations/functional-css/index.html) 13 | 14 | Functional CSS (also known as _Atomic CSS_ or _Utility-first CSS_) is an approach to CSS architecture that favors small, single-purpose classes with names based on visual function. In this talk, I explain some issues coming from traditional, semantic-based methodologies (e.g. BEM) and how Functional CSS is able solve them. 15 | 16 | ## Atomic Design 17 | 18 | - [Slides](https://darekkay.github.io/presentations/atomic-design/) 19 | 20 | ## Dev Ninjas - Tools, tips and hacks to improve your productivity 21 | 22 | - [Handout](https://darekkay.github.io/presentations/dev-ninja-tools/handout.html) 23 | -------------------------------------------------------------------------------- /atomic-design/resources/atomic-design.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atomic Design 7 | 8 | 20 | 21 | 30 | 31 | 32 | 33 | 34 |
35 | Link 36 |
37 | 38 | 39 |
40 | 41 |
42 |

Headline

43 |
44 | 45 |
46 | 47 |
48 | 54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/css/highlight.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Original highlight.js style (c) Ivan Sagalaev 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 1em; 11 | margin: 1em; 12 | color: #ffffff; 13 | background-color: #282c34; 14 | font-size: 1.2rem; 15 | } 16 | 17 | /* Tomorrow Comment */ 18 | .hljs-comment, 19 | .hljs-quote { 20 | color: #969896; 21 | } 22 | 23 | /* Tomorrow Red */ 24 | .hljs-variable, 25 | .hljs-template-variable, 26 | .hljs-name, 27 | .hljs-selector-id, 28 | .hljs-selector-class, 29 | .hljs-regexp, 30 | .hljs-deletion { 31 | color: #e04164; 32 | } 33 | 34 | /* Tomorrow Orange */ 35 | .hljs-number, 36 | .hljs-built_in, 37 | .hljs-builtin-name, 38 | .hljs-literal, 39 | .hljs-type, 40 | .hljs-params, 41 | .hljs-meta, 42 | .hljs-link, 43 | .hljs-setting { 44 | color: #e78c45; 45 | } 46 | 47 | /* Tomorrow Yellow */ 48 | .hljs-attribute { 49 | color: #e7c547; 50 | } 51 | 52 | /* Tomorrow Green */ 53 | .hljs-string, 54 | .hljs-symbol, 55 | .hljs-bullet, 56 | .hljs-addition, 57 | .hljs-value { 58 | color: #b9ca4a; 59 | } 60 | 61 | /* Tomorrow Blue */ 62 | .hljs-title, 63 | .hljs-section, 64 | .hljs-tag { 65 | color: #7aa6da; 66 | } 67 | 68 | /* Tomorrow Purple */ 69 | .hljs-keyword, 70 | .hljs-selector-tag { 71 | color: #c397d8; 72 | } 73 | 74 | .hljs-emphasis { 75 | font-style: italic; 76 | } 77 | 78 | .hljs-strong { 79 | font-weight: bold; 80 | } 81 | -------------------------------------------------------------------------------- /accessible-web/resources/live-region.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Live Region 12 | 21 | 22 | 23 | 24 |
25 |

Live Regions

26 | 27 |

Dynamic Content

28 |
29 | 30 | 31 |

Aria-Live

32 |
33 | 34 | 
<div aria-live="polite"></div>
35 | 36 |

Role

37 | 38 | 39 | 
<div role="alert"></div>
40 |
41 | 42 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /accessible-web/resources/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Video 11 | 19 | 20 | 21 | 22 |
23 |

Video

24 | 25 |
26 |

Inaccessible video

27 | 30 |
31 | 32 |
33 |

Subtitles

34 | 38 |
39 | 40 |
41 |

Closed captions

42 | 46 |
47 | 48 |
49 |

Audio only

50 | 53 |
54 | 55 |
56 |

Audio description

57 | 61 | 62 |
63 | Preview 64 | 65 | A door opens. A decayed room in an abandoned building. Sunlight shines through a window. 66 | 67 |
68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /accessible-web/resources/custom-component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Custom Components 12 | 13 | 14 | 15 |
16 |

Native vs Custom Components

17 | 18 |

Basic button

19 |
20 | 21 |
Custom
22 |
23 | 24 | 
<button onclick="...">Native</button>
25 | 
26 | <div onclick="...">Custom</div>
27 | 28 |

Tabindex

29 |
30 | 31 |
Custom
32 |
33 | 34 |

Role attribute

35 |
Custom
36 | 37 |

Clickable

38 |
39 | 40 |
Custom
41 |
* Keyboard events may work correctly when using NVDA
42 |
43 | 44 |

Disabled

45 |
46 | 47 |
Custom
48 |
49 | 50 | 
<button class="btn btn-primary"
51 |         onclick="...">Native</button>
52 | 
53 | <div class="btn btn-primary disabled"
54 |      onclick="..."
55 |      tabindex="0"
56 |      role="button">Custom</div>
57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/img/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 14 | 15 | 16 | 23 | 24 | 25 | 32 | 33 | 34 | 41 | 42 | 43 | 50 | 51 | 52 | 59 | 60 | 61 | 68 | 69 | 70 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /.revealjs/plugin/search/search.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealSearch=t()}(this,(function(){"use strict"; 2 | /*! 3 | * Handles finding a text string anywhere in the slides and showing the next occurrence to the user 4 | * by navigatating to that slide and highlighting it. 5 | * 6 | * @author Jon Snyder , February 2013 7 | */return()=>{let e,t,n,i,o,l,r;function s(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML='\n\t\t',n=t.querySelector(".searchinput"),n.style.width="240px",n.style.fontSize="14px",n.style.padding="4px 6px",n.style.color="#000",n.style.background="#fff",n.style.borderRadius="2px",n.style.border="0",n.style.outline="0",n.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",n.style["-webkit-appearance"]="none",e.getRevealElement().appendChild(t),n.addEventListener("keyup",(function(t){if(13===t.keyCode)t.preventDefault(),function(){if(l){var t=n.value;""===t?(r&&r.remove(),i=null):(r=new c("slidecontent"),i=r.apply(t),o=0)}i&&(i.length&&i.length<=o&&(o=0),i.length>o&&(e.slide(i[o].h,i[o].v),o++))}(),l=!1;else l=!0}),!1),d()}function a(){t||s(),t.style.display="inline",n.focus(),n.select()}function d(){t||s(),t.style.display="none",r&&r.remove()}function c(t,n){var i=document.getElementById(t)||document.body,o=n||"EM",l=new RegExp("^(?:"+o+"|SCRIPT|FORM)$"),r=["#ff6","#a0ffff","#9f9","#f99","#f6f"],s=[],a=0,d="",c=[];this.setRegex=function(e){e=e.trim(),d=new RegExp("("+e+")","i")},this.getRegex=function(){return d.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(t){if(null!=t&&t&&d&&!l.test(t.nodeName)){if(t.hasChildNodes())for(var n=0;n{e=n,e.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",(function(e){"F"==e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),t||s(),"inline"!==t.style.display?a():d())}),!1)},open:a}}})); 8 | -------------------------------------------------------------------------------- /accessible-web/resources/labeling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Labeling 12 | 15 | 16 | 17 | 18 |
19 |

Labeling

20 | 21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 | 30 | 
<label for="html-label">HTML Label</label>
31 | <input id="html-label">
32 |
33 | 34 |
35 | 36 | 37 | 38 | 
<input placeholder="Placeholder">
39 |
40 | 41 |
42 | 43 | 44 | 45 | 
<input aria-label="Aria Label">
46 |
47 | 48 |
49 | 50 | 51 | 52 | 
<label id="labelledby">aria-labelledby</label>
53 | <input aria-labelledby="labelledby">
54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 | 62 | 
<label id="describedby">aria-describedby</label>
63 | <input aria-describedby="describedby">
64 | <input aria-describedby="describedby"
65 |        aria-label="Aria Label">
66 |
67 | 68 |
69 | 70 |
71 | 72 | 73 |
74 | 75 | 
<button><span class="sr-only">Close</span> X</button>
76 | <button aria-label="Close">X</button>
77 |
78 | 79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/css/examples.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: relative; 3 | padding: 1rem; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | } 8 | 9 | #controls { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | right: 0; 14 | height: 40px; 15 | display: flex; 16 | align-items: center; 17 | padding: 0 0.5rem; 18 | border-bottom: 1px solid #333; 19 | } 20 | 21 | #controls > * { 22 | margin-right: 1rem; 23 | } 24 | 25 | main, #main, header, #header, footer, #footer { 26 | width: 100%; 27 | max-width: 850px; 28 | } 29 | 30 | header, #header { 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | padding-bottom: 1.5rem; 35 | margin-bottom: 1rem; 36 | border-bottom: 1px solid rgba(0, 0, 0, .125); 37 | margin-top: 80px; 38 | } 39 | 40 | #logo { 41 | border-radius: 5px; 42 | margin-right: 1.5rem; 43 | } 44 | 45 | nav a, #nav a { 46 | margin-right: 1.5rem; 47 | line-height: 38px; 48 | } 49 | 50 | main, #main { 51 | margin-bottom: 50px; 52 | } 53 | 54 | footer, #footer { 55 | position: absolute; 56 | bottom: 0; 57 | text-align: center; 58 | 59 | padding: 20px 0; 60 | border-top: 1px solid rgba(0, 0, 0, .125); 61 | } 62 | 63 | .footer-spacer { 64 | margin-bottom: 50px; 65 | } 66 | 67 | .tippy-box[data-theme~='cownews'] { 68 | background-color: #db2106; 69 | color: white; 70 | } 71 | 72 | .tippy-box[data-theme~='cownews'] .tippy-arrow { 73 | color: #db2106; 74 | } 75 | 76 | section { 77 | margin-bottom: 2rem; 78 | } 79 | 80 | legend { 81 | font-size: 1em; 82 | } 83 | 84 | .card-img-top { 85 | max-width: 100%; 86 | height: auto; 87 | } 88 | 89 | .joke { 90 | width: 100%; 91 | height: auto; 92 | margin-bottom: 25px; 93 | } 94 | 95 | .link-unstyled, 96 | .link-unstyled:hover, 97 | .link-unstyled:visited { 98 | color: inherit; 99 | } 100 | 101 | .newsletter { 102 | max-width: 500px; 103 | } 104 | 105 | .h1 { 106 | font-size: 2.5rem; 107 | margin-bottom: 1rem; 108 | } 109 | 110 | .h2 { 111 | font-size: 2rem; 112 | margin-bottom: 1.3rem; 113 | margin-top: 2rem; 114 | } 115 | 116 | .example-bad .lorem { 117 | /*font-size: 1.2em;*/ 118 | 119 | /* NOTE: Serif fonts are difficult to read on screens */ 120 | /*font-family: "Times New Roman", Times, serif;*/ 121 | 122 | /* NOTE: Justified text may be hard to read for some users */ 123 | /*text-align: justify;*/ 124 | } 125 | 126 | .example-bad .contrast { 127 | /* NOTE: Insufficient contrast ratio */ 128 | color: #cacaca; 129 | } 130 | 131 | .example-bad .card-body :focus { 132 | /* NOTE: Do not remove the default focus ring globally */ 133 | outline: none; 134 | } 135 | 136 | .example-good :focus { 137 | /* NOTE: You can keep the default browser outline, too */ 138 | outline: 2px dashed #ff9421; 139 | outline-offset: 4px; 140 | } 141 | 142 | .example-good .card-title { 143 | font-size: 1.25rem; 144 | } 145 | 146 | .example-good .btn-primary { 147 | /* Why does Bootstrap use a bad contrast ratio by default? */ 148 | background-color: #0072ed; 149 | } 150 | 151 | .layout-column { 152 | display: flex; 153 | justify-content: center; 154 | align-items: center; 155 | flex-direction: column; 156 | } 157 | 158 | .layout-column h2 { 159 | margin: 2rem 0 1rem; 160 | } 161 | 162 | -------------------------------------------------------------------------------- /dev-ninja-tools/handout.md: -------------------------------------------------------------------------------- 1 | By [Dariusz Krolikowski](https://darekkay.com), first presented at [DevOpenSpace 2017](http://devopenspace.de/) 2 | 3 | ![xkcd - is it worth it?](https://imgs.xkcd.com/comics/is_it_worth_the_time.png) 4 | 5 | [XKCD](https://xkcd.com/1205/) 6 | 7 | ## Chrome Dev Tools 8 | 9 | - [In-/Decrement CSS values](https://umaar.com/dev-tips/37-quick-change-css-values/): 10 | - `Up / Down`: increment / decrement by 1 11 | - `Alt + Up`: increment by 0.1 12 | - `Shift + Up`: increment by 10 13 | - `Ctrl + Up`: increment by 100 14 | - Analyze hover styles 15 | - `:hov` for CSS `:hover` effects 16 | - Debugger (`F8`) for JS effects 17 | - [Toggle element classes](https://umaar.com/dev-tips/87-toggle-element-classes/) 18 | - Add/remove classes 19 | - [DevTools snippets](https://umaar.com/dev-tips/141-quick-open-menu-snippets/) 20 | - Alternative to bookmarklets 21 | - [Throttle CPU](https://umaar.com/dev-tips/88-cpu-throttling/) / Simulate 3G Network 22 | - Capture full site screenshot: 23 | - Open Command Menu: Ctrl + Shift + P 24 | - `Capture full size screenshot` 25 | 26 | ## Bookmarklets / Browser Addons 27 | 28 | - [Visual Event](http://www.sprymedia.co.uk/article/visual+event+2) 29 | - [Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en) 30 | - [Form Filler](https://chrome.google.com/webstore/detail/form-filler/bnjjngeaknajbdcgpfkgnonkmififhfo?hl=en) 31 | - [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) 32 | 33 | ## Userscripts 34 | 35 | - Browser AddOn: Tempermonkey / Greasemonkey 36 | - [Manual](https://greasyfork.org/) 37 | 38 | ## Text Snippets 39 | 40 | - Tools: 41 | - [PhraseExpress](http://www.phraseexpress.com/) (Windows, macOS) 42 | - [Textbausteine Plus](http://www.sirat-it.de/) (Windows) 43 | - [WriteYours](http://amlpages.com/writeyours.shtml) (Windows) 44 | - Use cases: 45 | - salutation (`sgdh`) 46 | - form data (name, e-mail, phone number) 47 | - auto-correct (`udn` → `und`) 48 | - symbols/emojis (`→`, `✔`, `✘`) 49 | 50 | ## [Emmet](https://emmet.io/) 51 | 52 | - Dynamic snippets for HTML and CSS 53 | - ID: `#container` 54 | - Class: `.item` 55 | - Tags: `li.item` 56 | - Chaining: `li#id.item` 57 | - Nesting: `ul>li`, `ul>li.list-item` 58 | - Multiplication: `ul>li.list-item*10` 59 | - Lorem Ipsum: `lorem` 60 | - Available for [most editors](https://emmet.io/download/) natively or as a plugin 61 | - Enable for JSX/React in VSCode: 62 | 63 | ```json 64 | "emmet.includeLanguages": { 65 | "javascript": "javascriptreact" 66 | }, 67 | ``` 68 | 69 | ## API Documentation Browsers 70 | 71 | - [DevDocs](http://devdocs.io/) 72 | - [Zeal](https://zealdocs.org/) 73 | - [Velocity](http://velocity.silverlakesoftware.com/) 74 | - [Dash](https://kapeli.com/dash) 75 | 76 | ## Windows 77 | 78 | - `Shift` + Right click 79 | - File/folder: "Copy as path" 80 | - Explorer: "Open command prompt here" 81 | - [Create .dotfiles](http://www.hanselman.com/blog/HowToCreateAFileWithADotPrefixInWindowsExplorer.aspx) in Windows Explorer 82 | - Put a dot at the end of the file name: `.gitignore.` 83 | - Turn on "Show file extensions" 84 | - Task bar 85 | - `Shift` + Left click: Open another instance 86 | - `Ctrl` + `Shift` + Left click: Open an instance with admin rights 87 | 88 | ## Shortcuts 89 | 90 | - Problem: learning new shortcuts may be difficult 91 | - Common approach: print a shortcut cheatsheet and start learning it → 92 | - Instead/additionally: create your own shortcuts for the most common tasks 93 | - One at a time to prevent information overload 94 | - Use identic basic shortcuts across all editors 95 | - Display shortcuts: 96 | - Eclipse: [MouseFeed](https://marketplace.eclipse.org/content/mousefeed) 97 | - IntelliJ IDEA: [Key Promoter](https://plugins.jetbrains.com/plugin/4455-key-promoter) 98 | 99 | ## Bash 100 | 101 | - [fzf](https://github.com/junegunn/fzf) - Fuzzy finder 102 | - My [bash aliases](https://github.com/darekkay/config-files/blob/master/bash/.aliases) 103 | 104 | ## Git Aliases 105 | 106 | - My [git aliases](https://github.com/darekkay/config-files/blob/master/git/.gitconfig) 107 | 108 | ## View log files 109 | 110 | - [Notepad++](https://darekkay.com/2014/09/10/turn-notepad-into-a-log-file-analyzer/) 111 | - VSCode: [LogFile Highlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter) 112 | 113 | ## Atom Plugins 114 | 115 | - [Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/) 116 | 117 | # Tools 118 | 119 | - [ConEmu](https://conemu.github.io/) 120 | - Tabbed console emulator 121 | - Enhances default Windows command (selection, `Ctrl` + `V`) 122 | - Clickable URLs (`Ctrl` + Click) 123 | - [Launchy](https://www.launchy.net/) 124 | - [Ditto](http://ditto-cp.sourceforge.net/) 125 | - [XYplorer](https://www.xyplorer.com/) 126 | -------------------------------------------------------------------------------- /functional-css/assets/reusability.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /accessible-web/resources/example-good.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Accessible Example 11 | 12 | 13 | 14 | 18 | 19 |
20 | 21 | 27 |
28 | 29 |
30 | 31 |
32 |

Cow News

33 | 34 |

In laboratory studies, young cattle are able to memorize the locations of several food sources and retain this memory for at least 8 hours, although this declined after 12 hours. Fifteen-month-old heifers learn more quickly than 35 | adult cows which have had either one or two calvings, but their longer-term memory is less stable. Mature cattle perform well in spatial learning tasks and have a good long-term memory in these tests. Cattle tested in a radial arm maze are able to remember the locations of high-quality food for at least 30 days. Although they initially learn to avoid low-quality food, this memory diminishes over the same duration. 36 |

37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 |

What type are you?

45 |

Take this free personality test in just 10 minutes.

46 | Personality test 47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |

Hair Trends 2020

55 |

Become the coolest cow on the pasture!

56 | Hair trends 57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |

Trouble in the hood

65 |

8 ways to deal with neighbors from hell.

66 | Deal with your neighbors 67 |
68 |
69 |
70 |
71 | 72 |

Cow Ipsum

73 |

Chocolate milk lorem ipsum dolor sit amet, consectetur cow elit. Aliquid deleniti earum eligendi hic, in inventore ipsum iste molestiae nam natus nemo nostrum, odio perspiciatis quasi quisquam quo sapiente ut veriLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum ex eget quam varius, vel tincidunt ligula placerat. Cras interdum felis in diam ullamcorper egestas pellentesque id dolor. Nulla ut erat metus. In porta accumsan blandit. Nullam varius neque a diam iaculis ullamcorper. Morbi consectetur ante non porttitor finibus. Quisque at aliquam nunc. Fusce sodales elit purus, ac pulvinar sem iaculis sit amet. In molestie eros id scelerisque efficitur. In auctor nibh eget lobortis commodo.

74 | 75 | Why was the cow so scared? Because he was a cow-ard. 76 | 77 |

Music Charts

78 |
    79 |
  1. Foo Fighters - For All the Cows
    2. 80 |
  2. Aerosmith - Milk Cow Blues
    3. 81 |
  3. Elton John - Poor Cow
    4. 82 |
  4. Crowded House - Sacred Cow
    5. 83 |
  5. Snow Patrol - Holy Cow
    6. 84 |
  6. The Turtles - Can't You Hear the Cows
    7. 85 |
  7. Seals and Crofts - Cows of Gladness
    8. 86 |
87 | 88 |

Subscribe to our Newsletter

89 | 113 | 114 |
115 | 116 |
117 | 118 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /accessible-web/resources/color-blind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Color Blind Demo 10 | 51 | 52 | 53 | 54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 |
62 | 63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 | 79 |
80 | 81 |
82 |
83 |
84 | 85 |
86 | 87 |
88 | 89 | 92 | 93 |
94 |
95 |
96 |
97 | 98 |
99 | 100 | Please insert a valid e-mail 101 |
102 | 103 | 105 | 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 | 114 |
115 | 116 |
117 | 118 | 121 | 122 |
123 |
124 |
125 |
126 | 127 |
128 | 129 | Please insert a valid e-mail 130 |
131 | 132 | 134 | 135 |
136 |
137 |
138 |
139 |
140 |

Note: SVG filter work only when the file is served over a web server.

141 |
142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /accessible-web/resources/example-bad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Inaccessible Example 11 | 12 | 13 | 14 | 19 | 20 | 29 | 30 | 33 | 34 |
35 |
36 |
Cow News
37 | 38 |

In laboratory studies, young cattle are able to memorize the locations of several food sources and retain this memory for at least 8 hours, although this declined after 12 hours. Fifteen-month-old heifers learn more quickly than 39 | adult cows which have had either one or two calvings, but their longer-term memory is less stable. Mature cattle perform well in spatial learning tasks and have a good long-term memory in these tests. Cattle tested in a radial arm maze are able to remember the locations of high-quality food for at least 30 days. Although they initially learn to avoid low-quality food, this memory diminishes over the same duration. 40 |

41 |
42 |
43 |
44 |
45 | 46 |
47 |
What type are you?
48 |

Take this free personality test in just 10 minutes.

49 | Read more... 50 |
51 |
52 |
53 |
54 |
55 | 56 |
57 |
Hair Trends 2020
58 |

Become the coolest cow on the pasture!

59 | Read more... 60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
Trouble in the hood
68 |

8 ways to deal with neighbors from hell.

69 | Read more... 70 |
71 |
72 |
73 |
74 | 75 |
Cow Ipsum
76 |

Chocolate milk lorem ipsum dolor sit amet, consectetur cow elit. Aliquid deleniti earum eligendi hic, in inventore ipsum iste molestiae nam natus nemo nostrum, odio perspiciatis quasi quisquam quo sapiente ut veriLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum ex eget quam varius, vel tincidunt ligula placerat. Cras interdum felis in diam ullamcorper egestas pellentesque id dolor. Nulla ut erat metus. In porta accumsan blandit. Nullam varius neque a diam iaculis ullamcorper. Morbi consectetur ante non porttitor finibus. Quisque at aliquam nunc. Fusce sodales elit purus, ac pulvinar sem iaculis sit amet. In molestie eros id scelerisque efficitur. In auctor nibh eget lobortis commodo.

77 | 78 | 79 | 80 |
Music Charts
81 |
82 | 1. Foo Fighters - For All the Cows
83 | 2. Aerosmith - Milk Cow Blues
84 | 3. Elton John - Poor Cow
85 | 4. Crowded House - Sacred Cow
86 | 5. Snow Patrol - Holy Cow
87 | 6. The Turtles - Can't You Hear the Cows
88 | 7. Seals and Crofts - Cows of Gladness

89 | 90 |
Subscribe to our Newsletter
91 | 92 | 112 | 113 |
114 |
115 | 116 | 117 | 118 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /.revealjs/theme/dk-dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Dark theme, based on Night 3 | */ 4 | /* nunito regular */ 5 | @font-face { 6 | font-family: "Nunito"; 7 | font-style: normal; 8 | font-weight: 400; 9 | font-display: swap; 10 | src: local("Nunito"), url("./fonts/nunito-v16-latin-regular.woff2") format("woff2"); 11 | } 12 | /* nunito italic */ 13 | @font-face { 14 | font-family: "Nunito"; 15 | font-style: italic; 16 | font-weight: 400; 17 | font-display: swap; 18 | src: local("Nunito"), url("./fonts/nunito-v16-latin-italic.woff2") format("woff2"); 19 | } 20 | /* nunito bold */ 21 | @font-face { 22 | font-family: "Nunito"; 23 | font-style: normal; 24 | font-weight: 700; 25 | font-display: swap; 26 | src: local("Nunito"), url("./fonts/nunito-v16-latin-700.woff2") format("woff2"); 27 | } 28 | /* oswald-500 - latin */ 29 | @font-face { 30 | font-family: "Oswald"; 31 | font-style: normal; 32 | font-weight: 500; 33 | src: local(""), url("./fonts/oswald-v48-latin-500.woff2") format("woff2"); 34 | } 35 | /* ubuntu-mono-regular - latin */ 36 | @font-face { 37 | font-family: "Ubuntu Mono"; 38 | font-style: normal; 39 | font-weight: 400; 40 | src: local(""), url("./fonts/ubuntu-mono-v15-latin-regular.woff2") format("woff2"); 41 | } 42 | .reveal .progress > span { 43 | background: linear-gradient(to right, #ffbe2e, #f1486d); 44 | } 45 | 46 | .reveal .slides img, 47 | .reveal .slides video { 48 | box-shadow: #090c0f 1px 0 10px; 49 | } 50 | 51 | /********************************************* 52 | * GLOBAL STYLES 53 | *********************************************/ 54 | :root { 55 | --r-background-color: #1f303e; 56 | --r-main-font: Nunito, sans-serif; 57 | --r-main-font-size: 42px; 58 | --r-main-color: #eee; 59 | --r-block-margin: 20px; 60 | --r-heading-margin: 0 0 20px 0; 61 | --r-heading-font: Oswald, sans-serif; 62 | --r-heading-color: #eee; 63 | --r-heading-line-height: 1.2; 64 | --r-heading-letter-spacing: normal; 65 | --r-heading-text-transform: none; 66 | --r-heading-text-shadow: #090c0f 1px 0 10px; 67 | --r-heading-font-weight: 500; 68 | --r-heading1-text-shadow: #090c0f 1px 0 10px; 69 | --r-heading1-size: 2em; 70 | --r-heading2-size: 1.56em; 71 | --r-heading3-size: 1.26em; 72 | --r-heading4-size: 1em; 73 | --r-code-font: Ubuntu Mono, monospace; 74 | --r-code-inline-font-size: 0.925em; 75 | --r-code-block-font-size: 1.04em; 76 | --r-link-color: #fe9720; 77 | --r-link-color-dark: #d17001; 78 | --r-link-color-hover: #fec686; 79 | --r-selection-background-color: #e2901c; 80 | --r-selection-color: #fff; 81 | --r-overlay-element-bg-color: 240, 240, 240; 82 | --r-overlay-element-fg-color: 0, 0, 0; 83 | --r-horizontal-rule-color: #71767a; 84 | } 85 | 86 | .reveal-viewport { 87 | background: #1f303e; 88 | background-color: var(--r-background-color); 89 | } 90 | 91 | .reveal { 92 | font-family: var(--r-main-font); 93 | font-size: var(--r-main-font-size); 94 | font-weight: normal; 95 | color: var(--r-main-color); 96 | } 97 | 98 | .reveal ::selection { 99 | color: var(--r-selection-color); 100 | background: var(--r-selection-background-color); 101 | text-shadow: none; 102 | } 103 | 104 | .reveal ::-moz-selection { 105 | color: var(--r-selection-color); 106 | background: var(--r-selection-background-color); 107 | text-shadow: none; 108 | } 109 | 110 | .reveal .slides section, 111 | .reveal .slides section > section { 112 | line-height: 1.3; 113 | font-weight: inherit; 114 | } 115 | 116 | /********************************************* 117 | * HEADERS 118 | *********************************************/ 119 | .reveal h1, 120 | .reveal h2, 121 | .reveal h3, 122 | .reveal h4, 123 | .reveal h5, 124 | .reveal h6 { 125 | margin: var(--r-heading-margin); 126 | color: var(--r-heading-color); 127 | font-family: var(--r-heading-font); 128 | font-weight: var(--r-heading-font-weight); 129 | line-height: var(--r-heading-line-height); 130 | letter-spacing: var(--r-heading-letter-spacing); 131 | text-transform: var(--r-heading-text-transform); 132 | text-shadow: var(--r-heading-text-shadow); 133 | word-wrap: break-word; 134 | } 135 | 136 | .reveal h1, .reveal .h1 { 137 | font-size: var(--r-heading1-size); 138 | } 139 | 140 | .reveal h2, .reveal .h2 { 141 | font-size: var(--r-heading2-size); 142 | } 143 | 144 | .reveal h3, .reveal .h3 { 145 | font-size: var(--r-heading3-size); 146 | } 147 | 148 | .reveal h4, .reveal .h4 { 149 | font-size: var(--r-heading4-size); 150 | } 151 | 152 | .reveal h1 { 153 | text-shadow: var(--r-heading1-text-shadow); 154 | } 155 | 156 | /********************************************* 157 | * OTHER 158 | *********************************************/ 159 | .reveal p { 160 | margin: var(--r-block-margin) 0; 161 | line-height: 1.3; 162 | } 163 | 164 | /* Remove trailing margins after titles */ 165 | .reveal h1:last-child, 166 | .reveal h2:last-child, 167 | .reveal h3:last-child, 168 | .reveal h4:last-child, 169 | .reveal h5:last-child, 170 | .reveal h6:last-child { 171 | margin-bottom: 0; 172 | } 173 | 174 | /* Ensure certain elements are never larger than the slide itself */ 175 | .reveal img, 176 | .reveal video, 177 | .reveal iframe { 178 | max-width: 95%; 179 | max-height: 95%; 180 | } 181 | 182 | .reveal strong, 183 | .reveal b { 184 | font-weight: bold; 185 | } 186 | 187 | .reveal em { 188 | font-style: italic; 189 | } 190 | 191 | .reveal ol, 192 | .reveal dl, 193 | .reveal ul { 194 | display: inline-block; 195 | text-align: left; 196 | margin: 0 0 0 0.8em; 197 | padding: 0; 198 | } 199 | 200 | .reveal ol { 201 | list-style-type: decimal; 202 | } 203 | 204 | .reveal ul { 205 | list-style-type: disc; 206 | } 207 | 208 | .reveal ul ul { 209 | list-style-type: square; 210 | } 211 | 212 | .reveal ul ul ul { 213 | list-style-type: circle; 214 | } 215 | 216 | .reveal ul ul, 217 | .reveal ul ol, 218 | .reveal ol ol, 219 | .reveal ol ul { 220 | display: block; 221 | margin-left: 40px; 222 | } 223 | 224 | .reveal dt { 225 | font-weight: bold; 226 | } 227 | 228 | .reveal dd { 229 | margin-left: 40px; 230 | } 231 | 232 | .reveal blockquote { 233 | display: block; 234 | position: relative; 235 | margin: var(--r-block-margin) auto; 236 | padding: 5px; 237 | background: rgba(255, 255, 255, 0.05); 238 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); 239 | } 240 | 241 | .reveal blockquote p:first-child, 242 | .reveal blockquote p:last-child { 243 | display: inline-block; 244 | } 245 | 246 | .reveal mark { 247 | background-color: inherit; 248 | } 249 | 250 | .reveal q { 251 | font-style: italic; 252 | } 253 | 254 | .reveal pre { 255 | display: block; 256 | position: relative; 257 | width: 90%; 258 | margin: 30px auto; 259 | text-align: left; 260 | font-size: 0.6em; 261 | font-family: var(--r-code-font); 262 | line-height: 1.2em; 263 | word-wrap: break-word; 264 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); 265 | } 266 | 267 | .reveal h2 + pre { 268 | margin-top: 40px; 269 | } 270 | 271 | .reveal code { 272 | font-family: var(--r-code-font); 273 | font-size: var(--r-code-inline-font-size); 274 | text-transform: none; 275 | tab-size: 2; 276 | padding: 0 7px 3px; 277 | border-radius: 8px; 278 | } 279 | 280 | .reveal pre code { 281 | display: block; 282 | font-size: var(--r-code-block-font-size); 283 | padding: 8px 15px; 284 | overflow: auto; 285 | max-height: 600px; 286 | word-wrap: normal; 287 | border-radius: 5px; 288 | } 289 | 290 | .reveal .code-wrapper { 291 | white-space: normal; 292 | width: min-content; 293 | max-width: 100%; 294 | } 295 | 296 | .reveal .code-wrapper code { 297 | white-space: pre; 298 | } 299 | 300 | .reveal table { 301 | margin: auto; 302 | border-collapse: collapse; 303 | border-spacing: 0; 304 | } 305 | 306 | .reveal table th { 307 | font-weight: bold; 308 | } 309 | 310 | .reveal table th, 311 | .reveal table td { 312 | text-align: left; 313 | padding: 0.2em 0.5em 0.2em 0.5em; 314 | border: 1px solid #eee; 315 | } 316 | 317 | .reveal table th[align=center], 318 | .reveal table td[align=center] { 319 | text-align: center; 320 | } 321 | 322 | .reveal table th[align=right], 323 | .reveal table td[align=right] { 324 | text-align: right; 325 | } 326 | 327 | .reveal sup { 328 | vertical-align: super; 329 | font-size: smaller; 330 | } 331 | 332 | .reveal sub { 333 | vertical-align: sub; 334 | font-size: smaller; 335 | } 336 | 337 | .reveal small { 338 | display: inline-block; 339 | font-size: 0.6em; 340 | line-height: 1.2em; 341 | vertical-align: top; 342 | } 343 | 344 | .reveal small * { 345 | vertical-align: top; 346 | } 347 | 348 | .reveal img { 349 | margin: var(--r-block-margin) 0; 350 | } 351 | 352 | /********************************************* 353 | * LINKS 354 | *********************************************/ 355 | .reveal a { 356 | color: var(--r-link-color); 357 | text-decoration-style: dashed; 358 | text-underline-offset: 7px; 359 | text-decoration-thickness: 2px; 360 | transition: color 0.15s ease; 361 | } 362 | 363 | .reveal a:hover { 364 | color: var(--r-link-color-hover); 365 | text-shadow: none; 366 | border: none; 367 | } 368 | 369 | .reveal .roll span:after { 370 | color: #fff; 371 | background: var(--r-link-color-dark); 372 | } 373 | 374 | /********************************************* 375 | * Frame helper 376 | *********************************************/ 377 | .reveal section img, 378 | .reveal section video { 379 | margin: 15px 0; 380 | } 381 | 382 | /* TODO: check */ 383 | .reveal .r-frame { 384 | border: 4px solid var(--r-main-color); 385 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 386 | } 387 | 388 | .reveal a .r-frame { 389 | transition: all 0.15s linear; 390 | } 391 | 392 | .reveal a:hover .r-frame { 393 | border-color: var(--r-link-color); 394 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 395 | } 396 | 397 | /********************************************* 398 | * NAVIGATION CONTROLS 399 | *********************************************/ 400 | .reveal .controls { 401 | color: var(--r-link-color); 402 | } 403 | 404 | /********************************************* 405 | * PROGRESS BAR 406 | *********************************************/ 407 | .reveal .progress { 408 | background: rgba(0, 0, 0, 0.2); 409 | color: var(--r-link-color); 410 | } 411 | 412 | /********************************************* 413 | * PRINT BACKGROUND 414 | *********************************************/ 415 | @media print { 416 | .backgrounds { 417 | background-color: var(--r-background-color); 418 | } 419 | } 420 | /********************************************* 421 | * UTILITIES 422 | *********************************************/ 423 | .reveal .chunk { 424 | position: absolute; 425 | background-color: #1f303e; 426 | } 427 | 428 | .reveal .schedule, 429 | .reveal #schedule { 430 | display: none; 431 | position: fixed; 432 | right: 0; 433 | bottom: 0; 434 | left: 0; 435 | margin-left: auto; 436 | margin-right: auto; 437 | font-size: 20px; 438 | color: red; 439 | } 440 | 441 | .reveal.debug .schedule, 442 | .reveal.debug #schedule { 443 | display: block; 444 | } 445 | 446 | .reveal .font-1 { 447 | font-size: 25px; 448 | } 449 | 450 | .reveal .font-2 { 451 | font-size: 30px; 452 | } 453 | 454 | .reveal .font-3 { 455 | font-size: 35px; 456 | } 457 | 458 | .reveal .font-4 { 459 | font-size: 40px; 460 | } 461 | 462 | .reveal .decoration-none { 463 | text-decoration: none; 464 | } 465 | 466 | .bg-highlight { 467 | background: #222; 468 | } 469 | 470 | .reveal .highlight-1, .reveal mark { 471 | color: #a7e22e; 472 | } 473 | 474 | .reveal .highlight-2 { 475 | color: #ee83ff; 476 | } 477 | 478 | .reveal .highlight-3 { 479 | color: #face00; 480 | } 481 | 482 | .reveal .highlight-4 { 483 | color: #29e1cb; 484 | } 485 | 486 | .border { 487 | border: 1px solid #000 !important; 488 | } -------------------------------------------------------------------------------- /.revealjs/theme/dk-light.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Light theme 3 | */ 4 | /* nunito regular */ 5 | @font-face { 6 | font-family: "Nunito"; 7 | font-style: normal; 8 | font-weight: 400; 9 | font-display: swap; 10 | src: local("Nunito"), url("./fonts/nunito-v16-latin-regular.woff2") format("woff2"); 11 | } 12 | /* nunito italic */ 13 | @font-face { 14 | font-family: "Nunito"; 15 | font-style: italic; 16 | font-weight: 400; 17 | font-display: swap; 18 | src: local("Nunito"), url("./fonts/nunito-v16-latin-italic.woff2") format("woff2"); 19 | } 20 | /* nunito bold */ 21 | @font-face { 22 | font-family: "Nunito"; 23 | font-style: normal; 24 | font-weight: 700; 25 | font-display: swap; 26 | src: local("Nunito"), url("./fonts/nunito-v16-latin-700.woff2") format("woff2"); 27 | } 28 | /* oswald-500 - latin */ 29 | @font-face { 30 | font-family: "Oswald"; 31 | font-style: normal; 32 | font-weight: 500; 33 | src: local(""), url("./fonts/oswald-v48-latin-500.woff2") format("woff2"); 34 | } 35 | /* ubuntu-mono-regular - latin */ 36 | @font-face { 37 | font-family: "Ubuntu Mono"; 38 | font-style: normal; 39 | font-weight: 400; 40 | src: local(""), url("./fonts/ubuntu-mono-v15-latin-regular.woff2") format("woff2"); 41 | } 42 | .reveal .progress > span { 43 | background: linear-gradient(to right, #ffbe2e, #f1486d); 44 | } 45 | 46 | .reveal .slides img, 47 | .reveal .slides video { 48 | box-shadow: #090c0f 1px 0 10px; 49 | } 50 | 51 | /* #0076d6 */ 52 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { 53 | color: #fff; 54 | } 55 | 56 | /********************************************* 57 | * GLOBAL STYLES 58 | *********************************************/ 59 | :root { 60 | --r-background-color: #fff; 61 | --r-main-font: Nunito, sans-serif; 62 | --r-main-font-size: 42px; 63 | --r-main-color: #222; 64 | --r-block-margin: 20px; 65 | --r-heading-margin: 0 0 20px 0; 66 | --r-heading-font: Oswald, sans-serif; 67 | --r-heading-color: #222; 68 | --r-heading-line-height: 1.2; 69 | --r-heading-letter-spacing: normal; 70 | --r-heading-text-transform: none; 71 | --r-heading-text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 6px; 72 | --r-heading-font-weight: 500; 73 | --r-heading1-text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 6px; 74 | --r-heading1-size: 2em; 75 | --r-heading2-size: 1.56em; 76 | --r-heading3-size: 1.26em; 77 | --r-heading4-size: 1em; 78 | --r-code-font: Ubuntu Mono, monospace; 79 | --r-code-inline-font-size: 0.925em; 80 | --r-code-block-font-size: 1.04em; 81 | --r-link-color: #0076d6; 82 | --r-link-color-dark: #004c8a; 83 | --r-link-color-hover: #249dff; 84 | --r-selection-background-color: #89edf6; 85 | --r-selection-color: #fff; 86 | --r-overlay-element-bg-color: 240, 240, 240; 87 | --r-overlay-element-fg-color: 0, 0, 0; 88 | --r-horizontal-rule-color: #c6cace; 89 | } 90 | 91 | .reveal-viewport { 92 | background: #fff; 93 | background-color: var(--r-background-color); 94 | } 95 | 96 | .reveal { 97 | font-family: var(--r-main-font); 98 | font-size: var(--r-main-font-size); 99 | font-weight: normal; 100 | color: var(--r-main-color); 101 | } 102 | 103 | .reveal ::selection { 104 | color: var(--r-selection-color); 105 | background: var(--r-selection-background-color); 106 | text-shadow: none; 107 | } 108 | 109 | .reveal ::-moz-selection { 110 | color: var(--r-selection-color); 111 | background: var(--r-selection-background-color); 112 | text-shadow: none; 113 | } 114 | 115 | .reveal .slides section, 116 | .reveal .slides section > section { 117 | line-height: 1.3; 118 | font-weight: inherit; 119 | } 120 | 121 | /********************************************* 122 | * HEADERS 123 | *********************************************/ 124 | .reveal h1, 125 | .reveal h2, 126 | .reveal h3, 127 | .reveal h4, 128 | .reveal h5, 129 | .reveal h6 { 130 | margin: var(--r-heading-margin); 131 | color: var(--r-heading-color); 132 | font-family: var(--r-heading-font); 133 | font-weight: var(--r-heading-font-weight); 134 | line-height: var(--r-heading-line-height); 135 | letter-spacing: var(--r-heading-letter-spacing); 136 | text-transform: var(--r-heading-text-transform); 137 | text-shadow: var(--r-heading-text-shadow); 138 | word-wrap: break-word; 139 | } 140 | 141 | .reveal h1, .reveal .h1 { 142 | font-size: var(--r-heading1-size); 143 | } 144 | 145 | .reveal h2, .reveal .h2 { 146 | font-size: var(--r-heading2-size); 147 | } 148 | 149 | .reveal h3, .reveal .h3 { 150 | font-size: var(--r-heading3-size); 151 | } 152 | 153 | .reveal h4, .reveal .h4 { 154 | font-size: var(--r-heading4-size); 155 | } 156 | 157 | .reveal h1 { 158 | text-shadow: var(--r-heading1-text-shadow); 159 | } 160 | 161 | /********************************************* 162 | * OTHER 163 | *********************************************/ 164 | .reveal p { 165 | margin: var(--r-block-margin) 0; 166 | line-height: 1.3; 167 | } 168 | 169 | /* Remove trailing margins after titles */ 170 | .reveal h1:last-child, 171 | .reveal h2:last-child, 172 | .reveal h3:last-child, 173 | .reveal h4:last-child, 174 | .reveal h5:last-child, 175 | .reveal h6:last-child { 176 | margin-bottom: 0; 177 | } 178 | 179 | /* Ensure certain elements are never larger than the slide itself */ 180 | .reveal img, 181 | .reveal video, 182 | .reveal iframe { 183 | max-width: 95%; 184 | max-height: 95%; 185 | } 186 | 187 | .reveal strong, 188 | .reveal b { 189 | font-weight: bold; 190 | } 191 | 192 | .reveal em { 193 | font-style: italic; 194 | } 195 | 196 | .reveal ol, 197 | .reveal dl, 198 | .reveal ul { 199 | display: inline-block; 200 | text-align: left; 201 | margin: 0 0 0 0.8em; 202 | padding: 0; 203 | } 204 | 205 | .reveal ol { 206 | list-style-type: decimal; 207 | } 208 | 209 | .reveal ul { 210 | list-style-type: disc; 211 | } 212 | 213 | .reveal ul ul { 214 | list-style-type: square; 215 | } 216 | 217 | .reveal ul ul ul { 218 | list-style-type: circle; 219 | } 220 | 221 | .reveal ul ul, 222 | .reveal ul ol, 223 | .reveal ol ol, 224 | .reveal ol ul { 225 | display: block; 226 | margin-left: 40px; 227 | } 228 | 229 | .reveal dt { 230 | font-weight: bold; 231 | } 232 | 233 | .reveal dd { 234 | margin-left: 40px; 235 | } 236 | 237 | .reveal blockquote { 238 | display: block; 239 | position: relative; 240 | margin: var(--r-block-margin) auto; 241 | padding: 5px; 242 | background: rgba(255, 255, 255, 0.05); 243 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); 244 | } 245 | 246 | .reveal blockquote p:first-child, 247 | .reveal blockquote p:last-child { 248 | display: inline-block; 249 | } 250 | 251 | .reveal mark { 252 | background-color: inherit; 253 | } 254 | 255 | .reveal q { 256 | font-style: italic; 257 | } 258 | 259 | .reveal pre { 260 | display: block; 261 | position: relative; 262 | width: 90%; 263 | margin: 30px auto; 264 | text-align: left; 265 | font-size: 0.6em; 266 | font-family: var(--r-code-font); 267 | line-height: 1.2em; 268 | word-wrap: break-word; 269 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); 270 | } 271 | 272 | .reveal h2 + pre { 273 | margin-top: 40px; 274 | } 275 | 276 | .reveal code { 277 | font-family: var(--r-code-font); 278 | font-size: var(--r-code-inline-font-size); 279 | text-transform: none; 280 | tab-size: 2; 281 | padding: 0 7px 3px; 282 | border-radius: 8px; 283 | } 284 | 285 | .reveal pre code { 286 | display: block; 287 | font-size: var(--r-code-block-font-size); 288 | padding: 8px 15px; 289 | overflow: auto; 290 | max-height: 600px; 291 | word-wrap: normal; 292 | border-radius: 5px; 293 | } 294 | 295 | .reveal .code-wrapper { 296 | white-space: normal; 297 | width: min-content; 298 | max-width: 100%; 299 | } 300 | 301 | .reveal .code-wrapper code { 302 | white-space: pre; 303 | } 304 | 305 | .reveal table { 306 | margin: auto; 307 | border-collapse: collapse; 308 | border-spacing: 0; 309 | } 310 | 311 | .reveal table th { 312 | font-weight: bold; 313 | } 314 | 315 | .reveal table th, 316 | .reveal table td { 317 | text-align: left; 318 | padding: 0.2em 0.5em 0.2em 0.5em; 319 | border: 1px solid #222; 320 | } 321 | 322 | .reveal table th[align=center], 323 | .reveal table td[align=center] { 324 | text-align: center; 325 | } 326 | 327 | .reveal table th[align=right], 328 | .reveal table td[align=right] { 329 | text-align: right; 330 | } 331 | 332 | .reveal sup { 333 | vertical-align: super; 334 | font-size: smaller; 335 | } 336 | 337 | .reveal sub { 338 | vertical-align: sub; 339 | font-size: smaller; 340 | } 341 | 342 | .reveal small { 343 | display: inline-block; 344 | font-size: 0.6em; 345 | line-height: 1.2em; 346 | vertical-align: top; 347 | } 348 | 349 | .reveal small * { 350 | vertical-align: top; 351 | } 352 | 353 | .reveal img { 354 | margin: var(--r-block-margin) 0; 355 | } 356 | 357 | /********************************************* 358 | * LINKS 359 | *********************************************/ 360 | .reveal a { 361 | color: var(--r-link-color); 362 | text-decoration-style: dashed; 363 | text-underline-offset: 7px; 364 | text-decoration-thickness: 2px; 365 | transition: color 0.15s ease; 366 | } 367 | 368 | .reveal a:hover { 369 | color: var(--r-link-color-hover); 370 | text-shadow: none; 371 | border: none; 372 | } 373 | 374 | .reveal .roll span:after { 375 | color: #fff; 376 | background: var(--r-link-color-dark); 377 | } 378 | 379 | /********************************************* 380 | * Frame helper 381 | *********************************************/ 382 | .reveal section img, 383 | .reveal section video { 384 | margin: 15px 0; 385 | } 386 | 387 | /* TODO: check */ 388 | .reveal .r-frame { 389 | border: 4px solid var(--r-main-color); 390 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 391 | } 392 | 393 | .reveal a .r-frame { 394 | transition: all 0.15s linear; 395 | } 396 | 397 | .reveal a:hover .r-frame { 398 | border-color: var(--r-link-color); 399 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 400 | } 401 | 402 | /********************************************* 403 | * NAVIGATION CONTROLS 404 | *********************************************/ 405 | .reveal .controls { 406 | color: var(--r-link-color); 407 | } 408 | 409 | /********************************************* 410 | * PROGRESS BAR 411 | *********************************************/ 412 | .reveal .progress { 413 | background: rgba(0, 0, 0, 0.2); 414 | color: var(--r-link-color); 415 | } 416 | 417 | /********************************************* 418 | * PRINT BACKGROUND 419 | *********************************************/ 420 | @media print { 421 | .backgrounds { 422 | background-color: var(--r-background-color); 423 | } 424 | } 425 | /********************************************* 426 | * UTILITIES 427 | *********************************************/ 428 | .reveal .chunk { 429 | position: absolute; 430 | background-color: #fff; 431 | } 432 | 433 | .reveal .schedule, 434 | .reveal #schedule { 435 | display: none; 436 | position: fixed; 437 | right: 0; 438 | bottom: 0; 439 | left: 0; 440 | margin-left: auto; 441 | margin-right: auto; 442 | font-size: 20px; 443 | color: red; 444 | } 445 | 446 | .reveal.debug .schedule, 447 | .reveal.debug #schedule { 448 | display: block; 449 | } 450 | 451 | .reveal .font-1 { 452 | font-size: 25px; 453 | } 454 | 455 | .reveal .font-2 { 456 | font-size: 30px; 457 | } 458 | 459 | .reveal .font-3 { 460 | font-size: 35px; 461 | } 462 | 463 | .reveal .font-4 { 464 | font-size: 40px; 465 | } 466 | 467 | .reveal .decoration-none { 468 | text-decoration: none; 469 | } 470 | 471 | .bg-highlight { 472 | background: #ddd; 473 | } 474 | 475 | .reveal .highlight-1, mark { 476 | color: #007e19; 477 | } 478 | 479 | .reveal .highlight-2 { 480 | color: #d72d79; 481 | } 482 | 483 | .reveal .highlight-3 { 484 | color: #9355dc; 485 | } 486 | 487 | .reveal .highlight-4 { 488 | color: #0081a1; 489 | } 490 | 491 | .reveal code.highlight-1, .reveal code mark { 492 | color: #a7e22e; 493 | } 494 | 495 | .reveal code.highlight-2 { 496 | color: #ee83ff; 497 | } 498 | 499 | .reveal code.highlight-3 { 500 | color: #face00; 501 | } 502 | 503 | .reveal code.highlight-4 { 504 | color: #29e1cb; 505 | } 506 | 507 | .border { 508 | border: 1px solid #000 !important; 509 | } 510 | 511 | .reveal blockquote { 512 | background-color: #eee; 513 | } -------------------------------------------------------------------------------- /atomic-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Atomic Design in Practice 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 | 25 |
26 |
Dariusz Winkler
27 |
28 |
29 | 30 | darekkay.com 31 |
32 |
33 |
34 |
35 |

Atomic Design in Practice

36 | 37 |
38 |
39 |
40 |
41 | 42 |
43 | 44 |

45 | 46 |
47 |
48 | 49 |

50 | 51 |
52 |
53 |

Design System

54 |

A set of standards to manage 55 | design at scale by creating a 56 | shared language and visual consistency across different 57 | pages and channels

58 |
59 |

60 |
61 | 62 |
63 |
64 | 65 |
66 |
67 |

68 |
69 |
70 |
77 | 78 |
79 | 80 |
81 |
82 |

Atomic design is a mindset 83 | for creating maintainable design 84 | systems and consistent 85 | designs.

86 | 87 |
88 |
89 | 90 |

91 |
92 |

Non-linear process

93 |
94 | 95 |
96 |
97 |

Composability

98 |

99 | 100 |
101 |
102 | 103 |
104 |
105 | 
<style>
106 |   .link { color: blue; }
107 | </style>
108 | 
109 | <a class="link" href="#">Link</a>
110 |
111 |

112 |
113 |
114 |
115 | 
<nav class="navigation">
116 |   <h2 class="headline">Menu</h2>
117 |   <a class="link" href="/">Home</a>
118 |   <a class="link" href="/blog">Blog</a>
119 |   <a class="link" href="/about">About</a>
120 | </nav>
121 |
122 |

123 |
124 |
125 |

“We want navigation links to be red”

126 |
127 |
128 |
129 | 130 |

“We want navigation links to be red”

131 | 
.link { color: blue; }
132 |
133 | 
/** Atomic Design violation: Molecule alters an Atom */
134 | .navigation .link { color: red; }
135 | 
136 | /** Atomic Design violation: Molecule defines an Atom */
137 | .navigation-link { color: red; }
138 |
139 |
140 |

Atomic Design: “We don’t have red links”

141 |
142 |
143 |
144 | 145 |

Evaluate 146 | requirements before solutions

147 |
    148 |
  • Why are navigation links 149 | red?
    • 150 |
  • Where else will we use red 151 | links?
    • 152 |
  • Does the red color exist in 153 | our design system?
    • 154 |
155 | 156 |
157 |
158 |

Component variants

159 | 
.link { }
160 | .link-primary { color: blue; }
161 | 
162 | .link-navigation { color: red; }
163 | .link-secondary { color: red; }
164 |
165 | 
<nav class="navigation">
166 |   <h2 class="headline">Menu</h2>
167 |   <a class="link link-secondary" href="/">Home</a>
168 |   <a class="link link-secondary" href="/blog">Blog</a>
169 |   <a class="link link-secondary" href="/about">About</a>
170 | </nav>
171 |
172 |
173 |

Enforced reflexion

174 |
175 |
176 |

Enforced consistency

177 |
178 | 179 |
180 |
181 |

Review ideas in the context of the entire design system

182 | 183 |
184 |
185 |

Think globally

186 |

187 | 188 |
189 |
190 |

Handling violations

191 |
    192 |
  • Identify violation
    • 193 |
  • Raise the issue
    • 194 |
  • Find a solution 195 |
      196 |
    • Reuse existing atom
      • 197 |
    • Introduce new atom
      • 198 |
    • Introduce atom variant
      • 199 |
    • Make an exception
      • 200 |
    • 201 |
202 | 203 |
204 |
205 |

Tools & Examples

206 | 220 | 221 |
222 |
223 | 224 |

225 | Dos, Don’ts and Challenges 226 |

227 | 228 |
229 |
230 |

Maintain shared mindset

231 |

232 | 233 |
234 |
235 |

Maintain shared language

236 |

237 | 238 |
239 |
240 |

Think globally, act locally

241 |

(YAGNI)

242 | 243 |
244 |
245 |

Keep a living design system

246 | 247 |
248 |
249 |

Spend time to save time

250 | 251 |
252 |
253 |

Evaluate component variants

254 | 255 |
256 |
257 |

Avoid exceptions

258 |

Easy to implement, hard to maintain

259 | 260 |
261 |
262 |

Escalate Atomic Design violations

263 | 264 |
265 |
266 |

Unite design and implementation

267 |
    268 |
  • One source of truth often not 269 | feasible
    • 270 |
  • Keep pattern library synchronized with designs
    • 271 |
  • Document deviations
    • 272 |
273 | 274 |
275 |
276 |

Create a component library

277 |

Standalone package

278 | 
import { Button } from "carbon-components-react";
279 | import { Button } from "@mycompany/components";
280 | import Button from "@mycompany/button";
281 |
282 |

Integrated

283 | 
|-- components
284 |   |-- button
285 |     |-- button.story.js
286 |     |-- index.js
287 | |-- application
288 |   |-- checkout
289 |
290 | 291 |
292 |
293 |

Atomic Design 🤜🤛 Atomic CSS

294 | 
.margin-2 { ... }
295 | .font-large { ... }
296 | .focus-ring-default { ... }
297 |
298 | 
:root {
299 |   --margin-2: ...;
300 |   --font-large: ...;
301 |   --focus-ring-border: ...;
302 | }
303 |
304 | 305 |
306 |
307 |

Adapt Atomic Design to your situation

308 | 309 |
310 |
311 |

Design Systems / Atomic Design

312 |
    313 |
  • Consistent user 314 | experience
    • 315 |
  • Reusal of components and 316 | patterns
    • 317 |
  • Faster design, implementation 318 | and testing
    • 319 |
  • Documentation for 320 | everyone
    • 321 |
322 | 323 |
324 | 325 |
326 |

Thank you!

327 | 328 | 335 |
Dariusz Winkler
336 |
337 | 338 | darekkay.com 339 |
340 |
341 | 342 |
343 |
344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 374 | 375 | 376 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/js/popper.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @popperjs/core v2.5.4 - MIT License 3 | */ 4 | 5 | "use strict";!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Popper={})}(this,(function(e){function t(e){return{width:(e=e.getBoundingClientRect()).width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function n(e){return"[object Window]"!==e.toString()?(e=e.ownerDocument)&&e.defaultView||window:e}function r(e){return{scrollLeft:(e=n(e)).pageXOffset,scrollTop:e.pageYOffset}}function o(e){return e instanceof n(e).Element||e instanceof Element}function i(e){return e instanceof n(e).HTMLElement||e instanceof HTMLElement}function a(e){return e?(e.nodeName||"").toLowerCase():null}function s(e){return((o(e)?e.ownerDocument:e.document)||window.document).documentElement}function f(e){return t(s(e)).left+r(e).scrollLeft}function c(e){return n(e).getComputedStyle(e)}function p(e){return e=c(e),/auto|scroll|overlay|hidden/.test(e.overflow+e.overflowY+e.overflowX)}function l(e,o,c){void 0===c&&(c=!1);var l=s(o);e=t(e);var u=i(o),d={scrollLeft:0,scrollTop:0},m={x:0,y:0};return(u||!u&&!c)&&(("body"!==a(o)||p(l))&&(d=o!==n(o)&&i(o)?{scrollLeft:o.scrollLeft,scrollTop:o.scrollTop}:r(o)),i(o)?((m=t(o)).x+=o.clientLeft,m.y+=o.clientTop):l&&(m.x=f(l))),{x:e.left+d.scrollLeft-m.x,y:e.top+d.scrollTop-m.y,width:e.width,height:e.height}}function u(e){return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}function d(e){return"html"===a(e)?e:e.assignedSlot||e.parentNode||e.host||s(e)}function m(e,t){void 0===t&&(t=[]);var r=function e(t){return 0<=["html","body","#document"].indexOf(a(t))?t.ownerDocument.body:i(t)&&p(t)?t:e(d(t))}(e);e="body"===a(r);var o=n(r);return r=e?[o].concat(o.visualViewport||[],p(r)?r:[]):r,t=t.concat(r),e?t:t.concat(m(d(r)))}function h(e){if(!i(e)||"fixed"===c(e).position)return null;if(e=e.offsetParent){var t=s(e);if("body"===a(e)&&"static"===c(e).position&&"static"!==c(t).position)return t}return e}function g(e){for(var t=n(e),r=h(e);r&&0<=["table","td","th"].indexOf(a(r))&&"static"===c(r).position;)r=h(r);if(r&&"body"===a(r)&&"static"===c(r).position)return t;if(!r)e:{for(e=d(e);i(e)&&0>["html","body"].indexOf(a(e));){if("none"!==(r=c(e)).transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange){r=e;break e}e=e.parentNode}r=null}return r||t}function v(e){var t=new Map,n=new Set,r=[];return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||function e(o){n.add(o.name),[].concat(o.requires||[],o.requiresIfExists||[]).forEach((function(r){n.has(r)||(r=t.get(r))&&e(r)})),r.push(o)}(e)})),r}function b(e){var t;return function(){return t||(t=new Promise((function(n){Promise.resolve().then((function(){t=void 0,n(e())}))}))),t}}function y(e){return e.split("-")[0]}function O(e,t){var r,o=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if((r=o)&&(r=o instanceof(r=n(o).ShadowRoot)||o instanceof ShadowRoot),r)do{if(t&&e.isSameNode(t))return!0;t=t.parentNode||t.host}while(t);return!1}function w(e){return Object.assign(Object.assign({},e),{},{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function x(e,o){if("viewport"===o){o=n(e);var a=s(e);o=o.visualViewport;var p=a.clientWidth;a=a.clientHeight;var l=0,u=0;o&&(p=o.width,a=o.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(l=o.offsetLeft,u=o.offsetTop)),e=w(e={width:p,height:a,x:l+f(e),y:u})}else i(o)?((e=t(o)).top+=o.clientTop,e.left+=o.clientLeft,e.bottom=e.top+o.clientHeight,e.right=e.left+o.clientWidth,e.width=o.clientWidth,e.height=o.clientHeight,e.x=e.left,e.y=e.top):(u=s(e),e=s(u),l=r(u),o=u.ownerDocument.body,p=Math.max(e.scrollWidth,e.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=Math.max(e.scrollHeight,e.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),u=-l.scrollLeft+f(u),l=-l.scrollTop,"rtl"===c(o||e).direction&&(u+=Math.max(e.clientWidth,o?o.clientWidth:0)-p),e=w({width:p,height:a,x:u,y:l}));return e}function j(e,t,n){return t="clippingParents"===t?function(e){var t=m(d(e)),n=0<=["absolute","fixed"].indexOf(c(e).position)&&i(e)?g(e):e;return o(n)?t.filter((function(e){return o(e)&&O(e,n)&&"body"!==a(e)})):[]}(e):[].concat(t),(n=(n=[].concat(t,[n])).reduce((function(t,n){return n=x(e,n),t.top=Math.max(n.top,t.top),t.right=Math.min(n.right,t.right),t.bottom=Math.min(n.bottom,t.bottom),t.left=Math.max(n.left,t.left),t}),x(e,n[0]))).width=n.right-n.left,n.height=n.bottom-n.top,n.x=n.left,n.y=n.top,n}function M(e){return 0<=["top","bottom"].indexOf(e)?"x":"y"}function E(e){var t=e.reference,n=e.element,r=(e=e.placement)?y(e):null;e=e?e.split("-")[1]:null;var o=t.x+t.width/2-n.width/2,i=t.y+t.height/2-n.height/2;switch(r){case"top":o={x:o,y:t.y-n.height};break;case"bottom":o={x:o,y:t.y+t.height};break;case"right":o={x:t.x+t.width,y:i};break;case"left":o={x:t.x-n.width,y:i};break;default:o={x:t.x,y:t.y}}if(null!=(r=r?M(r):null))switch(i="y"===r?"height":"width",e){case"start":o[r]=Math.floor(o[r])-Math.floor(t[i]/2-n[i]/2);break;case"end":o[r]=Math.floor(o[r])+Math.ceil(t[i]/2-n[i]/2)}return o}function D(e){return Object.assign(Object.assign({},{top:0,right:0,bottom:0,left:0}),e)}function P(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}function L(e,n){void 0===n&&(n={});var r=n;n=void 0===(n=r.placement)?e.placement:n;var i=r.boundary,a=void 0===i?"clippingParents":i,f=void 0===(i=r.rootBoundary)?"viewport":i;i=void 0===(i=r.elementContext)?"popper":i;var c=r.altBoundary,p=void 0!==c&&c;r=D("number"!=typeof(r=void 0===(r=r.padding)?0:r)?r:P(r,T));var l=e.elements.reference;c=e.rects.popper,a=j(o(p=e.elements[p?"popper"===i?"reference":"popper":i])?p:p.contextElement||s(e.elements.popper),a,f),p=E({reference:f=t(l),element:c,strategy:"absolute",placement:n}),c=w(Object.assign(Object.assign({},c),p)),f="popper"===i?c:f;var u={top:a.top-f.top+r.top,bottom:f.bottom-a.bottom+r.bottom,left:a.left-f.left+r.left,right:f.right-a.right+r.right};if(e=e.modifiersData.offset,"popper"===i&&e){var d=e[n];Object.keys(u).forEach((function(e){var t=0<=["right","bottom"].indexOf(e)?1:-1,n=0<=["top","bottom"].indexOf(e)?"y":"x";u[e]+=d[n]*t}))}return u}function k(){for(var e=arguments.length,t=Array(e),n=0;n(v.devicePixelRatio||1)?"translate("+e+"px, "+l+"px)":"translate3d("+e+"px, "+l+"px, 0)",d)):Object.assign(Object.assign({},r),{},((t={})[h]=a?l+"px":"",t[m]=u?e+"px":"",t.transform="",t))}function A(e){return e.replace(/left|right|bottom|top/g,(function(e){return G[e]}))}function H(e){return e.replace(/start|end/g,(function(e){return J[e]}))}function R(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function S(e){return["top","right","bottom","left"].some((function(t){return 0<=e[t]}))}var T=["top","bottom","right","left"],q=T.reduce((function(e,t){return e.concat([t+"-start",t+"-end"])}),[]),C=[].concat(T,["auto"]).reduce((function(e,t){return e.concat([t,t+"-start",t+"-end"])}),[]),N="beforeRead read afterRead beforeMain main afterMain beforeWrite write afterWrite".split(" "),V={placement:"bottom",modifiers:[],strategy:"absolute"},I={passive:!0},_={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,r=e.instance,o=(e=e.options).scroll,i=void 0===o||o,a=void 0===(e=e.resize)||e,s=n(t.elements.popper),f=[].concat(t.scrollParents.reference,t.scrollParents.popper);return i&&f.forEach((function(e){e.addEventListener("scroll",r.update,I)})),a&&s.addEventListener("resize",r.update,I),function(){i&&f.forEach((function(e){e.removeEventListener("scroll",r.update,I)})),a&&s.removeEventListener("resize",r.update,I)}},data:{}},U={name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state;t.modifiersData[e.name]=E({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}},z={top:"auto",right:"auto",bottom:"auto",left:"auto"},F={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options;e=void 0===(e=n.gpuAcceleration)||e,n=void 0===(n=n.adaptive)||n,e={placement:y(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:e},null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign(Object.assign({},t.styles.popper),W(Object.assign(Object.assign({},e),{},{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:n})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign(Object.assign({},t.styles.arrow),W(Object.assign(Object.assign({},e),{},{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1})))),t.attributes.popper=Object.assign(Object.assign({},t.attributes.popper),{},{"data-popper-placement":t.placement})},data:{}},X={name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var n=t.styles[e]||{},r=t.attributes[e]||{},o=t.elements[e];i(o)&&a(o)&&(Object.assign(o.style,n),Object.keys(r).forEach((function(e){var t=r[e];!1===t?o.removeAttribute(e):o.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach((function(e){var r=t.elements[e],o=t.attributes[e]||{};e=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce((function(e,t){return e[t]="",e}),{}),i(r)&&a(r)&&(Object.assign(r.style,e),Object.keys(o).forEach((function(e){r.removeAttribute(e)})))}))}},requires:["computeStyles"]},Y={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,n=e.name,r=void 0===(e=e.options.offset)?[0,0]:e,o=(e=C.reduce((function(e,n){var o=t.rects,i=y(n),a=0<=["left","top"].indexOf(i)?-1:1,s="function"==typeof r?r(Object.assign(Object.assign({},o),{},{placement:n})):r;return o=(o=s[0])||0,s=((s=s[1])||0)*a,i=0<=["left","right"].indexOf(i)?{x:s,y:o}:{x:o,y:s},e[n]=i,e}),{}))[t.placement],i=o.x;o=o.y,null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=i,t.modifiersData.popperOffsets.y+=o),t.modifiersData[n]=e}},G={left:"right",right:"left",bottom:"top",top:"bottom"},J={start:"end",end:"start"},K={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options;if(e=e.name,!t.modifiersData[e]._skip){var r=n.mainAxis;r=void 0===r||r;var o=n.altAxis;o=void 0===o||o;var i=n.fallbackPlacements,a=n.padding,s=n.boundary,f=n.rootBoundary,c=n.altBoundary,p=n.flipVariations,l=void 0===p||p,u=n.allowedAutoPlacements;p=y(n=t.options.placement),i=i||(p!==n&&l?function(e){if("auto"===y(e))return[];var t=A(e);return[H(e),t,H(t)]}(n):[A(n)]);var d=[n].concat(i).reduce((function(e,n){return e.concat("auto"===y(n)?function(e,t){void 0===t&&(t={});var n=t.boundary,r=t.rootBoundary,o=t.padding,i=t.flipVariations,a=t.allowedAutoPlacements,s=void 0===a?C:a,f=t.placement.split("-")[1];0===(i=(t=f?i?q:q.filter((function(e){return e.split("-")[1]===f})):T).filter((function(e){return 0<=s.indexOf(e)}))).length&&(i=t);var c=i.reduce((function(t,i){return t[i]=L(e,{placement:i,boundary:n,rootBoundary:r,padding:o})[y(i)],t}),{});return Object.keys(c).sort((function(e,t){return c[e]-c[t]}))}(t,{placement:n,boundary:s,rootBoundary:f,padding:a,flipVariations:l,allowedAutoPlacements:u}):n)}),[]);n=t.rects.reference,i=t.rects.popper;var m=new Map;p=!0;for(var h=d[0],g=0;gi[x]&&(O=A(O)),x=A(O),w=[],r&&w.push(0>=j[b]),o&&w.push(0>=j[O],0>=j[x]),w.every((function(e){return e}))){h=v,p=!1;break}m.set(v,w)}if(p)for(r=function(e){var t=d.find((function(t){if(t=m.get(t))return t.slice(0,e).every((function(e){return e}))}));if(t)return h=t,"break"},o=l?3:1;0 2 | 17 | 18 | 19 | 20 | 21 | 22 | Dev Ninja Tools 23 | 24 | 33 | 96 | 99 | 100 | 101 |
102 |
103 |

Dev Ninja Tools

104 |
105 | 122 |

By Dariusz Krolikowski, first presented at DevOpenSpace 2017

123 |

xkcd - is it worth it?

124 |

XKCD

125 |

Chrome Dev Tools

126 |
    127 |
  • In-/Decrement CSS values: 128 |
      129 |
    • Up / Down: increment / decrement by 1
      • 130 |
    • Alt + Up: increment by 0.1
      • 131 |
    • Shift + Up: increment by 10
      • 132 |
    • Ctrl + Up: increment by 100
      • 133 |
    • 134 |
  • Analyze hover styles 135 |
      136 |
    • :hov for CSS :hover effects
      • 137 |
    • Debugger (F8) for JS effects
      • 138 |
    • 139 |
  • Toggle element classes 140 |
      141 |
    • Add/remove classes
      • 142 |
    • 143 |
  • DevTools snippets 144 |
      145 |
    • Alternative to bookmarklets
      • 146 |
    • 147 |
  • Throttle CPU / Simulate 3G Network
    • 148 |
  • Capture full site screenshot: 149 |
      150 |
    • Open Command Menu: Ctrl + Shift + P
      • 151 |
    • Capture full size screenshot
      • 152 |
    • 153 |
154 |

Bookmarklets / Browser Addons

155 | 161 |

Userscripts

162 |
    163 |
  • Browser AddOn: Tempermonkey / Greasemonkey
    • 164 |
  • Manual
    • 165 |
166 |

Text Snippets

167 |
    168 |
  • Tools: 169 |
    • 174 |
  • Use cases: 175 |
      176 |
    • salutation (sgdh)
      • 177 |
    • form data (name, e-mail, phone number)
      • 178 |
    • auto-correct (udn → und)
      • 179 |
    • symbols/emojis (→, ✔, ✘)
      • 180 |
    • 181 |
182 |

Emmet

183 |
    184 |
  • Dynamic snippets for HTML and CSS 185 |
      186 |
    • ID: #container
      • 187 |
    • Class: .item
      • 188 |
    • Tags: li.item
      • 189 |
    • Chaining: li#id.item
      • 190 |
    • Nesting: ul>li, ul>li.list-item
      • 191 |
    • Multiplication: ul>li.list-item*10
      • 192 |
    • Lorem Ipsum: lorem
      • 193 |
    • 194 |
  • Available for most editors natively or as a plugin
    • 195 |
  • Enable for JSX/React in VSCode:
    • 196 |
197 | 200 |

API Documentation Browsers

201 | 207 |

Windows

208 |
    209 |
  • Shift + Right click 210 |
      211 |
    • File/folder: "Copy as path"
      • 212 |
    • Explorer: "Open command prompt here"
      • 213 |
    • 214 |
  • Create .dotfiles in Windows Explorer 215 |
      216 |
    • Put a dot at the end of the file name: .gitignore.
      • 217 |
    • Turn on "Show file extensions"
      • 218 |
    • 219 |
  • Task bar 220 |
      221 |
    • Shift + Left click: Open another instance
      • 222 |
    • Ctrl + Shift + Left click: Open an instance with admin rights
      • 223 |
    • 224 |
225 |

Shortcuts

226 |
    227 |
  • Problem: learning new shortcuts may be difficult 228 |
      229 |
    • Common approach: print a shortcut cheatsheet and start learning it →
      • 230 |
    • Instead/additionally: create your own shortcuts for the most common tasks
      • 231 |
    • One at a time to prevent information overload
      • 232 |
    • 233 |
  • Use identic basic shortcuts across all editors
    • 234 |
  • Display shortcuts: 235 |
    • 239 |
240 |

Bash

241 | 245 |

Git Aliases

246 | 249 |

View log files

250 | 254 |

Atom Plugins

255 | 258 |

Tools

259 |
    260 |
  • ConEmu 261 |
      262 |
    • Tabbed console emulator
      • 263 |
    • Enhances default Windows command (selection, Ctrl + V)
      • 264 |
    • Clickable URLs (Ctrl + Click)
      • 265 |
    • 266 |
  • Launchy
    • 267 |
  • Ditto
    • 268 |
  • XYplorer
    • 269 |
270 |
271 | 272 | -------------------------------------------------------------------------------- /accessible-web/resources/assets/js/tippy.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@popperjs/core")):"function"==typeof define&&define.amd?define(["@popperjs/core"],e):(t=t||self).tippy=e(t.Popper)}(this,(function(t){"use strict";var e="undefined"!=typeof window&&"undefined"!=typeof document,n=e?navigator.userAgent:"",r=/MSIE |Trident\//.test(n),i={passive:!0,capture:!0};function o(t,e,n){if(Array.isArray(t)){var r=t[e];return null==r?Array.isArray(n)?n[e]:n:r}return t}function a(t,e){var n={}.toString.call(t);return 0===n.indexOf("[object")&&n.indexOf(e+"]")>-1}function s(t,e){return"function"==typeof t?t.apply(void 0,e):t}function u(t,e){return 0===e?t:function(r){clearTimeout(n),n=setTimeout((function(){t(r)}),e)};var n}function c(t,e){var n=Object.assign({},t);return e.forEach((function(t){delete n[t]})),n}function p(t){return[].concat(t)}function f(t,e){-1===t.indexOf(e)&&t.push(e)}function l(t){return t.split("-")[0]}function d(t){return[].slice.call(t)}function v(){return document.createElement("div")}function m(t){return["Element","Fragment"].some((function(e){return a(t,e)}))}function g(t){return a(t,"MouseEvent")}function h(t){return!(!t||!t._tippy||t._tippy.reference!==t)}function b(t){return m(t)?[t]:function(t){return a(t,"NodeList")}(t)?d(t):Array.isArray(t)?t:d(document.querySelectorAll(t))}function y(t,e){t.forEach((function(t){t&&(t.style.transitionDuration=e+"ms")}))}function x(t,e){t.forEach((function(t){t&&t.setAttribute("data-state",e)}))}function w(t){var e=p(t)[0];return e&&e.ownerDocument||document}function E(t,e,n){var r=e+"EventListener";["transitionend","webkitTransitionEnd"].forEach((function(e){t[r](e,n)}))}var T={isTouch:!1},C=0;function A(){T.isTouch||(T.isTouch=!0,window.performance&&document.addEventListener("mousemove",O))}function O(){var t=performance.now();t-C<20&&(T.isTouch=!1,document.removeEventListener("mousemove",O)),C=t}function L(){var t=document.activeElement;if(h(t)){var e=t._tippy;t.blur&&!e.state.isVisible&&t.blur()}}var D=Object.assign({appendTo:function(){return document.body},aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:!0,ignoreAttributes:!1,interactive:!1,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function(){},onBeforeUpdate:function(){},onCreate:function(){},onDestroy:function(){},onHidden:function(){},onHide:function(){},onMount:function(){},onShow:function(){},onShown:function(){},onTrigger:function(){},onUntrigger:function(){},onClickOutside:function(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:!1,touch:!0,trigger:"mouseenter focus",triggerTarget:null},{animateFill:!1,followCursor:!1,inlinePositioning:!1,sticky:!1},{},{allowHTML:!1,animation:"fade",arrow:!0,content:"",inertia:!1,maxWidth:350,role:"tooltip",theme:"",zIndex:9999}),k=Object.keys(D);function R(t){var e=(t.plugins||[]).reduce((function(e,n){var r=n.name,i=n.defaultValue;return r&&(e[r]=void 0!==t[r]?t[r]:i),e}),{});return Object.assign({},t,{},e)}function M(t,e){var n=Object.assign({},e,{content:s(e.content,[t])},e.ignoreAttributes?{}:function(t,e){return(e?Object.keys(R(Object.assign({},D,{plugins:e}))):k).reduce((function(e,n){var r=(t.getAttribute("data-tippy-"+n)||"").trim();if(!r)return e;if("content"===n)e[n]=r;else try{e[n]=JSON.parse(r)}catch(t){e[n]=r}return e}),{})}(t,e.plugins));return n.aria=Object.assign({},D.aria,{},n.aria),n.aria={expanded:"auto"===n.aria.expanded?e.interactive:n.aria.expanded,content:"auto"===n.aria.content?e.interactive?null:"describedby":n.aria.content},n}function P(t,e){t.innerHTML=e}function V(t){var e=v();return!0===t?e.className="tippy-arrow":(e.className="tippy-svg-arrow",m(t)?e.appendChild(t):P(e,t)),e}function j(t,e){m(e.content)?(P(t,""),t.appendChild(e.content)):"function"!=typeof e.content&&(e.allowHTML?P(t,e.content):t.textContent=e.content)}function I(t){var e=t.firstElementChild,n=d(e.children);return{box:e,content:n.find((function(t){return t.classList.contains("tippy-content")})),arrow:n.find((function(t){return t.classList.contains("tippy-arrow")||t.classList.contains("tippy-svg-arrow")})),backdrop:n.find((function(t){return t.classList.contains("tippy-backdrop")}))}}function S(t){var e=v(),n=v();n.className="tippy-box",n.setAttribute("data-state","hidden"),n.setAttribute("tabindex","-1");var r=v();function i(n,r){var i=I(e),o=i.box,a=i.content,s=i.arrow;r.theme?o.setAttribute("data-theme",r.theme):o.removeAttribute("data-theme"),"string"==typeof r.animation?o.setAttribute("data-animation",r.animation):o.removeAttribute("data-animation"),r.inertia?o.setAttribute("data-inertia",""):o.removeAttribute("data-inertia"),o.style.maxWidth="number"==typeof r.maxWidth?r.maxWidth+"px":r.maxWidth,r.role?o.setAttribute("role",r.role):o.removeAttribute("role"),n.content===r.content&&n.allowHTML===r.allowHTML||j(a,t.props),r.arrow?s?n.arrow!==r.arrow&&(o.removeChild(s),o.appendChild(V(r.arrow))):o.appendChild(V(r.arrow)):s&&o.removeChild(s)}return r.className="tippy-content",r.setAttribute("data-state","hidden"),j(r,t.props),e.appendChild(n),n.appendChild(r),i(t.props,t.props),{popper:e,onUpdate:i}}S.$$tippy=!0;var B=1,H=[],N=[];function U(e,n){var a,c,m,h,b,C,A,O,L,k=M(e,Object.assign({},D,{},R((a=n,Object.keys(a).reduce((function(t,e){return void 0!==a[e]&&(t[e]=a[e]),t}),{}))))),P=!1,V=!1,j=!1,S=!1,U=[],_=u(bt,k.interactiveDebounce),z=B++,F=(L=k.plugins).filter((function(t,e){return L.indexOf(t)===e})),W={id:z,reference:e,popper:v(),popperInstance:null,props:k,state:{isEnabled:!0,isVisible:!1,isDestroyed:!1,isMounted:!1,isShown:!1},plugins:F,clearDelayTimeouts:function(){clearTimeout(c),clearTimeout(m),cancelAnimationFrame(h)},setProps:function(t){if(W.state.isDestroyed)return;it("onBeforeUpdate",[W,t]),gt();var n=W.props,r=M(e,Object.assign({},W.props,{},t,{ignoreAttributes:!0}));W.props=r,mt(),n.interactiveDebounce!==r.interactiveDebounce&&(st(),_=u(bt,r.interactiveDebounce));n.triggerTarget&&!r.triggerTarget?p(n.triggerTarget).forEach((function(t){t.removeAttribute("aria-expanded")})):r.triggerTarget&&e.removeAttribute("aria-expanded");at(),rt(),q&&q(n,r);W.popperInstance&&(Et(),Ct().forEach((function(t){requestAnimationFrame(t._tippy.popperInstance.forceUpdate)})));it("onAfterUpdate",[W,t])},setContent:function(t){W.setProps({content:t})},show:function(){var t=W.state.isVisible,e=W.state.isDestroyed,n=!W.state.isEnabled,r=T.isTouch&&!W.props.touch,i=o(W.props.duration,0,D.duration);if(t||e||n||r)return;if(Z().hasAttribute("disabled"))return;if(it("onShow",[W],!1),!1===W.props.onShow(W))return;W.state.isVisible=!0,Q()&&(Y.style.visibility="visible");rt(),ft(),W.state.isMounted||(Y.style.transition="none");if(Q()){var a=et(),u=a.box,c=a.content;y([u,c],0)}A=function(){if(W.state.isVisible&&!S){if(S=!0,Y.offsetHeight,Y.style.transition=W.props.moveTransition,Q()&&W.props.animation){var t=et(),e=t.box,n=t.content;y([e,n],i),x([e,n],"visible")}ot(),at(),f(N,W),W.state.isMounted=!0,it("onMount",[W]),W.props.animation&&Q()&&function(t,e){dt(t,e)}(i,(function(){W.state.isShown=!0,it("onShown",[W])}))}},function(){var t,e=W.props.appendTo,n=Z();t=W.props.interactive&&e===D.appendTo||"parent"===e?n.parentNode:s(e,[n]);t.contains(Y)||t.appendChild(Y);Et()}()},hide:function(){var t=!W.state.isVisible,e=W.state.isDestroyed,n=!W.state.isEnabled,r=o(W.props.duration,1,D.duration);if(t||e||n)return;if(it("onHide",[W],!1),!1===W.props.onHide(W))return;W.state.isVisible=!1,W.state.isShown=!1,S=!1,P=!1,Q()&&(Y.style.visibility="hidden");if(st(),lt(),rt(),Q()){var i=et(),a=i.box,s=i.content;W.props.animation&&(y([a,s],r),x([a,s],"hidden"))}ot(),at(),W.props.animation?Q()&&function(t,e){dt(t,(function(){!W.state.isVisible&&Y.parentNode&&Y.parentNode.contains(Y)&&e()}))}(r,W.unmount):W.unmount()},hideWithInteractivity:function(t){tt().addEventListener("mousemove",_),f(H,_),_(t)},enable:function(){W.state.isEnabled=!0},disable:function(){W.hide(),W.state.isEnabled=!1},unmount:function(){W.state.isVisible&&W.hide();if(!W.state.isMounted)return;Tt(),Ct().forEach((function(t){t._tippy.unmount()})),Y.parentNode&&Y.parentNode.removeChild(Y);N=N.filter((function(t){return t!==W})),W.state.isMounted=!1,it("onHidden",[W])},destroy:function(){if(W.state.isDestroyed)return;W.clearDelayTimeouts(),W.unmount(),gt(),delete e._tippy,W.state.isDestroyed=!0,it("onDestroy",[W])}};if(!k.render)return W;var X=k.render(W),Y=X.popper,q=X.onUpdate;Y.setAttribute("data-tippy-root",""),Y.id="tippy-"+W.id,W.popper=Y,e._tippy=W,Y._tippy=W;var $=F.map((function(t){return t.fn(W)})),J=e.hasAttribute("aria-expanded");return mt(),at(),rt(),it("onCreate",[W]),k.showOnCreate&&At(),Y.addEventListener("mouseenter",(function(){W.props.interactive&&W.state.isVisible&&W.clearDelayTimeouts()})),Y.addEventListener("mouseleave",(function(t){W.props.interactive&&W.props.trigger.indexOf("mouseenter")>=0&&(tt().addEventListener("mousemove",_),_(t))})),W;function G(){var t=W.props.touch;return Array.isArray(t)?t:[t,0]}function K(){return"hold"===G()[0]}function Q(){var t;return!!(null==(t=W.props.render)?void 0:t.$$tippy)}function Z(){return O||e}function tt(){var t=Z().parentNode;return t?w(t):document}function et(){return I(Y)}function nt(t){return W.state.isMounted&&!W.state.isVisible||T.isTouch||b&&"focus"===b.type?0:o(W.props.delay,t?0:1,D.delay)}function rt(){Y.style.pointerEvents=W.props.interactive&&W.state.isVisible?"":"none",Y.style.zIndex=""+W.props.zIndex}function it(t,e,n){var r;(void 0===n&&(n=!0),$.forEach((function(n){n[t]&&n[t].apply(void 0,e)})),n)&&(r=W.props)[t].apply(r,e)}function ot(){var t=W.props.aria;if(t.content){var n="aria-"+t.content,r=Y.id;p(W.props.triggerTarget||e).forEach((function(t){var e=t.getAttribute(n);if(W.state.isVisible)t.setAttribute(n,e?e+" "+r:r);else{var i=e&&e.replace(r,"").trim();i?t.setAttribute(n,i):t.removeAttribute(n)}}))}}function at(){!J&&W.props.aria.expanded&&p(W.props.triggerTarget||e).forEach((function(t){W.props.interactive?t.setAttribute("aria-expanded",W.state.isVisible&&t===Z()?"true":"false"):t.removeAttribute("aria-expanded")}))}function st(){tt().removeEventListener("mousemove",_),H=H.filter((function(t){return t!==_}))}function ut(t){if(!(T.isTouch&&(j||"mousedown"===t.type)||W.props.interactive&&Y.contains(t.target))){if(Z().contains(t.target)){if(T.isTouch)return;if(W.state.isVisible&&W.props.trigger.indexOf("click")>=0)return}else it("onClickOutside",[W,t]);!0===W.props.hideOnClick&&(W.clearDelayTimeouts(),W.hide(),V=!0,setTimeout((function(){V=!1})),W.state.isMounted||lt())}}function ct(){j=!0}function pt(){j=!1}function ft(){var t=tt();t.addEventListener("mousedown",ut,!0),t.addEventListener("touchend",ut,i),t.addEventListener("touchstart",pt,i),t.addEventListener("touchmove",ct,i)}function lt(){var t=tt();t.removeEventListener("mousedown",ut,!0),t.removeEventListener("touchend",ut,i),t.removeEventListener("touchstart",pt,i),t.removeEventListener("touchmove",ct,i)}function dt(t,e){var n=et().box;function r(t){t.target===n&&(E(n,"remove",r),e())}if(0===t)return e();E(n,"remove",C),E(n,"add",r),C=r}function vt(t,n,r){void 0===r&&(r=!1),p(W.props.triggerTarget||e).forEach((function(e){e.addEventListener(t,n,r),U.push({node:e,eventType:t,handler:n,options:r})}))}function mt(){var t;K()&&(vt("touchstart",ht,{passive:!0}),vt("touchend",yt,{passive:!0})),(t=W.props.trigger,t.split(/\s+/).filter(Boolean)).forEach((function(t){if("manual"!==t)switch(vt(t,ht),t){case"mouseenter":vt("mouseleave",yt);break;case"focus":vt(r?"focusout":"blur",xt);break;case"focusin":vt("focusout",xt)}}))}function gt(){U.forEach((function(t){var e=t.node,n=t.eventType,r=t.handler,i=t.options;e.removeEventListener(n,r,i)})),U=[]}function ht(t){var e,n=!1;if(W.state.isEnabled&&!wt(t)&&!V){var r="focus"===(null==(e=b)?void 0:e.type);b=t,O=t.currentTarget,at(),!W.state.isVisible&&g(t)&&H.forEach((function(e){return e(t)})),"click"===t.type&&(W.props.trigger.indexOf("mouseenter")<0||P)&&!1!==W.props.hideOnClick&&W.state.isVisible?n=!0:At(t),"click"===t.type&&(P=!n),n&&!r&&Ot(t)}}function bt(t){var e=t.target,n=Z().contains(e)||Y.contains(e);"mousemove"===t.type&&n||function(t,e){var n=e.clientX,r=e.clientY;return t.every((function(t){var e=t.popperRect,i=t.popperState,o=t.props.interactiveBorder,a=l(i.placement),s=i.modifiersData.offset;if(!s)return!0;var u="bottom"===a?s.top.y:0,c="top"===a?s.bottom.y:0,p="right"===a?s.left.x:0,f="left"===a?s.right.x:0,d=e.top-r+u>o,v=r-e.bottom-c>o,m=e.left-n+p>o,g=n-e.right-f>o;return d||v||m||g}))}(Ct().concat(Y).map((function(t){var e,n=null==(e=t._tippy.popperInstance)?void 0:e.state;return n?{popperRect:t.getBoundingClientRect(),popperState:n,props:k}:null})).filter(Boolean),t)&&(st(),Ot(t))}function yt(t){wt(t)||W.props.trigger.indexOf("click")>=0&&P||(W.props.interactive?W.hideWithInteractivity(t):Ot(t))}function xt(t){W.props.trigger.indexOf("focusin")<0&&t.target!==Z()||W.props.interactive&&t.relatedTarget&&Y.contains(t.relatedTarget)||Ot(t)}function wt(t){return!!T.isTouch&&K()!==t.type.indexOf("touch")>=0}function Et(){Tt();var n=W.props,r=n.popperOptions,i=n.placement,o=n.offset,a=n.getReferenceClientRect,s=n.moveTransition,u=Q()?I(Y).arrow:null,c=a?{getBoundingClientRect:a,contextElement:a.contextElement||Z()}:e,p=[{name:"offset",options:{offset:o}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!s}},{name:"$$tippy",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(t){var e=t.state;if(Q()){var n=et().box;["placement","reference-hidden","escaped"].forEach((function(t){"placement"===t?n.setAttribute("data-placement",e.placement):e.attributes.popper["data-popper-"+t]?n.setAttribute("data-"+t,""):n.removeAttribute("data-"+t)})),e.attributes.popper={}}}}];Q()&&u&&p.push({name:"arrow",options:{element:u,padding:3}}),p.push.apply(p,(null==r?void 0:r.modifiers)||[]),W.popperInstance=t.createPopper(c,Y,Object.assign({},r,{placement:i,onFirstUpdate:A,modifiers:p}))}function Tt(){W.popperInstance&&(W.popperInstance.destroy(),W.popperInstance=null)}function Ct(){return d(Y.querySelectorAll("[data-tippy-root]"))}function At(t){W.clearDelayTimeouts(),t&&it("onTrigger",[W,t]),ft();var e=nt(!0),n=G(),r=n[0],i=n[1];T.isTouch&&"hold"===r&&i&&(e=i),e?c=setTimeout((function(){W.show()}),e):W.show()}function Ot(t){if(W.clearDelayTimeouts(),it("onUntrigger",[W,t]),W.state.isVisible){if(!(W.props.trigger.indexOf("mouseenter")>=0&&W.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(t.type)>=0&&P)){var e=nt(!1);e?m=setTimeout((function(){W.state.isVisible&&W.hide()}),e):h=requestAnimationFrame((function(){W.hide()}))}}else lt()}}function _(t,e){void 0===e&&(e={});var n=D.plugins.concat(e.plugins||[]);document.addEventListener("touchstart",A,i),window.addEventListener("blur",L);var r=Object.assign({},e,{plugins:n}),o=b(t).reduce((function(t,e){var n=e&&U(e,r);return n&&t.push(n),t}),[]);return m(t)?o[0]:o}_.defaultProps=D,_.setDefaultProps=function(t){Object.keys(t).forEach((function(e){D[e]=t[e]}))},_.currentInput=T;var z={mouseover:"mouseenter",focusin:"focus",click:"click"};var F={name:"animateFill",defaultValue:!1,fn:function(t){var e;if(!(null==(e=t.props.render)?void 0:e.$$tippy))return{};var n=I(t.popper),r=n.box,i=n.content,o=t.props.animateFill?function(){var t=v();return t.className="tippy-backdrop",x([t],"hidden"),t}():null;return{onCreate:function(){o&&(r.insertBefore(o,r.firstElementChild),r.setAttribute("data-animatefill",""),r.style.overflow="hidden",t.setProps({arrow:!1,animation:"shift-away"}))},onMount:function(){if(o){var t=r.style.transitionDuration,e=Number(t.replace("ms",""));i.style.transitionDelay=Math.round(e/10)+"ms",o.style.transitionDuration=t,x([o],"visible")}},onShow:function(){o&&(o.style.transitionDuration="0ms")},onHide:function(){o&&x([o],"hidden")}}}};var W={clientX:0,clientY:0},X=[];function Y(t){var e=t.clientX,n=t.clientY;W={clientX:e,clientY:n}}var q={name:"followCursor",defaultValue:!1,fn:function(t){var e=t.reference,n=w(t.props.triggerTarget||e),r=!1,i=!1,o=!0,a=t.props;function s(){return"initial"===t.props.followCursor&&t.state.isVisible}function u(){n.addEventListener("mousemove",f)}function c(){n.removeEventListener("mousemove",f)}function p(){r=!0,t.setProps({getReferenceClientRect:null}),r=!1}function f(n){var r=!n.target||e.contains(n.target),i=t.props.followCursor,o=n.clientX,a=n.clientY,s=e.getBoundingClientRect(),u=o-s.left,c=a-s.top;!r&&t.props.interactive||t.setProps({getReferenceClientRect:function(){var t=e.getBoundingClientRect(),n=o,r=a;"initial"===i&&(n=t.left+u,r=t.top+c);var s="horizontal"===i?t.top:r,p="vertical"===i?t.right:n,f="horizontal"===i?t.bottom:r,l="vertical"===i?t.left:n;return{width:p-l,height:f-s,top:s,right:p,bottom:f,left:l}}})}function l(){t.props.followCursor&&(X.push({instance:t,doc:n}),function(t){t.addEventListener("mousemove",Y)}(n))}function d(){0===(X=X.filter((function(e){return e.instance!==t}))).filter((function(t){return t.doc===n})).length&&function(t){t.removeEventListener("mousemove",Y)}(n)}return{onCreate:l,onDestroy:d,onBeforeUpdate:function(){a=t.props},onAfterUpdate:function(e,n){var o=n.followCursor;r||void 0!==o&&a.followCursor!==o&&(d(),o?(l(),!t.state.isMounted||i||s()||u()):(c(),p()))},onMount:function(){t.props.followCursor&&!i&&(o&&(f(W),o=!1),s()||u())},onTrigger:function(t,e){g(e)&&(W={clientX:e.clientX,clientY:e.clientY}),i="focus"===e.type},onHidden:function(){t.props.followCursor&&(p(),c(),o=!0)}}}};var $={name:"inlinePositioning",defaultValue:!1,fn:function(t){var e,n=t.reference;var r=-1,i=!1,o={name:"tippyInlinePositioning",enabled:!0,phase:"afterWrite",fn:function(i){var o=i.state;t.props.inlinePositioning&&(e!==o.placement&&t.setProps({getReferenceClientRect:function(){return function(t){return function(t,e,n,r){if(n.length<2||null===t)return e;if(2===n.length&&r>=0&&n[0].left>n[1].right)return n[r]||e;switch(t){case"top":case"bottom":var i=n[0],o=n[n.length-1],a="top"===t,s=i.top,u=o.bottom,c=a?i.left:o.left,p=a?i.right:o.right;return{top:s,bottom:u,left:c,right:p,width:p-c,height:u-s};case"left":case"right":var f=Math.min.apply(Math,n.map((function(t){return t.left}))),l=Math.max.apply(Math,n.map((function(t){return t.right}))),d=n.filter((function(e){return"left"===t?e.left===f:e.right===l})),v=d[0].top,m=d[d.length-1].bottom;return{top:v,bottom:m,left:f,right:l,width:l-f,height:m-v};default:return e}}(l(t),n.getBoundingClientRect(),d(n.getClientRects()),r)}(o.placement)}}),e=o.placement)}};function a(){var e;i||(e=function(t,e){var n;return{popperOptions:Object.assign({},t.popperOptions,{modifiers:[].concat(((null==(n=t.popperOptions)?void 0:n.modifiers)||[]).filter((function(t){return t.name!==e.name})),[e])})}}(t.props,o),i=!0,t.setProps(e),i=!1)}return{onCreate:a,onAfterUpdate:a,onTrigger:function(e,n){if(g(n)){var i=d(t.reference.getClientRects()),o=i.find((function(t){return t.left-2<=n.clientX&&t.right+2>=n.clientX&&t.top-2<=n.clientY&&t.bottom+2>=n.clientY}));r=i.indexOf(o)}},onUntrigger:function(){r=-1}}}};var J={name:"sticky",defaultValue:!1,fn:function(t){var e=t.reference,n=t.popper;function r(e){return!0===t.props.sticky||t.props.sticky===e}var i=null,o=null;function a(){var s=r("reference")?(t.popperInstance?t.popperInstance.state.elements.reference:e).getBoundingClientRect():null,u=r("popper")?n.getBoundingClientRect():null;(s&&G(i,s)||u&&G(o,u))&&t.popperInstance&&t.popperInstance.update(),i=s,o=u,t.state.isMounted&&requestAnimationFrame(a)}return{onMount:function(){t.props.sticky&&a()}}}};function G(t,e){return!t||!e||(t.top!==e.top||t.right!==e.right||t.bottom!==e.bottom||t.left!==e.left)}return e&&function(t){var e=document.createElement("style");e.textContent=t,e.setAttribute("data-tippy-stylesheet","");var n=document.head,r=document.querySelector("head>style,head>link");r?n.insertBefore(e,r):n.appendChild(e)}('.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}'),_.setDefaultProps({plugins:[F,q,$,J],render:S}),_.createSingleton=function(t,e){void 0===e&&(e={});var n,r=t,i=[],o=e.overrides,a=[];function s(){i=r.map((function(t){return t.reference}))}function u(t){r.forEach((function(e){t?e.enable():e.disable()}))}function p(t){return r.map((function(e){var r=e.setProps;return e.setProps=function(i){r(i),e.reference===n&&t.setProps(i)},function(){e.setProps=r}}))}u(!1),s();var f={fn:function(){return{onDestroy:function(){u(!0)},onTrigger:function(t,e){var a=e.currentTarget,s=i.indexOf(a);if(a!==n){n=a;var u=(o||[]).concat("content").reduce((function(t,e){return t[e]=r[s].props[e],t}),{});t.setProps(Object.assign({},u,{getReferenceClientRect:"function"==typeof u.getReferenceClientRect?u.getReferenceClientRect:function(){return a.getBoundingClientRect()}}))}}}}},l=_(v(),Object.assign({},c(e,["overrides"]),{plugins:[f].concat(e.plugins||[]),triggerTarget:i})),d=l.setProps;return l.setProps=function(t){o=t.overrides||o,d(t)},l.setInstances=function(t){u(!0),a.forEach((function(t){return t()})),r=t,u(!1),s(),p(l),l.setProps({triggerTarget:i})},a=p(l),l},_.delegate=function(t,e){var n=[],r=[],i=!1,o=e.target,a=c(e,["target"]),s=Object.assign({},a,{trigger:"manual",touch:!1}),u=Object.assign({},a,{showOnCreate:!0}),f=_(t,s);function l(t){if(t.target&&!i){var n=t.target.closest(o);if(n){var a=n.getAttribute("data-tippy-trigger")||e.trigger||D.trigger;if(!n._tippy&&!("touchstart"===t.type&&"boolean"==typeof u.touch||"touchstart"!==t.type&&a.indexOf(z[t.type])<0)){var s=_(n,u);s&&(r=r.concat(s))}}}}function d(t,e,r,i){void 0===i&&(i=!1),t.addEventListener(e,r,i),n.push({node:t,eventType:e,handler:r,options:i})}return p(f).forEach((function(t){var e=t.destroy,o=t.enable,a=t.disable;t.destroy=function(t){void 0===t&&(t=!0),t&&r.forEach((function(t){t.destroy()})),r=[],n.forEach((function(t){var e=t.node,n=t.eventType,r=t.handler,i=t.options;e.removeEventListener(n,r,i)})),n=[],e()},t.enable=function(){o(),r.forEach((function(t){return t.enable()})),i=!1},t.disable=function(){a(),r.forEach((function(t){return t.disable()})),i=!0},function(t){var e=t.reference;d(e,"touchstart",l),d(e,"mouseover",l),d(e,"focusin",l),d(e,"click",l)}(t)})),f},_.hideAll=function(t){var e=void 0===t?{}:t,n=e.exclude,r=e.duration;N.forEach((function(t){var e=!1;if(n&&(e=h(n)?t.reference===n:t.popper===n.popper),!e){var i=t.props.duration;t.setProps({duration:r}),t.hide(),t.state.isDestroyed||t.setProps({duration:i})}}))},_.roundArrow='',_})); 2 | //# sourceMappingURL=tippy-bundle.umd.min.js.map 3 | -------------------------------------------------------------------------------- /accessible-web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Accessible Web 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 |
24 |
25 | 26 |
27 |
Dariusz Winkler
28 | darekkay.com 29 |
30 |
31 |

Accessible Web

32 |

Barrierefreiheit im digitalen Zeitalter

33 |
34 |
35 |
36 | 37 | 38 |
39 | 40 | Company logos: Amazon, Nike, Doordash, Hasbro, Domino's Pizza, Burger King, Five Guys Burgers and Fries 41 | 42 | 43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 |
55 |
Dariusz Winkler
56 | darekkay.com 57 |
58 |
59 |

Accessible Web

60 |

Barrierefreiheit im digitalen Zeitalter

61 |
62 |
63 | 64 | 65 |
66 | 67 | 68 | 69 |
70 |

What?

71 |

Why?

72 |

How?

73 | 74 | 75 |
76 | 77 | 78 | 79 |
80 |

81 | „Web Accessibility means that
82 | people with disabilities
83 | can use the Web.” 84 |

85 | 86 | 87 |
88 | 89 | 90 | 91 |
92 |

93 | „Web Accessibility means that
94 | anyone
95 | can use the Web.” 96 |

97 | 98 | 99 |
100 | 101 | 102 | 103 |
104 | Examples for impairements. Touch, Permanent: One arm. Touch, Temporary: Arm injury. Touch, Situational: New parent. See, Permanent: Blind. See, Temporary: Cataract. See, Situational: Distracted driver. Hear, Permanent: Deaf. Hear, Temporary: Ear infection. Hear, Situational: Bartender. Speak, Permanent: Non-verbal. Speak, Temporary: Laryngitis. Speak, Situational: Heavy accent. 105 | 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 |
114 |
115 | 116 |
117 | Cognitive impairments, Neurodiversity, Ageing, ... 118 |
119 | 120 |
121 | ⇒ 122 | Microsoft Inclusive Design 123 |
124 | 125 | 126 |
127 | 128 | 129 | 130 |
131 |

Impairments are not an accessibility problem.
The barriers we create are.

132 |
133 | A person in a wheelchair in front of big stairs 134 | A person with two trolleys in front of big stairs 135 | A person on a bicycle in front of big stairs 136 | A person with a baby stroller in front of big stairs 137 |
138 | 139 |
140 | 141 | 142 | 143 |
144 |

15% of the world’s population
145 | experience some form of disability.

146 | 147 | 148 |
149 | 150 | 151 | 152 |
153 |

27% of adults in the European Union
154 | experience some form of disability.

155 | 156 | 157 | 158 |
159 | 160 | 161 | 162 |
163 |

Ethics ❤️

164 |

Business 💰️

165 |

Legal ‍⚖️

166 | 167 | 168 |
169 | 170 | 171 | 172 |
173 | 174 |

EU Accessibility Act

175 |

Barrierefreiheitsstärkungsgesetz (BFSG)

176 | 177 |
28th of June 2025
178 | 179 |
    180 |
  • Websites
    • 181 |
  • Web, desktop and mobile apps
    • 182 |
  • PDFs, emails
    • 183 |
  • Terminals, ...
    • 184 |
185 | 186 |

Fines up to 100.000 € for violations and/or ban from EU market.

187 | 188 | 189 |
190 | 191 | 192 | 193 |
194 |

How do I make my product accessible?

195 | 196 |
197 | 198 |
199 |

Organization

200 |

Implementation & Testing

201 |
202 | 203 | 204 | 205 |
206 | 207 | 208 | 209 |
210 |
211 |
212 |

Requirements

213 |
    214 |
  • Performance
    • 215 |
  • Security
    • 216 |
  • Responsiveness
    • 217 |
  • User experience
    • 218 |
  • SEO
    • 219 |
  • ...
    • 220 |
  • Accessibility
    • 221 |
222 |
223 |
224 |

The costs

225 |
    226 |
  • Knowledge
    • 227 |
  • Implementation
    • 228 |
  • Testing
    • 229 |
230 |
231 |
232 | 233 | 234 |
235 | 236 | 237 | 238 |
239 | 240 |

Software lifecycle

241 | 242 | Graph with a software lifecycle: requirements definition, UI/UX design, development, quality assurance, release. 243 | 244 | 245 |
246 | 247 | 248 | 249 |
250 |

Accessibility is "hard"

251 |
252 | A pole blocking a wheelchair ramp. 253 |    254 | A solid looking wheelchair ramp with a section removed to reach a door on the other side of the ramp. 255 |
256 | 257 | 258 |
259 | 260 | 261 | 262 | 263 |
264 |

Web Content Accessibility Guidelines

265 |

(WCAG 2.2)

266 | 267 |
    268 |
  • Principles (4) 269 |
      270 |
    • perceivable, operable, understandable, robust
      • 271 |
    272 |
    • 273 |
  • Guidelines (13)
    • 274 |
  • Success Criteria (87) 275 |
      276 |
    • 3 levels of conformance: A < AA < AAA
      • 277 |
    278 |
    • 279 |
  • Techniques (478) 280 |
    • 281 |
282 | 283 | 284 |
285 | 286 | 287 | 288 |
289 | 290 |

Tool-based testing

291 | 292 | 293 |
294 | 295 | 296 | 297 |
298 |
    299 |
  • 300 | Axe 301 |
      302 |
    • CLI, browser extensions, Cypress, Selenium, ...
      • 303 |
    304 |
    • 305 |
  • 306 | Lighthouse in Chrome
    307 | Chrome Dev Tools, Lighthouse Tab. An 'accessibility' checkbox item is selected. 308 |
    • 309 |
  • WAVE browser extension
    • 310 |
311 | 312 | 313 |
314 | 315 | 316 | 317 |
318 |

Tools can detect only 20% to 50% of all accessibility issues.

319 |

Manual testing is always required.

320 |

No, AI won't solve accessibility for you.

321 |

Do not use accessibility overlays.

322 |

323 | 324 | ⇒ Overlay Fact Sheet 325 | 326 |

327 | 328 | 329 |
330 | 331 | 332 | 333 |
334 | 335 |

Visual testing

336 | 337 | 338 |
339 | 340 | 341 | 342 |
343 |

Color contrast

344 |

While grey on white is quite popular on the web, this text fails 345 | even AA level. 346 |

347 | 348 |
349 |
350 | Contrast ratio rating example in Google Chrome 351 | 352 | 353 | ⇒ Chrome DevTools 354 | 355 |
356 |
357 | Contrast ratio rating example in a web tool 358 | 359 | 360 | ⇒ Calculate Contrast Ratio 361 | 362 | 363 |
364 |
365 | 366 | 367 |
368 | 369 | 370 | 371 |
372 |

Do not depend on color

373 | Showcase for red-green color blindness. 374 |
375 |
376 | 377 | 378 |
379 | 380 | 381 | 382 |
383 | 384 |

Keyboard-only testing

385 | 386 | 387 |
388 | 389 | 390 | 391 |
392 |

Keyboard navigation

393 |
394 |
    395 |
  • Make all interactive elements focusable and operable
    • 396 |
  • Ensure a logical tab order
    • 397 |
  • Ensure an accessible focus ring
    • 398 |
399 | 
:focus {
400 |   outline: none; /* DON'T DO THIS */
401 | }
402 | 403 | ⇒ Implementing an accessible focus indicator 404 | 405 |
406 | 407 | 408 |
409 | 410 | 411 | 412 |
413 |

Screen reader testing

414 | 415 | 416 |
417 | 418 | 419 | 420 |
421 |

Screen reader

422 |

User interface for visually impaired people

423 |
    424 |
  • 425 | NVDA (Windows, 426 | Open Source) 427 |
    • 428 |
  • 429 | JAWS (Windows) 430 |
    • 431 |
  • 432 | VoiceOver 433 | (macOS) 434 |
    • 435 |
  • 436 | Orca (Linux) 437 |
    • 438 |
439 | 440 | 441 | 442 |
443 | 444 | 445 | 446 |
447 | 448 |
449 | A mockup of a website with a header, main section and a footer. Headings, text and an image within the main content. 450 | 451 |
    452 |
  • Structure
    • 453 |
  • Semantics
    • 454 |
  • Non-text content
    • 455 |
  • Dynamic changes
    • 456 |
457 |
458 | 459 | 460 |
461 | 462 | 463 | 464 |
465 |

Structure

466 | 467 |
    468 |
  • Use 469 | semantic landmark elements, e.g.: 470 |
      471 |
    • <main> vs. <div id="main">
      • 472 |
    • <header> vs. <div id="header">
      • 473 |
    • <footer> vs. <div id="footer">
      • 474 |
    • <nav> vs. <div id="nav">
      • 475 |
    476 |
    • 477 |
  • Use h1-h6 semantically, not for styling
    • 478 |
479 | 480 | 481 |
482 | 483 | 484 | 485 |
486 |

Semantics

487 | 488 |
    489 |
  • Prefer native over custom components
    • 490 |
  • Use ARIA for custom components 491 | 499 |
    • 500 |
501 | 502 | 503 | 504 | 505 |
506 | 507 | 508 | 509 | 510 |
511 |

Non-text content

512 |
All non-text content that is presented to the user has a text alternative that serves the 513 | equivalent purpose. 514 | — 515 | WCAG guideline 1.1.1 516 | 517 |
518 | 519 |
520 | Time square in New York at night. Bright billboards on the buildings. A motion blur of people on the street. 521 | Video player screenshot 522 |
523 | 524 | 525 | 526 |
527 | 528 | 529 | 530 |
531 |

Alternative texts

532 | 533 | 
<!-- alt missing - DON'T do this! -->
534 | <img src="dog.jpg">
535 | 536 | 
<!-- informative image -->
537 | <img src="dog.jpg" alt="Dog playing in meadow.">
538 | 539 | 
<!-- decorative image -->      
540 | <img src="fb.png" alt="">
541 | 542 |

543 | Icon-only buttons vs. text buttons with decorative icons 544 |

545 | 546 | 547 |
548 | 549 | 550 | 551 |
552 | 553 | Time square in New York at night. Bright billboards on the buildings. A motion blur of people on the street. 554 | 555 |
556 | ⇒ Images & Visuals 557 |
558 | 559 | 560 |
561 | 562 | 563 | 564 |
565 | 566 | 567 | 568 |
569 | 
# Captions
570 | Suspenseful music playing.
571 | Door creaking.
572 | Female voice: Hello?
573 | 574 | 
# Audio descriptions
575 | An old door opens.
576 | A decayed room in an abandoned building.
577 | Sunlight shines through a window.
578 |
579 | 580 |
581 | ⇒ Video subtitles, captions, audio descriptions and transcripts 582 |
583 | 584 | 585 |
586 | 587 | 588 | 589 |
590 |

Dynamic changes

591 | 592 | Autocomplete input with several options 593 | 594 |
    595 |
  • Announce dynamic changes via live regions 596 |
      597 |
    • aria-live or role="alert"
      • 598 |
    599 |
    • 600 |
601 | 602 |

603 | ⇒ 604 | Accessible notifications with ARIA Live Regions 605 |

606 | 607 | 608 | 609 |
610 | 611 | 612 | 613 |
614 |

Quick start

615 |
    616 |
  1. Knowledge building
    2. 617 |
  2. Testing 618 |
      619 |
    • tool-based
      • 620 |
    • visual
      • 621 |
    • keyboard
      • 622 |
    • screen reader
      • 623 |
    624 |
    3. 625 |
  3. Conformance evaluation and certification
    4. 626 |
627 | 628 |
629 | 630 | 631 | 632 |
633 |

Resources

634 | 635 |
636 |
accessibility
637 |
↓
638 |
a11y
639 |
640 | 641 | 646 | 647 | 648 |
649 | 650 | 651 | 652 |
653 |

Accessibility is about equal treatment,
not special treatment. 654 |

655 | 656 | 657 |
658 | 659 | 660 | 661 |
662 |

Accessibility doesn't just happen,
you have to make it happen.

663 | 664 |
665 | 666 | 667 | 668 |
669 |

Thank you!

670 | 671 | 678 |
Dariusz Winkler
679 |
680 | 681 | 682 |
683 |
684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 714 | 715 | 716 | --------------------------------------------------------------------------------