Niquelao » acc_calendar : Calendrier accessible en JavaScript (inutile mais utile)

» acc_calendar: Calendrier accessible en javascript (inutile mais utile) Niquelao Comment tu dis que ça t’a donné ? 7 juillet 2007 par Rumoroso —> Accessibilité et javascript ? acc_calendar: Calendrier accessible en javascript (inutile mais utile) Mis à jour le 1er juin 2008, par Rumoroso Dans les champs de formulaire où l’on doit saisir une date, afin d’améliorer l’expérience utilisateur tout en renforçant le contrôle sur le format des données, on peut intégrer un calendrier via javascript.

Je sais, mot maudit, mais si on le fait avec soin et contrôle, cela n’a pas forcément d’implications négatives en termes de standards et d’accessibilité. Objectifs Au départ, j’ai défini deux objectifs principaux, qui sont plus des lignes directrices de travail lors de sa construction : Qu’il soit accessible et non obstructif. Évidemment, en l’absence de support pour javascript, l’option de déployer le calendrier n’est pas proposée, mais s’il y a un support… pourquoi ne pas rendre le contenu généré accessible et utilisable ?

Qu’il soit facile à implémenter et à utiliser. J’ai cherché une manière telle que les développeurs qui souhaitent l’implémenter dans leurs pages web n’aient pas besoin d’introduire du code supplémentaire. Tout comme en CSS on utilise différents types de sélecteurs (d’éléments, d’id, de classes,…) pour associer des styles aux différentes parties de nos documents, pourquoi ne pas utiliser la même chose pour associer des comportements ?

De plus, comme objectifs secondaires, il y a : optimiser, généraliser, internationaliser,… (en étant réaliste, j’ai dû éliminer les objectifs de drague et celui de gagner de l’argent.) L’inclure dans nos documents Avant tout, indiquer que le script peut être obtenu directement en téléchargeant l’exemple complet. L’inclusion du calendrier dans notre document est aussi simple que d’inclure l’élément script correspondant dans le head : Le calendrier se chargera pour tout champ de texte comportant la classe « fecha » (si la langue du document est l’espagnol).

Le format de la date s’introduit à la première ligne du script. Ainsi, si par exemple on souhaite que la date suive l’ordre jour/mois/année, sans inclure un 0 devant le jour lorsqu’il est composé d’un seul chiffre, et en l’incluant dans le mois quand c’est nécessaire, et que le format pour l’année soit 4 chiffres : var formato = ‘d/mm/yyyy’; Comme déjà mentionné, pour afficher le calendrier à côté d’un champ de texte, celui-ci devra porter la classe « fecha » si la langue déclarée pour le document est l’espagnol (« date » si c’est l’anglais, etc.).

Ces noms de classe peuvent être modifiés, de nouveaux ajoutés pour d’autres langues, etc., directement dans le script. De plus, tous les paramètres possibles s’introduisent comme classes. La liste complète est la suivante : Charger le calendrier (requis) : fecha Dates antérieures à aujourd’hui : prev Dates postérieures à aujourd’hui : post Plage d’années : rangX (X étant le nombre d’années) Le jour actuel n’est pas inclus : todnact Appliquer un filtre pour les dates disponibles : disp Et si je charge dynamiquement les input avec AJAX ?

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Le script a la propriété que si à tout moment de nouveaux champs de texte sont introduits de manière asynchrone avec AJAX, il suffira qu’après ce chargement on appelle la fonction cargaLinks() pour que les liens d’ouverture du calendrier soient associés aux inputs Premier exemple Date future, au format d/mm/yyyy, de cette année ( class=“fecha post” ) Date future, au format d/mm/yyyy, de cette année sans inclure aujourd’hui ( class=“fecha post todnact” ) Date de naissance, au format d/mm/yyyy, jusqu’à 100 ans ( class=“fecha prev rang100” ) date des 20 prochaines années, au format d/mm/yyyy, sans inclure aujourd’hui ( class=“fecha post rang20 todnact” ) Date des 15 dernières années, au format d/mm/yyyy ( class=“fecha prev rang15” ) Date 10 ans en arrière et en avant, au format d/mm/yyyy ( class=“fecha rang10” ) Nouvelle Amélioration (avril 2007) Parfois, nous pourrions souhaiter que la date soit saisie dans trois champs de texte, un pour chaque donnée qui la compose.

La possibilité de le faire a été ajoutée. Pour cela, nous continuerons à tout contrôler grâce à l’utilisation de classes assignées aux input. Pour qu’ils constituent un groupe, les trois champs de texte devront ajouter un code qui les identifie comme tel. Cela, qui semble un peu étrange, ne l’est pas tant que ça.

En réalité, ce qu’il faut faire, c’est ajouter au mot fecha que nous employons comme classe dans les trois, une lettre ou un chiffre. Ainsi, par exemple, nous pourrions leur appliquer à tous les trois la classe « fechaA » et immédiatement, en plus d’associer le lien pour l’ouverture du calendrier, ils se comporteraient comme un groupe. Plus loin, deux exemples le montrent clairement.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Chacun des champs devra porter une classe en fonction de la donnée qui lui est associée : Pour le champ jour la classe « day » Pour le champ mois la classe « month » Pour le champ année la classe « year » Il existe une totale liberté pour l’ordre dans lequel ils sont placés, en mettant les classes pour la configuration du calendrier (nombre d’années, précédentes, postérieures, etc.) dans le premier des champs utilisés. Dans l’exemple suivant, on pourra apprécier la manière de le faire : Deuxième exemple Date des 10 prochaines années au format jour, mois, année : Jour / Mois / Année Considération importante : informer toujours l’utilisateur de quel champ correspond à quoi.

Dans l’exemple, on l’indique dans le texte précédent et, de plus, les étiquettes des input l’incluent. Date des 15 dernières années au format année, mois, jour : Année / Mois / Jour Considération importante : informer toujours l’utilisateur de quel champ correspond à quoi.

Dans l’exemple, on l’indique dans le texte précédent et, de plus, les étiquettes des input l’incluent. Mise à jour (avril 2007) Le script a été retouché pour réduire les styles qui sont appliqués depuis celui-ci. Maintenant, le lien généré a l’image par contenu (avant, celle-ci était chargée depuis la feuille de styles). Le lien est généré immédiatement après l’input (en dehors du label s’il est inclus dedans) et possède le balisage suivant : Dans le cas où il s’agit du lien pour le chargement de la date dans trois champs de texte, la classe du lien devient « enl_cal_group », et celui-ci se situe avant le premier d’entre eux. Mise à jour (7 juillet 2007) De

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.