acc_calendar: Toegankelijke JavaScript-agenda (niet noodzakelijk, maar handig)

acc_calendar: Toegankelijke javascript-agenda (onnodig maar handig) | Niquelao Niquelao Hoe zou je zeggen dat het gelukt is? Naar de inhoud springen Home Contrastcontrole KoppenKaart Easyvalidator Over mij… acc_calendar: Toegankelijke javascript-agenda (onnodig maar handig) Toegankelijkheid en javascript? acc_calendar: Toegankelijke javascript-agenda (onnodig maar handig) Bijgewerkt op 1 juni 2008 , door Rumoroso In formuliervelden waar een datum moet worden ingevoerd, kan ter verbetering van de gebruikerservaring en tegelijkertijd om meer controle over het dataformaat te bieden, een agenda via javascript worden toegevoegd.

Ik weet het, een vloekwoord , maar als het zorgvuldig en gecontroleerd wordt gedaan, hoeft dit geen negatieve gevolgen te hebben voor standaarden en toegankelijkheid. Doelen In eerste instantie heb ik twee hoofddoelen vastgesteld, die meer dan doelen eigenlijk werkwijzen zijn geweest bij het bouwen ervan: Het moet toegankelijk en niet-obtrusief zijn. Uiteraard wordt bij afwezigheid van javascript-ondersteuning de optie om de agenda uit te klappen niet aangeboden, maar als er wel ondersteuning is… waarom zou de gegenereerde inhoud dan niet toegankelijk en bruikbaar moeten zijn?

Het moet eenvoudig te implementeren en te gebruiken zijn. Ik heb gezocht naar een manier zodat programmeurs die het op hun webpagina’s willen implementeren, geen extra code hoeven toe te voegen. Net zoals in CSS verschillende soorten selectors (element-selectors, id’s, klassen,…) worden gebruikt om stijlen aan verschillende delen van onze documenten te koppelen, waarom zouden we hetzelfde niet kunnen gebruiken om gedragingen te koppelen?

Daarnaast zijn er secundaire doelen: optimaliseren, generaliseren, internationaliseren,… (om realistisch te zijn, moest ik de doelen om rijkdom en roem te vergaren schrappen.) Opnemen in onze documenten Allereerst: het script kan direct worden verkregen door het volledige voorbeeld te downloaden . De agenda opnemen in ons document is even eenvoudig als het toevoegen van het betreffende script-element in de head : De agenda wordt geladen voor elk tekstveld dat de klasse ” fecha ” bevat (als de taal van het document Spaans is).

Het datumformaat wordt ingesteld op de eerste regel van het script. Als u bijvoorbeeld wilt dat de datum de volgorde dag/maand/jaar volgt, zonder een 0 voor de dag wanneer deze uit één cijfer bestaat, maar wel met een 0 voor de maand indien nodig, en waarbij het jaar uit 4 cijfers bestaat: var formato = ‘d/mm/yyyy’; Zoals reeds vermeld, moet een tekstveld de klasse “fecha” hebben om de agenda weer te geven naast het veld, als de declared taal van het document Spaans is (“date” als het Engels is, enz.).

Deze klassenamen kunnen direct in het script worden aangepast of nieuwe kunnen worden toegevoegd voor andere talen. Bovendien worden alle mogelijke parameters als klassen ingesteld. De volledige lijst is als volgt: Agenda laden (vereist): fecha Datums vóór vandaag: prev Datums na vandaag: post Jarenbereik: rangX (waarbij X het aantal jaren is) Huidige dag niet opnemen: todnact Filter toepassen voor beschikbare datums: disp Wat als ik de input dynamisch laad met AJAX? Het script heeft de eigenschap dat als er op enig moment nieuwe tekstvelden asynchroon worden toegevoegd via AJAX, het volstaat om na het laden de functie cargaLinks() aan te roepen, zodat de inputs de links krijgen voor het openen van de agenda Eerste voorbeeld Toekomstige datum, in formaat d/mm/yyyy , van dit jaar ( class=“fecha post” ) Toekomstige datum, in formaat d/mm/yyyy, van dit jaar zonder vandaag mee te nemen ( class=“fecha post todnact” ) Geboortedatum, in formaat d/mm/yyyy, tot 100 jaar terug ( class=“fecha prev rang100” ) Datum voor de komende 20 jaar, in formaat d/mm/yyyy, zonder vandaag mee te nemen ( class=“fecha post rang20 todnact” ) Datum voor de afgelopen 15 jaar, in formaat d/mm/yyyy ( class=“fecha prev rang15” ) Datum 10 jaar terug en vooruit, in formaat d/mm/yyyy ( class=“fecha rang10” ) Nieuwe verbetering (april 2007) Soms willen we misschien dat de datum in drie tekstvelden wordt ingevoerd, één voor elk onderdeel ervan.

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

Deze mogelijkheid is nu toegevoegd. Hiervoor blijven we alles besturen via klassen die aan de input worden toegewezen. Om ze als groep te laten fungeren, moeten de drie tekstvelden een code bevatten die ze als zodanig identificeert.

Dit klinkt misschien vreemd, maar dat valt mee. In feite komt het erop neer om aan het woord “fecha” dat we als klasse gebruiken voor alle drie, een letter of een nummer toe te voegen. Zo kunnen we bijvoorbeeld aan alle drie de klasse “fechaA” toekennen, waardoor meteen niet alleen de link voor het openen van de agenda wordt gekoppeld, maar ze zich ook als een groep gaan gedragen. Verderop staan twee voorbeelden die dit duidelijk maken.

Elk van de velden moet een klasse hebben afhankelijk van het gegeven dat eraan is gekoppeld: Voor het dag-veld de klasse ” day ” Voor het maand-veld de klasse ” month ” Voor het jaar-veld de klasse ” year ” Er is volledige vrijheid wat betreft de volgorde waarin ze worden geplaatst; de klassen voor de configuratie van de agenda (aantal jaren, vorige, volgende, enz.) worden in het eerste gebruikte veld geplaatst. In het onderstaande voorbeeld ziet u hoe dit werkt: Tweede voorbeeld Datum voor de komende 10 jaar in formaat dag, maand, jaar: Dag / Maand / Jaar Het is belangrijk om de gebruiker altijd te informeren welk veld voor welk gegeven bedoeld is.

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

In het voorbeeld gebeurt dit in de voorafgaande tekst en bovendien bevatten de labels van de input deze informatie ook. Datum voor de afgelopen 15 jaar in formaat jaar, maand, dag: Jaar / Maand / Dag Het is belangrijk om de gebruiker altijd te informeren welk veld voor welk gegeven bedoeld is.

In het voorbeeld gebeurt dit in de voorafgaande tekst en bovendien bevatten de labels van de input deze informatie ook. Update (april 2007) Het script is aangepast om de stijlen die hieruit worden toegepast te verminderen.

Nu heeft de gegenereerde link de afbeelding als inhoud (voorheen werd deze via de stylesheet geladen). De link wordt direct na de input gegenereerd (buiten het label als deze erin zit) en heeft de volgende markup: Als het de link is voor het invullen van de datum in drie tekstvelden, wordt de klasse van de link ” enl_cal_group ”, en deze wordt ervoor geplaatst

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.