Niquelao » acc_calendar: Toegankelijke JavaScript-kalender (niet noodzakelijk maar handig)

Toegankelijk kalender in javascript (onnodig maar nuttig) Bijgewerkt op 1 juni 2008 , door Rumoroso In formuliervelden waarin een datum moet worden ingevoerd, kan ter verbetering van de gebruikerservaring en tegelijkertijd voor meer controle op het dataformaat, een kalender via javascript worden toegevoegd. Ik weet het, een vloekwoord , maar als het zorgvuldig en gecontroleerd wordt uitgevoerd, hoeft dit geen negatieve gevolgen te hebben voor standaarden en toegankelijkheid.

Doelstellingen In eerste instantie heb ik twee hoofddoelen vastgesteld, die meer werkwijzen dan doelstellingen waren bij de constructie: Het moet toegankelijk en niet-obtrusief zijn. Uiteraard wordt bij afwezigheid van javascript-ondersteuning de optie om de kalender weer te geven niet aangeboden, maar als er ondersteuning is… waarom zou de gegenereerde inhoud dan niet toegankelijk en bruikbaar moeten zijn? Het moet eenvoudig te implementeren en gebruiken zijn. Ik heb gezocht naar een methode waarbij programmeurs die het op hun webpagina’s willen implementeren, geen extra code hoeven toe te voegen.

Net zoals in CSS verschillende soorten selectors (element-, id-, klasse-selectors,…) 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 doelstellingen: optimaliseren, generaliseren, internationaliseren,… (om realistisch te zijn, moest ik de doelstellingen om links toe te voegen en geld te verdienen schrappen.) Opnemen in onze documenten Allereerst: het script kan direct worden verkregen door het volledige voorbeeld te downloaden .

De opname van de kalender in ons document is even eenvoudig als het toevoegen van het betreffende script-element in de head : De kalender 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 als deze uit één cijfer bestaat, maar wel met een 0 voor de maand indien nodig, en met een jaarindeling van 4 cijfers: var formato = ‘d/mm/yyyy’; Zoals reeds vermeld, moet een tekstveld de klasse “fecha” hebben om de kalender naast het veld weer te geven, als de declared taal van het document Spaans is (“date” voor Engels, enz.).

Deze klassenamen kunnen direct in het script worden gewijzigd of nieuwe kunnen worden toegevoegd voor andere talen. Bovendien worden alle mogelijke parameters als klassen ingesteld.

De volledige lijst is als volgt: Kalender laden (vereist): fecha Datums vóór vandaag: prev Datums na vandaag: post Bereik van jaren: 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 via AJAX worden toegevoegd, het volstaat om na het laden de functie cargaLinks() aan te roepen, zodat de inputs de links krijgen voor het openen van de kalender 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 ( class=“fecha post todnact” ) Geboortedatum, in formaat d/mm/yyyy, tot 100 jaar terug ( class=“fecha prev rang100” ) Datum van de komende 20 jaar, in formaat d/mm/yyyy, zonder vandaag ( class=“fecha post rang20 todnact” ) Datum van de laatste 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 kan het wenselijk zijn dat de datum in drie tekstvelden wordt ingevoerd, één voor elk onderdeel.

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 hoeft u alleen een letter of cijfer toe te voegen aan het woord “fecha” dat als klasse voor alle drie wordt gebruikt. Als we hen bijvoorbeeld allemaal de klasse “fechaA” geven, wordt niet alleen de link voor het openen van de kalender gekoppeld, maar gedragen ze zich ook als een groep. Hieronder volgen twee voorbeelden die dit duidelijk maken.

Elk veld moet een klasse hebben afhankelijk van het gegeven dat eraan is gekoppeld: Voor het dagveld de klasse ” day ” Voor het maandveld de klasse ” month ” Voor het jaarveld de klasse ” year ” Er is volledige vrijheid wat betreft de volgorde, waarbij de klassen voor de kalenderconfiguratie (aantal jaren, vorige, volgende, enz.) in het eerste gebruikte veld worden geplaatst. In het volgende voorbeeld ziet u hoe dit werkt: Tweede voorbeeld Datum van 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 is.

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

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

In het voorbeeld wordt dit in de voorafgaande tekst vermeld en bovendien bevatten de labels van de input deze informatie. Update (april 2007) Het script is aangepast om de daaruit toegepaste stijlen te verminderen.

Nu bevat 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 laden van de datum in drie tekstvelden, wordt de klasse van de link ” enl_cal_group ”, en wordt deze voor het eerste veld geplaatst. Update (7 juli 2007) Van

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.