acc_calendar : Calendrier accessible en JavaScript (inutile mais utile)

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 augmentant 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 maîtrise, 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 que de véritables objectifs : 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 méthode pour que les développeurs qui souhaitent l’intégrer dans leurs pages web n’aient pas besoin d’ajouter 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 draguer et de gagner de l’argent.) L’inclure dans nos documents Avant tout, précisons 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 est défini à la première ligne du script. Ainsi, si par exemple on souhaite que la date suive l’ordre jour/mois/année, sans inclure de 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 peuvent être ajoutés pour d’autres langues, etc., directement dans le script. De plus, tous les paramètres possibles sont introduits sous forme de 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 ? Le script a la propriété suivante : 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) Il peut arriver que l’on souhaite que la date soit saisie dans trois champs de texte, un pour chaque donnée qui la compose.

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

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 peut sembler 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 utilisons comme classe dans les trois, une lettre ou un chiffre. Ainsi, par exemple, on pourrait 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.

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é quant à l’ordre dans lequel ils sont placés, en mettant les classes pour la configuration du calendrier (nombre d’années, antérieures, 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 ce à quoi correspond chaque champ.

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

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 ce à quoi correspond chaque champ.

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 y sont appliqués.

Désormais, 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

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.