Niquelao » Weblogarchief » Toegankelijke JavaScript-agenda (onnodig maar handig)

» Archief van het weblog » Toegankelijke kalender in javascript (onnodig maar nuttig) Niquelao - Toegankelijkheid Toegankelijke kalender in javascript (onnodig maar nuttig) 11 februari 2007 door Rumoroso Bij formuliervelden waarin een datum moet worden ingevoerd, kan het invoegen van een kalender via javascript de gebruikerservaring verbeteren en tegelijkertijd de controle op de gegevensindeling vergroten. 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 werkwijzen dan doelen waren bij de constructie: Het moet toegankelijk en niet-intrusief zijn. Uiteraard wordt de optie om de kalender uit te klappen niet aangeboden bij afwezigheid van javascript-ondersteuning, 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 manier zodat programmeurs die het op hun webpagina’s willen implementeren, geen extra code hoeven toe te voegen.

Net zoals er in CSS verschillende soorten selectors (elementen, id’s, klassen,…) worden gebruikt om stijlen aan de verschillende delen van onze documenten te koppelen, waarom zouden we datzelfde niet gebruiken om gedragingen te koppelen? Bovendien zijn er secundaire doelen: optimaliseren, generaliseren, internationaliseren,… (om realistisch te zijn, moest ik de doelen om rijk te worden en geld te verdienen schrappen.) Het voorbeeld Om de werking te controleren, kunt u een voorbeeld bekijken en downloaden .

Opnemen in onze documenten Het opnemen van de kalender in ons document is zo eenvoudig als het toevoegen van het betreffende script-element in de head : De kalender wordt geladen voor elk tekstveld dat de klasse ” fecha ” bevat. De datumindeling 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: var formato = ‘d/mm/y’; Om de kalender naast een tekstveld weer te geven, moet dit veld de klasse “fecha” hebben.

Bovendien worden alle mogelijke parameters als klassen doorgegeven. De volledige lijst is als volgt: Kalender laden (verplicht): fecha Datums voor vandaag: prev Datums na vandaag: post Jarenbereik: rangX (waarbij X het aantal jaren is) Huidige dag niet opnemen: todnact Voordelen Enkele voordelen zijn: Eenvoudig te gebruiken en te implementeren.

Niet-intrusief. De gegenereerde code en inhoud zijn toegankelijk (opmaak, organisatie, inhoud,…) en bruikbaar met behulp van hulptechnologieën (schermlezer, enz.). Hierbij is rekening gehouden met waar de focus ligt bij het tonen, tijdens het gebruik en bij het sluiten. Wanneer de kalender wordt getoond, ligt de focus direct op de jaarselector, waarna logisch kan worden getabuleerd.

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

Wanneer de kalender wordt gesloten (via de sluitlink of na het selecteren van een datum), keert de focus terug naar het bijbehorende tekstveld. Navigatie binnen de kalender wordt onafhankelijk van het apparaat vergemakkelijkt.

Er kan genavigeerd worden met elk apparaat waarmee men op het web kan surfen. De parameters zijn eenvoudig configureerbaar en de aanroep is zeer simpel (via klassenamen). De taal wordt direct overgenomen uit het ouderdocument; nieuwe vertalingen kunnen aan de code worden toegevoegd. Als de taal niet in het document is gedeclareerd (wat niet zou mogen gebeuren), wordt standaard Spaans gebruikt.

Momenteel bevat het naast Spaans ook Engels. Bovendien wordt herkend of het Amerikaans-Engels is, niet om de inhoud te wijzigen, maar om de indeling van de weekdagen aan te passen (zondag komt dan eerst). De stijlen die op de kalender worden toegepast, worden opgenomen via een CSS-bestand dat door het script wordt gelinkt.

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

Bij afwezigheid van ondersteuning hiervoor wordt het downloaden van het document geoptimaliseerd, omdat dit stylesheet dan niet wordt aangeroepen. Er zijn klassen opgenomen zodat stijlen kunnen worden toegepast op elke cel van de tabel (actieve dagen, inactieve dagen, huidige dag), evenals specifieke stijlen voor zaterdagen of zondagen. Gegenereerde code Hieronder volgt een deel van de door het script gegenereerde code.

Zoals te zien is (en zoals reeds vermeld), zijn klas- en id-namen opgenomen om de lay-out via het stylesheet te kunnen sturen.

Conclusie Tot slot… wat valt er over deze kalender te zeggen?… nou, dat hij ” onnodig is… maar nuttig ” en dat hij ” geen negatieve implicaties heeft op het gebied van toegankelijkheid ”. …overigens, welke dag is het vandaag?

Categorie: Toegankelijkheid, Javascript —> 2 reacties juan 16 maart 2007 uitstekend, maar ik krijg soms een fout bij het selecteren van de datum of het wisselen van jaren, waardoor IE en ook Firefox vastlopen. Weet jij wat het is? Rumoroso 21 augustus 2008 Controleer of de inhoud van het veld niet wordt verzonden of dat de variabele eigenlijk niet wordt meegestuurd. Het script interfereert niet met het verzenden van het formulier, dus het probleem zou elders kunnen liggen.

Groeten Je kunt de reacties volgen via de RSS 2.0-feed . Je kunt ook een reactie achterlaten , of een trackback versturen vanaf je eigen site. Vorig artikel: Gefeliciteerd TAW Volgend artikel: acc_calendar v1.1 Laat een reactie achter De velden Naam en E-mail zijn verplicht Voeg ons toe aan…

Tags die we algemeen uitlichten toegankelijkheid bert bos blockquote bug cañas citaten cite gedrag kennis CSS escuas standaarden fieldset Firefox indeling formulier lettertypen hidden ie IE 7 informatie javascript legend lijst niquelando verplicht opera strand q squash vakantie w3c WCAG xhtml Dit werk valt onder een Creative Commons-licentie .

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.