Les commandes personnalisées JavaScript Datepicker sont presque toujours inaccessibles aux utilisateurs de clavier et de lecteur d'écran. HTML5 input type="date" vous donnera un sélecteur de date accessible dans la plupart des navigateurs, mais pas tous comme Safari macOS où les sélecteurs de date natifs ne sont pris en charge que partiellement.
L'exemple ci-dessous comprend un champ de saisie de date et un bouton qui ouvre un sélecteur de date sous forme de pop-pup. Le pop-pup contient un calendrier qui se présente sous forme de grille et permet à l'utilisateur de sélectionner un jour dans le calendrier. Le choix d'une date dans le calendrier ferme la boîte de dialogue et remplit le champ de saisie de la date.
La description du format de date est associée à la saisie de texte via aria-describedby, ce qui la rend accessible aux technologies d'assistance en tant que description accessible.
Après avoir choisi une date, le nom accessible, aria-label du bouton « Choisir une date » est remplacé par « Modifier la date, DATE_STRING », où DATE_STRING est la date sélectionnée. Ainsi, lorsque la boîte de dialogue se ferme et que le focus revient sur le bouton, les utilisateurs de lecteurs d'écran entendent la confirmation de la date sélectionnée.
L'en-tête du calendrier affichant le mois et l'année est marqué comme une région en direct à l'aide de aria-live = polite, afin que les utilisateurs de lecteurs d'écran obtiennent des commentaires des boutons et des commandes clavier qui changent le mois et l'année.
Les boutons monter et descendre doivent permettre d'aller au mois suivant ou précédent lorsqu'on est au début ou à la fin du tableau.
L'aide du clavier s'affiche en bas de la boîte de dialogue. Une région en direct à l'aide de aria-live = polite, est utilisée pour l'annoncer aux utilisateurs de lecteurs d'écran lorsque le focus se déplace dans la grille du calendrier.
Pour faciliter la création du calendrier, les noms de jour dans les en-têtes de colonne sont abrégés à deux caractères. Cependant, cela rend plus difficile pour les utilisateurs de lecteurs d'écran de comprendre les noms des jours. Ainsi, les noms de jour complets sont fournis aux technologies d'assistance dans l'attribut HTML abbr sur les en-têtes de colonne, permettant aux lecteurs d'écran d'annoncer les noms complets lorsque les utilisateurs naviguent dans la grille.
La prise en charge du contraste élevé pour le style de mise au point et de survol des contrôles dans la boîte de dialogue utilise la propriété CSS border :
Lorsqu'un bouton ou une cellule de date reçoit le focus, une bordure est ajoutée.
Lorsque vous survolez un bouton ou une cellule de date avec un dispositif de pointage, une bordure est ajoutée.
Par défaut, les boutons et les cellules de date n'ont pas de bordure.