hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Construire des fenêtres modales accessibles avec la boîte de dialogue A11y

Les modaux sont largement supportés dans les navigateurs modernes. Ils peuvent être utilisés comme fenêtres de notification, comme champs d'inscription, ou même pour les diaporamas de photos .

Vous pouvez construire ces fenêtres en utilisant du CSS pur, mais ce n'est pas la solution la plus accessible. Au lieu de cela, consultez A11y Dialog, une fenêtre modale entièrement fonctionnelle qui met l'accent sur l' accessibilité en premier .

Il fonctionne sur JavaScript à la vanille avec sa propre API personnalisée et supporte tous les navigateurs modernes sur tous les appareils. Vous pouvez consulter cette démo pour voir à quoi elle ressemble en action.

Cela ressemble beaucoup à une fenêtre modale typique. Mais, ce script utilise des balises ARIA pour prendre en charge l'accessibilité moderne pour tous les utilisateurs.

Par défaut, A11y Dialog prend également en charge les écrans tactiles, de sorte que le tapotement a le même effet qu'un clic. Vous pouvez cliquer ou appuyer n'importe où en dehors de la fenêtre pour le fermer, ou sur un ordinateur appuyez sur la touche Échap.

D'une certaine manière, cette bibliothèque est assez petite, seulement 1.2kb, y compris tout le code CSS et JS. Cela le rend léger au dessus de complètement accessible.

Vous pouvez en apprendre plus en lisant le rapport GitHub et A11y Dialog a aussi sa propre page de documentation . Cela inclut une section sur l' installation et la configuration pour les débutants complets. Il y a aussi une longue section couvrant l' API DOM pour ajouter des boutons à votre page qui peuvent ouvrir (ou fermer) la fenêtre modale.

Si vous essayez de créer des sites Web plus accessibles, envisagez sérieusement d'utiliser A11y Dialog dans vos projets. Vous pouvez obtenir le code source de GitHub ou le télécharger depuis un gestionnaire de paquets tel que npm ou Bower.

Jetez un oeil à la page principale pour en savoir plus sur la configuration et les fonctionnalités JavaScript de base. Cette bibliothèque a beaucoup plus que l'accessibilité ARIA, il vaut donc la peine de tester si vous souhaitez étendre les fonctionnalités de vos fenêtres modales.

Concevoir des interfaces ciblées pour un meilleur engagement des utilisateurs

Concevoir des interfaces ciblées pour un meilleur engagement des utilisateurs

L'engagement des utilisateurs est une métrique difficile qui peut être réalisée de différentes manières pour différents projets. La plupart des concepteurs pensent à l' interface lorsqu'ils parlent d'interactivité, mais le contenu de la page peut également encourager l'interaction de l'utilisateur. Pour un

(Conseils techniques et de conception)

Comment optimiser CSS avec des guides de style de code

Comment optimiser CSS avec des guides de style de code

Lorsque les concepteurs parlent de guides de style, ils désignent généralement un manuel convenu sur l' apparence cohérente d'un site Web ou d'une application, avec un schéma de couleurs, une typographie et une interface graphique bien conçus utilisés dans tout le projet.Il y a un autre type de guide de style que nous pouvons utiliser dans le développement web, et c'est tout aussi important mais beaucoup plus rarement discuté: les guides de style pour le code lui-même . Les guid

(Conseils techniques et de conception)