nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Bouw toegankelijke modale Windows met A11y dialoogvenster

Modals worden breed ondersteund in moderne browsers. Ze kunnen worden gebruikt als meldings popups, als opt-in velden, of zelfs voor diavoorstellingen met foto's .

Je kunt deze vensters bouwen met pure CSS, maar dit is niet de meest toegankelijke oplossing. Lees in plaats daarvan A11y Dialog, een volledig functionerend modaal venster dat eerst de focus op toegankelijkheid plaatst.

Het werkt op vanilla JavaScript met zijn eigen aangepaste API en ondersteunt alle moderne browsers op alle apparaten. Je kunt deze demo bekijken om te zien hoe het eruit ziet in actie.

Het lijkt veel op een typisch modaal venster. Maar dit script gebruikt ARIA-tags om moderne toegankelijkheid voor alle gebruikers te ondersteunen.

Standaard ondersteunt A11y Dialog ook touchscreens, dus tikken heeft hetzelfde effect als klikken. U kunt ergens buiten het venster klikken of tikken om het te sluiten of op een computer op de ESC-toets drukken.

Op de een of andere manier is deze bibliotheek vrij klein, slechts 1, 2 kb, inclusief alle CSS- en JS-code. Dit maakt het lichtgewicht op de top van volledig toegankelijk.

Je kunt meer leren door de GitHub-repo te lezen en A11y Dialog heeft ook een eigen documentatiepagina . Dit omvat een gedeelte over installatie en setup voor complete beginners. Er is ook een lange sectie over de DOM API voor het toevoegen van knoppen aan uw pagina die het modale venster kan openen (of sluiten).

Als u probeert meer toegankelijke websites te bouwen, kunt u serieus overwegen om A11y Dialog in uw projecten te gebruiken. Je kunt de broncode ophalen via GitHub of downloaden van een pakketbeheerder zoals npm of Bower.

Neem een ​​kijkje op de hoofdpagina voor meer informatie over de setup en basis JavaScript-functies. Deze bibliotheek wordt geleverd met veel meer dan ARIA-toegankelijkheid, dus het is de moeite waard om te testen als u de functies van uw modal-vensters wilt uitbreiden.

Een gebruikersinterface voor switches maken met CSS Mask

Een gebruikersinterface voor switches maken met CSS Mask

Bij beeldverwerking is maskeren een techniek waarmee u een afbeelding met een andere kunt verbergen . Een masker wordt gebruikt om een ​​deel van een afbeelding doorzichtig te maken . U kunt maskeren met behulp van CSS met behulp van maskeringseigenschappen.In de post van vandaag maken we een gemaskerde afbeelding met behulp van twee PNG-afbeeldingen en CSS-maskeringstechnieken, en stellen gebruikers in staat om de twee toestanden van de afbeelding ( dag en nacht ) te behandelen met behulp van een gebruikersinterface.Van

(Technische en ontwerptips)

20 Beste gratis e-mailmarketingtools en -bronnen

20 Beste gratis e-mailmarketingtools en -bronnen

Zelfs na tientallen jaren in het internetmarketingscenario, is e-mailmarketing nog steeds een van de meest effectieve technieken om uw bedrijf online te promoten. Waarom? Gewoon omdat het functies biedt die geen enkele andere marketingtechniek biedt. Functies zoals data-driven marketing, gepersonaliseerde berichten, actiegerichte campagnes en kosteneffectiviteit

(Technische en ontwerptips)