initial commit

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+*.local
+.vite-inspect
+.remote-assets
+components.d.ts

.npmrc

@@ -0,0 +1,3 @@
+# for pnpm
+shamefully-hoist=true
+auto-install-peers=true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"slidev.preview-sync": false
+}

README.md

@@ -0,0 +1,11 @@
+# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+
+To start the slide show:
+
+- `npm install`
+- `npm run dev`
+- visit <http://localhost:3030>
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev at the [documentation](https://sli.dev/).

components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "eco-a11y",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.50.0-beta.7",
+    "@slidev/theme-apple-basic": "^0.25.1",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "vue": "^3.5.13"
+  }
+}

pages/imported-slides.md

@@ -0,0 +1,27 @@
+# Imported Slides
+
+You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
+
+#### `slides.md`
+
+```markdown
+# Page 1
+
+Page 2 from main entry.
+
+---
+
+## src: ./subpage.md
+```
+
+<br>
+
+#### `subpage.md`
+
+```markdown
+# Page 2
+
+Page 2 from another file.
+```
+
+[Learn more](https://sli.dev/guide/syntax.html#importing-slides)

public/images/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 32 32"><path fill="#9e0000" fill-rule="evenodd" d="M21.657 20.24a1.002 1.002 0 1 1-1.415 1.42l-4.236-4.24-4.266 4.27c-.394.39-1.032.39-1.426 0a1.015 1.015 0 0 1 0-1.43l4.266-4.27-4.236-4.23a1.006 1.006 0 0 1 0-1.42 1 1 0 0 1 1.414 0l4.236 4.24 4.298-4.3a1.014 1.014 0 0 1 1.425 0c.393.4.393 1.03 0 1.43l-4.297 4.3 4.237 4.23ZM16 0C7.163 0 0 7.16 0 16s7.163 16 16 16 16-7.16 16-16S24.837 0 16 0Z"/></svg>

slides.md

@@ -0,0 +1,507 @@
+---
+# You can also start simply with 'default'
+theme: apple-basic
+# some information about your slides (markdown enabled)
+title: Introduction à l'accessibilité numérique
+info: |
+  ## Commencer avec l'accessibilité
+  Pourquoi, pour qui et comment ?
+
+  Learn more at [Sli.dev](https://sli.dev)
+# https://sli.dev/features/drawing
+drawings:
+  persist: false
+# slide transition: https://sli.dev/guide/animations.html#slide-transitions
+transition: fade-out
+# enable MDC Syntax: https://sli.dev/features/mdc
+mdc: true
+# take snapshot for each slide in the overview
+overviewSnapshots: true
+hideInToc: true
+layout: intro
+---
+
+# Introduction à l'accessibilité numérique
+
+<div class="abs-br m-6">
+    <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
+</div>
+
+<!--
+The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
+-->
+
+---
+
+## hideInToc: true
+
+# Sommaire
+
+<Toc maxDepth="1"></Toc>
+
+---
+
+layout: intro-image-right
+image: '/images/ours.jpg'
+
+---
+
+# l'Accessibilité Numérique
+
+Pourquoi, pour qui, comment ?
+
+---
+
+layout: quote
+hideInToc: true
+
+---
+
+# “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”
+
+Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
+
+<!-- Accès universel (accessible) dès la création de l'outil -->
+
+---
+
+layout: fact
+hideInToc: true
+
+---
+
+# 1 personne sur 5 est handicapée
+
+La majorité des handicaps sont invisibles.
+
+<!-- certains sont temporaires, certains arrivent avec l'âge -->
+
+---
+
+layout: quote
+hideInToc: true
+
+---
+
+# “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
+
+Access 42
+
+---
+
+layout: bullets
+hideInToc: true
+
+---
+
+## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
+
+- auditifs
+- cognitifs
+- neurologiques
+- physiques
+- psychologiques
+- oraux
+- visuels
+
+---
+
+## layout: center
+
+## Exemples de technologies d'assistance
+
+<div grid="~ cols-2 gap-4">
+	<Youtube id="nw6-eDJXWzY" />
+	<Youtube id="N9Q8oF0Lx2M" />
+	<Youtube id="SlxIEPEC_Qc" />
+	<Youtube id="LHUyDhutx80" />
+</div>
+
+---
+
+# Bonnes pratiques
+
+- HTML sémantique
+- structure du contenu (titres)
+- contrastes des couleurs
+- taille des polices
+- intitulés de formulaire
+- messages d’erreur
+- supprimer les animations/le mouvement (carousel, vidéo, scroll, etc.)
+- écrire simplement et clairement
+
+---
+
+```text {all|2|3|4|none}
+Erroné
+└── h1 Titre principal
+    ├── h2 Titre secondaire
+    ├── h4 Titre niveau 4
+    │   └── h5 Titre niveau 5
+    ├── h2 Titre secondaire
+    │   ├── h2 Titre secondaire
+    │   ├── h3 Titre tertiaire
+    │   │   ├── h4 Titre niveau 4
+    │   │   │   └── h6 Titre niveau 6
+    │   └── h3 Titre tertiaire
+    └── h1 Titre principal
+```
+
+```text {none|all}
+Correct
+└── h1 Titre principal
+    ├── h2 Titre secondaire
+    ├── h2 Titre secondaire
+    │   └── h3 Titre tertiaire
+    ├── h2 Titre secondaire
+    │   ├── h3 Titre tertiaire
+    │   ├── h3 Titre tertiaire
+    │   │   ├── h4 Titre niveau 4
+    │   │   │   └── h5 Titre niveau 5
+    │   └── h3 Titre tertiaire
+    └── h2 Titre secondaire
+```
+
+<img v-click="[3,4]" class="absolute top-25 right-56 z-1" src="/images/cross.svg" width="20" height="20">
+
+<!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) -->
+
+---
+
+layout: center
+hideInToc: true
+
+---
+
+# les Formulaires
+
+C'est si simple de faire n'importe quoi 🤪
+
+---
+
+## layout: two-cols
+
+<div class="form">
+	<h2>Mauvais exemple&nbsp;:</h2>
+	<form class="nul">
+		<input type="text" placeholder="nom*">
+		<input type="text" placeholder="email*">
+		<button>Envoyer</button>
+	</form>
+</div>
+
+::right::
+
+<div class="form">
+	<h2>Bon exemple&nbsp;:</h2>
+	<form class="cool">
+		<div v-click role="group" aria-labelledby="error-summary-title">
+			<h3 id="error-summary-title" tabindex="-1">
+				Il y a 2 erreurs de saisie dans le formulaire.
+			</h3>
+			<ol>
+				<li class="error">
+					<a href="#input-name">Veuillez renseigner un nom.</a>
+				</li>
+				<li class="error">
+					<a href="#input-email">L'email renseigné n'est pas valide.</a>
+				</li>
+			</ol>
+		</div>
+		<label for="name">Nom (obligatorie)</label>
+		<input id="name" type="text" required>
+		<label for="email">Email (obligatoire)</label>
+		<input id="email" type="email" aria-describedby="email-description" required>
+		<p id="email-description">Format attendu: nom@email.fr</p>
+		<button>Envoyer</button>
+	</form>
+</div>
+
+<div class="absolute bottom-10">
+	<a href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small></a>
+</div>
+
+---
+
+layout: image-right
+image: https://cover.sli.dev
+
+---
+
+# Code
+
+Use code snippets and get the highlighting directly, and even types hover!
+
+```ts {all|5|7|7-8|10|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
+
+import { computed, ref } from "vue";
+
+const count = ref(0);
+const doubled = computed(() => count.value * 2);
+
+doubled.value = 2;
+```
+
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
+
+<!-- This allow you to embed external code blocks -->
+
+<<< @/snippets/external.ts#snippet
+
+<!-- Footer -->
+
+[Learn more](https://sli.dev/features/line-highlighting)
+
+<!-- Inline style -->
+<style>
+.footnotes-sep {
+  @apply mt-5 opacity-10;
+}
+.footnotes {
+  @apply text-sm opacity-75;
+}
+.footnote-backref {
+  display: none;
+}
+</style>
+
+<!--
+Notes can also sync with clicks
+
+[click] This will be highlighted after the first click
+
+[click] Highlighted with `count = ref(0)`
+
+[click:3] Last click (skip two clicks)
+-->
+
+---
+
+## level: 2
+
+# Shiki Magic Move
+
+Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
+
+Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
+
+````md magic-move {lines: true}
+```ts {*|2|*}
+// step 1
+const author = reactive({
+	name: "John Doe",
+	books: [
+		"Vue 2 - Advanced Guide",
+		"Vue 3 - Basic Guide",
+		"Vue 4 - The Mystery",
+	],
+});
+```
+
+```ts {*|1-2|3-4|3-4,8}
+// step 2
+export default {
+	data() {
+		return {
+			author: {
+				name: "John Doe",
+				books: [
+					"Vue 2 - Advanced Guide",
+					"Vue 3 - Basic Guide",
+					"Vue 4 - The Mystery",
+				],
+			},
+		};
+	},
+};
+```
+
+```ts
+// step 3
+export default {
+	data: () => ({
+		author: {
+			name: "John Doe",
+			books: [
+				"Vue 2 - Advanced Guide",
+				"Vue 3 - Basic Guide",
+				"Vue 4 - The Mystery",
+			],
+		},
+	}),
+};
+```
+
+Non-code blocks are ignored.
+
+```vue
+<!-- step 4 -->
+<script setup>
+const author = {
+	name: "John Doe",
+	books: [
+		"Vue 2 - Advanced Guide",
+		"Vue 3 - Basic Guide",
+		"Vue 4 - The Mystery",
+	],
+};
+</script>
+```
+````
+
+---
+
+# Components
+
+<div grid="~ cols-2 gap-4">
+<div>
+
+You can use Vue components directly inside your slides.
+
+We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
+
+```html
+<Counter :count="10" />
+```
+
+<!-- ./components/Counter.vue -->
+<Counter :count="10" m="t-4" />
+
+Check out [the guides](https://sli.dev/builtin/components.html) for more.
+
+</div>
+<div>
+
+```html
+<Tweet id="1390115482657726468" />
+```
+
+<Tweet id="1390115482657726468" scale="0.65" />
+
+</div>
+</div>
+
+<!--
+Presenter note with **bold**, *italic*, and ~~striked~~ text.
+
+Also, HTML elements are valid:
+<div class="flex w-full">
+  <span style="flex-grow: 1;">Left content</span>
+  <span>Right content</span>
+</div>
+-->
+
+---
+
+## class: px-20
+
+# Themes
+
+Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+
+<div grid="~ cols-2 gap-2" m="t-2">
+
+```yaml
+---
+theme: default
+---
+```
+
+```yaml
+---
+theme: seriph
+---
+```
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
+
+</div>
+
+Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
+check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
+
+---
+
+# Clicks Animations
+
+You can add `v-click` to elements to add a click animation.
+
+<div v-click>
+
+This shows up when you click the slide:
+
+```html
+<div v-click>This shows up when you click the slide.</div>
+```
+
+</div>
+
+<br>
+
+<v-click>
+
+The <span v-mark.red="3"><code>v-mark</code> directive</span>
+also allows you to add
+<span v-mark.circle.orange="4">inline marks</span>
+, powered by [Rough Notation](https://roughnotation.com/):
+
+```html
+<span v-mark.underline.orange>inline markers</span>
+```
+
+</v-click>
+
+<div mt-20 v-click>
+
+[Learn more](https://sli.dev/guide/animations#click-animation)
+
+</div>
+
+---
+
+# Monaco Editor
+
+Slidev provides built-in Monaco Editor support.
+
+Add `{monaco}` to the code block to turn it into an editor:
+
+```ts {monaco}
+import { ref } from "vue";
+import { emptyArray } from "./external";
+
+const arr = ref(emptyArray(10));
+```
+
+Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
+
+```ts {monaco-run}
+import { version } from "vue";
+import { emptyArray, sayHello } from "./external";
+
+sayHello();
+console.log(`vue ${version}`);
+console.log(
+	emptyArray<number>(10).reduce(
+		(fib) => [...fib, fib.at(-1)! + fib.at(-2)!],
+		[1, 1]
+	)
+);
+```
+
+---
+
+layout: center
+class: text-center
+
+---
+
+# Learn More
+
+[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
+
+<PoweredBySlidev mt-10 />

snippets/external.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+
+// #region snippet
+// Inside ./snippets/external.ts
+export function emptyArray<T>(length: number) {
+  return Array.from<T>({ length })
+}
+// #endregion snippet
+
+export function sayHello() {
+  console.log('Hello from snippets/external.ts')
+}