Skip to content

Commit 570e13a

Browse files
danieldanieleckidanieldanielecki
committed
Slides: Web Accessibility
1 parent b841a62 commit 570e13a

File tree

1 file changed

+130
-61
lines changed

1 file changed

+130
-61
lines changed

‎__presentation-slides/index.html‎

Lines changed: 130 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
77

8-
<title>Awesome HTML Book & Course: HyperText Markup Language (HTML)</title>
8+
<title>Awesome HTML Book & Course: HyperText Markup Language (HTML)</title>
99

10-
<link rel="stylesheet" href="dist/reset.css">
11-
<link rel="stylesheet" href="dist/reveal.css">
12-
<link rel="stylesheet" href="dist/theme/serif.css">
10+
<link rel="stylesheet" href="dist/reset.css">
11+
<link rel="stylesheet" href="dist/reveal.css">
12+
<link rel="stylesheet" href="dist/theme/serif.css">
1313

14-
<!-- Theme used for syntax highlighted code -->
15-
<link rel="stylesheet" href="plugin/highlight/monokai.css">
14+
<!-- Theme used for syntax highlighted code -->
15+
<link rel="stylesheet" href="plugin/highlight/monokai.css">
1616

17-
<style>
18-
.fragment.blur {
19-
filter: blur(1rem);
20-
}
17+
<style>
18+
.fragment.blur {
19+
filter: blur(1rem);
20+
}
2121

22-
.fragment.blur.visible {
23-
filter: none;
24-
}
25-
</style>
22+
.fragment.blur.visible {
23+
filter: none;
24+
}
25+
</style>
2626
</head>
2727

2828
<body>
29-
<div class="reveal">
30-
<div class="slides">
31-
<section data-markdown>
32-
<textarea data-template>
29+
<div class="reveal">
30+
<div class="slides">
31+
<section data-markdown>
32+
<textarea data-template>
3333
# Welcome <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
3434

3535
---
@@ -1138,11 +1138,11 @@ <h3>Biodegradable Bamboo Toothbrush</h3>
11381138

11391139
```javascript[1|7|1,7|2|3|4|5|6]
11401140
<script>
1141-
const c = document.getElementById("myCanvas");
1142-
const ctx = c.getContext("2d");
1143-
ctx.beginPath();
1144-
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
1145-
ctx.stroke();
1141+
const c = document.getElementById("myCanvas");
1142+
const ctx = c.getContext("2d");
1143+
ctx.beginPath();
1144+
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
1145+
ctx.stroke();
11461146
</script>
11471147
```
11481148

@@ -1172,12 +1172,12 @@ <h3>Biodegradable Bamboo Toothbrush</h3>
11721172
<p id="demo"></p>
11731173

11741174
<script>
1175-
document.getElementById("demo").innerHTML = localStorage.username;
1175+
document.getElementById("demo").innerHTML = localStorage.username;
11761176

1177-
function saveData() {
1177+
function saveData() {
11781178
localStorage.setItem("username", "John");
11791179
document.getElementById("demo").innerHTML = localStorage.username;
1180-
}
1180+
}
11811181
</script>
11821182
```
11831183

@@ -1195,12 +1195,12 @@ <h3>Biodegradable Bamboo Toothbrush</h3>
11951195
<p id="demo"></p>
11961196

11971197
<script>
1198-
document.getElementById("demo").innerHTML = sessionStorage.theme;
1198+
document.getElementById("demo").innerHTML = sessionStorage.theme;
11991199

1200-
function saveSessionData() {
1200+
function saveSessionData() {
12011201
sessionStorage.setItem("theme", "light");
12021202
document.getElementById("demo").innerHTML = sessionStorage.theme;
1203-
}
1203+
}
12041204
</script>
12051205
```
12061206

@@ -1217,15 +1217,15 @@ <h3>Biodegradable Bamboo Toothbrush</h3>
12171217
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>
12181218

12191219
<script>
1220-
function allowDrop(event) {
1220+
function allowDrop(event) {
12211221
event.preventDefault();
1222-
}
1222+
}
12231223

1224-
function drop(event) {
1224+
function drop(event) {
12251225
event.preventDefault();
12261226
const data = event.dataTransfer.getData("text");
12271227
event.target.appendChild(document.getElementById(data));
1228-
}
1228+
}
12291229
</script>
12301230
```
12311231

@@ -1591,10 +1591,10 @@ <h1>Bootstrap Example</h1>
15911591
<meta charset="UTF-8" />
15921592
<title>Embedded JavaScript Example</title>
15931593
<script>
1594-
// Inline JavaScript code
1595-
function greet() {
1596-
alert("Hello, world!");
1597-
}
1594+
// Inline JavaScript code
1595+
function greet() {
1596+
alert("Hello, world!");
1597+
}
15981598
</script>
15991599
</head>
16001600
<body>
@@ -1734,9 +1734,9 @@ <h1 id="heading">JavaScript Example</h1>
17341734

17351735
<script>
17361736
document.getElementById("btn")
1737-
.addEventListener("click", function() {
1737+
.addEventListener("click", function () {
17381738
alert("Button clicked!");
1739-
});
1739+
});
17401740
</script>
17411741
</body>
17421742
</html>
@@ -2390,27 +2390,96 @@ <h1>Main Heading</h1>
23902390
---
23912391

23922392
### Conclusion: Building Responsive Designs <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2393+
2394+
---
2395+
2396+
## Web Accessibility <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2397+
2398+
---
2399+
2400+
### Importance and Principles of Web Accessibility <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2401+
2402+
* Perceivable <!-- .element: class="fragment custom blur highlight-current-blue fade-up" -->
2403+
* Operable <!-- .element: class="fragment custom blur highlight-current-blue fade-up" -->
2404+
* Understandable <!-- .element: class="fragment custom blur highlight-current-blue fade-up" -->
2405+
* Robust <!-- .element: class="fragment custom blur highlight-current-blue fade-up" -->
2406+
2407+
---
2408+
2409+
#### Importance and Principles of Web Accessibility <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2410+
2411+
```html[|1,13|2,12|3,5|6,8|9,11|4|7|10]
2412+
<nav>
2413+
<ul>
2414+
<li>
2415+
<a href="#">Home</a>
2416+
</li>
2417+
<li>
2418+
<a href="#">About</a>
2419+
</li>
2420+
<li>
2421+
<a href="#">Contact</a>
2422+
</li>
2423+
</ul>
2424+
</nav>
2425+
```
2426+
2427+
[![Edit 091-Importance and Principles of Web Accessibility](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/091-importance-and-principles-of-web-accessibility-qtxl9q)
2428+
2429+
[CodeSandbox: Importance and Principles of Web Accessibility](https://qtxl9q.csb.app/).
2430+
2431+
---
2432+
2433+
### ARIA (Accessible Rich Internet Applications) Labels and Roles <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2434+
2435+
```html[|1,4|2|3]
2436+
<button
2437+
role="button"
2438+
aria-label="Close">
2439+
X</button>
2440+
```
2441+
2442+
[![Edit 092-ARIA (Accessible Rich Internet Applications) Labels and Roles](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/092-aria-accessible-rich-internet-applications-labels-and-roles-vd3t4c)
2443+
2444+
[CodeSandbox: ARIA (Accessible Rich Internet Applications) Labels and Roles](https://vd3t4c.csb.app/).
2445+
2446+
---
2447+
2448+
### Accessibility Features in HTML5 <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
2449+
2450+
```html[|1,6|2,5|3|4]
2451+
<main>
2452+
<article>
2453+
<h2>Web Accessibility</h2>
2454+
<p>Web accessibility ensures that websites and web applications are usable by people with disabilities.</p>
2455+
</article>
2456+
</main>
2457+
```
2458+
2459+
[![Edit 093-Accessibility Features in HTML5](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/093-accessibility-features-in-html5-zwjmnz)
2460+
2461+
[CodeSandbox: Accessibility Features in HTML5](https://zwjmnz.csb.app/).
23932462
</textarea>
2394-
</section>
2395-
</div>
2396-
</div>
2397-
2398-
<script src="dist/reveal.js"></script>
2399-
<script src="plugin/notes/notes.js"></script>
2400-
<script src="plugin/markdown/markdown.js"></script>
2401-
<script src="plugin/highlight/highlight.js"></script>
2402-
<script>
2403-
// More info about initialization & config:
2404-
// - https://revealjs.com/initialization/
2405-
// - https://revealjs.com/config/
2406-
Reveal.initialize({
2407-
hash: true,
2408-
slideNumber: 'c/t',
2409-
2410-
// Learn about plugins: https://revealjs.com/plugins/
2411-
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
2412-
});
2413-
</script>
2463+
</section>
2464+
</div>
2465+
</div>
2466+
2467+
<script src="dist/reveal.js"></script>
2468+
<script src="plugin/notes/notes.js"></script>
2469+
<script src="plugin/markdown/markdown.js"></script>
2470+
<script src="plugin/highlight/highlight.js"></script>
2471+
<script>
2472+
// More info about initialization & config:
2473+
// - https://revealjs.com/initialization/
2474+
// - https://revealjs.com/config/
2475+
Reveal.initialize({
2476+
hash: true,
2477+
slideNumber: 'c/t',
2478+
2479+
// Learn about plugins: https://revealjs.com/plugins/
2480+
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
2481+
});
2482+
</script>
24142483
</body>
24152484

24162485
</html>

0 commit comments

Comments
 (0)