Niquelao » Webbloggarkiv » Tillgänglig kalender i JavaScript (onödig men användbar)

» Arkiv för webloggen » Tillgänglig kalender i JavaScript (onödig men användbar) Niquelao - Tillgänglighet Tillgänglig kalender i JavaScript (onödig men användbar) 11 februari 2007 av Rumoroso I formulärfält där ett datum ska anges kan man, för att förbättra användarupplevelsen och samtidigt öka kontrollen över dataformatet, inkludera en kalender via JavaScript. Jag vet, ett svuret ord, men om det görs noggrant och med kontroll behöver det inte få negativa konsekvenser när det gäller standarder och tillgänglighet.

Mål Ursprungligen har jag fastställt två huvudmål, som snarare än mål har varit riktlinjer för arbetet med att bygga den: Att den ska vara tillgänglig och icke-påträngande. Utan stöd för JavaScript erbjuds naturligtvis inte möjligheten att visa kalendern, men om stöd finns… varför inte se till att det genererade innehållet är tillgängligt och användbart? Att den ska vara enkel att implementera och använda. Jag har sökt en lösning där utvecklare som vill implementera den på sina webbplatser inte behöver lägga till extra kod.

Precis som i CSS där olika typer av selektorer (element, id, klasser,…) används för att koppla stilar till olika delar av våra dokument, varför inte använda samma princip för att koppla beteenden? Dessutom finns sekundära mål: optimera, generalisera, internationalisera,… (för att vara realistisk fick jag stryka målen att bli rik och tjäna pengar.) Exemplet För att testa funktionen kan ni komma åt ett exempel och ladda ner det . Inkludering i våra dokument Att inkludera kalendern i vårt dokument är lika enkelt som att lägga till motsvarande script-element i head : Kalendern laddas för alla textfält som har klassen ” fecha ”.

Datumformatet anges på den första raden i scriptet. Om du till exempel vill att datumet ska följa ordningen dag/månad/år, utan ett inledande 0 framför dagen när den består av en siffra, men med ett sådant för månaden vid behov: var formato = ‘d/mm/y’; För att kalendern ska visas bredvid ett textfält måste detta ha klassen “fecha”. Dessutom anges alla möjliga parametrar som klasser.

Den fullständiga listan är följande: Ladda kalender (krävs): fecha Datum före idag: prev Datum efter idag: post Årsintervall: rangX (där X är antalet år) Dagens datum inkluderas inte: todnact Fördelar Bland de fördelar som kan nämnas finns: Enkel att använda och implementera. Inte påträngande.

Koden och det innehåll som genereras är tillgängligt (märkning, struktur, innehåll,…) och användbart med hjälpmedel (skärmläsare,…). Här har hänsyn tagits till var fokus hamnar både vid visning, under användning och vid stängning. När kalendern visas hamnar fokus direkt på årsväljaren, vilket följer en logisk tabuleringsordning därifrån, och när kalendern stängs (via stängningslänken eller efter att ett datum valts) hamnar fokus tillbaka på det textfält den var kopplad till. Navigering underlättas oavsett enhet.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Det går att navigera med vilken enhet som helst som används för webbsurfning. Parametrarna är lätt konfigurerbara och anropet mycket enkelt (genom användning av klassnamn).

Språket hämtas direkt från föräldradokumentet, med möjlighet att lägga till nya översättningar i koden. Om språket inte är deklarerat i dokumentet (vilket inte bör hända) används spanska som standard. För närvarande inkluderar den, utöver spanska, även engelska. Dessutom har funktionen lagts till att känna igen amerikansk engelska, inte för att ändra innehållet, utan för att ändra ordningen på veckodagarna (söndagen placeras först).

Stilarna som appliceras på kalendern inkluderas via en CSS-fil som länkas genom scriptet, vilket optimerar nedladdningen av dokumentet vid avsaknad av stöd för detta, eftersom stilbladet då inte laddas. Klasser har inkluderats så att stilar kan appliceras på vilken cell som helst i tabellen (aktiva dagar, inaktiva dagar, dagens datum), samt specifika stilar för lördagar eller söndagar. Genererad kod Nedan följer en del av den kod som genereras av scriptet.

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

Som syns (och som redan nämnts) inkluderas klass- och id-namn för att kunna styra layouten via stilbladet.

Slutsats Som avslutning… vad kan sägas om denna kalender?… jo, att den ” är onödig… men användbar ” och att den ” inte har några negativa implikationer när det gäller tillgänglighet ”. …förresten, vilken dag är det idag?

Kategori: Tillgänglighet, Javascript —> 2 kommentarer juan 16 mars 2007 Den är utmärkt, men jag får ibland ett fel när jag väljer datum eller bläddrar mellan åren, och slutar fungera i IE och även i Firefox. Vet du vad det beror på?

Rumoroso 21 augusti 2008 Kontrollera om innehållet i fältet skickas eller om variabeln faktiskt inte skickas. Scriptet stör inte formulärets inskickning, så problemet kan komma från annat håll. Hälsningar Du kan följa kommentarerna tack vare RSS 2.0-flödet . Du kan också lämna en kommentar , eller skicka en trackback från din webbplats.

Föregående artikel: Grattis TAW Nästa artikel: acc_calendar v1.1 Lämna din kommentar Fälten Namn och E-post är obligatoriska Lägg till oss i… Taggar vi lyfter fram i allmänhet tillgänglighet bert bos blockquote bug cañas citat cite beteende kunskap CSS escuas standarder fieldset Firefox format formulär typsnitt hidden ie IE 7 information javascript legend lista niquelando obligatorisk opera strand q squash semester w3c WCAG xhtml Detta verk är licensierat under en Creative Commons-licens .

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.