files/fr/conflicting/web/accessibility/aria/widgets/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

---
title: Vue d'ensemble
slug: conflicting/Web/Accessibility/ARIA/widgets
tags:
  - Accessibility
  - JavaScript
  - Landing
  - NeedsUpdate
translation_of: Web/Accessibility/ARIA/widgets/overview
original_slug: Web/Accessibility/ARIA/widgets/overview
---
<div class="warning">Attention: besoin d'une mise à jour</div>

<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction</span></h2>

<p>Voici un aperçu de quelques exemples concrets et de bonnes pratiques pour la création de contrôles DHTML (<em>widgets</em>) JavaScript.</p>

<h2 id="Ressources_générales"><span class="mw-headline" id="General_Resources">Ressources</span> générales</h2>

<ul>
 <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Le guide du style DHTML</a> fournit des recommandations d'interaction clavier</li>
 <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guide pour les auteurs WAI-ARIA</a></li>
</ul>

<h2 id="Case_(checkbox)">Case (checkbox)</h2>

<ul>
 <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemples de boutons radio ARIA et case à trois états</a> (tiré du blog "The Paciello Group")</li>
 <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox" rel="nofollow">Exemple de case de contrôle ARIA de l'Université d'Illinois</a></li>
</ul>

<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2>

<ul>
 <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Utiliser les rôles &amp; états WAI-ARIA avec le menu de contrôle YUI</a></li>
</ul>

<h2 id="Glissière_(slider)"><span class="mw-headline" id="Slider">Glissière (slider</span>)</h2>

<ul>
 <li>Tiré du blog Paciello Group : glissière ARIA, <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">partie une</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">partie deux</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">partie trois</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemple</a>)</li>
 <li><a class="external text" href="http://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/" rel="nofollow">Créer un contrôle d'évaluation (rating widget) Dojo accessible et internationalisé</a></li>
</ul>

<h2 id="Onglets_(tabs)">Onglets (tabs)</h2>

<ul>
 <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Améliorer l'accessibilité de la TabView grâce aux rôles &amp; états WAI-ARIA</a>, tiré du blog YUI</li>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Améliorer les onglets UI jQuery selon WCAG 2.0 et ARIA</a></li>
 <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Exemple de panneau à onglet sur CodeTalks</a></li>
</ul>

<h2 id="Combobox_2"><span class="mw-headline" id="Combobox">Combobox</span></h2>

<ul>
 <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combobox simple (non éditable) comme remplacement de selectbox</a></li>
</ul>

<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2>

<ul>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">Application lightbox</a> <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conforme</a> à <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 et ARIA</a></li>
 <li><a class="external free" href="http://majx-js.digissime.net/js/popin/" rel="nofollow">http://majx-js.digissime.net/js/popin/</a></li>
</ul>

<h2 id="Validation_de_formulaire"><span class="mw-headline" id="Form_Validation">Validation</span> de formulaire</h2>

<ul>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">Validation de formulaire en direct conforme à WCAG 2.0 et ARIA</a></li>
</ul>

<h2 id="Tables"><span class="mw-headline" id="Table">Tables</span></h2>

<ul>
 <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutoriel en allemand sur la création de formulaire accessible</a></li>
 <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemple simple de grille sur CodeTalks</a></li>
 <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Grille de sélection de date sur CodeTalks</a></li>
 <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">Tables triables conformes à WCAG 2.0 et ARIA</a></li>
</ul>