Niquelao » Archives du blog » Calendrier accessible en JavaScript (inutile mais pratique)

» Archives du blog » Calendrier accessible en javascript (inutile mais utile) Niquelao - Accessibilité Calendrier accessible en javascript (inutile mais utile) 11 février 2007 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 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 davantage des lignes directrices de travail pour sa construction : Qu’il soit accessible et non intrusif. É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 solution pour que les développeurs qui souhaitent l’intégrer à 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 approche 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’exemple Pour vérifier son fonctionnement, vous pouvez accéder à un exemple et le télécharger .

L’inclure dans nos documents 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 ». 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 : var formato = ‘d/mm/y’; Pour afficher le calendrier à côté d’un champ de texte, celui-ci devra porter la classe « fecha ».

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 Avantages Parmi les avantages qu’on peut lui attribuer, on trouve : Facile à utiliser et à implémenter.

Non intrusif. Le code et le contenu générés sont accessibles (balisage, organisation, contenu,…) et utilisables via des aides techniques (lecteur d’écran,…). Sur ce point, on a tenu compte de l’endroit où se place le focus, tant à l’affichage qu’en cours de fonctionnement et à sa disparition. Ainsi, lorsqu’il s’affiche, le focus se place directement sur le sélecteur d’années, en suivant un ordre logique lors de la tabulation depuis celui-ci, et lorsque le calendrier se ferme (via le lien de fermeture ou après avoir sélectionné une date), le focus revient sur le champ de texte auquel il avait été associé.

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

La navigation y est facilitée quel que soit le dispositif. On peut naviguer en utilisant n’importe lequel des dispositifs avec lesquels on peut naviguer sur le web.

Ses paramètres sont facilement configurables et son appel très simple (via l’utilisation de noms de classe). La langue est prise directement depuis le document parent, ce qui permet d’ajouter de nouvelles traductions au code. Dans le cas où la langue n’est pas déclarée dans le document (ce qui ne devrait pas arriver), c’est l’espagnol qui sera utilisé par défaut. Actuellement, outre l’espagnol, il inclut l’anglais.

De plus, on a fait en sorte qu’il reconnaisse s’il s’agit d’anglais américain, non pas parce que le contenu va changer, mais pour modifier la disposition des jours de la semaine (le dimanche est placé en premier). Les styles appliqués au calendrier sont inclus via une CSS liée par le biais du script, ce qui, en l’absence de support pour celui-ci, optimise le téléchargement du document en n’appelant pas cette feuille de styles. Des classes ont été incluses de manière à pouvoir appliquer des styles sur n’importe laquelle des cellules du tableau (jours actifs, jours inactifs, jour actuel), ainsi que des styles spécifiques pour les samedis ou dimanches.

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

Code généré Ci-dessous, j’inclus une partie du code généré par le script. Comme on peut le constater (et comme je l’ai déjà dit), des noms de classe et des id sont inclus pour pouvoir contrôler la mise en page via la feuille de styles.

Conclusion En guise de conclusion… que pourrait-on dire de ce calendrier ?… eh bien qu’« il est inutile… mais utile » et qu’« il n’a pas d’implications négatives en termes d’accessibilité ». …au fait, quel jour sommes-nous aujourd’hui ?

Catégorie : Accessibilité, Javascript —> 2 commentaires juan 16 mars 2007 c’est excellent, mais j’ai parfois une erreur en sélectionnant la date ou en changeant les années, et IE cesse de fonctionner, ainsi que Firefox. sais-tu ce que c’est ? Rumoroso 21 août 2008 Vérifie s’il n’envoie pas le contenu du champ ou si en réalité il n’envoie pas la variable.

Le script n’interfère pas dans l’envoi du formulaire, le problème pourrait donc venir d’ailleurs. Cordialement Vous pouvez suivre les commentaires grâce au flux RSS 2.0 . Vous pouvez également laisser un commentaire , ou envoyer un trackback depuis votre site. Article précédent : Enhorabuena TAW Article suivant : acc_calendar v1.1 Laissez votre commentaire Les champs Nom et Email sont obligatoires Ajoutez-nous à…

Tags que nous mettons en avant en général accessibilité bert bos blockquote bug cañas citations cite comportement connaissance CSS escuas standards fieldset Firefox format formulaire sources hidden ie IE 7 information javascript legend liste niquelando obligatoire opera plage q squash vacances w3c WCAG xhtml Cette œuvre est sous licence Creative Commons .

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.