Compare commits
1 Commits
a486d6982f
...
9ea93d070d
| Author | SHA1 | Date | |
|---|---|---|---|
9ea93d070d
|
61
example.md
61
example.md
@ -30,7 +30,7 @@ hideInToc: true
|
|||||||
layout: intro
|
layout: intro
|
||||||
---
|
---
|
||||||
|
|
||||||
# <span class="highlight">L'accessibilité numérique</span> en 10 étapes
|
# Introduction à <span class="highlight">l'accessibilité numérique</span>
|
||||||
|
|
||||||
<div class="abs-br m-6">
|
<div class="abs-br m-6">
|
||||||
<a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence : <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
|
<a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence : <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
|
||||||
@ -50,42 +50,52 @@ layout: bullets
|
|||||||
<Toc maxDepth="1"></Toc>
|
<Toc maxDepth="1"></Toc>
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: content
|
layout: section
|
||||||
---
|
---
|
||||||
|
|
||||||
# Contexte
|
# l'Accessibilité Numérique
|
||||||
|
|
||||||
> “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
|
Pourquoi, pour qui, comment ?
|
||||||
|
|
||||||
Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web
|
---
|
||||||
|
layout: quote
|
||||||
|
level: 2
|
||||||
|
hideInToc: true
|
||||||
|
---
|
||||||
|
|
||||||
> “ 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. ”
|
> ## “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
|
||||||
|
|
||||||
Access 42
|
Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
|
||||||
|
|
||||||
> The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.
|
<!--
|
||||||
|
Accès universel (accessible) dès la création de l'outil
|
||||||
<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: fact
|
layout: fact
|
||||||
hideInToc: true
|
hideInToc: true
|
||||||
---
|
---
|
||||||
|
|
||||||
# 30 % de la population française
|
# 1 personne sur 5 est handicapée
|
||||||
|
|
||||||
Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
|
La majorité des handicaps sont invisibles.
|
||||||
|
|
||||||
<cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
certains sont temporaires, certains arrivent avec l'âge
|
certains sont temporaires, certains arrivent avec l'âge
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: quote
|
||||||
|
hideInToc: true
|
||||||
|
---
|
||||||
|
|
||||||
|
> ## “ 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. ”
|
||||||
|
|
||||||
|
Access 42
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: bullets
|
layout: bullets
|
||||||
hideInToc: true
|
hideInToc: true
|
||||||
hide: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
|
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
|
||||||
@ -100,7 +110,6 @@ hide: true
|
|||||||
|
|
||||||
---
|
---
|
||||||
layout: auto-grid
|
layout: auto-grid
|
||||||
columns: 2
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Exemples de technologies d'assistance
|
# Exemples de technologies d'assistance
|
||||||
@ -112,12 +121,11 @@ columns: 2
|
|||||||
<Youtube id="SlxIEPEC_Qc" />
|
<Youtube id="SlxIEPEC_Qc" />
|
||||||
<Youtube id="LHUyDhutx80" />
|
<Youtube id="LHUyDhutx80" />
|
||||||
|
|
||||||
---
|
|
||||||
layout: bullets
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Bonnes pratiques en bref
|
# Bonnes pratiques en bref
|
||||||
|
|
||||||
|
- [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
|
||||||
- structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
|
- structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
|
||||||
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
|
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
|
||||||
- taille et unités des polices
|
- taille et unités des polices
|
||||||
@ -131,9 +139,9 @@ layout: bullets
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Éléments HTML sémantiques
|
# Éléments sémantiques
|
||||||
|
|
||||||
````md magic-move {lines: false}
|
````md magic-move {lines: true}
|
||||||
```html
|
```html
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -180,19 +188,18 @@ layout: bullets
|
|||||||
````
|
````
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: auto-grid
|
layout: two-cols-header
|
||||||
columns: 2
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Structure des titres
|
## Structure du contenu
|
||||||
|
|
||||||
::content::
|
::left::
|
||||||
|
|
||||||
```md {all|2|3|4|none}{lines: false}
|
```md {all|2|3|4|none}{lines: false}
|
||||||
Erroné
|
Erroné
|
||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
├── h2 Titre secondaire // [!code --]
|
├── h2 Titre secondaire
|
||||||
├── h4 Titre niveau 4 // [!code error]
|
├── h4 Titre niveau 4
|
||||||
│ └── h5 Titre niveau 5
|
│ └── h5 Titre niveau 5
|
||||||
├── h2 Titre secondaire
|
├── h2 Titre secondaire
|
||||||
│ ├── h2 Titre secondaire
|
│ ├── h2 Titre secondaire
|
||||||
@ -203,6 +210,8 @@ Erroné
|
|||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
```
|
```
|
||||||
|
|
||||||
|
::right::
|
||||||
|
|
||||||
```md {none|all}{lines: false}
|
```md {none|all}{lines: false}
|
||||||
Correct
|
Correct
|
||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
|
|||||||
@ -1,9 +1,3 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps<{
|
|
||||||
columns?: number
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="slidev-layout">
|
<div class="slidev-layout">
|
||||||
<slot />
|
<slot />
|
||||||
@ -15,14 +9,8 @@ const props = defineProps<{
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.auto-grid {
|
.auto-grid {
|
||||||
--_columns: v-bind(columns);
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(var(--_columns, 2), 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-auto-rows: 250px;
|
|
||||||
gap: var(--space-xs);
|
gap: var(--space-xs);
|
||||||
}
|
}
|
||||||
.auto-grid > * {
|
|
||||||
inline-size: 100%;
|
|
||||||
block-size: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="slidev-layout content">
|
|
||||||
<div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -20,7 +20,6 @@
|
|||||||
"@unocss/reset": "^0.65.1"
|
"@unocss/reset": "^0.65.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@shikijs/transformers": "^1.24.2",
|
|
||||||
"@slidev/cli": "^0.50.0-beta.10",
|
"@slidev/cli": "^0.50.0-beta.10",
|
||||||
"prettier": "3.4.2",
|
"prettier": "3.4.2",
|
||||||
"prettier-plugin-slidev": "^1.0.5"
|
"prettier-plugin-slidev": "^1.0.5"
|
||||||
|
|||||||
@ -1,14 +1,11 @@
|
|||||||
import type { ShikiSetupReturn } from '@slidev/types'
|
import type { ShikiSetupReturn } from '@slidev/types'
|
||||||
import { defineShikiSetup } from '@slidev/types'
|
import { defineShikiSetup } from '@slidev/types'
|
||||||
|
|
||||||
import {
|
|
||||||
transformerNotationDiff,
|
|
||||||
transformerNotationErrorLevel
|
|
||||||
} from '@shikijs/transformers'
|
|
||||||
|
|
||||||
export default defineShikiSetup((): ShikiSetupReturn => {
|
export default defineShikiSetup((): ShikiSetupReturn => {
|
||||||
return {
|
return {
|
||||||
theme: 'one-dark-pro',
|
themes: {
|
||||||
transformers: [transformerNotationDiff(), transformerNotationErrorLevel()]
|
dark: 'vitesse-dark',
|
||||||
|
light: 'vitesse-light'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -26,7 +26,6 @@ body {
|
|||||||
|
|
||||||
:is(h1, h2, h3, h4, .h2, .h3, .h4) {
|
:is(h1, h2, h3, h4, .h2, .h3, .h4) {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-wrap: balance;
|
|
||||||
}
|
}
|
||||||
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
||||||
margin-block-start: var(--space-s);
|
margin-block-start: var(--space-s);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user