-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
868 lines (782 loc) · 71.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Comment rendre les supports multimédias accessibles à tous ?</title>
<meta charset="utf-8">
<meta name="robots" content="index, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if (IEMobile)]><meta http-equiv="cleartype" content="on" /><![endif]-->
<meta name="pinterest" content="nopin" />
<meta name="description" content="Aujourd'hui, de plus en plus de vidéos sont incrustées de sous-titres mais ceux-ci ne sont pas toujours de bonne qualité et sont utilisés n'importe comment. À cause des couleurs utilisées, ils sont illisibles et font mal aux yeux. N'oublions pas également que les sous-titres automatiques ne sont pas LA solution pour les personnes sourdes et malentendantes. Il y a de plus en plus d'images et de gifs utilisés sur nos réseaux sociaux mais ceux-ci ne sont pas décrits pour les personnes aveugles et malvoyantes. Les PDF mis à disposition au grand nombre leur sont également inaccessibles. Comment les rendre accessible à tous ?" />
<!-- JavaScript -->
<script src="js/Hammer.js"></script>
<script src="js/AccessReader.js"></script>
<script src="lang/lang_fr.js"></script>
<script src="js/screenfull.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- CSS AccessSlide par défaut -->
<link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen" />
<!-- CSS du thème -->
<link rel="stylesheet" id="currentCSS" href="css/theme-dcube.min.css" type="text/css" media="all" />
<!-- CSS du script Highlight -->
<link rel="stylesheet" href="highlight/styles/tomorrow-night-eighties.css" type="text/css" media="all" />
<!-- CSS print -->
<link rel="stylesheet" href="css/print.min.css" type="text/css" media="print" />
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<!-- Opengraph / Twitter cards -->
<meta property="og:title" content="Comment rendre les supports multimédias accessibles à tous ? – Support de présentation - DCube" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Aujourd'hui, de plus en plus de vidéos sont incrustées de sous-titres mais ceux-ci ne sont pas toujours de bonne qualité et sont utilisés n'importe comment. À cause des couleurs utilisées, ils sont illisibles et font mal aux yeux. N'oublions pas également que les sous-titres automatiques ne sont pas LA solution pour les personnes sourdes et malentendantes. Il y a de plus en plus d'images et de gifs utilisés sur nos réseaux sociaux mais ceux-ci ne sont pas décrits pour les personnes aveugles et malvoyantes. Les PDF mis à disposition au grand nombre leur sont également inaccessibles. Comment les rendre accessible à tous ?" />
<meta property="og:url" content="https://emma11y.github.io/parisweb2019" />
<meta property="og:site_name" content="DCube" />
<meta property="article:tag" content="accessibilité" />
<meta property="article:tag" content="a11y" />
<meta property="og:image" content="https://emma11y.github.io/parisweb2019/favicon-32x32.png" />
<meta property="og:image:secure_url" content="https://emma11y.github.io/parisweb2019/favicon-32x32.png" />
<meta property="og:image:width" content="1350" />
<meta property="og:image:height" content="675" />
<meta name="twitter:title" content="Comment rendre les supports multimédias accessibles à tous ? – Support de présentation - DCube" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Aujourd'hui, de plus en plus de vidéos sont incrustées de sous-titres mais ceux-ci ne sont pas toujours de bonne qualité et sont utilisés n'importe comment. À cause des couleurs utilisées, ils sont illisibles et font mal aux yeux. N'oublions pas également que les sous-titres automatiques ne sont pas LA solution pour les personnes sourdes et malentendantes. Il y a de plus en plus d'images et de gifs utilisés sur nos réseaux sociaux mais ceux-ci ne sont pas décrits pour les personnes aveugles et malvoyantes. Les PDF mis à disposition au grand nombre leur sont également inaccessibles. Comment les rendre accessible à tous ?" />
<meta name="twitter:site" content="@eaboaf_" />
<meta name="twitter:image" content="https://emma11y.github.io/parisweb2019/favicon-32x32.png" />
<meta name="twitter:creator" content="@eaboaf_" />
</head>
<body>
<div id="load">
<img src="img_slide/load.gif" alt="Chargement en cours" />
</div>
<div id="screen" class="modeplan" data-effect="Eno">
<div id="wrapper">
<a href="#main" id="skip-link">Contenu</a>
<div id="prev-next"></div>
<div id="volet"></div>
<header id="banner" role="banner" class="main-header clearfix">
<a href="https://dcube.fr/" target="_blank" aria-label="Consulter le site de DCube" class="main-logo">
<img src="img_slide/dcube/logo_dcube_bleu.png" id="logo" role="img" aria-label="DCube" width="58" height="43" />
</a>
</header>
<nav role="navigation" aria-label="sommaire" id="sommaire" class="tool-block tool-block-summary" tabindex="-1"></nav>
<nav role="navigation" id="breadcrumb" class="breadcrumb"></nav>
<main role="main" id="main" class="dcube-main dcube-edito">
<!-- COUVERTURE CONFÉRENCE -->
<section class="slide dcube-page-full dcube-bgcolor-c4a dcube-couv dcube-couv-start">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h1 class="dcube-couv_title dcube-couv_title-maxi">
<span class="dcube-item-block dcube-text-reinit">Comment rendre les supports multimédias </span>
<span class="sr"> </span>
<span class="dcube-item-block dcube-text-reinit">accessibles à tous ?</span>
</h1>
<p class="logo dcube-sep">
<img class="dcube-icon dcube-icon-couv" src="img_slide/dcube/logo_dcube_blanc.png"
id="logo" role="img" aria-label="DCube" width="58" height="43" />
</p>
<p class="dcube-couv_subtitle">Emmanuelle ABOAF</p>
<p class="dcube-couv_details dcube-color-c5">Paris Web – 11 octobre 2019</p>
<p class="dcube-couv_details dcube-text-small">Twitter : <a href="https://twitter.com/eaboaf_" target="_blank" aria-label="@eaboaf_ : Suivez Emmanuelle ABOAF sur Twitter (Nouvelle fenêtre)" title="@eaboaf_ : Suivez Emmanuelle ABOAF sur Twitter">@eaboaf_</a></p>
</div>
</div>
</section>
<!-- Plan -->
<!-- <section class="slide dcube-page-full">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-align-center dcube-bgcolor-c2">
<div class="dcube-block center">
<h2 class="dcube-subtitle">Au programme</h2>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center-y">
<div class="dcube-block">
<ol class="dcube-text-super">
<li>Sous-titrage des vidéos</li>
<li>Description des images</li>
<li>Ecriture des messages dans les réseaux sociaux</li>
<li>Accessibilité des fichiers PDF</li>
</ol>
</div>
</div>
</div>
</section>-->
<section class="slide dcube-page-full dcube-page-border dcube-border-c0 dcube-bgcolor-c4a">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h2 class="dcube-title-chapter dcube-title-chapter-comfy">
<span class="dcube-text-reinit dcube-item-block">Sous-titrage des vidéos</span>
<span class="sr"> </span>
</h2>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-bgcolor-c2 dcube-align-center">
<div class="dcube-block center">
<h3 class="dcube-subtitle">
<span class="dcube-item-block dcube-title-focus">Pour qui ?</span>
</h3>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center">
<div class="dcube-block">
<ul class="dcube-font-geomed dcube-text-super">
<li>6 millions de personnes sourdes et malentendantes</li>
<li>Personnes âgées</li>
<li>Et le reste de la population !</li>
</ul>
<div class="dcube-align-center">
<div class="dcube-block">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Mais tellement! Je regarde toutes mes vidéos sans son sur mon portable et je suis entendante. Pas de sous-titrage, je zappe...</p>— Sabine Rouy (@kinbine) <a href="https://twitter.com/kinbine/status/1167835066984292352?ref_src=twsrc%5Etfw">August 31, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full">
<div class="inside">
<div class="dcube-block">
<div class="grid">
<h3 class="titre dcube-subtitle dcube-subtitle-dry">Ce qu'il ne faut pas voir...</h3>
</div>
<div class="grid-items-pictures aligncenter">
<div><img src="img_slide/dcube/exemple_stt_1.png" alt="Sous-titrage noir avec un diaporama contenant des textes en arrière plan : les sous-titres et le texte du diaporama se superposent" /></div>
<div><img src="img_slide/dcube/exemple_stt_2.png" alt="Sous-titrage blanc avec un arrière-plan blanc : on ne voit pas les sous-titres" /></div>
<div><img src="img_slide/dcube/exemple_stt_3.png" alt="Sous-titrage bleu sur un tee-shirt bleu et gris : on ne voit pas les sous-titres" /></div>
<div><img src="img_slide/dcube/exemple_stt_4.png" alt="Sous-titrage rouge en majuscule : on voit à peine les sous-titres et on a l'impression de se faire crier dessus" /></div>
<div><img src="img_slide/dcube/exemple_stt_5.png" alt="Sous-titrage blanc avec une taille de police très petite : on ne peut pas lire les sous-titres" /></div>
<div><img src="img_slide/dcube/exemple_stt_6.png" alt="Sous-titrage blanc avec un fond transparent noir sur 4 lignes et qui remplit la moitié de l'écran : on ne voit pas le diaporama derrière et on n'a pas le temps de tout lire" /></div>
<div><img src="img_slide/dcube/exemple_stt_7.png" alt="Sous-titrage bleu avec un fond bleu sur 4 lignes : on n'a pas le temps de tout lire" /></div>
<div><img src="img_slide/dcube/exemple_stt_8.png" alt="Sous-titrage blanc avec un fond rouge flashy sur 3 lignes : on n'arrive pas à lire tellement la couleur rouge flashy fait mal aux yeux" /></div>
<div><img src="img_slide/dcube/exemple_stt_9.png" alt="Sous-titrage vert avec un fond blanc flashy : on n'arrive pas à lire tellement la couleur blanche flashy fait mal aux yeux" /></div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-bgcolor-c2 dcube-align-center">
<div class="dcube-block">
<h3 class="dcube-subtitle dcube-subtitle-dry dcube-text-unlimit dcube-text-center">Une solution de format</h3>
<p>Un sous-titrage <b>blanc avec un fond noir</b> ou un fond noir <b>transparent</b> avec une opacité <b>minimum à 30%</b> :</p>
<ul class="dcube-list-reset">
<li>donne une meilleure visibilité pour tous</li>
<li>convient à tout contenu de vidéo</li>
<li>est adapté aux personnes sourdes ushers ou aux personnes daltoniennes</li>
</ul>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center">
<div class="dcube-block">
<div>
<img src="img_slide/dcube/sous-titrage_blanc_fond_transparent_noir.png" alt="image contenant pleins de nuages blancs avec un sous-titre blanc avec un fond transparent noir pour mieux voir" />
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c2">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h3 class="dcube-subtitle dcube-subtitle-dry dcube-text-unlimit">Un exemple de vidéo avec <br /> le sous-titrage automatique </h3>
<figure role="group">
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4g-XbDdTThQ" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<figcaption>
<div class="toggle-gp-article toggle-gp dcube-toggle-box">
<button class="dcube-btn dcube-btn-toggle" aria-expanded="false" aria-controls="alt-transcription-video">Consulter la transcription de la vidéo</button>
<div id="alt-transcription-video" class="content-to-toggle is-hidden dcube-text-small center">
<h4>Extrait de la transcription de la vidéo <br /> <b>"Les calculs sont pas bons Kévin ! C'est quand qu'tu vas m'mettre des paillettes dans ma vie Kévin"</b></h4>
<p class="dcube-text-left">« au caire on sort ce soir moi j'adore me douter l'un faut ce que j'ai sur moi tard à 35 euros le départ dans mon copain gros le pantalon 25 euros uniqlo la tablette on n'était pas y'a toujours mes yeux 65 euros et une phrase mal d'eau adibal les quelques sauts papon qui sait quand un maître de pale ale dans ma vie civile c'est qu'est-ce qu'on habite qui vise le des moulures au plafond qui vit on habite dans le froid 6 actuellement kevin tu me dégoûtes kévin m'attendais à beaucoup mieux payet dans ma vie dans ma vie ma veilleure vie j'ai 27 ans teddy éventuellement kévin g27 santé ville j'allais bizarre. »</p>
</div>
</div>
</figcaption>
</figure>
<p class="dcube-text-small">Vous pouvez corriger le sous-titrage automatique<br /> même si ce n'est pas votre vidéo.</p>
<img src="img_slide/dcube/onglet_transcription_youtube.png" alt="Sous la vidéo, il y a une icône trois petits points. Cliquez sur cette icône et le menu apparaît. Cliquer sur l'option Ouvrir l'onglet Transcription" />
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c2">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-bgcolor-c0 dcube-align-center">
<div class="dcube-block center">
<h3 class="dcube-subtitle">Trois solutions <br />pour sous-titrer une vidéo</h3>
<ul class="dcube-text-tiny dcube-margin-t15 alignleft">
Sources :
<li><a href="https://access42.net/sous-titres-video-accessibilite-web" target="_blank" aria-label="Sous-titrer une vidéo, c'est nécessaire et c'est plus simple qu'il n'y parait ! (Nouvelle fenêtre)">Sous-titrer une vidéo, c'est nécessaire et c'est plus simple qu'il n'y parait !</a></li>
<li><a href="https://www.libcast.com/blog/4-raisons-pour-lesquelles-vous-devriez-sous-titrer-vos-videos" target="_blank" aria-label="4 raisons pour les lesquesls vous devriez sous-titrer vos vidéos (Nouvelle fenêtre)">4 raisons pour les lesquesls vous devriez sous-titrer vos vidéos</a></li>
</ul>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center-y dcube-bgcolor-c2">
<div class="dcube-block dcube-block-maxi">
<h4 class="dcube-text-super">Faire sous-titrer</h4>
<p class="dcube-text-small">On peut demander à des professionnels de sous-titrage (comme Authôt par exemple) de réaliser le sous-titrage de sa vidéo. Evidemment, c'est payant mais <b>la qualité est là</b>.</p>
<h4 class="dcube-text-super dcube-border-t1 dcube-border-c4">Sous-titrer soi-même</h4>
<p class="dcube-text-small">On est toujours mieux servi que par soi-même pour sous-titrer une vidéo. Des logiciels de sous-titrage existent : Workshop Subtitles, Aegisub ou autre logiciel. <br />Seul incovénient : <b>cela prend du temps</b> car il faut sous-titrer ET ensuite synchroniser les sous-titres. </p>
<h4 class="dcube-text-super dcube-border-t1 dcube-border-c4">Machine + Humain</h4>
<p class="dcube-text-small">On peut utiliser le sous-titrage automatique de l'IA et ensuite<b> le corriger</b> soi-même. <br />L'avantage est que la synchronisation des sous-titres est faite. <br />Exemple : Youtube.</p>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c2 dcube-page-border dcube-border-c0">
<div class="inside dcube-align-center">
<div class="dcube-block dcube-block-super center">
<div class="dcube-border-b1 dcube-border-c5">
<h3 class="dcube-subtitle center dcubetext-unlimit">En résumé</h3>
<p class="dcube-text-super dcubetext-unlimit"><strong>pour que les sous-titres soient parfaits</strong></p>
</div>
<ul class="dcube-text-great-xxl dcube-item-iblock dcubelist-reset alignleft" style="margin-right:auto;margin-left:auto;max-width:50rem;">
<li>Sous-titrer <strong>soi-même</strong>.</li>
<li>Ne pas utiliser uniquement le sous-titrage automatique et <strong>toujours</strong> le corriger.</li>
<li>Ne pas faire de <strong>fautes</strong> d'orthographe, de grammaire ou de conjugaison.</li>
<li>Respecter le format de couleur : <strong>couleur blanc</strong> avec un <strong>fond (transparent) noir</strong>.</li>
<li>Faire attention à la taille de la police et à la police : faire en sorte qu'ils soient <strong>lisibles</strong> pour tous.</li>
<li>Sous-titrer toujours sur <strong>deux lignes maximum</strong>.</li>
</ul>
<div class="dcube-border-t1 dcube-border-c5 dcube-text-tiny">
<p><a href="https://github.com/knarf18/Bonnes-pratiques-du-sous-titrage/blob/master/Liste%20de%20bonnes%20pratiques.md" class="dcubefont-geobook" target="_blank" aria-label="En savoir plus sur les bonnes pratiques du sous-titrage (Nouvelle fenêtre)">En savoir plus sur les bonnes pratiques du sous-titrage</a></p>
<p><a href="https://access42.net/sous-titres-video-accessibilite-web" class="dcubefont-geobook" target="_blank" aria-label="En savoir plus sur la réalisation du sous-titrage par Access42 (Nouvelle fenêtre)">En savoir plus sur la réalisation du sous-titrage par Access42</a></p>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-page-border dcube-border-c0 dcube-bgcolor-c4a">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h2 class="dcube-title-chapter dcube-title-chapter-comfy">
<span class="dcube-text-reinit dcube-item-block">Description des images</span>
<span class="sr"> </span>
</h2>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-align-center dcube-bgcolor-c2">
<div class="dcube-block center">
<h3 class="dcube-subtitle">
<span class="dcube-item-block dcube-title-focus">Pour qui et pourquoi ?</span>
<span class="sr"> </span>
<span class="dcube-item-block dcube-margin-t2">1,2 million de personnes aveugles et malvoyantes</span>
</h3>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center">
<div class="dcube-block center">
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-2">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr"><a href="https://twitter.com/Academie_Paris?ref_src=twsrc%5Etfw">@Academie_Paris</a> <a href="https://twitter.com/CollectifBude?ref_src=twsrc%5Etfw">@CollectifBude</a> Dommage que ce message ne soit qu’en image! Impossible pr moi de le lire, maman d’élève concernée! <a href="https://twitter.com/hashtag/a11yfail?src=hash&ref_src=twsrc%5Etfw">#a11yfail</a></p>— Sylvie Duchateau (@sylduch) <a href="https://twitter.com/sylduch/status/665540899024338944?ref_src=twsrc%5Etfw">November 14, 2015</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-2">
<blockquote class="twitter-tweet">
<p lang="fr" dir="ltr">
Ouais d'ailleurs si notre cher président pouvait remplir l'alternative de ses
images-textes sur Twitter, ce serait pas du luxe !
</p>— Julie Moynat (@juliemoynat) <a href="https://twitter.com/juliemoynat/status/1174212157313081345?ref_src=twsrc%5Etfw">September 18, 2019</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="inside dcube-align-center">
<div class="dcube-block">
<h3 class="center">Description des images</h3>
<p class="center dcube-text-great">Twitter (sur mobile et IOS)</p>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-3">
<p>Configuration :<br /> Réglages > Accessibilité</p>
<img src="img_slide/dcube/description_image_1.png" alt="Dans la catégorie Vision, activer la case à cocher Composer des descriptions d'image" />
</div>
<div class="col-1-3">
<p>Cliquer sur "Ajouter une description"</p>
<img src="img_slide/dcube/description_image_2.png" alt="En bas de l'image, il y a un bouton nommé ajouter une description" />
</div>
<div class="col-1-3">
<p>Et décrire l'image</p>
<img src="img_slide/dcube/description_image_3.png" alt="Sous l'image, on décrit l'image. Il est écrit une énorme foule amassée devant le magicobus sur les quais de la tournelle. En arrière-plan, une péniche qui passe et qui voit le magicobus." />
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c6">
<div class="inside dcube-align-center">
<div class="dcube-block">
<h3 class="center">Description des images</h3>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-2">
<p>Linkedin</p>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-2">
<img src="img_slide/dcube/description_image_4.png" alt="" />
</div>
<div class="col-1-2">
<img src="img_slide/dcube/description_image_5.png" alt="" />
</div>
</div>
</div>
<div class="col-1-2">
<p>WordPress</p>
<div class="dcube-block center">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Tiens, WordPress affiche désormais un message sous le champ «Texte alternatif de l’image», avec un lien menant à ce tutoriel de la WAI : <a href="https://t.co/VnRQoAMJq3">https://t.co/VnRQoAMJq3</a> Un rappel toujours utile ! 😉 <a href="https://twitter.com/hashtag/a11y?src=hash&ref_src=twsrc%5Etfw">#a11y</a> <a href="https://twitter.com/hashtag/WordPress?src=hash&ref_src=twsrc%5Etfw">#WordPress</a> <a href="https://t.co/vcwYOEYihf">pic.twitter.com/vcwYOEYihf</a></p>— Marie Guillaumet (@kReEsTaL) <a href="https://twitter.com/kReEsTaL/status/1126939637862289408?ref_src=twsrc%5Etfw">May 10, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="inside dcube-align-center">
<div class="dcube-block">
<h3 class="center">Solution alternative</h3>
<p class="center">Pour décrire les gifs animés</p>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr"><a href="https://twitter.com/hashtag/UXDays19?src=hash&ref_src=twsrc%5Etfw">#UXDays19</a> Petite explication de comment sont fabriquées les cuillères et de leur empreinte carbon.<br><br>(Alt: extrait de kaamelott<br>- Roi Burgonde:"cuillleeere"<br>- Arthur: Interprete!!!") <a href="https://t.co/fBs9pm5NeG">pic.twitter.com/fBs9pm5NeG</a></p>— St�phanie Walter (@WalterStephanie) <a href="https://twitter.com/WalterStephanie/status/1141991960162590720?ref_src=twsrc%5Etfw">June 21, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Docteur ? mais trop pas 😄<br>(alt: Bugs Bunny habillé en super héros, cape volante au vent grignotant une carotte en disant : Eh, what’s up Doc?) <a href="https://t.co/ns7sacv2LO">pic.twitter.com/ns7sacv2LO</a></p>— Christophe P. 🐝 (@LDZintegratore) <a href="https://twitter.com/LDZintegratore/status/1145717074553114626?ref_src=twsrc%5Etfw">July 1, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">J'ai l'impression d'être comme mon téléphone : j'ai beau charger les batteries toute la nuit, au réveil, je ne suis jamais à 100% (plutôt autour de 50-60% en ce moment…) Me suis endormie plus d'1 fois toute habillée ces derniers temps…<br>[Gif bébé qui tombe endormi sur 1 canapé] <a href="https://t.co/JArCLiGK0i">pic.twitter.com/JArCLiGK0i</a></p>— Armony ALTINIER ☀ (@armonyaltinier) <a href="https://twitter.com/armonyaltinier/status/1141243781259452417?ref_src=twsrc%5Etfw">June 19, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-page-border dcube-border-c0 dcube-bgcolor-c4a">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h2 class="dcube-title-chapter dcube-title-chapter-comfy">
<span class="dcube-text-reinit dcube-item-block">Ecriture des messages <br />dans les réseaux sociaux</span>
</h2>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="inside dcube-align-center dcube-margin-t15">
<div class="dcube-block">
<h3 class="center">Ce qu'il ne faut surtout pas faire</h3>
<div class="dcube-cols dcube-margin-t15 aligncenter dcube-border-b15 dcube-border-c5">
<div class="col-1-2">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="und" dir="ltr">˙uıɐɯǝp '3 sƃuıɥʇ ɹǝƃuɐɹʇs</p>— Netflix France (@NetflixFR) <a href="https://twitter.com/NetflixFR/status/1146478713216782336?ref_src=twsrc%5Etfw">3 juillet 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p class="dcube-text-small">Ce que dit le lecteur d'écran : « U P 3 siuz »</p>
<div class="toggle-gp-article toggle-gp dcube-toggle-box">
<button class="dcube-btn dcube-btn-toggle" aria-expanded="false" aria-controls="alt-transcription-tweet-1">Consulter la transcription du tweet</button>
<div id="alt-transcription-tweet-1" class="content-to-toggle is-hidden dcube-text-small center">
<h4>Transcription du tweet de Netflix France :</h4>
<p>« <span lang="en">Stranger things</span> 3, demain. »</p>
</div>
</div>
</div>
<div class="col-1-2">
<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Reminder that cute "fonts" on Twitter make your tweets useless to those using screen readers. For example, "𝗛𝗲𝗹𝗹𝗼" (bold) may sound like this: "Mathematical bold sans H, Mathematical bold sans E, Mathematical bold sans L, Mathematical bold sans L, Mathematical bold sans O"</p>— Jennifer Harrison (@GeneticJen) <a href="https://twitter.com/GeneticJen/status/1141318631474831361?ref_src=twsrc%5Etfw">19 juin 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="dcube-cols dcube-margin-t15 aligncenter dcube-border-c5">
<div class="col-1-2">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Vous trouvez ça 𝓶𝓲𝓰𝓷𝓸𝓷 d'écrire vos tweets et 🅿🆂🅴🆄🅳🅾 comme ça. Mais avez-vous déjà ⓔⓝⓣⓔⓝⓓⓤ ce que ça d⃣ o⃣ n⃣ n⃣ e⃣ avec des technologies d'assistance comme VσιƈҽOʋҽɾ ? <a href="https://t.co/SBuLcohmga">https://t.co/SBuLcohmga</a> <a href="https://t.co/YVU3uJ9J8e">pic.twitter.com/YVU3uJ9J8e</a></p>— HTeuMeuLeu (@HTeuMeuLeu) <a href="https://twitter.com/HTeuMeuLeu/status/1167429160110874626?ref_src=twsrc%5Etfw">August 30, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-2 dcube-text-small alignleft">
<p class="dcube-text-under">Ce que dit le lecteur d'écran :</p>
<p>« Vous trouvez ça m de ronde lettre i de ronde lettre g de ronde lettre n de ronde lettre o de ronde lettre n de ronde lettre d'écrire vos tweets et symbole de parking groupe sanguin O comme ça. Mais avez-vous déjà latin small letter e latin small letter n latin small letter tlatin small letter elatin small letter nlatin small letter dlatin small letter u ce que ça D O N N E avec des technologies d'assistance comme sigmeodao ? »</p>
<div class="toggle-gp-article toggle-gp dcube-toggle-box center">
<button class="dcube-btn dcube-btn-toggle" aria-expanded="false" aria-controls="alt-transcription-tweet-2">Consulter la transcription du tweet</button>
<div id="alt-transcription-tweet-2" class="content-to-toggle is-hidden alignleft">
<h4>Transcription du tweet de HTeuMeuLeu :</h4>
<p>« Vous trouvez ça mignon d'écrire vos tweets et pseudo comme ça. Mais avez-vous déjà entendu ce que ça donne avec des technologies comme Voice Over ? »</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="inside dcube-align-center dcube-margin-t15">
<div class="dcube-block">
<h3 class="center">Ecriture inclusive</h3>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-2">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">« des chroniqueur·euse·s sportif·ive·s » donne :<br>avec NVDA : « des chroniqueur euse esse sportif ive esse »<br>avec VoiceOver : « des chroniqueur point médian euse point médian esse sportif point médian ive point médian esse »</p>— Christian VOLLE (@ChristianVolle) <a href="https://twitter.com/ChristianVolle/status/1121898997764038656?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-2 dcube-text-small">
<h4 class="dcube-text-under">Exemple de texte rédigé</h4>
<p class="alignleft">
Toutes les catégories de citoyen.ne.s étaient représenté.e.s puisque l'on rencontrait des préfet.ète.s, des sénateur.rice.s, des ambassadeur.rice.s, des conseiller.ère.s municipaux.ales, des éducateur.rice.s, des chroniqueur.euse.s sportif.ive.s.<br />
On croisait également des avocat.e.s commis.e.s d'office, des assistant.e.s administratif.ive.s retraité.e.s, des artisan.e.s reconverti.e.s en banquier.ère.s.
</p>
<a href="https://www.dropbox.com/s/mif8nuee19r9ro3/NVDA%20-%20texte%20r%C3%A9dig%C3%A9%20selon%20les%20recommandations%20du%20Haut%20Conseil%20%C3%A0%20l'%C3%A9galit%C3%A9%20entre%20les%20femmes%20et%20les%20hommes.mp3?dl=0" class="dcube-text-small" target="_blank" aria-label="Ecouter la restitution vocale (Nouvelle fenêtre)">Ecouter la restitution vocale</a>
<div class="toggle-gp-article toggle-gp dcube-toggle-box">
<button class="dcube-btn dcube-btn-toggle" aria-expanded="false" aria-controls="alt-transcription-ecriture-inclusive">Consulter la transcription de la restitution vocale</button>
<div id="alt-transcription-ecriture-inclusive" class="content-to-toggle is-hidden dcube-text-small">
<h5>Transcription de la restitution vocale :</h5>
<p class="alignleft">
Toutes les catégories de citoyen point ne point esse étaient représenté point e point esse puisque l'on rencontrait des préfet point ète point esse, des sénateur point rice point esse, des ambassadeur point rice point esse, des conseiller point ère point esse municipaux point ales, des éducateur point rice point esse, des chroniqueur point euse point esse sportif point ive point esse.<br />
On croisait également des avocat point e point esse commis point e point esse d'office, des assistant point e point esse administratif point ive point esse retraité point e point esse, des artisan point e point esse reconverti point e point esse en banquier point ère point esse.
</p>
</div>
</div>
<div class="toggle-gp-article toggle-gp dcube-toggle-box">
<button class="dcube-btn dcube-btn-toggle" aria-expanded="false" aria-controls="alt-transcription-ecriture-inclusive-2">Consulter la transcription du texte</button>
<div id="alt-transcription-ecriture-inclusive-2" class="content-to-toggle is-hidden dcube-text-small">
<h5>Transcription du texte :</h5>
<p class="alignleft">
Toutes les catégories de citoyens et de citoyennes étaient représentés puisque l'on rencontrait des préfets et préfètes, des sénateurs et sénatrices, des ambassadeurs et ambassadrices, des conseillers et conseillères municipaux, des éducateurs et éducatrices, des chroniqueurs et chroniqueuses sportifs.
On croisait égalements des avocats et avocates commis d'office, des assistants et assistantes administratifs retraités, des artisants et artisanes reconvertis en banquiers et banquières.
</p>
</div>
</div>
</div>
</div>
<div class="dcube-text-tiny dcube-border-t1">
<p>Article à lire : <a href="https://access42.net/langage-non-genre-accessibilite" target="_blank" aria-label="Ecriture inclusive et accessibilité font-elles bon ménage ? (Nouvelle fenêtre)">Ecriture inclusive et accessibilité font-elles bon ménage ?</a></p>
<p>Consulter deux fils <span lang="en">(threads)</span> consacrés aux problèmes d'accessibilité numérique : <a href="https://twitter.com/ChristianVolle/status/1122903877270081536" target="_blank" aria-label="Fil n°1 (Nouvelle fenêtre)">Fil n°1</a> et <a href="https://twitter.com/ChristianVolle/status/1122905206096912384" aria-label="Fil n°2 (Nouvelle fenêtre)">Fil n°2</a>.</p>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-page-border dcube-border-c0 dcube-bgcolor-c4a">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h2 class="dcube-title-chapter dcube-title-chapter-comfy">
<span class="dcube-text-reinit dcube-item-block">Accessibilité des fichiers PDF</span>
<span class="sr"> </span>
</h2>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="inside dcube-align-center">
<div class="dcube-block">
<h3 class="center">Réactions des utilisateurs de lecteur d'écran</h3>
<p class="center">concernant l'accessibilité des documents PDF</p>
<div class="dcube-cols dcube-margin-t15 aligncenter">
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Bon alors je maintiens persiste et signe : j'aime pas les PDF ! Une matinée de boulot à tenter d'en ouvrir et d'en appréhender le contenu en étant <a href="https://twitter.com/hashtag/Aveugle?src=hash&ref_src=twsrc%5Etfw">#Aveugle</a>, ça vous apprend la patience tout en vous mettant les nerfs en pelotte... :-(</p>— Boeuf Céline (@CelineBoeuf) <a href="https://twitter.com/CelineBoeuf/status/1142018081658757120?ref_src=twsrc%5Etfw">June 21, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Christian C a toujours été quelqu'un de raisonnable... ;-) Et donc, aux fabricants de PDF, si vous ne voulez pas qu'on vous lise : continuez ainsi, c'est parfait !</p>— Boeuf Céline (@CelineBoeuf) <a href="https://twitter.com/CelineBoeuf/status/1142152398850482176?ref_src=twsrc%5Etfw">June 21, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-1-3">
<blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Sur notre blog, <a href="https://twitter.com/sylduch?ref_src=twsrc%5Etfw">@sylduch</a> vous explique pourquoi les documents <a href="https://twitter.com/hashtag/PDF?src=hash&ref_src=twsrc%5Etfw">#PDF</a> sont trop souvent un calvaire pour les utilisateurs de lecteur d'écran. Elle précise les problèmes des documents images, non structurés ou protégés.<a href="https://twitter.com/hashtag/accessibilit%C3%A9?src=hash&ref_src=twsrc%5Etfw">#accessibilité</a> <a href="https://twitter.com/hashtag/a11y?src=hash&ref_src=twsrc%5Etfw">#a11y</a> <a href="https://twitter.com/hashtag/Lecteur%C3%89cran?src=hash&ref_src=twsrc%5Etfw">#LecteurÉcran</a> <a href="https://t.co/HIN3sBocQX">https://t.co/HIN3sBocQX</a></p>— Access42 (@access42net) <a href="https://twitter.com/access42net/status/1140891900192444417?ref_src=twsrc%5Etfw">June 18, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-bgcolor-c2 dcube-align-center">
<div class="dcube-block center">
<h3 class="dcube-subtitle">
<span class="dcube-item-block dcube-title-focus">Pourquoi ?</span>
<span class="sr"> </span>
</h3>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center">
<div class="dcube-block dcube-block-maxi">
<h4 class="dcube-text-super"> PDF contenant une image on un document numérisé</h4>
<p class="dcube-text-small">Il est <strong>impossible</strong> de lire, grossir, sélectionner le contenu du document et de faire une recherche de texte dans ce document.</p>
<h4 class="dcube-text-super dcube-border-t1 dcube-border-c4">PDF protégés</h4>
<p class="dcube-text-small">Le lecteur d'écran <strong>ne peut pas lire</strong> le document protégé à cause de la propriété « Accessibilité au contenu activée » paramétrée par défaut sur « non autorisé ». </p>
<h4 class="dcube-text-super dcube-border-t1 dcube-border-c4">PDF n'ayant aucune structure</h4>
<p class="dcube-text-small">
Si le document n'est pas balisé, le lecteur d'écran :
<ul class="dcube-text-small">
<li><strong>ne vocalise pas</strong> le texte dans le bon ordre</li>
<li><strong>vocalise très mal</strong> à cause d'une police non conforme</li>
<li><strong>ne peut pas naviguer</strong> d'un chapitre à l'autre.</li>
</ul>
</p>
<p class="dcube-text-small">Source : <a href="https://access42.net/pdf-accessibilite" target="_blank" aria-label="PDF et accessibilité : la fausse bonne idée (Nouvelle fenêtre)">PDF et accessibilité : la fausse bonne idée</a></p>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c0">
<div class="dcube-page-half-vertical">
<div class="dcube-page-half-vertical_col dcube-bgcolor-c2 dcube-align-center">
<div class="dcube-block center">
<h3 class="dcube-subtitle center dcubetext-unlimit">Trois solutions</h3>
<p class="dcube-text-super dcubetext-unlimit"><strong>pour rendre le document accessible</strong></p>
<ul class="dcube-text-tiny dcube-margin-t15 alignleft">
Sources :
<li>
<a href="https://github.com/DISIC/guides-documents_bureautiques_accessibles/blob/master/AdobeAcrobatPro.pdf"
class="dcubefont-geobook" target="_blank"
aria-label="Créer des documents accessibles avec Adobe Acrobat Pro Document Cloud (Nouvelle fenêtre)">
Créer
des documents accessibles avec Adobe Acrobat Pro Document Cloud
</a>
</li>
<li>
<a href="https://webaim.org/techniques/acrobat/" target="_blank"
aria-label="Defining PDF Accessibility (EN) (Nouvelle fenêtre)">
<span lang="en">
Defining PDF Accessibility
(EN)
</span>
</a>
</li>
<li>
<a href="http://references.modernisation.gouv.fr/accessibilite-numerique" target="_blank" aria-label="Qu'est-ce qu'est l'accessibilité numérique ? (Nouvelle fenêtre)">Qu'est-ce qu'est l'accessibilité numérique ?</a>
</li>
<li>
<a href="https://references.modernisation.gouv.fr/rgaa-accessibilite/introduction-RGAA.html" target="_blank" aria-label="Référentiel général d'accessibilité pour les administrations (Nouvelle fenêtre)">Référentiel général d'accessibilité pour les administrations (RGAA)</a>
</li>
</ul>
</div>
</div>
<div class="dcube-page-half-vertical_col dcube-align-center">
<div class="dcube-block dcube-block-maxi">
<ul class="dcube-text-great-xxl dcube-item-iblock dcubelist-reset alignleft">
<li>
<b>Mettre à disposition</b>, en plus du fichier PDF, un fichier de traitement de texte (en format odt. ou .docx)
<b>structurée</b>.
<ul>
<li class="dcube-text-small">
Pour s'assurer que le document soit structurée, vous avez l'option "Vérifier
l'accessibilité" dans la catégorie "Révision" sur les dernières versions récentes d'Office.
<img src="img_slide/dcube/accessibilite_document_office.png" style="margin: auto;margin-top: 0.5em;"
alt="Vérificateur d'accessibilité. Résultats de l'inspection : aucun problème d'accessibilité n'a été détecté. Les personnes atteintes d'un handicap ne devrait avoir aucune difficulté à lire ce document" />
</li>
</ul>
</li>
<li>Rendre le fichier PDF <b>accessible</b> avec Adobe Acrobat Pro ou InDesign (logiciels payants)</li>
<li>Réaliser le document en format HTML <b>en implémentant l'accessibilité numérique</b> avec une feuille de style CSS pour l'impression PDF (CSS print)</li>
</ul>
</div>
</div>
</div>
</section>
<section class="slide dcube-page-full dcube-bgcolor-c4a dcube-couv dcube-couv-end">
<div class="inside dcube-align-center center">
<div class="dcube-block">
<h2>Merci !</h2>
<p class="dcube-text-super dcube-margin-t15">
<span lang="en">Slides</span> <br /> <a href="https://emma11y.github.io/parisweb2019/" target="_blank" aria-label="Slides (Nouvelle fenêtre)">https://emma11y.github.io/parisweb2019/</a>
</p>
</div>
</div>
</section>
</main>
</div><!-- #wrapper -->
<footer id="footer" role="contentinfo">
<div id="owner-info" class="owner-info dcube-modal dcube-edito" role="dialog" tabindex="-1" style="display:none" data-close="Fermer les informations éditeur">
<div role="document" tabindex="0">
<p><a href="https://accesslide.net/" target="_blank" aria-label="AccesSlide créé par Access42 (Nouvelle fenêtre)">AccesSlide créé par Access42</a>, tous droits réservés.</p>
</div>
</div>
</footer>
<div id="help-info" class="help-info dcube-modal dcube-edito" role="dialog" tabindex="-1" style="display:none" data-close="Fermer l'aide">
<div role="document" tabindex="0">
<div class="dcube-cols">
<div class="col-1-2">
<h2>Navigation</h2>
<p>Pour passer d’une page à une autre, vous disposez des boutons « Suivant » et « Précédent ».</p>
<p>Sur appareil mobile, vous avez la possibilité de changer de page en balayant l’écran :</p>
<ul>
<li>de la droite vers la gauche, pour passer à la page suivante ;</li>
<li>de la gauche vers la droite, pour revenir à la page précédente.</li>
</ul>
<h3>Navigation avec lecteur d’écran sur appareils mobiles</h3>
<p>Si vous utilisez un lecteur d’écran sur mobile, ces actions sont différentes selon votre logiciel :</p>
<ul>
<li>sur Android avec <span lang="en">TalkBack</span> : l’action se réalise avec deux doigts sur l’écran (les deux doigts doivent être suffisamment espacés l’un de l’autre) ;</li>
<li>sur <span lang="en">iPhone</span> avec <span lang="en">VoiceOver</span> : effectuer un double tap prolongé et maintenir le doigt appuyé quelques secondes puis balayer l’écran vers la gauche ou la droite.</li>
<li>Si ces actions ne sont pas effectives, vous devez retourner en haut de page pour atteindre les boutons « Suivant » et « Précédent ».</li>
</ul>
<h3>Navigation au clavier</h3>
<table class="dcube-table-fixed">
<caption class="sr">Navigation au clavier</caption>
<thead>
<tr>
<th scope="col">Touche</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dcube-table_cell-alpha"><kbd>CTRL + Espace</kbd></td>
<td>Page suivante avec la dernière version de NVDA ou <span lang="en">JAWS</span> 18</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>Espace</kbd> ou <kbd>Flèche droite</kbd></td>
<td>Page suivante dans les autres cas</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>MAJ + CTRL + Espace</kbd></td>
<td>Page précédente avec la dernière version de NVDA ou <span lang="en">JAWS</span> 18</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>MAJ + Espace</kbd> ou <kbd>Flèche gauche</kbd></td>
<td>Page précédente dans les autres cas</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>Début</kbd></td>
<td>Première page</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>Fin</kbd></td>
<td>Dernière page</td>
</tr>
<tr>
<td class="dcube-table_cell-alpha"><kbd>ALT + 0 (zéro)</kbd></td>
<td>Sommaire</td>
</tr>
</tbody>
</table>
</div>
<div class="col-1-2">
<h2>Options d’accessibilité</h2>
<p><span lang="en">AccessReader</span> propose plusieurs options d’accessibilité à configurer dans le volet « Configuration ».</p>
<h3>Dyslexie</h3>
<p>Pour un meilleur confort de lecture, cochez les options « Police adaptée » et « Interlignage adapté ».</p>
<h3>Contraste</h3>
<p><span lang="en">AccessReader</span> propose trois niveaux de contraste :</p>
<ul>
<li>par défaut ;</li>
<li>inversé ;</li>
<li>renforcé.</li>
</ul>
<h3>Vocalisation</h3>
<p>Vous pouvez sélectionner, à la section « Accessibilité », différentes options sonores.</p>
<p>Vous pouvez choisir les actions qui déclencheront un signal sonore (chaque signal sonore est différent en fonction de l’action) :</p>
<ul>
<li>Page : émet un bip lorsque vous arrivez sur une nouvelle page</li>
<li>Début : émet un bip lorsque vous atteignez la première page</li>
<li>Fin : émet un bip lorsque vous atteignez la dernière page</li>
</ul>
<p>Vous pouvez également choisir des éléments supplémentaires à vocaliser : </p>
<ul>
<li>Numéro : vocalise le numéro de la page à son affichage</li>
<li>Titre : vocalise le titre de la page à son affichage</li>
</ul>
</div>
</div>
<div class="clear dcube-margin-t2">
<h2>Conseils pour l’utilisation d’<span lang="en">AccessReader</span> avec un lecteur d’écran</h2>
<div class="col-1-2">
<p><strong>Note </strong> : <span lang="en">AccessReader</span> a été utilisé avec les lecteurs d’écran suivants :</p>
<ul>
<li>Windows : NVDA 2017.3 avec Firefox 55 et <span lang="en">Internet Explorer</span> 11 ;</li>
<li>Windows : <span lang="en">JAWS</span> version 18 avec <span lang="en">Internet Explorer</span> 11 ;</li>
<li>Mac : <span lang="en">Sierra</span> avec <span lang="en">VoiceOver</span> et Safari.</li>
<li>Linux : Ubuntu 14 avec Orca et Firefox 30.</li>
</ul>
<h3>Recommandations pour la configuration avec un lecteur d’écran</h3>
<ol>
<li>Rechercher le bouton « Ouvrir la configuration » (il se trouve en bas de page).</li>
<li>Choisir la police, l’interlignage et les contrastes les plus adaptés à sa vision.</li>
<li>
Dans la partie « Accessibilité », on peut choisir de cocher ou non des cases à cocher pour :
<ul>
<li>vocaliser les numéros de page,</li>
<li>entendre des bips quand on arrive à la première ou la dernière page,</li>
<li>vocaliser le titre de la page en cours.</li>
</ul>
</li>
<li>Veiller à ce que la case « désactive l’action du clic pour afficher la page suivante » soit décochée, (NVDA et <span lang="en">JAWS</span>). Pour <span lang="en">VoiceOver</span> et Orca, cela ne semble pas avoir d’incidence.</li>
<li>Dans la partie « lecteur », on peut choisir d’afficher ou non le sommaire et de consulter le document en mode page à page ou en mode plan. Dans le cas du mode plan, toutes les pages seront affichées en mode linéaire. Elles seront séparées par des titres de niveau 2. Dans le cas du mode page, il faudra appuyer sur suivant ou sur espace pour afficher la page suivante.</li>
</ol>
<h3>Note sur l’utilisation des commandes du lecteur avec un lecteur d’écran</h3>
<p>L’appui sur la barre d’espace pour aller à la page suivante ne fonctionne pas avec NVDA et Firefox <abbr title="version supérieure ou égale à">≥</abbr>55, ni avec <span lang="en">JAWS</span> et Internet <span lang="en">Explorer</span> <abbr title="version supérieure ou égale à">≥</abbr>11. Dans ces deux cas, il faut utiliser le raccourci <kbd>CTRL + Espace</kbd> pour passer à la page suivante, et <kbd>MAJ + CTRL + Espace</kbd> pour passer à la page précédente.</p>
<p>L’appui sur les autres touches pour aller au début et à la fin du document ne fonctionnent pas non plus avec <span lang="en">JAWS</span> et NVDA. Pour pallier ce problème :</p>
<ul>
<li>dans NVDA, appuyer sur <kbd>NVDA + F2</kbd> pour ignorer l’appui sur la touche suivante ;</li>
<li>dans <span lang="en">JAWS</span>, appuyer sur <kbd><span lang="en">JAWS</span> + 3</kbd> du pavé alphanumérique pour ignorer l’appui sur la touche suivante.</li>
</ul>
<p><span lang="en">VoiceOver</span> et Orca gèrent très bien la navigation à la page suivante, avec espace, page précédente avec <kbd>SHIFT + espace</kbd>, début et fin de support de présentation.</p>
<p>Par contre l’utilisation des flèches droite et gauche ne fonctionne avec aucun des lecteurs d’écran mentionnés ci-dessus.</p>
</div>
<div class="col-1-2">
<h3>Utilisation du dialogue de configuration avec un lecteur d’écran</h3>
<p>Lorsqu’on ouvre la configuration, une « Fenêtre » apparaît. <span lang="en">VoiceOver</span> annonce « paramètres » avec 7 éléments. Chaque catégorie est annoncée comme « groupe » par <span lang="en">VoiceOver</span> : exemple dyslexie, contrastes, accessibilité, effets (groupe). <span lang="en">VoiceOver</span> annonce le nombre d’éléments dans chaque catégorie. Pour ouvrir une catégorie, appuyer sur <kbd>VO + Majuscule + flèche bas</kbd>.</p>
<p>Pour modifier les paramètres accessibilité, une fois que <span lang="en">VoiceOver</span> annonce accessibilité, interagir à l’aide de VO+majuscule+flèche bas et se déplacer parmi les boutons. <span lang="en">VoiceOver</span> n’annonce pas le titre associé à chaque bouton. </p>
<p>Avec les autres lecteurs d’écran, il suffit, une fois que la fenêtre a été ouverte, d’utiliser la tabulation et d’effectuer les choix souhaités en cochant les éléments à l’aide de la barre d’espace.</p>
<p>Veillez à ne pas dépasser le bouton « Enregistrer » car on risque de se retrouver dans la barre d’adresses du navigateur et il est difficile de revenir en arrière. </p>
<h3>Autres petits dysfonctionnements des lecteurs d’écran</h3>
<h3>NVDA et Orca</h3>
<p>Lorsqu’on passe à la page suivante ou précédente et que la vocalisation des numéros de pages est cochée, NVDA et Orca annoncent « null » puis le numéro de page. Pour les chiffres supérieurs à 10, ils continuent d’annoncer 1, 2, 3… Seules les dizaines, 10, 20, 30… sont annoncées correctement.</p>
<p>L’annonce des numéros de pages est correcte avec <span lang="en">JAWS</span> à partir de la version 15 et <span lang="en">VoiceOver</span>.</p>
<h3><span lang="en">JAWS</span></h3>
<p>Si vous utilisez <span lang="en">JAWS</span>, la version 14 du logiciel ne fonctionne pas bien avec Firefox. Préférer l’utilisation du lecteur avec <span lang="en">Internet Explorer</span>. JAWS 14 ne vocalise pas les numéros de page ni leur titre.</p>
<p>Pour toute question concernant l’utilisation d’<span lang="en">Accessreader</span> avec un lecteur d’écran, ne pas hésiter à <a href="mailto:[email protected]">nous contacter</a>.</p>
</div>
</div>
<div class="clear dcube-margin-t2">
<div class="col-1-2">
<h2>Structure des titres</h2>
<p>Le premier titre de niveau 1 (<code>h1</code>) rencontré dans la page contient le titre du support de présentation. Ce titre de niveau 1 reste le même tout au long du support de présentation.</p>
<p>Ensuite, chaque grande section du support de présentation est titrée par un titre de niveau 2 (<code>h2</code>).</p>
<p>À l’intérieur d’une grande section, les sous-sections peuvent être titrées par des titres de niveau 3 (<code>h3</code>) ou par un niveau de titre encore inférieur.</p>
<p>Cette structure de titres peut sembler incohérente lorsqu’elle est vocalisée : en effet, on passe parfois d’un <code>h1</code> à un <code>h3</code>, voire à un titre de niveau inférieur. Elle n’en reste pas moins cohérente à l’échelle du document, et parfaitement valide au regard de la norme HTML 5.</p>
<p>Par ailleurs, lorsqu’on se trouve dans une sous-section, un fil d’ariane cliquable apparaît après l’en-tête du document, et permet de retourner au début de la grande section concernée si besoin.</p>
</div>
</div>
</div>
</div>
<div id="nav-wrapper" class="tool-bar footer-nav clearfix navbar-invisible" tabindex="0">
<div id="wrappernav">
</div>
</div>
<div id="setting" class="tool-block tool-block-settings" role="dialog" tabindex="-1" style="display:none"></div>
</div>
<div id="Caudio"></div>
<div id="Dcourante" aria-live="polite" aria-atomic="true" aria-hidden="true"></div>
<script src="js/slide.js"></script>
<script src="js/afontgarde.js"></script>
<script>
AFontGarde('FontAwesome', {
glyphs: '\uF101\uF101\uF101\uF101',
success: function () { console.log('success'); },
error: function () { console.log('timeout error'); },
timeout: 10000
});
</script>
<script type="text/javascript" src="js/AccessTooltip.js"></script>
<script type="text/javascript" src="js/Toggle.js"></script>
<script type="text/javascript">
AccessTooltip({
objs: 'a, button, input, textarea, select,abbr,img',
tooltipClassName: 'access-tooltip',
toolTipBetween: 2,
toolTipUp: true,
mouse: true,
tempDelay: 1000,
useAriaDP: false,
useEscClose: true
});
</script>
<script src="js/AccessNote.js" type="text/javascript"></script>
<script>AccessNote();</script>
</body>
</html>